Merge pull request #18026 from GordonSmith/HPCC-30772-DOT_DOWNLOAD

HPCC-30772 Add "Download DOT" to metrics Reviewed-By: Jeremy Clements <[email protected]> Merged-by: Gavin Halliday <[email protected]>
hpcc-systems · Nov 17, 2023 · ed7d3ce · ed7d3ce
2 parents a12fd9b + 5534d92
commit ed7d3ce
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 58 deletions.
diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
@@ -154,63 +154,6 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         pushUrl(`/workunits/${wuid}/metrics/${selection}`);
     }, [wuid, selection]);
 
-    //  Command Bar  ---
-    const buttons = React.useMemo((): ICommandBarItemProps[] => [
-        {
-            key: "refresh", text: nlsHPCC.Refresh, iconProps: { iconName: "Refresh" },
-            onClick: () => refresh()
-        },
-        {
-            key: "hotspot", text: nlsHPCC.Hotspots, iconProps: { iconName: "SpeedHigh" },
-            disabled: !hotspots, onClick: () => onHotspot()
-        },
-        { key: "divider_1", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
-        {
-            key: "timeline", text: nlsHPCC.Timeline, canCheck: true, checked: showTimeline, iconProps: { iconName: "TimelineProgress" },
-            onClick: () => {
-                setShowTimeline(!showTimeline);
-            }
-        },
-        {
-            key: "options", text: nlsHPCC.Options, iconProps: { iconName: "Settings" },
-            onClick: () => {
-                setOptions({ ...options, layout: dockpanel.layout() });
-                setShowMetricOptions(true);
-            }
-        }
-    ], [dockpanel, hotspots, onHotspot, options, refresh, setOptions, showTimeline]);
-
-    const formatColumns = React.useMemo((): Utility.ColumnMap => {
-        const copyColumns: Utility.ColumnMap = {};
-        for (const key in columns) {
-            copyColumns[key] = {
-                field: key,
-                label: key
-            };
-        }
-        return copyColumns;
-    }, [columns]);
-
-    const rightButtons = React.useMemo((): ICommandBarItemProps[] => [
-        {
-            key: "copy", text: nlsHPCC.CopyToClipboard, disabled: !metrics.length || !navigator?.clipboard?.writeText, iconOnly: true, iconProps: { iconName: "Copy" },
-            onClick: () => {
-                const tsv = Utility.formatAsDelim(formatColumns, metrics, "\t");
-                navigator?.clipboard?.writeText(tsv);
-            }
-        },
-        {
-            key: "download", text: nlsHPCC.DownloadToCSV, disabled: !metrics.length, iconOnly: true, iconProps: { iconName: "Download" },
-            onClick: () => {
-                const csv = Utility.formatAsDelim(formatColumns, metrics, ",");
-                Utility.downloadText(csv, `metrics-${wuid}.csv`);
-            }
-        }, {
-            key: "fullscreen", title: nlsHPCC.MaximizeRestore, iconProps: { iconName: fullscreen ? "ChromeRestore" : "FullScreen" },
-            onClick: () => setFullscreen(!fullscreen)
-        }
-    ], [formatColumns, fullscreen, metrics, wuid]);
-
     //  Timeline ---
     const timeline = useConst(() => new WUTimelinePatched()
         .maxZoom(Number.MAX_SAFE_INTEGER)
@@ -548,6 +491,79 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         saveOptions();
     }, [options, saveOptions, setOptions]);
 
