HPCC-28071 Add "Set" features to Dali Admin

Dali Admin functionality for setting logical file attributes, value, protecting, and unprotecting files added to UI. Signed-off-by: Kunal Aswani <[email protected]>
hpcc-systems · Jul 27, 2023 · e67b380 · e67b380
1 parent 002b363
commit e67b380
Show file tree

Hide file tree

Showing 6 changed files with 369 additions and 2 deletions.
diff --git a/esp/src/src-react/components/DaliAdmin.tsx b/esp/src/src-react/components/DaliAdmin.tsx
@@ -13,6 +13,10 @@ import { GetLogicalFile } from "./GetLogicalFile";
 import { GetLogicalFilePart } from "./GetLogicalFilePart";
 import { GetProtectedList } from "./GetProtectedList";
 import { GetValue } from "./GetValue";
+import { SetLogicalFilePartAttr } from "./SetLogicalFilePartAttr";
+import { SetProtected } from "./SetProtected";
+import { SetUnprotected } from "./SetUnprotected";
+import { SetValue } from "./SetValue";
 import nlsHPCC from "src/nlsHPCC";
 
 interface DaliAdminProps {
@@ -25,7 +29,7 @@ export const DaliAdmin: React.FunctionComponent<DaliAdminProps> = ({
 
     return <>
     <SizeMe monitorHeight>{({ size }) =>
-        <Pivot overflowBehavior="menu" style={{ height: "100%" }} selectedKey={tab} onLinkClick={evt => pushUrl(`/daliadmin/${evt.props.itemKey}`)}>
+        <Pivot overflowBehavior="menu" style={{ height: "100%" }} selectedKey={tab} onLinkClick={evt => pushUrl(`/topology/daliadmin/${evt.props.itemKey}`)}>
             <PivotItem headerText={nlsHPCC.GetDFSCSV} itemKey="getdfscsv" style={pivotItemStyle(size)} >
                 <GetDFSCSV />
             </PivotItem>
@@ -54,7 +58,19 @@ export const DaliAdmin: React.FunctionComponent<DaliAdminProps> = ({
                 <GetProtectedList />
             </PivotItem>
             <PivotItem headerText={nlsHPCC.GetValue} itemKey="getvalue" style={pivotItemStyle(size)} >
-                <GetValue  />
+                <GetValue />
+            </PivotItem>
+            <PivotItem headerText={nlsHPCC.SetLogicalFileAttribute} itemKey="setlogicalfilepartattr" style={pivotItemStyle(size)} >
+                <SetLogicalFilePartAttr />
+            </PivotItem>
+            <PivotItem headerText={nlsHPCC.SetProtected} itemKey="setprotected" style={pivotItemStyle(size)} >
+                <SetProtected />
+            </PivotItem>
+            <PivotItem headerText={nlsHPCC.SetUnprotected} itemKey="setunprotected" style={pivotItemStyle(size)} >
+                <SetUnprotected />
+            </PivotItem>
+            <PivotItem headerText={nlsHPCC.SetValue} itemKey="setvalue" style={pivotItemStyle(size)} >
+                <SetValue />
             </PivotItem>
         </Pivot>
     }</SizeMe>;

diff --git a/esp/src/src-react/components/SetLogicalFilePartAttr.tsx b/esp/src/src-react/components/SetLogicalFilePartAttr.tsx
@@ -0,0 +1,94 @@
+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/SetLogicalFilePartAttr.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface SetLogicalFilePartAttrProps {
+}
+
+export const SetLogicalFilePartAttr: React.FunctionComponent<SetLogicalFilePartAttrProps> = ({
+
+}) => {
+
+    const [columns, setColumns] = React.useState<IColumn[]>([]);
+    const [items, setItems] = React.useState<any[]>([]);
+    const [fileName, setFileName] = React.useState<string>("");
+    const [partNumber, setPartNumber] = React.useState<number>(1);
+    const [attribute, setAttribute] = React.useState<string>("");
+    const [value, setValue] = React.useState<string>("");
+
+    const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({
+        title: nlsHPCC.DaliAdmin,
+        message: nlsHPCC.DaliPromptConfirm,
+        onSubmit: React.useCallback(() => {
+            myDaliService.SetLogicalFilePartAttr({ FileName: fileName, PartNumber: partNumber, Attr: attribute, 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));
+        }, [fileName, partNumber, attribute, value])
+    });
+
+    const onSubmit = React.useCallback(() => {
+        setDaliPromptConfirm(true);
+    }, [fileName, partNumber, attribute, value, setDaliPromptConfirm]);
+
+    return <HolyGrail
+        header={<span><TableGroup fields={{
+            "FileName": { label: nlsHPCC.FileName, type: "string", value: fileName },
+            "PartNumber": { label: nlsHPCC.PartNumber, type: "number", value: partNumber },
+            "Attribute": { label: nlsHPCC.Attribute, type: "string", value: attribute },
+            "Value": { label: nlsHPCC.Value, type: "string", value: value },
+        }} onChange={(id, value) => {
+            switch (id) {
+                case "FileName":
+                    setFileName(value);
+                    break;
+                case "PartNumber":
+                    setPartNumber(value);
+                    break;
+                case "Attribute":
+                    setAttribute(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>}
+    />;
+}; 
diff --git a/esp/src/src-react/components/SetProtected.tsx b/esp/src/src-react/components/SetProtected.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/SetProtected.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface SetProtectedProps {
+}
+
+export const SetProtected: React.FunctionComponent<SetProtectedProps> = ({
+
+}) => {
+
+    const [columns, setColumns] = React.useState<IColumn[]>([]);
+    const [items, setItems] = React.useState<any[]>([]);
+    const [fileName, setFileName] = React.useState<string>("");
+    const [callerId, setCallerId] = React.useState<string>("");
+
+    const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({
+        title: nlsHPCC.DaliAdmin,
+        message: nlsHPCC.DaliPromptConfirm,
+        onSubmit: React.useCallback(() => {
+            myDaliService.SetProtected({ FileName: fileName, CallerId: callerId }).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));
+        }, [fileName, callerId])
+    });
+
+    const onSubmit = React.useCallback(() => {
+        setDaliPromptConfirm(true);
+    }, [fileName, callerId, setDaliPromptConfirm]);
+
+    return <HolyGrail
+        header={<span><TableGroup fields={{
+            "FileName": { label: nlsHPCC.FileName, type: "string", value: fileName },
+            "CallerId": { label: nlsHPCC.CallerID, type: "string", value: callerId },
+        }} onChange={(id, value) => {
+            switch (id) {
+                case "FileName":
+                    setFileName(value);
+                    break;
+                case "CallerId":
+                    setCallerId(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/SetUnprotected.tsx b/esp/src/src-react/components/SetUnprotected.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/SetUnprotected.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface SetUnprotectedProps {
+}
+
+export const SetUnprotected: React.FunctionComponent<SetUnprotectedProps> = ({
+
+}) => {
+
+    const [columns, setColumns] = React.useState<IColumn[]>([]);
+    const [items, setItems] = React.useState<any[]>([]);
+    const [fileName, setFileName] = React.useState<string>("");
+    const [callerId, setCallerId] = React.useState<string>("");
+
+    const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({
+        title: nlsHPCC.DaliAdmin,
+        message: nlsHPCC.DaliPromptConfirm,
+        onSubmit: React.useCallback(() => {
+            myDaliService.SetUnprotected({ FileName: fileName, CallerId: callerId }).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));
+        }, [fileName, callerId])
+    });
+
+    const onSubmit = React.useCallback(() => {
+        setDaliPromptConfirm(true);
+    }, [fileName, callerId, setDaliPromptConfirm]);
+
+    return <HolyGrail
+        header={<span><TableGroup fields={{
+            "FileName": { label: nlsHPCC.FileName, type: "string", value: fileName },
+            "CallerId": { label: nlsHPCC.CallerID, type: "string", value: callerId },
+        }} onChange={(id, value) => {
+            switch (id) {
+                case "FileName":
+                    setFileName(value);
+                    break;
+                case "CallerId":
+                    setCallerId(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/SetValue.tsx b/esp/src/src-react/components/SetValue.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/SetValue.tsx");
+
+const myDaliService = new DaliService({ baseUrl: "" });
+
+interface SetValueProps {
+}
+
+export const SetValue: React.FunctionComponent<SetValueProps> = ({
+
+}) => {
+
+    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.SetValue({ 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);
+    }, [path, value, 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>}
+    />;
+};