HPCC-26451 Remove legacy pages from modern ECL Watch

Bump versions

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>

esp/src/package.json

@@ -33,25 +33,25 @@
   },
   "main": "src/stub.js",
   "dependencies": {
-    "@fluentui/react": "^8.27.0",
+    "@fluentui/react": "^8.29.2",
     "@fluentui/react-cards": "1.0.0-beta.0",
-    "@fluentui/react-hooks": "^8.2.6",
-    "@fluentui/react-icons-mdl2": "^1.1.8",
-    "@hpcc-js/chart": "^2.65.0",
-    "@hpcc-js/codemirror": "^2.47.0",
-    "@hpcc-js/common": "^2.55.0",
-    "@hpcc-js/comms": "^2.52.0",
+    "@fluentui/react-hooks": "^8.3.1",
+    "@fluentui/react-icons-mdl2": "^1.2.1",
+    "@hpcc-js/chart": "^2.66.0",
+    "@hpcc-js/codemirror": "^2.48.0",
+    "@hpcc-js/common": "^2.56.0",
+    "@hpcc-js/comms": "^2.54.0",
     "@hpcc-js/dataflow": "^3.0.1",
-    "@hpcc-js/eclwatch": "^2.50.0",
-    "@hpcc-js/graph": "^2.65.0",
-    "@hpcc-js/html": "^2.30.0",
-    "@hpcc-js/layout": "^2.33.0",
-    "@hpcc-js/map": "^2.58.0",
-    "@hpcc-js/other": "^2.13.66",
-    "@hpcc-js/phosphor": "^2.14.46",
-    "@hpcc-js/react": "^2.38.0",
-    "@hpcc-js/tree": "^2.28.0",
-    "@hpcc-js/util": "^2.36.0",
+    "@hpcc-js/eclwatch": "^2.53.0",
+    "@hpcc-js/graph": "^2.66.0",
+    "@hpcc-js/html": "^2.31.0",
+    "@hpcc-js/layout": "^2.34.0",
+    "@hpcc-js/map": "^2.59.0",
+    "@hpcc-js/other": "^2.13.67",
+    "@hpcc-js/phosphor": "^2.14.48",
+    "@hpcc-js/react": "^2.39.0",
+    "@hpcc-js/tree": "^2.29.0",
+    "@hpcc-js/util": "^2.37.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -68,17 +68,17 @@
     "query-string": "6.13.2",
     "react": "^16.12.0",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^7.12.2",
+    "react-hook-form": "^7.14.0",
     "react-reflex": "^4.0.3",
-    "react-sizeme": "^3.0.1",
+    "react-sizeme": "^3.0.2",
     "universal-router": "^9.1.0"
   },
   "devDependencies": {
     "@types/dojo": "^1.9.43",
-    "@types/react": "^16.14.12",
+    "@types/react": "^16.14.14",
     "@types/react-dom": "^16.9.14",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
-    "@typescript-eslint/parser": "^4.29.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
     "braces": ">=2.3.1",
     "cpx": "^1.5.0",
     "css-loader": "^3.4.2",
@@ -92,11 +92,11 @@
     "rimraf": "^3.0.2",
     "source-map-loader": "^1.1.3",
     "style-loader": "^1.1.3",
-    "tslib": "^2.3.0",
-    "typescript": "^4.3.5",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.2",
     "url-loader": "^3.0.0",
     "webpack": "^4.45.0",
-    "webpack-cli": "^4.7.2",
+    "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^3.11.2"
   },
   "author": "HPCC Systems",

esp/src/src-react/components/FileBlooms.tsx

@@ -31,12 +31,12 @@ export const FileBlooms: React.FunctionComponent<FileBloomsProps> = ({
         Probability: { label: nlsHPCC.Probability, sortable: true, },
     });
 
