HPCC-25589 Add FluentUI About Dialog

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

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

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { DefaultButton, Dialog, DialogFooter, DialogType, Pivot, PivotItem } from "@fluentui/react";
+import { useConst } from "@fluentui/react-hooks";
+import { Bar } from "@hpcc-js/chart";
+import { fetchStats } from "src/KeyValStore";
+import nlsHPCC from "src/nlsHPCC";
+import { TpGetServerVersion } from "src/WsTopology";
+import { AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
+import { Details } from "./Details";
+
+interface AboutProps {
+    show?: boolean;
+    onClose?: () => void;
+}
+
+export const About: React.FunctionComponent<AboutProps> = ({
+    show = false,
+    onClose = () => { }
+}) => {
+
+    const [version, setVersion] = React.useState("");
+    const [browser, setBrowser] = React.useState([]);
+    const [os, setOS] = React.useState([]);
+
+    React.useEffect(() => {
+        TpGetServerVersion().then(version => {
+            setVersion(version);
+        });
+        fetchStats().then(response => {
+            setBrowser(response.browser);
+            setOS(response.os);
+        });
+    }, []);
+
+    const browserChart = useConst(new Bar().columns([nlsHPCC.Client, nlsHPCC.Count]));
+    browserChart
+        .data(browser)
+        ;
+    const osChart = useConst(new Bar().columns([nlsHPCC.Client, nlsHPCC.Count]));
+    osChart
+        .data(os)
+        ;
+
+    const dialogContentProps = {
+        type: DialogType.largeHeader,
+        title: nlsHPCC.AboutHPCCSystems
+    };
+
+    return <Dialog hidden={!show} onDismiss={onClose} dialogContentProps={dialogContentProps} minWidth="640px">
+        <Pivot>
+            <PivotItem itemKey="about" headerText={nlsHPCC.About}>
+                <div style={{ minHeight: "208px", paddingTop: "32px" }}>
+                    <Details fields={{
+                        version: { label: nlsHPCC.Version, type: "string", value: version || "???", readonly: true },
+                        homepage: { label: nlsHPCC.Homepage, type: "link", href: "https://hpccsystems.com" },
+                    }}>
+                    </Details>
+                </div>
+            </PivotItem>
+            <PivotItem itemKey="browser" headerText={nlsHPCC.BrowserStats} alwaysRender>
+                <AutosizeHpccJSComponent widget={browserChart} fixedHeight="240px" />
+            </PivotItem>
+            <PivotItem itemKey="os" headerText={nlsHPCC.OSStats} alwaysRender>
+                <AutosizeHpccJSComponent widget={osChart} fixedHeight="240px" />
+            </PivotItem>
+        </Pivot>
+        <DialogFooter>
+            <DefaultButton onClick={onClose} text={nlsHPCC.OK} />
+        </DialogFooter>
+    </Dialog>;
+};

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Checkbox, Dropdown, TextField, IDropdownProps, IDropdownOption, Label } from "@fluentui/react";
+import { Checkbox, Dropdown, TextField, IDropdownProps, IDropdownOption, Label, Link } from "@fluentui/react";
 import { TextField as MaterialUITextField } from "@material-ui/core";
 import { Topology, TpLogicalClusterQuery } from "@hpcc-js/comms";
 import { TpGroupQuery } from "src/WsTopology";
@@ -7,7 +7,7 @@ import { States } from "src/WsWorkunits";
 import { States as DFUStates } from "src/FileSpray";
 import nlsHPCC from "src/nlsHPCC";
 
-type FieldType = "string" | "checkbox" | "datetime" |
+type FieldType = "string" | "checkbox" | "datetime" | "link" |
     "workunit-state" |
     "file-type" | "file-sortby" |
     "queries-suspend-state" | "queries-active-state" |
@@ -36,6 +36,11 @@ interface DateTimeField extends BaseField {
     value?: string;
 }
 
