HPCC-28073 Additional service calls to be added to Dali Admin

Add and Delete functionality and some additional read functions added to Dali Admin UI. Signed-off-by: Kunal Aswani <[email protected]>
hpcc-systems · Aug 1, 2023 · 9dfaa23 · 9dfaa23
1 parent df5d80c
commit 9dfaa23
Show file tree

Hide file tree

Showing 7 changed files with 395 additions and 0 deletions.
diff --git a/esp/src/src-react/components/DaliAdd.tsx b/esp/src/src-react/components/DaliAdd.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react";
+import { SizeMe } from "react-sizeme";
+import { parser } from "dojo/main";
+import { DaliService } from "@hpcc-js/comms";
+import { scopedLogger } from "@hpcc-js/util";
+import { TableGroup } from "./forms/Groups";
+import { useConfirm } from "../hooks/confirm";
+import nlsHPCC from "src/nlsHPCC";
+import { HolyGrail } from "../layouts/HolyGrail";
+
+const logger = scopedLogger("src-react/components/DaliAdd.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface DaliAddProps {
+}
+
+export const DaliAdd: React.FunctionComponent<DaliAddProps> = ({
+
+}) => {
+
+    const [columns, setColumns] = React.useState<IColumn[]>([]);
+    const [items, setItems] = React.useState<any[]>([]);
+    const [path, setPath] = React.useState<string>("");
+    const [value, DaliAdd] = React.useState<string>("");
+
+    const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({
+        title: nlsHPCC.DaliAdmin,
+        message: nlsHPCC.DaliPromptConfirm,
+        onSubmit: React.useCallback(() => {
+            myDaliService.Add({ Path: path, Value: value }).then(response => {
+                const data = parser.parse(response.Result);
+                setColumns(data.columns.map((col, idx) => {
+                    return {
+                        key: col,
+                        name: col,
+                        fieldName: col,
+                        minWidth: 100
+                    };
+                }));
+                setItems(data);
+            }).catch(err => logger.error(err));
+        }, [path, value])
+    }); 
+
+    const onSubmit = React.useCallback(() => {
+        setDaliPromptConfirm(true);
+    }, [setDaliPromptConfirm]);
+
+    return <HolyGrail
+        header={<span><TableGroup fields={{
+            "Path": { label: nlsHPCC.Path, type: "string", value: path },
+            "Value": { label: nlsHPCC.Value, type: "string", value: value },
+        }} onChange={(id, value) => {
+            switch (id) {
+                case "Path":
+                    setPath(value);
+                    break;
+                case "Value":
+                    DaliAdd(value);
+                    break; 
+                default:
+                    logger.debug(`${id}: ${value}`);
+            }
+        }} /><DefaultButton onClick={onSubmit} text={nlsHPCC.Submit} /></span>}
+        main={<SizeMe monitorHeight>{({ size }) => {
+            const height = `${size.height}px`;
+            return <div style={{ position: "relative", width: "100%", height: "100%" }}>
+                <div style={{ position: "absolute", width: "100%", height: `${size.height}px` }}>
+                    <DetailsList compact={true}
+                        items={items}
+                        columns={columns}
+                        setKey="key"
+                        layoutMode={DetailsListLayoutMode.justified}
+                        selectionPreservedOnEmptyClick={true}
+                        styles={{ root: { height, minHeight: height, maxHeight: height } }}
+                    />
+                    <DaliPromptConfirm />                    
+                </div>
+            </div>;
+        }}</SizeMe>}
+    />;
+}; 
diff --git a/esp/src/src-react/components/DaliAdmin.tsx b/esp/src/src-react/components/DaliAdmin.tsx
@@ -17,6 +17,11 @@ import { SetLogicalFilePartAttr } from "./SetLogicalFilePartAttr";
 import { SetProtected } from "./SetProtected";
 import { SetUnprotected } from "./SetUnprotected";
 import { SetValue } from "./SetValue";