-    const refreshTable = (clearSelection = false) => {
+    const refreshTable = React.useCallback((clearSelection = false) => {
         grid?.set("query", gridQuery);
         if (clearSelection) {
             grid?.clearSelection();
         }
-    };
+    }, [grid, gridQuery]);
 
     React.useEffect(() => {
         if (file?.Blooms) {
@@ -51,8 +51,7 @@ export const FileBlooms: React.FunctionComponent<FileBloomsProps> = ({
                 refreshTable();
             }
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [gridStore, file?.Blooms]);
+    }, [file?.Blooms, gridStore, refreshTable]);
 
     return <HolyGrail
         main={

esp/src/src-react/components/FileDetails.tsx

@@ -73,8 +73,7 @@ export const FileDetails: React.FunctionComponent<FileDetailsProps> = ({
             setReplicateFlag(_replicate);
         }
 
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [_protected, description, file?.Description, file?.ProtectList?.DFUFileProtect, file?.IsRestricted, file?.DFUFilePartsOnClusters, isProtected, restricted]);
+    }, [_protected, description, file?.DFUFilePartsOnClusters?.DFUFilePartsOnCluster, file?.Description, file?.IsRestricted, isProtected, restricted]);
 
     const canSave = file && (
         description !== file.Description ||

esp/src/src-react/components/Menu.tsx

@@ -114,41 +114,32 @@ type SubMenuItems = { [nav: string]: SubMenu[] };
 const subMenuItems: SubMenuItems = {
     "activities": [
         { headerText: nlsHPCC.Activities, itemKey: "/activities" },
-        { headerText: nlsHPCC.Activities + " (L)", itemKey: "/activities/legacy" },
-        { headerText: nlsHPCC.TargetClusters, itemKey: "/clusters" },
         { headerText: nlsHPCC.EventScheduler + " (L)", itemKey: "/events" }
     ],
     "workunits": [
         { headerText: nlsHPCC.Workunits, itemKey: "/workunits" },
         { headerText: nlsHPCC.Dashboard, itemKey: "/workunits/dashboard" },
-        { headerText: nlsHPCC.Workunits + " (L)", itemKey: "/workunits/legacy" },
         { headerText: nlsHPCC.Playground, itemKey: "/play" },
-        { headerText: nlsHPCC.Playground + " (L)", itemKey: "/play/legacy" },
     ],
     "files": [
         { headerText: nlsHPCC.LogicalFiles, itemKey: "/files" },
-        { headerText: nlsHPCC.LogicalFiles + " (L)", itemKey: "/files/legacy" },
         { headerText: nlsHPCC.LandingZones, itemKey: "/landingzone" },
-        { headerText: nlsHPCC.LandingZones + " (L)", itemKey: "/landingzone/legacy" },
         { headerText: nlsHPCC.Workunits, itemKey: "/dfuworkunits" },
-        { headerText: nlsHPCC.Workunits + " (L)", itemKey: "/dfuworkunits/legacy" },
-        { headerText: nlsHPCC.XRef, itemKey: "/xref" },
+        { headerText: nlsHPCC.XRef + " (L)", itemKey: "/xref" },
     ],
     "queries": [
         { headerText: nlsHPCC.Queries, itemKey: "/queries" },
-        { headerText: nlsHPCC.Queries + " (L)", itemKey: "/queries/legacy" },
         { headerText: nlsHPCC.PackageMaps, itemKey: "/packagemaps" }
     ],
     "topology": [
-        { headerText: nlsHPCC.Topology, itemKey: "/topology" },
-        { headerText: nlsHPCC.DiskUsage, itemKey: "/diskusage" },
-        { headerText: nlsHPCC.TargetClusters, itemKey: "/clusters2" },
-        { headerText: nlsHPCC.ClusterProcesses, itemKey: "/processes" },
-        { headerText: nlsHPCC.SystemServers, itemKey: "/servers" },
-        { headerText: nlsHPCC.Security, itemKey: "/security" },
-        { headerText: nlsHPCC.Monitoring, itemKey: "/monitoring" },
-        { headerText: nlsHPCC.DESDL, itemKey: "/esdl" },
-        { headerText: nlsHPCC.LogVisualization, itemKey: "/elk" },
+        { headerText: nlsHPCC.Topology + " (L)", itemKey: "/topology" },
+        { headerText: nlsHPCC.DiskUsage + " (L)", itemKey: "/diskusage" },
+        { headerText: nlsHPCC.TargetClusters + " (L)", itemKey: "/clusters" },
+        { headerText: nlsHPCC.ClusterProcesses + " (L)", itemKey: "/processes" },
+        { headerText: nlsHPCC.SystemServers + " (L)", itemKey: "/servers" },
+        { headerText: nlsHPCC.Security + " (L)", itemKey: "/security" },
+        { headerText: nlsHPCC.Monitoring + " (L)", itemKey: "/monitoring" },
+        { headerText: nlsHPCC.DESDL + " (L)", itemKey: "/esdl" },
     ],
 };
 

esp/src/src-react/components/WorkunitDetails.tsx

@@ -230,15 +230,9 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
                 <PivotItem headerText={nlsHPCC.Inputs} itemKey="inputs" itemCount={workunit?.SourceFileCount} style={pivotItemStyle(size, 0)}>
                     <SourceFiles wuid={wuid} />
                 </PivotItem>
-                <PivotItem headerText={nlsHPCC.Metrics} itemKey="metrics" style={pivotItemStyle(size, 0)}>
+                <PivotItem headerText={nlsHPCC.Metrics} itemKey="metrics" itemCount={workunit?.GraphCount} style={pivotItemStyle(size, 0)}>
                     <Metrics wuid={wuid} filter={{}} />
                 </PivotItem>
-                <PivotItem headerText={nlsHPCC.Timers + " (L)"} itemKey="timers" itemCount={workunit?.TimerCount} style={pivotItemStyle(size, 0)}>
-                    <DojoAdapter widgetClassID="TimingPageWidget" params={{ Wuid: wuid }} />
-                </PivotItem>
-                <PivotItem headerText={nlsHPCC.Graphs + " (L)"} itemKey="graphs" itemCount={workunit?.GraphCount} style={pivotItemStyle(size, 0)}>
-                    <DojoAdapter widgetClassID="GraphsWUWidget" params={{ Wuid: wuid }} />
-                </PivotItem>
                 <PivotItem headerText={nlsHPCC.Workflows} itemKey="workflows" itemCount={workunit?.WorkflowCount} style={pivotItemStyle(size, 0)}>
                     <Workflows wuid={wuid} />
                 </PivotItem>

esp/src/src-react/layouts/DojoAdapter.tsx

@@ -33,7 +33,6 @@ export const DojoAdapter: React.FunctionComponent<DojoAdapterProps> = ({
     const [widget, setWidget] = React.useState<any>();
 
     React.useEffect(() => {
-
         const elem = document.createElement("div");
         const divRef = myRef.current;
         divRef.innerText = "";
@@ -142,8 +141,7 @@ export const DojoComponent: React.FunctionComponent<DojoComponentProps> = ({
         return () => {
             w.destroyRecursive();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [Widget, WidgetParams, divID, id, postCreate]);
 
     return <div style={{ width: "100%", height: "100%", position: "relative" }}>
         <div id={divID} className="dojo-component">

esp/src/src-react/util/metricGraph.ts

@@ -331,8 +331,8 @@ export class MetricGraphWidget extends SVGZoomWidget {
     }
 
     clearSelection(broadcast: boolean = false) {
-        Object.keys(this._selection).forEach(id => {
-            d3Select(`#${encodeID(id)}`).classed("selected", false);
+        Object.keys(this._selection).forEach(name => {
+            d3Select(`#${encodeID(name)}`).classed("selected", false);
         });
         this._selection = {};
         this._selectionChanged(broadcast);

esp/src/src/nls/hpcc.ts

@@ -466,6 +466,7 @@ export = {
         Message: "Message",
         Methods: "Methods",
         Metrics: "Metrics",
+        MetricsGraph: "Metrics/Graph",
         Min: "Min",
         Mine: "Mine",
         MinNode: "Min Node",