From 9dfaa237bf8c1981bc9e1d6111ae365c3d51d194 Mon Sep 17 00:00:00 2001
From: Kunal Aswani <Kunal.Aswani@lexisnexisrisk.com>
Date: Thu, 27 Jul 2023 09:43:11 -0400
Subject: [PATCH] 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 <Kunal.Aswani@lexisnexisrisk.com>
---
 esp/src/src-react/components/DaliAdd.tsx    | 84 +++++++++++++++++++
 esp/src/src-react/components/DaliAdmin.tsx  | 20 +++++
 esp/src/src-react/components/DaliCount.tsx  | 64 +++++++++++++++
 esp/src/src-react/components/DaliDelete.tsx | 73 +++++++++++++++++
 esp/src/src-react/components/DaliImport.tsx | 89 +++++++++++++++++++++
 esp/src/src-react/components/DaliPing.tsx   | 63 +++++++++++++++
 esp/src/src/nls/hpcc.ts                     |  2 +
 7 files changed, 395 insertions(+)
 create mode 100644 esp/src/src-react/components/DaliAdd.tsx
 create mode 100644 esp/src/src-react/components/DaliCount.tsx
 create mode 100644 esp/src/src-react/components/DaliDelete.tsx
 create mode 100644 esp/src/src-react/components/DaliImport.tsx
 create mode 100644 esp/src/src-react/components/DaliPing.tsx

diff --git a/esp/src/src-react/components/DaliAdd.tsx b/esp/src/src-react/components/DaliAdd.tsx
new file mode 100644
index 00000000000..d3978c397d9
--- /dev/null
+++ 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>}
+    />;
+}; 
\ No newline at end of file
diff --git a/esp/src/src-react/components/DaliAdmin.tsx b/esp/src/src-react/components/DaliAdmin.tsx
index ec3b6a23af0..f7d340728f9 100644
--- 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
new file mode 100644
index 00000000000..37685a1f703
--- /dev/null
+++ 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>}
+    />;
+}; 
\ No newline at end of file
diff --git a/esp/src/src-react/components/DaliDelete.tsx b/esp/src/src-react/components/DaliDelete.tsx
new file mode 100644
index 00000000000..6b40c33c49a
--- /dev/null
+++ 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>}
+    />;
+}; 
\ No newline at end of file
diff --git a/esp/src/src-react/components/DaliImport.tsx b/esp/src/src-react/components/DaliImport.tsx
new file mode 100644
index 00000000000..2c01f7b3053
--- /dev/null
+++ 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>}
+    />;
+}; 
\ No newline at end of file
diff --git a/esp/src/src-react/components/DaliPing.tsx b/esp/src/src-react/components/DaliPing.tsx
new file mode 100644
index 00000000000..c171ec988e7
--- /dev/null
+++ b/esp/src/src-react/components/DaliPing.tsx
@@ -0,0 +1,63 @@
+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/DaliPing.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface WSDaliPingRequestProps {
+}
+
+export const DaliPing: React.FunctionComponent<WSDaliPingRequestProps> = ({
+
+}) => {
+
+    const [columns, setColumns] = React.useState<IColumn[]>([]);
+    const [items, setItems] = React.useState<any[]>([]);
+    const [wsDaliPingRequest, setWsDaliPingRequest]  = React.useState(true);
+
+    const onSubmit = React.useCallback(() => {
+        myDaliService.DFSCheck({ WSDaliPingRequest: wsDaliPingRequest }).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));
+    }, [wsDaliPingRequest]);
+
+    return <HolyGrail
+        header={<span><TableGroup fields={{
+            "WSDaliPingRequest": { label: nlsHPCC.WSDaliPingRequest, type: "checkbox", value: wsDaliPingRequest },
+        }} onChange={(id, value) => {
+            setWsDaliPingRequest(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>}
+    />;
+}; 
\ No newline at end of file
diff --git a/esp/src/src/nls/hpcc.ts b/esp/src/src/nls/hpcc.ts
index 871dacd5944..d639a8c24ce 100644
--- a/esp/src/src/nls/hpcc.ts
+++ b/esp/src/src/nls/hpcc.ts
@@ -646,6 +646,7 @@ export = {
         Permissions: "Permissions",
         PhysicalFiles: "Physical Files",
         PhysicalMemory: "Physical Memory",
+        Ping: "Ping",
         PlaceholderFindText: "Wuid, User, (ecl:*, file:*, dfu:*, query:*)...",
         PlaceholderFirstName: "John",
         PlaceholderLastName: "Smith",
@@ -1078,6 +1079,7 @@ export = {
         WorkUnitScopeDefaultPermissions: "Workunit Scope Default Permissions",
         Wrap: "Wrap",
         WSDL: "WSDL",
+        WSDaliPingRequest: "WSDali Ping Request",
         WUID: "WUID",
         Wuidcannotbeempty: "Wuid Cannot Be Empty.",
         WUSnapshot: "WU Snapshot",