Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HPCC-30772 Add "Download DOT" to metrics #18026

Merged
merged 1 commit into from
Nov 17, 2023
Merged

HPCC-30772 Add "Download DOT" to metrics #18026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 73 additions & 57 deletions esp/src/src-react/components/Metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion esp/src/src-react/util/metricGraph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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])) {
Expand Down
1 change: 1 addition & 0 deletions esp/src/src/nls/hpcc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
Loading