Merge pull request #17758 from GordonSmith/HPCC-30230-MORE_TABLE_FLICKER

HPCC-30230 Sorting grid resets columns widths Reviewed-By: Jeremy Clements <[email protected]> Merged-by: Gavin Halliday <[email protected]>
hpcc-systems · Sep 14, 2023 · d6df470 · d6df470
2 parents 7bc56e4 + 826b832
commit d6df470
Show file tree

Hide file tree

Showing 47 changed files with 1,010 additions and 783 deletions.
diff --git a/esp/src/src-react/components/DESDLDefinitions.tsx b/esp/src/src-react/components/DESDLDefinitions.tsx
@@ -4,9 +4,9 @@ import { scopedLogger } from "@hpcc-js/util";
 import nlsHPCC from "src/nlsHPCC";
 import * as WsESDLConfig from "src/WsESDLConfig";
 import { useConfirm } from "../hooks/confirm";
-import { useFluentGrid } from "../hooks/grid";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { ReflexContainer, ReflexElement, ReflexSplitter } from "../layouts/react-reflex";
+import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 import { selector } from "./DojoGrid";
 import { XMLSourceEditor } from "./SourceEditor";
@@ -28,22 +28,22 @@ export const DESDLDefinitions: React.FunctionComponent<DESDLDefinitonsProps> = (
     const [showAddBinding, setShowAddBinding] = React.useState(false);
     const [uiState, setUIState] = React.useState({ ...defaultUIState });
     const [data, setData] = React.useState<any[]>([]);
+    const {
+        selection, setSelection,
+        setTotal,
+        refreshTable } = useFluentStoreState({});
 
     //  Grid ---
-    const { Grid, selection, copyButtons } = useFluentGrid({
-        data,
-        primaryID: "__hpcc_id",
-        sort: { attribute: "Name", descending: false },
-        filename: "esdlDefinitions",
-        columns: {
+    const columns = React.useMemo((): FluentColumns => {
+        return {
             col1: selector({ width: 30, selectorType: "radio", unhidable: true }),
             Name: { label: nlsHPCC.Process, width: 140 },
             PublishBy: { label: nlsHPCC.PublishedBy, width: 140 },
             CreatedTime: { label: nlsHPCC.CreatedTime, width: 140 },
             LastEditBy: { label: nlsHPCC.LastEditedBy, width: 140 },
             LastEditTime: { label: nlsHPCC.LastEditTime, width: 140 }
-        }
-    });
+        };
+    }, []);
 
     //  Selection  ---
     React.useEffect(() => {
@@ -125,6 +125,8 @@ export const DESDLDefinitions: React.FunctionComponent<DESDLDefinitonsProps> = (
         },
     ], [refreshData, setShowDeleteConfirm, uiState.hasSelection]);
 
+    const copyButtons = useCopyButtons(columns, selection, "esdlDefinitions");
+
     React.useEffect(() => {
         refreshData();
     }, [refreshData]);
@@ -135,7 +137,15 @@ export const DESDLDefinitions: React.FunctionComponent<DESDLDefinitonsProps> = (
             main={
                 <ReflexContainer orientation="vertical">
                     <ReflexElement>
-                        <Grid />
+                        <FluentGrid
+                            data={data}
+                            primaryID={"__hpcc_id"}
+                            sort={{ attribute: "Name", descending: false }}
+                            columns={columns}
+                            setSelection={setSelection}
+                            setTotal={setTotal}
+                            refresh={refreshTable}
+                        ></FluentGrid>
                     </ReflexElement>
                     <ReflexSplitter />
                     <ReflexElement>

diff --git a/esp/src/src-react/components/DFUWorkunits.tsx b/esp/src/src-react/components/DFUWorkunits.tsx
@@ -10,7 +10,7 @@ import { useConfirm } from "../hooks/confirm";
 import { useMyAccount } from "../hooks/user";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { pushParams } from "../util/history";
-import { FluentPagedGrid, FluentPagedFooter, useCopyButtons, useFluentStoreState } from "./controls/Grid";
+import { FluentPagedGrid, FluentPagedFooter, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { Filter } from "./forms/Filter";
 import { Fields } from "./forms/Fields";
 import { ShortVerticalDivider } from "./Common";
@@ -90,7 +90,7 @@ export const DFUWorkunits: React.FunctionComponent<DFUWorkunitsProps> = ({
         return formatQuery(filter);
     }, [filter]);
 
-    const columns = React.useMemo(() => {
+    const columns = React.useMemo((): FluentColumns => {
         return {
             col1: selector({
                 width: 27,
@@ -135,9 +135,6 @@ export const DFUWorkunits: React.FunctionComponent<DFUWorkunitsProps> = ({
             StateMessage: { label: nlsHPCC.State, width: 70 },
             PCTDone: {
                 label: nlsHPCC.PctComplete, width: 80, sortable: true,
-                formatter: (value, row) => {
-                    return Utility.valueCleanUp(row.PercentDone);
-                }
             },
             TimeStarted: { label: nlsHPCC.TimeStarted, width: 100, sortable: true },
             TimeStopped: { label: nlsHPCC.TimeStopped, width: 100, sortable: true },

diff --git a/esp/src/src-react/components/EventScheduler.tsx b/esp/src/src-react/components/EventScheduler.tsx
@@ -7,7 +7,7 @@ import nlsHPCC from "src/nlsHPCC";
 import * as WsWorkunits from "src/WsWorkunits";
 import { useConfirm } from "../hooks/confirm";
 import { HolyGrail } from "../layouts/HolyGrail";
-import { FluentPagedGrid, FluentPagedFooter, useCopyButtons, useFluentStoreState } from "./controls/Grid";
+import { FluentPagedGrid, FluentPagedFooter, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { pushParams } from "../util/history";
 import { Fields } from "./forms/Fields";
 import { Filter } from "./forms/Filter";
@@ -70,7 +70,7 @@ export const EventScheduler: React.FunctionComponent<EventSchedulerProps> = ({
         return store ? store : CreateEventScheduleStore({});
     }, [store]);
 
-    const columns = React.useMemo(() => {
+    const columns = React.useMemo((): FluentColumns => {
         return {
             col1: {
                 width: 16,

diff --git a/esp/src/src-react/components/FileBlooms.tsx b/esp/src/src-react/components/FileBlooms.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 import { CommandBar, ICommandBarItemProps } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
-import { useFluentGrid } from "../hooks/grid";
 import { useFile } from "../hooks/file";
 import { HolyGrail } from "../layouts/HolyGrail";
+import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 
 interface FileBloomsProps {
     cluster?: string;
@@ -22,19 +22,19 @@ export const FileBlooms: React.FunctionComponent<FileBloomsProps> = ({
 
     const [file, , , refreshData] = useFile(cluster, logicalFile);
     const [data, setData] = React.useState<any[]>([]);
+    const {
+        selection, setSelection,
+        setTotal,
+        refreshTable } = useFluentStoreState({});
 
     //  Grid ---
-    const { Grid, copyButtons } = useFluentGrid({
-        data,
-        primaryID: "FieldNames",
-        sort,
-        filename: "fileBlooms",
-        columns: {
+    const columns = React.useMemo((): FluentColumns => {
+        return {
             FieldNames: { label: nlsHPCC.FieldNames, sortable: true, width: 320 },
             Limit: { label: nlsHPCC.Limit, sortable: true, width: 180 },
             Probability: { label: nlsHPCC.Probability, sortable: true, width: 180 },
-        }
-    });
+        };
+    }, []);
 
     React.useEffect(() => {
         const fileBlooms = file?.Blooms?.DFUFileBloom;
@@ -56,10 +56,20 @@ export const FileBlooms: React.FunctionComponent<FileBloomsProps> = ({
         },
     ], [refreshData]);
 
+    const copyButtons = useCopyButtons(columns, selection, "fileBlooms");
+
     return <HolyGrail
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
-            <Grid />
+            <FluentGrid
+                data={data}
+                primaryID={"FieldNames"}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
         }
     />;
 };
diff --git a/esp/src/src-react/components/FileDetailsGraph.tsx b/esp/src/src-react/components/FileDetailsGraph.tsx
@@ -3,9 +3,9 @@ import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Image, Link }
 import * as Utility from "src/Utility";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
-import { useFluentGrid } from "../hooks/grid";
 import { useFile } from "../hooks/file";
 import { HolyGrail } from "../layouts/HolyGrail";
+import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
 function getStateImageName(row) {
@@ -40,30 +40,30 @@ export const FileDetailsGraph: React.FunctionComponent<FileDetailsGraphProps> =
     const [file, , , refreshData] = useFile(cluster, logicalFile);
     const [uiState, setUIState] = React.useState({ ...defaultUIState });
     const [data, setData] = React.useState<any[]>([]);
+    const {
+        selection, setSelection,
+        setTotal,
+        refreshTable } = useFluentStoreState({});
 
     //  Grid ---
-    const { Grid, selection, copyButtons } = useFluentGrid({
-        data,
-        sort,
-        primaryID: "Name",
-        filename: "graphs",
-        columns: {
+    const columns = React.useMemo((): FluentColumns => {
+        return {
             col1: {
                 width: 27,
                 selectorType: "checkbox"
             },
             Name: {
                 label: nlsHPCC.Name, sortable: true,
-                formatter: React.useCallback(function (Name, row) {
+                formatter: (Name, row) => {
                     return <>
                         <Image src={Utility.getImageURL(getStateImageName(row))} />
                         &nbsp;
                         <Link href={`#/workunits/${row?.Wuid}/metrics/${Name}`}>{Name}</Link>
                     </>;
-                }, [])
+                }
             }
-        }
-    });
+        };
+    }, []);
 
     //  Command Bar  ---
     const buttons = React.useMemo((): ICommandBarItemProps[] => [
@@ -106,10 +106,20 @@ export const FileDetailsGraph: React.FunctionComponent<FileDetailsGraphProps> =
         }));
     }, [file?.Graphs?.ECLGraph, file?.Wuid]);
 
+    const copyButtons = useCopyButtons(columns, selection, "graphs");
+
     return <HolyGrail
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
-            <Grid />
+            <FluentGrid
+                data={data}
+                primaryID={"Name"}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
         }
     />;
 };
diff --git a/esp/src/src-react/components/FileHistory.tsx b/esp/src/src-react/components/FileHistory.tsx
@@ -4,8 +4,8 @@ import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useConfirm } from "../hooks/confirm";
 import { useFileHistory } from "../hooks/file";
-import { useFluentGrid } from "../hooks/grid";
 import { HolyGrail } from "../layouts/HolyGrail";
+import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
 interface FileHistoryProps {
@@ -25,22 +25,22 @@ export const FileHistory: React.FunctionComponent<FileHistoryProps> = ({
     //  Grid ---
     const [history, eraseHistory, refreshData] = useFileHistory(cluster, logicalFile);
     const [data, setData] = React.useState<any[]>([]);
+    const {
+        selection, setSelection,
+        setTotal,
+        refreshTable } = useFluentStoreState({});
 
-    const { Grid, copyButtons } = useFluentGrid({
-        data,
-        primaryID: "__hpcc_id",
-        sort,
-        filename: "filehistory",
-        columns: {
+    const columns = React.useMemo((): FluentColumns => {
+        return {
             Name: { label: nlsHPCC.Name, sortable: false },
             IP: { label: nlsHPCC.IP, sortable: false },
             Operation: { label: nlsHPCC.Operation, sortable: false },
             Owner: { label: nlsHPCC.Owner, sortable: false },
             Path: { label: nlsHPCC.Path, sortable: false },
             Timestamp: { label: nlsHPCC.TimeStamp, sortable: false },
             Workunit: { label: nlsHPCC.Workunit, sortable: false }
-        }
-    });
+        };
+    }, []);
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.EraseHistory,
@@ -65,11 +65,21 @@ export const FileHistory: React.FunctionComponent<FileHistoryProps> = ({
         },
     ], [history?.length, refreshData, setShowDeleteConfirm]);
 
+    const copyButtons = useCopyButtons(columns, selection, "filehistory");
+
     return <HolyGrail
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
             <>
-                <Grid />
+                <FluentGrid
+                    data={data}
+                    primaryID={"__hpcc_id"}
+                    sort={sort}
+                    columns={columns}
+                    setSelection={setSelection}
+                    setTotal={setTotal}
+                    refresh={refreshTable}
+                ></FluentGrid>
                 <DeleteConfirm />
             </>
         }

diff --git a/esp/src/src-react/components/FileParts.tsx b/esp/src/src-react/components/FileParts.tsx
@@ -3,9 +3,9 @@ import { ICommandBarItemProps, CommandBar } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import * as Utility from "src/Utility";
-import { useFluentGrid } from "../hooks/grid";
 import { useFile } from "../hooks/file";
 import { HolyGrail } from "../layouts/HolyGrail";
+import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 
 interface FilePartsProps {
     cluster?: string;
@@ -23,32 +23,32 @@ export const FileParts: React.FunctionComponent<FilePartsProps> = ({
 
     const [file, , , refreshData] = useFile(cluster, logicalFile);
     const [data, setData] = React.useState<any[]>([]);
+    const {
+        selection, setSelection,
+        setTotal,
+        refreshTable } = useFluentStoreState({});
 
     //  Grid ---
-    const { Grid, copyButtons } = useFluentGrid({
-        data,
-        primaryID: "Id",
-        sort,
-        filename: "fileParts",
-        columns: {
+    const columns = React.useMemo((): FluentColumns => {
+        return {
             Id: { label: nlsHPCC.Part, sortable: true, width: 80 },
             Copy: { label: nlsHPCC.Copy, sortable: true, width: 80 },
             Ip: { label: nlsHPCC.IP, sortable: true, width: 80 },
             Cluster: { label: nlsHPCC.Cluster, sortable: true, width: 280 },
             PartsizeInt64: {
                 label: nlsHPCC.Size, sortable: true, width: 120,
-                formatter: React.useCallback(function (value, row) {
+                formatter: (value, row) => {
                     return Utility.safeFormatNum(value);
-                }, []),
+                }
             },
             CompressedSize: {
                 label: nlsHPCC.CompressedSize, sortable: true, width: 120,
-                formatter: React.useCallback(function (value, row) {
+                formatter: (value, row) => {
                     return Utility.safeFormatNum(value);
-                }, [])
+                }
             },
-        }
-    });
+        };
+    }, []);
 
     React.useEffect(() => {
         const fileParts = file?.fileParts() ?? [];
@@ -72,10 +72,20 @@ export const FileParts: React.FunctionComponent<FilePartsProps> = ({
         }
     ], [refreshData]);
 
+    const copyButtons = useCopyButtons(columns, selection, "fileParts");
+
     return <HolyGrail
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
-            <Grid />
+            <FluentGrid
+                data={data}
+                primaryID={"Id"}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
         }
     />;
 };