Merge remote-tracking branch 'origin/candidate-9.2.x' into candidate-…

…9.4.x

esp/src/eclwatch/ClusterProcessesQueryWidget.js

@@ -17,7 +17,9 @@ define([
     "hpcc/DelayLoadWidget",
     "hpcc/PreflightDetailsWidget",
     "hpcc/MachineInformationWidget",
-    "hpcc/IFrameWidget"
+    "hpcc/IFrameWidget",
+
+    "dijit/Dialog",
 ], function (declare, nlsHPCCMod, topic,
     registry,
     tree, selector,

esp/src/eclwatch/DFUQueryWidget.js

@@ -759,7 +759,8 @@ define([
                             return "";
                         }
                     },
-                    Modified: { label: this.i18n.ModifiedUTCGMT, width: 162 },
+                    Modified: { label: this.i18n.ModifiedUTCGMT, width: 160 },
+                    Accessed: { label: this.i18n.LastAccessed, width: 160 },
                     AtRestCost: {
                         label: nlsHPCC.FileCostAtRest, width: 100,
                         formatter: function (cost, row) {

esp/src/eclwatch/DiskUsageWidget.js

@@ -16,6 +16,7 @@ define([
     "dijit/layout/BorderContainer",
     "dijit/layout/TabContainer",
     "dijit/layout/ContentPane",
+    "dijit/Dialog",
     "dijit/Toolbar",
     "dijit/ToolbarSeparator",
     "dijit/form/Button",

esp/src/eclwatch/TargetClustersQueryWidget.js

@@ -17,7 +17,9 @@ define([
     "hpcc/DelayLoadWidget",
     "src/ESPUtil",
     "hpcc/MachineInformationWidget",
-    "hpcc/IFrameWidget"
+    "hpcc/IFrameWidget",
+
+    "dijit/Dialog",
 ], function (declare, nlsHPCCMod, topic,
     registry,
     tree, selector,

esp/src/eclwatch/css/hpcc.css

@@ -1322,7 +1322,7 @@ table.miniSelect span {
     left: 0;
     right: 0;
     height: auto;
-    border-color: rgb(158, 158, 158);
+    border-style: none;
 }
 
 .flat .dgrid-page-size {
@@ -1928,22 +1928,28 @@ span.dijitReset.dijitInline.dijitIcon.fa.disabled {
     border-top: 4px solid white;
 }
 
-.flat .phosphor_WidgetAdapter {
-    background: inherit;
+.flat .phosphor_WidgetAdapter.p-DockPanel-widget {
+    border-top: none;
+    box-shadow: 0 -1px var(--colorNeutralStroke1), var(--shadow2);
 }
 
-.flat .p-TabBar-tab {
-    background: rgb(229, 229, 229);
+.flat .phosphor_WidgetAdapter {
+    background-color: var(--colorNeutralBackground1);
+    border-color: var(--colorNeutralStroke1)
 }
 
-.flat-dark .p-TabBar-tab {
-    background: rgb(48, 48, 48);
+.flat .p-TabBar-tab {
+    background-color: var(--colorNeutralBackground3);
+    border-bottom-style: solid;
+    border-color: var(--colorNeutralStroke1);
+    border-width: 1px;
 }
 
-.flat-dark .p-TabBar-tab:hover:not(.p-mod-current) {
-    background: rgb(72, 72, 72);
+.flat .p-TabBar-tab:hover:not(.p-mod-current) {
+    background-color: var(--colorNeutralBackground3Hover);
 }
 
 .flat .p-TabBar-tab.p-mod-current {
-    background: inherit;
+    background-color: var(--colorNeutralBackground1);
+    border-bottom-color: var(--colorNeutralStroke1);
 }

esp/src/eclwatch/stub.js

@@ -10,8 +10,6 @@ define([
 
     "src/Utility",
     "src/Session",
-    "src/KeyValStore",
-    "src/BuildInfo",
     "hpcc/LockDialogWidget",
 
     "dojox/html/entities",
@@ -22,46 +20,23 @@ define([
     "css!hpcc/css/hpcc.css"
 
 ], function (fx, dom, domStyle, ioQuery, ready, lang, arrayUtil, topic,
-    Utility, Session, KeyValStore, BuildInfo, LockDialogWidget,
+    Utility, Session, LockDialogWidget,
     entities, Toaster) {
 
     Session.initSession();
 
     const params = ioQuery.queryToObject(dojo.doc.location.search.substr((dojo.doc.location.search.substr(0, 1) === "?" ? 1 : 0)));
     const hpccWidget = params.Widget ? params.Widget : "HPCCPlatformWidget";
 
-    Session.fetchModernMode().then(modernMode => {
-        if (modernMode === String(true) && hpccWidget !== "IFrameWidget") {
-            switch (hpccWidget) {
-                case "WUDetailsWidget":
-                    window.location.replace(`/esp/files/index.html#/workunits/${params.Wuid}`);
-                    break;
-                case "GraphsWUWidget":
-                    window.location.replace(`/esp/files/index.html#/workunits/${params.Wuid}/metrics`);
-                    break;
-                case "TopologyWidget":
-                case "DiskUsageWidget":
-                case "TargetClustersQueryWidget":
-                case "ClusterProcessesQueryWidget":
-                case "SystemServersQueryWidget":
-                case "LogWidget":
-                    loadUI();
-                    break;
-                default:
-                    window.location.replace("/esp/files/index.html");
-            }
-        } else {
-            loadUI();
+    Session.needsRedirectV5().then(redirected => {
+        if (!redirected) {
+            ready(function () {
+                parseUrl();
+                initUI();
+            });
         }
     });
 
-    function loadUI() {
-        ready(function () {
-            parseUrl();
-            initUI();
-        });
-    }
-
     function startLoading(targetNode) {
         domStyle.set(dom.byId("loadingOverlay"), "display", "block");
         domStyle.set(dom.byId("loadingOverlay"), "opacity", "255");

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

@@ -1,8 +1,18 @@
 import * as React from "react";
-import { ComponentDetails as ComponentDetailsWidget, Details as DetailsWidget, Summary as SummaryWidget } from "src/DiskUsage";
+import { Link } from "@fluentui/react";
+import { MachineService } from "@hpcc-js/comms";
+import { scopedLogger } from "@hpcc-js/util";
+import { ComponentDetails as ComponentDetailsWidget, Summary as SummaryWidget } from "src/DiskUsage";
+import nlsHPCC from "src/nlsHPCC";
+import * as Utility from "src/Utility";
 import { AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
-import { pushUrl } from "../util/history";
 import { ReflexContainer, ReflexElement, ReflexSplitter, classNames, styles } from "../layouts/react-reflex";
+import { pushUrl } from "../util/history";
+import { FluentGrid, useFluentStoreState } from "./controls/Grid";
+
+const logger = scopedLogger("src-react/components/DiskUsage.tsx");
+
+const machineService = new MachineService({ baseUrl: "" });
 
 interface SummaryProps {
     cluster?: string;
@@ -31,17 +41,82 @@ interface DetailsProps {
 export const Details: React.FunctionComponent<DetailsProps> = ({
     cluster
 }) => {
-    const summary = React.useMemo(() => {
-        const retVal = new DetailsWidget(cluster)
-            .refresh()
-            .on("componentClick", component => {
-                pushUrl(`/machines/${component}/usage`);
+
+    const { refreshTable } = useFluentStoreState({});
+
+    //  Grid ---
+    const columns = React.useMemo(() => {
+        return {
+            PercentUsed: {
+                label: nlsHPCC.PercentUsed, width: 50, formatter: (percent) => {
+                    let className = "";
+
+                    if (percent <= 70) { className = "bgFilled bgGreen"; }
+                    else if (percent > 70 && percent < 80) { className = "bgFilled bgOrange"; }
+                    else { className = "bgFilled bgRed"; }
+
+                    return <span className={className}>{percent}</span>;
+                }
+            },
+            Component: { label: nlsHPCC.Component, width: 90 },
+            Type: { label: nlsHPCC.Type, width: 40 },
+            IPAddress: {
+                label: nlsHPCC.IPAddress, width: 140,
+                formatter: (ip) => <Link href={`#/operations/machines/${ip}/usage`}>{ip}</Link>
+            },
+            Path: { label: nlsHPCC.Path, width: 220 },
+            InUse: { label: nlsHPCC.InUse, width: 50 },
+            Total: { label: nlsHPCC.Total, width: 50 },
+        };
+    }, []);
+
+    type Columns = typeof columns;
+    type Row = { __hpcc_id: string } & { [K in keyof Columns]: string | number };
+    const [data, setData] = React.useState<Row[]>([]);
+
+    const refreshData = React.useCallback(() => {
+        machineService.GetTargetClusterUsageEx([cluster])
+            .then(response => {
+                const _data: Row[] = [];
+                if (response) {
+                    response.forEach(component => {
+                        component.ComponentUsages.forEach(cu => {
+                            cu.MachineUsages.forEach(mu => {
+                                mu.DiskUsages.forEach((du, i) => {
+                                    _data.push({
+                                        __hpcc_id: `__usage_${i}`,
+                                        PercentUsed: Math.round((du.InUse / du.Total) * 100),
+                                        Component: cu.Name,
+                                        IPAddress: mu.Name,
+                                        Type: du.Name,
+                                        Path: du.Path,
+                                        InUse: Utility.convertedSize(du.InUse),
+                                        Total: Utility.convertedSize(du.Total)
+                                    });
+                                });
+                            });
+                        });
+                    });
+                }
+                setData(_data);
             })
+            .catch(err => logger.error(err))
             ;
-        return retVal;
     }, [cluster]);
 
-    return <AutosizeHpccJSComponent widget={summary}></AutosizeHpccJSComponent >;
+    React.useEffect(() => {
+        refreshData();
+    }, [refreshData]);
+
+    return <FluentGrid
+        data={data}
+        primaryID={"__hpcc_id"}
+        sort={{ attribute: "__hpcc_id", descending: false }}
+        columns={columns}
+        setSelection={() => null}
+        setTotal={() => null}
+        refresh={refreshTable}
+    ></FluentGrid>;
 };
 
 interface MachineUsageProps {

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

@@ -200,6 +200,7 @@ export const Files: React.FunctionComponent<FilesProps> = ({
                 label: nlsHPCC.MaxSkew, width: 60, formatter: (value, row) => value ? `${Utility.formatDecimal(value / 100)}%` : ""
             },
             Modified: { label: nlsHPCC.ModifiedUTCGMT },
+            Accessed: { label: nlsHPCC.LastAccessed },
             AtRestCost: {
                 label: nlsHPCC.FileCostAtRest,
                 formatter: (cost, row) => {

esp/src/src-react/components/controls/Grid.tsx

@@ -101,7 +101,13 @@ const gridStyles = (height: string): Partial<IDetailsListStyles> => {
             height,
             minHeight: height,
             maxHeight: height,
-            selectors: { ".ms-DetailsHeader-cellName": { fontSize: "13.5px" } }
+            selectors: {
+                ".ms-DetailsHeader-cellName": { fontSize: "13.5px" },
+                ".ms-DetailsRow-cell:has(.bgFilled)": { color: "white", boxShadow: "inset 1px 0 var(--colorNeutralBackground1), inset -1px 1px var(--colorNeutralBackground1)" },
+                ".ms-DetailsRow-cell:has(.bgGreen)": { background: "green" },
+                ".ms-DetailsRow-cell:has(.bgOrange)": { background: "orange" },
+                ".ms-DetailsRow-cell:has(.bgRed)": { background: "red" }
+            }
         },
         headerWrapper: {
             position: "sticky",

esp/src/src-react/components/forms/landing-zone/DelimitedImportForm.tsx

@@ -385,7 +385,7 @@ export const DelimitedImportForm: React.FunctionComponent<DelimitedImportFormPro
                                 onChange={onChange}
                                 label={nlsHPCC.Separators}
                                 value={value}
-                                placeholder={nlsHPCC.NamePrefixPlaceholder}
+                                placeholder=","
                                 errorMessage={error && error?.message}
                             />}
                     /></td>

esp/src/src-react/index.tsx

@@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom";
 import { initializeIcons } from "@fluentui/react";
 import { scopedLogger } from "@hpcc-js/util";
 import { cookieKeyValStore } from "src/KeyValStore";
-import { fetchModernMode } from "src/Session";
+import { needsRedirectV9 } from "src/Session";
 import { ECLWatchLogger } from "./hooks/logging";
 import { replaceUrl } from "./util/history";
 
@@ -32,41 +32,43 @@ dojoConfig.urlInfo = {
 };
 dojoConfig.disableLegacyHashing = true;
 
-fetchModernMode().then(async modernMode => {
-    if (modernMode === String(false)) {
-        window.location.replace("/esp/files/stub.htm");
+needsRedirectV9().then(async redirected => {
+    if (!redirected) {
+        loadUI();
+    }
+});
+
+async function loadUI() {
+    const authTypeResp = await fetch("/esp/getauthtype");
+    const authType = await authTypeResp?.text() ?? "None";
+    const userStore = cookieKeyValStore();
+    const userSession = await userStore.getAll();
+    if (authType.indexOf("None") < 0 && (userSession["ESPSessionState"] === "false" || userSession["ECLWatchUser"] === "false" || (!userSession["Status"] || userSession["Status"] === "Locked"))) {
+        if (window.location.hash.indexOf("login") < 0) {
+            replaceUrl("/login");
+        }
+        import("./components/forms/Login").then(_ => {
+            try {
+                ReactDOM.render(
+                    <_.Login />,
+                    document.getElementById("placeholder")
+                );
+                document.getElementById("loadingOverlay").remove();
+            } catch (e) {
+                logger.error(e);
+            }
+        });
     } else {
-        const authTypeResp = await fetch("/esp/getauthtype");
-        const authType = await authTypeResp?.text() ?? "None";
-        const userStore = cookieKeyValStore();
-        const userSession = await userStore.getAll();
-        if (authType.indexOf("None") < 0 && (userSession["ESPSessionState"] === "false" || userSession["ECLWatchUser"] === "false" || (!userSession["Status"] || userSession["Status"] === "Locked"))) {
-            if (window.location.hash.indexOf("login") < 0) {
-                replaceUrl("/login");
+        import("./components/Frame").then(_ => {
+            try {
+                ReactDOM.render(
+                    <_.Frame />,
+                    document.getElementById("placeholder")
+                );
+                document.getElementById("loadingOverlay").remove();
+            } catch (e) {
+                logger.error(e);
             }
-            import("./components/forms/Login").then(_ => {
-                try {
-                    ReactDOM.render(
-                        <_.Login />,
-                        document.getElementById("placeholder")
-                    );
-                    document.getElementById("loadingOverlay").remove();
-                } catch (e) {
-                    logger.error(e);
-                }
-            });
-        } else {
-            import("./components/Frame").then(_ => {
-                try {
-                    ReactDOM.render(
-                        <_.Frame />,
-                        document.getElementById("placeholder")
-                    );
-                    document.getElementById("loadingOverlay").remove();
-                } catch (e) {
-                    logger.error(e);
-                }
-            });
-        }
+        });
     }
-});
+}

esp/src/src-react/routes.tsx

@@ -437,9 +437,12 @@ export const routes: RoutesEx = [
                 })
             },
             {
-                path: "/:Machine/usage", action: (ctx, params) => import("./components/DiskUsage").then(_ => {
-                    return <_.MachineUsage machine={params.Machine as string} />;
-                })
+                path: "/machines",
+                children: [{
+                    path: "/:Machine/usage", action: (ctx, params) => import("./components/DiskUsage").then(_ => {
+                        return <_.MachineUsage machine={params.Machine as string} />;
+                    })
+                }]
             },
             {