+import { DaliAdd } from "./DaliAdd";
+import { DaliDelete } from "./DaliDelete";
+import { DaliCount } from "./DaliCount";
+import { DaliImport } from "./DaliImport";
+import { DaliPing } from "./DaliPing";
 import nlsHPCC from "src/nlsHPCC";
 
 interface DaliAdminProps {
@@ -72,6 +77,21 @@ export const DaliAdmin: React.FunctionComponent<DaliAdminProps> = ({
             <PivotItem headerText={nlsHPCC.SetValue} itemKey="setvalue" style={pivotItemStyle(size)} >
                 <SetValue />
             </PivotItem>
+            <PivotItem headerText={nlsHPCC.Add} itemKey="daliadd" style={pivotItemStyle(size)} >
+                <DaliAdd />
+            </PivotItem>
+            <PivotItem headerText={nlsHPCC.Delete} itemKey="dalidelete" style={pivotItemStyle(size)} >
+                <DaliDelete />
+            </PivotItem>
+            <PivotItem headerText={nlsHPCC.Count} itemKey="dalicount" style={pivotItemStyle(size)} >
+                <DaliCount />
+            </PivotItem>
+            <PivotItem headerText={nlsHPCC.Import} itemKey="daliimport" style={pivotItemStyle(size)} >
+                <DaliImport />
+            </PivotItem>
+            <PivotItem headerText={nlsHPCC.Ping} itemKey="daliping" style={pivotItemStyle(size)} >
+                <DaliPing />
+            </PivotItem>
         </Pivot>
     }</SizeMe>;
     </>;

diff --git a/esp/src/src-react/components/DaliCount.tsx b/esp/src/src-react/components/DaliCount.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react";
+import { SizeMe } from "react-sizeme";
+import { csvParse } from "d3-dsv";
+import { DaliService } from "@hpcc-js/comms";
+import { scopedLogger } from "@hpcc-js/util";
+import { TableGroup } from "./forms/Groups";
+import nlsHPCC from "src/nlsHPCC";
+import { HolyGrail } from "../layouts/HolyGrail";
+
+const logger = scopedLogger("src-react/components/DaliCount.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface CountRequestProps {
+
+}
+
+export const DaliCount: React.FunctionComponent<CountRequestProps> = ({
+
+}) => {
+
+    const [columns, setColumns] = React.useState<IColumn[]>([]);
+    const [items, setItems] = React.useState<any[]>([]);
+    const [path, setPath] = React.useState<string>("");
+
+    const onSubmit = React.useCallback(() => {
+        myDaliService.Count({ Path: path }).then(response => {
+            const data = csvParse(response.Result);
+            setColumns(data.columns.map((col, idx) => {
+                return {
+                    key: col,
+                    name: col,
+                    fieldName: col,
+                    minWidth: 100
+                };
+            }));
+            setItems(data);
+        }).catch(err => logger.error(err));
+    }, [path]);
+
+    return <HolyGrail
+        header={<span><TableGroup fields={{
+            "Path": { label: nlsHPCC.Path, type: "string", value: path },
+        }} onChange={(id, value) => {
+            setPath(value);
+        }} /><DefaultButton onClick={onSubmit} text={nlsHPCC.Submit} /></span>}
+        main={<SizeMe monitorHeight>{({ size }) => {
+            const height = `${size.height}px`;
+            return <div style={{ position: "relative", width: "100%", height: "100%" }}>
+                <div style={{ position: "absolute", width: "100%", height: `${size.height}px` }}>
+                    <DetailsList compact={true}
+                        items={items}
+                        columns={columns}
+                        setKey="key"
+                        layoutMode={DetailsListLayoutMode.justified}
+                        selectionPreservedOnEmptyClick={true}
+                        styles={{ root: { height, minHeight: height, maxHeight: height } }}
+                    />
+                </div>
+            </div>;
+        }}</SizeMe>}
+    />;
+}; 
diff --git a/esp/src/src-react/components/DaliDelete.tsx b/esp/src/src-react/components/DaliDelete.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react";
+import { SizeMe } from "react-sizeme";
+import { csvParse } from "d3-dsv";
+import { DaliService } from "@hpcc-js/comms";
+import { scopedLogger } from "@hpcc-js/util";
+import { TableGroup } from "./forms/Groups";
+import { useConfirm } from "../hooks/confirm";
+import nlsHPCC from "src/nlsHPCC";
+import { HolyGrail } from "../layouts/HolyGrail";
+
+const logger = scopedLogger("src-react/components/DaliDelete.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface DaliDeleteProps {
+}
+
+export const DaliDelete: React.FunctionComponent<DaliDeleteProps> = ({
+
+}) => {
+
+    const [columns, setColumns] = React.useState<IColumn[]>([]);
+    const [items, setItems] = React.useState<any[]>([]);
+    const [path, setPath] = React.useState<string>("");
+
+    const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({
+        title: nlsHPCC.DaliAdmin,
+        message: nlsHPCC.DaliPromptConfirm,
+        onSubmit: React.useCallback(() => {
+            myDaliService.Delete({ Path: path }).then(response => {
+                const data = csvParse(response.Result);
+                setColumns(data.columns.map((col, idx) => {
+                    return {
+                        key: col,
+                        name: col,
+                        fieldName: col,
+                        minWidth: 100
+                    };
+                }));
+                setItems(data);
+            }).catch(err => logger.error(err));
+        }, [path])
+    }); 
+
+    const onSubmit = React.useCallback(() => {
+        setDaliPromptConfirm(true);
+    }, [setDaliPromptConfirm]);
+
+    return <HolyGrail
+        header={<span><TableGroup fields={{
+            "Path": { label: nlsHPCC.Path, type: "string", value: path },
+        }} onChange={(id, value) => {
+            setPath(value);
+        }} /><DefaultButton onClick={onSubmit} text={nlsHPCC.Submit} /></span>}
+        main={<SizeMe monitorHeight>{({ size }) => {
+            const height = `${size.height}px`;
+            return <div style={{ position: "relative", width: "100%", height: "100%" }}>
+                <div style={{ position: "absolute", width: "100%", height: `${size.height}px` }}>
+                    <DetailsList compact={true}
+                        items={items}
+                        columns={columns}
+                        setKey="key"
+                        layoutMode={DetailsListLayoutMode.justified}
+                        selectionPreservedOnEmptyClick={true}
+                        styles={{ root: { height, minHeight: height, maxHeight: height } }}
+                    />
+                    <DaliPromptConfirm />                    
+                </div>
+            </div>;
+        }}</SizeMe>}
+    />;
+}; 
diff --git a/esp/src/src-react/components/DaliImport.tsx b/esp/src/src-react/components/DaliImport.tsx
@@ -0,0 +1,89 @@
+import * as React from "react";
+import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react";
+import { SizeMe } from "react-sizeme";
+import { csvParse } from "d3-dsv";
+import { DaliService } from "@hpcc-js/comms";
+import { scopedLogger } from "@hpcc-js/util";
+import { TableGroup } from "./forms/Groups";
+import { useConfirm } from "../hooks/confirm";
+import nlsHPCC from "src/nlsHPCC";
+import { HolyGrail } from "../layouts/HolyGrail";
+
+const logger = scopedLogger("src-react/components/DaliImport.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface DaliImportProps {
+}
+
+export const DaliImport: React.FunctionComponent<DaliImportProps> = ({
+
+}) => {
+
+    const [columns, setColumns] = React.useState<IColumn[]>([]);
+    const [items, setItems] = React.useState<any[]>([]);
+    const [xml, setXml] = React.useState<string>("");
+    const [path, setPath] = React.useState<string>("");
+    const [add, setAdd] = React.useState(false);
+
+    const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({
+        title: nlsHPCC.DaliAdmin,
+        message: nlsHPCC.DaliPromptConfirm,
+        onSubmit: React.useCallback(() => {
+            myDaliService.Import({ XML: xml, Path: path, Add: add }).then(response => {
+                const data = csvParse(response.Result);
+                setColumns(data.columns.map((col, idx) => {
+                    return {
+                        key: col,
+                        name: col,
+                        fieldName: col,
+                        minWidth: 100
+                    };
+                }));
+                setItems(data);
+            }).catch(err => logger.error(err));
+        }, [xml, path, add])
+    }); 
+
+    const onSubmit = React.useCallback(() => {
+        setDaliPromptConfirm(true);
+    }, [setDaliPromptConfirm]);
+
+    return <HolyGrail
+        header={<span><TableGroup fields={{
+            "XML": {label: nlsHPCC.XML, type: "string", value: xml},
+            "Path": { label: nlsHPCC.Path, type: "string", value: path },
+            "Add": { label: nlsHPCC.Add, type: "checkbox", value: add },
+        }} onChange={(id, value) => {
+            switch (id) {
+                case "XML":
+                    setXml(value);
+                    break;
+                case "Path":
+                    setPath(value);
+                    break;
+                case "Add":
+                    setAdd(value);
+                    break;
+                default:
+                    logger.debug(`${id}: ${value}`);
+            }
+        }} /><DefaultButton onClick={onSubmit} text={nlsHPCC.Submit} /></span>}
+        main={<SizeMe monitorHeight>{({ size }) => {
+            const height = `${size.height}px`;
+            return <div style={{ position: "relative", width: "100%", height: "100%" }}>
+                <div style={{ position: "absolute", width: "100%", height: `${size.height}px` }}>
+                    <DetailsList compact={true}
+                        items={items}
+                        columns={columns}
+                        setKey="key"
+                        layoutMode={DetailsListLayoutMode.justified}
+                        selectionPreservedOnEmptyClick={true}
+                        styles={{ root: { height, minHeight: height, maxHeight: height } }}
+                    />
+                    <DaliPromptConfirm />                    
+                </div>
+            </div>;
+        }}</SizeMe>}
+    />;
+};