+interface LinkField extends BaseField {
+    type: "link";
+    href: string;
+}
+
 interface CheckboxField extends BaseField {
     type: "checkbox";
     value?: boolean;
@@ -86,7 +91,7 @@ interface DFUWorkunitStateField extends BaseField {
     value?: string;
 }
 
-type Field = StringField | CheckboxField | DateTimeField |
+type Field = StringField | CheckboxField | DateTimeField | LinkField |
     WorkunitStateField |
     FileTypeField | FileSortByField |
     QueriesSuspendStateField | QueriesActiveStateField |
@@ -148,12 +153,12 @@ const TargetGroupTextField: React.FunctionComponent<IDropdownProps> = (props) =>
 
 interface DetailsProps {
     fields: Fields;
-    onChange: (id: string, newValue: any) => void;
+    onChange?: (id: string, newValue: any) => void;
 }
 
 export const Details: React.FunctionComponent<DetailsProps> = ({
     fields,
-    onChange
+    onChange = (id: string, newValue: any) => { }
 }) => {
 
     const formFields: { id: string, label: string, field: any }[] = [];
@@ -213,6 +218,18 @@ export const Details: React.FunctionComponent<DetailsProps> = ({
                     />
                 });
                 break;
+            case "link":
+                field.href = field.href;
+                formFields.push({
+                    id: fieldID,
+                    label: field.label,
+                    field: <Link
+                        key={fieldID}
+                        href={field.href}
+                        target="_blank"
+                        style={{ paddingLeft: 8 }}>{field.href}</Link>
+                });
+                break;
             case "workunit-state":
                 field.value = field.value || "";
                 formFields.push({

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Breadcrumb, ContextualMenuItemType, DefaultPalette, FontSizes, IBreadcrumbItem, IBreadcrumbStyleProps, IBreadcrumbStyles, IconButton, IContextualMenuProps, IIconProps, Image, IStyleFunctionOrObject, Link, SearchBox, Stack, Toggle } from "@fluentui/react";
+import { About } from "./About";
 
 import nlsHPCC from "src/nlsHPCC";
 
@@ -7,6 +8,8 @@ const breadCrumbStyles: IStyleFunctionOrObject<IBreadcrumbStyleProps, IBreadcrum
     itemLink: { fontSize: FontSizes.size10, lineHeight: 14, paddingLeft: 2, paddingRight: 2 },
 };
 
+const collapseMenuIcon: IIconProps = { iconName: "CollapseMenu" };
+
 interface DevTitleProps {
     paths: string[],
     useDarkMode: boolean,
@@ -19,6 +22,8 @@ export const DevTitle: React.FunctionComponent<DevTitleProps> = ({
     setUseDarkMode
 }) => {
 
+    const [showAbout, setShowAbout] = React.useState(false);
+
     let fullPath = "#";
     const itemsWithHref = [{ text: "HOME", key: "home", href: "#/" },
     ...paths.filter(path => !!path).map((path, idx) => {
@@ -37,25 +42,27 @@ export const DevTitle: React.FunctionComponent<DevTitleProps> = ({
             { key: "docs", href: "https://hpccsystems.com/training/documentation/", text: nlsHPCC.Documentation, target: "_blank" },
             { key: "downloads", href: "https://hpccsystems.com/download", text: nlsHPCC.Downloads, target: "_blank" },
             { key: "releaseNotes", href: "https://hpccsystems.com/download/release-notes", text: nlsHPCC.ReleaseNotes, target: "_blank" },
-            { key: "additionalResources", text: nlsHPCC.AdditionalResources, subMenuProps: {
-                items: [
-                    { key: "redBook", href: "https://wiki.hpccsystems.com/display/hpcc/HPCC+Systems+Red+Book", text: nlsHPCC.RedBook, target: "_blank" },
-                    { key: "forums", href: "https://hpccsystems.com/bb/", text: nlsHPCC.Forums, target: "_blank" },
-                    { key: "issues", href: "https://track.hpccsystems.com/issues/", text: nlsHPCC.IssueReporting, target: "_blank" },
-                ]
-            }},
+            {
+                key: "additionalResources", text: nlsHPCC.AdditionalResources, subMenuProps: {
+                    items: [
+                        { key: "redBook", href: "https://wiki.hpccsystems.com/display/hpcc/HPCC+Systems+Red+Book", text: nlsHPCC.RedBook, target: "_blank" },
+                        { key: "forums", href: "https://hpccsystems.com/bb/", text: nlsHPCC.Forums, target: "_blank" },
+                        { key: "issues", href: "https://track.hpccsystems.com/issues/", text: nlsHPCC.IssueReporting, target: "_blank" },
+                    ]
+                }
+            },
             { key: "divider_3", itemType: ContextualMenuItemType.Divider },
             { key: "lock", text: nlsHPCC.Lock },
             { key: "logout", text: nlsHPCC.Logout },
             { key: "divider_4", itemType: ContextualMenuItemType.Divider },
+            { key: "legacy", text: nlsHPCC.OpenLegacyECLWatch, href: "/esp/files/stub.htm" },
+            { key: "divider_5", itemType: ContextualMenuItemType.Divider },
             { key: "config", text: nlsHPCC.Configuration },
-            { key: "about", text: nlsHPCC.About },
+            { key: "about", text: nlsHPCC.About, onClick: () => setShowAbout(true) }
         ],
         directionalHintFixed: true
     };
 
-    const advMenuIconProps: IIconProps = { iconName: "ContextMenu" };
-
     return <>
         <Stack tokens={{ padding: 9, childrenGap: 9 }} >
             <Stack horizontal disableShrink horizontalAlign="space-between">
@@ -72,7 +79,6 @@ export const DevTitle: React.FunctionComponent<DevTitleProps> = ({
                 </Stack>
                 <Stack horizontal tokens={{ childrenGap: 18 }} >
                     <Stack.Item align="center">
-                        <Link href="/esp/files/stub.htm">Legacy ECL Watch</Link>
                         <Toggle
                             label="Change themes"
                             onText="Dark Mode"
@@ -80,13 +86,14 @@ export const DevTitle: React.FunctionComponent<DevTitleProps> = ({
                             onChange={() => setUseDarkMode(!useDarkMode)}
                         />
                     </Stack.Item>
-                    <Stack.Item>
-                        <IconButton title="Advanced" ariaLabel="Advanced" menuProps={ advMenuProps } iconProps={ advMenuIconProps } />
+                    <Stack.Item align="center">
+                        <IconButton title={nlsHPCC.Advanced} iconProps={collapseMenuIcon} menuProps={advMenuProps} />
                     </Stack.Item>
                 </Stack>
             </Stack>
         </Stack>
         <Stack horizontal styles={{ root: { background: DefaultPalette.themeLighter } }} >
         </Stack>
+        <About show={showAbout} onClose={() => setShowAbout(false)} ></About>
     </>;
 };

esp/src/src/nls/hpcc.ts

@@ -332,6 +332,7 @@ export = {
         HideSpills: "Hide Spills",
         High: "High",
         History: "History",
+        Homepage: "Homepage",
         HPCCSystems: "HPCC Systems®",
         Icon: "Icon",
         ID: "ID",