+    //  Command Bar  ---
+    const buttons = React.useMemo((): ICommandBarItemProps[] => [
+        {
+            key: "refresh", text: nlsHPCC.Refresh, iconProps: { iconName: "Refresh" },
+            onClick: () => refresh()
+        },
+        {
+            key: "hotspot", text: nlsHPCC.Hotspots, iconProps: { iconName: "SpeedHigh" },
+            disabled: !hotspots, onClick: () => onHotspot()
+        },
+        { key: "divider_1", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
+        {
+            key: "timeline", text: nlsHPCC.Timeline, canCheck: true, checked: showTimeline, iconProps: { iconName: "TimelineProgress" },
+            onClick: () => {
+                setShowTimeline(!showTimeline);
+            }
+        },
+        {
+            key: "options", text: nlsHPCC.Options, iconProps: { iconName: "Settings" },
+            onClick: () => {
+                setOptions({ ...options, layout: dockpanel.layout() });
+                setShowMetricOptions(true);
+            }
+        }
+    ], [dockpanel, hotspots, onHotspot, options, refresh, setOptions, showTimeline]);
+
+    const formatColumns = React.useMemo((): Utility.ColumnMap => {
+        const copyColumns: Utility.ColumnMap = {};
+        for (const key in columns) {
+            copyColumns[key] = {
+                field: key,
+                label: key
+            };
+        }
+        return copyColumns;
+    }, [columns]);
+
+    const rightButtons = React.useMemo((): ICommandBarItemProps[] => [
+        {
+            key: "copy", text: nlsHPCC.CopyToClipboard, disabled: !metrics.length || !navigator?.clipboard?.writeText, iconOnly: true, iconProps: { iconName: "Copy" },
+            onClick: () => {
+                const tsv = Utility.formatAsDelim(formatColumns, metrics, "\t");
+                navigator?.clipboard?.writeText(tsv);
+            }
+        },
+        {
+            key: "download", text: nlsHPCC.DownloadToCSV, disabled: !metrics.length, iconOnly: true, iconProps: { iconName: "Download" },
+            subMenuProps: {
+                items: [{
+                    key: "downloadCSV",
+                    text: nlsHPCC.DownloadToCSV,
+                    iconProps: { iconName: "Table" },
+                    onClick: () => {
+                        const csv = Utility.formatAsDelim(formatColumns, metrics, ",");
+                        Utility.downloadText(csv, `metrics-${wuid}.csv`);
+                    }
+                },
+                {
+                    key: "downloadDOT",
+                    text: nlsHPCC.DownloadToDOT,
+                    iconProps: { iconName: "Relationship" },
+                    onClick: () => {
+                        const dot = metricGraph.graphTpl(selectedMetrics, options);
+                        Utility.downloadText(dot, `metrics-${wuid}.dot`);
+                    }
+                }]
+            }
+        }, {
+            key: "fullscreen", title: nlsHPCC.MaximizeRestore, iconProps: { iconName: fullscreen ? "ChromeRestore" : "FullScreen" },
+            onClick: () => setFullscreen(!fullscreen)
+        }
+    ], [formatColumns, fullscreen, metricGraph, metrics, options, selectedMetrics, wuid]);
+
     return <HolyGrail fullscreen={fullscreen}
         header={<>
             <CommandBar items={buttons} farItems={rightButtons} />

diff --git a/esp/src/src-react/util/metricGraph.ts b/esp/src/src-react/util/metricGraph.ts
@@ -177,7 +177,7 @@ export class MetricGraph extends Graph2<IScope, IScopeEdge, IScope> {
         });
 
         data.forEach((scope: IScope) => {
-            if (scope.type === "edge") {
+            if (scope.type === "edge" && scope.IdSource !== undefined && scope.IdTarget !== undefined) {
                 if (!this.vertexExists(this._activityIndex[(scope as IScopeEdge).IdSource]))
                     logger.warning(`Missing vertex:  ${(scope as IScopeEdge).IdSource}`);
                 else if (!this.vertexExists(this._activityIndex[(scope as IScopeEdge).IdTarget])) {

diff --git a/esp/src/src/nls/hpcc.ts b/esp/src/src/nls/hpcc.ts
@@ -254,6 +254,7 @@ export = {
         Downloads: "Downloads",
         DownloadToCSV: "Download to CSV",
         DownloadToCSVNonFlatWarning: "Please note: downloading files containing nested datasets as comma-separated data may not be formatted as expected",
+        DownloadToDOT: "Download to DOT",
         DownloadSelectionAsCSV: "Download selection as CSV",
         DropZone: "Drop Zone",
         DueToInctivity: "You will be logged out of all ECL Watch sessions in 3 minutes due to inactivity.",