From 48628b41cd76e7ed75e48cd8e869fd285651e8f2 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  | 16 ++++
 esp/src/src-react/components/DaliCount.tsx  | 65 +++++++++++++++
 esp/src/src-react/components/DaliDelete.tsx | 73 +++++++++++++++++
 esp/src/src-react/components/DaliImport.tsx | 89 +++++++++++++++++++++
 5 files changed, 327 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

diff --git a/esp/src/src-react/components/DaliAdd.tsx b/esp/src/src-react/components/DaliAdd.tsx
new file mode 100644
index 00000000000..153e2ee6e41
--- /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 { 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/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, setValue] = 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 = 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, 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":
+                    setValue(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..5d0605fd98e 100644
--- a/esp/src/src-react/components/DaliAdmin.tsx
+++ b/esp/src/src-react/components/DaliAdmin.tsx
@@ -17,6 +17,10 @@ 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 nlsHPCC from "src/nlsHPCC";
 
 interface DaliAdminProps {
@@ -72,6 +76,18 @@ 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>
         </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..216cd11a6c7
--- /dev/null
+++ b/esp/src/src-react/components/DaliCount.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react";
+import { SizeMe } from "react-sizeme";
+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 = [{
+                key: "Result",
+                result: response.Result
+            }];
+            const columns = [{
+                key: "Result",
+                name: "Result",
+                fieldName: "result",
+                minWidth: 100
+            }];
+            setItems(data);
+            setColumns(columns); // Add this line to set the columns as well
+        }).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