Merge pull request #15169 from GordonSmith/REACT_ABOUT

HPCC-26197 Remove old About Dialog

Reviewed-By: Gordon Smith <gordon.smith@lexisnexis.com>
Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/src/eclwatch/HPCCPlatformWidget.js

@@ -22,6 +22,7 @@ define([
 
     "src/CodeMirror",
     "src/react/index",
+    "src-react/components/About",
 
     "hpcc/_TabContainerWidget",
     "src/ESPRequest",
@@ -60,7 +61,7 @@ define([
 ], function (declare, lang, nlsHPCCMod, arrayUtil, dom, domConstruct, domClass, domForm, domStyle, domGeo, cookie, query, topic, xhr,
     registry, Tooltip,
     UpgradeBar, ColorPicker,
-    CodeMirror, srcReact,
+    CodeMirror, srcReact, AboutModule,
     _TabContainerWidget, ESPRequest, ESPActivity, ESPUtil, WsAccount, WsAccess, WsSMC, WsTopology, WsMachine, LockDialogWidget, EnvironmentTheme,
     template) {
 
@@ -488,9 +489,9 @@ define([
         _onAboutLoaded: false,
         _onAbout: function (evt) {
             var aboutNode = dom.byId(this.id + "AboutDialog");
-            srcReact.render(srcReact.AboutDialog, {
-                version: this.build.orig,
-                handleClose: function () {
+            srcReact.render(AboutModule.About, {
+                show: true,
+                onClose: function () {
                     srcReact.unrender(aboutNode);
                 }
             }, aboutNode);

esp/src/eclwatch/dojoConfig.js

@@ -21,7 +21,8 @@ function getConfig(env) {
         paths: {
             "hpcc": baseUrl + "/eclwatch",
             "src": baseUrl + "/lib/src",
-            "srcReact": baseUrl + "/src-react",
+            "src-react": baseUrl + "/lib/src-react",
+            "src-react-css": baseUrl + "/src-react",
             "ganglia": baseUrl + "/ganglia",
             "templates": baseUrl + "/eclwatch/templates",
             "ecl": baseUrl + "/eclwatch/ecl",

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

@@ -8,6 +8,11 @@ import { TpGetServerVersion } from "src/WsTopology";
 import { AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
 import { TableGroup } from "./forms/Groups";
 
+const dialogContentProps = {
+    type: DialogType.largeHeader,
+    title: nlsHPCC.AboutHPCCSystems
+};
+
 interface AboutProps {
     show?: boolean;
     onClose?: () => void;
@@ -33,18 +38,19 @@ export const About: React.FunctionComponent<AboutProps> = ({
     }, []);
 
     const browserChart = useConst(new Bar().columns([nlsHPCC.Client, nlsHPCC.Count]));
-    browserChart
-        .data(browser)
-        ;
+    React.useEffect(() => {
+        browserChart
+            .data(browser)
+            .lazyRender()
+            ;
+    }, [browser, browserChart]);
     const osChart = useConst(new Bar().columns([nlsHPCC.Client, nlsHPCC.Count]));
-    osChart
-        .data(os)
-        ;
-
-    const dialogContentProps = {
-        type: DialogType.largeHeader,
-        title: nlsHPCC.AboutHPCCSystems
-    };
+    React.useEffect(() => {
+        osChart
+            .data(os)
+            .lazyRender()
+            ;
+    }, [os, osChart]);
 
     return <Dialog hidden={!show} onDismiss={onClose} dialogContentProps={dialogContentProps} minWidth="640px">
         <Pivot>

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

@@ -8,7 +8,7 @@ import * as tree from "dgrid/tree";
 import * as ESPUtil from "src/ESPUtil";
 import { DojoComponent } from "../layouts/DojoAdapter";
 
-import "srcReact/components/DojoGrid.css";
+import "src-react-css/components/DojoGrid.css";
 
 export { selector, tree };
 

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

@@ -15,7 +15,7 @@ import { ShortVerticalDivider } from "./Common";
 import { Fields } from "./forms/Fields";
 import { Filter } from "./forms/Filter";
 
-import "srcReact/components/DojoGrid.css";
+import "src-react-css/components/DojoGrid.css";
 
 function eclTypeTPL(type: string, isSet: boolean) {
     const prefix = isSet ? "SET OF " : "";

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

@@ -3,7 +3,7 @@ import { useId } from "@fluentui/react-hooks";
 import { SizeMe } from "react-sizeme";
 import { Widget } from "@hpcc-js/common";
 
-import "srcReact/layouts/HpccJSAdapter.css";
+import "src-react-css/layouts/HpccJSAdapter.css";
 
 export interface HpccJSComponentProps {
     widget: Widget;

esp/src/src/react/aboutDialog.tsx

@@ -1,109 +0,0 @@
-import * as React from "react";
-import { MuiThemeProvider } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import ToggleButton from "@material-ui/lab/ToggleButton";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
-import { Bar } from "@hpcc-js/chart";
-import { fetchStats } from "../KeyValStore";
-import nlsHPCC from "../nlsHPCC";
-import { theme } from "./theme";
-import { VisualizationComponent } from "./vizComponent";
-
-interface BarChart {
-    columns: string[];
-    data: (string | number)[][];
-}
-
-export const BarChart: React.FunctionComponent<BarChart> = ({
-    columns,
-    data
-}) => {
-    return <VisualizationComponent widget={Bar} widgetProps={{ columns, data }} >
-    </VisualizationComponent>;
-};
-
-function TabPanel(props) {
-    const { children, value, index, ...other } = props;
-
-    return (
-        <div
-            role="tabpanel"
-            hidden={value !== index}
-            id={`simple-tabpanel-${index}`}
-            aria-labelledby={`simple-tab-${index}`}
-            {...other}
-        >
-            {value === index && (
-                <Box p={3}>
-                    {children}
-                </Box>
-            )}
-        </div>
-    );
-}
-
-interface AboutDialog {
-    version: string;
-    handleClose: () => void;
-}
-
-export const AboutDialog: React.FunctionComponent<AboutDialog> = ({
-    version,
-    handleClose
-}) => {
-    const [page, setPage] = React.useState(0);
-    const [columns] = React.useState([nlsHPCC.Client, nlsHPCC.Count]);
-    const [browser, setBrowser] = React.useState([]);
-    const [os, setOS] = React.useState([]);
-
-    React.useEffect(() => {
-        fetchStats().then(response => {
-            setBrowser(response.browser);
-            setOS(response.os);
-        });
-    }, []);
-
-    return (
-        <MuiThemeProvider theme={theme}>
-            <Dialog
-                open={true}
-                onClose={handleClose}
-                maxWidth="sm"
-                fullWidth={true}
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
-            >
-                <DialogTitle id="alert-dialog-title">{nlsHPCC.AboutHPCCSystems}</DialogTitle>
-                <DialogContent>
-                    <TabPanel value={page} index={0}>
-                        <Typography align="center" >
-                            <b>{nlsHPCC.Version}:  </b>{version}
-                        </Typography>
-                    </TabPanel>
-                    <TabPanel value={page} index={1}>
-                        <BarChart columns={columns} data={browser}>
-                        </BarChart>
-                    </TabPanel>
-                    <TabPanel value={page} index={2}>
-                        <BarChart columns={columns} data={os}>
-                        </BarChart>
-                    </TabPanel>
-                </DialogContent>
-                <DialogActions>
-                    <ToggleButton selected={page === 1} value="check" onChange={() => {
-                        setPage(page === 1 ? 0 : 1);
-                    }}>{nlsHPCC.BrowserStats}</ToggleButton>
-                    <ToggleButton selected={page === 2} value="check" onChange={() => {
-                        setPage(page === 2 ? 0 : 2);
-                    }}>{nlsHPCC.OSStats}</ToggleButton>
-                    <Button onClick={handleClose} color="primary" autoFocus>Close</Button>
-                </DialogActions>
-            </Dialog>
-        </MuiThemeProvider >
-    );
-};

esp/src/src/react/index.ts

@@ -1,4 +1,3 @@
 export * from "./render";
 export * from "./wuStatus";
 export * from "./recentFilters";
-export * from "./aboutDialog";