Merge pull request #19587 from GordonSmith/HPCC-30603-METRICS_HIGHLIGHT_ISSUES

HPCC-30603 Highlight activites with warnings

Reviewed-By: Jeremy Clements <jeremy.clements@lexisnexisrisk.com>
Merged-by: Gavin Halliday <ghalliday@hpccsystems.com>

Author: ghalliday

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

@@ -1,17 +1,18 @@
 import * as React from "react";
 import { useConst } from "@fluentui/react-hooks";
 import { Palette } from "@hpcc-js/common";
-import { IScope } from "@hpcc-js/comms";
 import { ColumnFormat, Table } from "@hpcc-js/dgrid";
 import { formatDecimal } from "src/Utility";
+import { formatTwoDigits } from "src/Session";
 import nlsHPCC from "src/nlsHPCC";
+import { IScopeEx } from "../hooks/metrics";
 import { AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
 
 Palette.rainbow("StdDevs", ["white", "white", "#fff0f0", "#ffC0C0", "#ff8080", "#ff0000", "#ff0000"]);
 
 export interface MetricsPropertiesTablesProps {
     scopesTableColumns?: string[];
-    scopes?: IScope[];
+    scopes?: IScopeEx[];
 }
 
 export const MetricsPropertiesTables: React.FunctionComponent<MetricsPropertiesTablesProps> = ({
@@ -44,6 +45,9 @@ export const MetricsPropertiesTables: React.FunctionComponent<MetricsPropertiesT
         const props = [];
         scopes.forEach((item, idx) => {
             const scopeProps = [];
+            for (const exception of item.__exceptions ?? []) {
+                scopeProps.push([exception.Severity, exception.Message, `${formatTwoDigits(+exception.Priority / 1000)}s`, "", "", "", "", "", "", "", "", 6]);
+            }
             for (const key in item.__groupedProps) {
                 const row = item.__groupedProps[key];
                 scopeProps.push([row.Key, row.Value, row.Avg, row.Min, row.Max, row.Delta, row.StdDev === undefined ? "" : `${row.StdDev} (${formatDecimal(row.StdDevs)}σ)`, row.SkewMin, row.SkewMax, row.NodeMin, row.NodeMax, row.StdDevs]);

esp/src/src-react/hooks/metrics.ts

@@ -263,14 +263,18 @@ export interface useMetricsResult {
     refresh: () => void;
 }
 
+export interface IScopeEx extends IScope {
+    __exceptions?: WsWorkunits.ECLException[],
+}
+
 export function useWorkunitMetrics(
     wuid: string,
     scopeFilter: Partial<WsWorkunits.ScopeFilter> = scopeFilterDefault,
     nestedFilter: WsWorkunits.NestedFilter = nestedFilterDefault
 ): useMetricsResult {
 
     const [workunit, state] = useWorkunit(wuid);
-    const [data, setData] = React.useState<IScope[]>([]);
+    const [data, setData] = React.useState<IScopeEx[]>([]);
     const [columns, setColumns] = React.useState<{ [id: string]: any }>([]);
     const [activities, setActivities] = React.useState<WsWorkunits.Activity2[]>([]);
     const [properties, setProperties] = React.useState<WsWorkunits.Property2[]>([]);
@@ -281,40 +285,58 @@ export function useWorkunitMetrics(
 
     React.useEffect(() => {
         if (wuid && workunit) {
+            const fetchInfo = singletonDebounce(workunit, "fetchInfo");
             const fetchDetailsNormalized = singletonDebounce(workunit, "fetchDetailsNormalized");
             setStatus(FetchStatus.STARTED);
-            fetchDetailsNormalized({
-                ScopeFilter: scopeFilter,
-                NestedFilter: nestedFilter,
-                PropertiesToReturn: {
-                    AllScopes: true,
-                    AllAttributes: true,
-                    AllProperties: true,
-                    AllNotes: true,
-                    AllStatistics: true,
-                    AllHints: true
-                },
-                ScopeOptions: {
-                    IncludeId: true,
-                    IncludeScope: true,
-                    IncludeScopeType: true,
-                    IncludeMatchedScopesInResults: true
-                },
-                PropertyOptions: {
-                    IncludeName: true,
-                    IncludeRawValue: true,
-                    IncludeFormatted: true,
-                    IncludeMeasure: true,
-                    IncludeCreator: false,
-                    IncludeCreatorType: false
+            Promise.all([
+                fetchInfo({ IncludeExceptions: true }),
+                fetchDetailsNormalized({
+                    ScopeFilter: scopeFilter,
+                    NestedFilter: nestedFilter,
+                    PropertiesToReturn: {
+                        AllScopes: true,
+                        AllAttributes: true,
+                        AllProperties: true,
+                        AllNotes: true,
+                        AllStatistics: true,
+                        AllHints: true
+                    },
+                    ScopeOptions: {
+                        IncludeId: true,
+                        IncludeScope: true,
+                        IncludeScopeType: true,
+                        IncludeMatchedScopesInResults: true
+                    },
+                    PropertyOptions: {
+                        IncludeName: true,
+                        IncludeRawValue: true,
+                        IncludeFormatted: true,
+                        IncludeMeasure: true,
+                        IncludeCreator: false,
+                        IncludeCreatorType: false
+                    }
+                })
+            ]).then(([info, response]) => {
+                const exceptionsMap: { [scope: string]: WsWorkunits.ECLException[] } = {};
+                for (const exception of info?.Workunit?.Exceptions?.ECLException ?? []) {
+                    if (exception.Scope) {
+                        if (!exceptionsMap[exception.Scope]) {
+                            exceptionsMap[exception.Scope] = [];
+                        }
+                        exceptionsMap[exception.Scope].push(exception);
+                    }
                 }
-            }).then(response => {
-                setData(response?.data);
+                setData(response?.data.map(row => {
+                    if (exceptionsMap[row.name]) {
+                        row.__exceptions = exceptionsMap[row.name];
+                    }
+                    return row;
+                }));
                 setColumns(response?.columns);
-                setActivities(response?.meta?.Activities?.Activity || []);
-                setProperties(response?.meta?.Properties?.Property || []);
-                setMeasures(response?.meta?.Measures?.Measure || []);
-                setScopeTypes(response?.meta?.ScopeTypes?.ScopeType || []);
+                setActivities(response?.meta?.Activities?.Activity ?? []);
+                setProperties(response?.meta?.Properties?.Property ?? []);
+                setMeasures(response?.meta?.Measures?.Measure ?? []);
+                setScopeTypes(response?.meta?.ScopeTypes?.ScopeType ?? []);
             }).catch(e => {
                 logger.error(e);
             }).finally(() => {

esp/src/src-react/util/metricGraph.css

@@ -1,62 +1,81 @@
+.eclwatch_MetricGraphWidget {
+    /* fill: var(--colorNeutralBackground1); */
+    background-color: red;
+    stroke: var(--colorNeutralForeground1);
+}
+
+.eclwatch_MetricGraphWidget rect.zoomBackground {
+    fill: var(--colorNeutralBackground1);
+    stroke: none;
+}
+
+.eclwatch_MetricGraphWidget text {
+    fill: var(--colorNeutralForeground1);
+    stroke: none;
+}
+
 .eclwatch_MetricGraphWidget .cluster>polygon {
-    stroke: darkgray;
+    stroke: var(--colorPalettePlatinumForeground2);
 }
 
 .eclwatch_MetricGraphWidget .cluster.started>polygon {
-    stroke: darkorange;
+    stroke: var(--colorStatusWarningForeground1);
 }
 
 .eclwatch_MetricGraphWidget .cluster.completed>polygon {
-    stroke: darkgreen;
+    stroke: var(--colorStatusSuccessForeground1);
 }
 
 .eclwatch_MetricGraphWidget .node>path {
-    stroke: darkgray;
+    stroke: var(--colorPalettePlatinumForeground2);
 }
 
 .eclwatch_MetricGraphWidget .node>polygon {
-    stroke: darkgray;
+    stroke: var(--colorPalettePlatinumForeground2);
 }
 
 .eclwatch_MetricGraphWidget .node.started>path {
-    stroke: darkorange;
+    stroke: var(--colorStatusWarningForeground1);
 }
 
 .eclwatch_MetricGraphWidget .node.started>polygon {
-    stroke: darkorange;
+    stroke: var(--colorStatusWarningForeground1);
 }
 
 .eclwatch_MetricGraphWidget .node.completed>path {
-    stroke: darkgreen;
+    stroke: var(--colorStatusSuccessForeground1);
 }
 
 .eclwatch_MetricGraphWidget .node.completed>polygon {
-    stroke: darkgreen;
+    stroke: var(--colorStatusSuccessForeground1);
+}
+
+.eclwatch_MetricGraphWidget .node.warning>text.warning {
+    font-size: 32px;
+    fill: var(--colorStatusWarningForeground1);
+    stroke-width: 0px;
 }
 
 .eclwatch_MetricGraphWidget .edge>path {
-    stroke: darkgray;
+    stroke: var(--colorPalettePlatinumForeground2);
 }
 
 .eclwatch_MetricGraphWidget .edge>polygon {
-    stroke: darkgray;
-    fill: darkgray;
+    stroke: var(--colorPalettePlatinumForeground2);
 }
 
 .eclwatch_MetricGraphWidget .edge.started>path {
-    stroke: darkorange;
+    stroke: var(--colorStatusWarningForeground1);
 }
 
 .eclwatch_MetricGraphWidget .edge.started>polygon {
-    stroke: darkorange;
-    fill: darkorange;
+    stroke: var(--colorStatusWarningForeground1);
 }
 
 .eclwatch_MetricGraphWidget .edge.completed>path {
-    stroke: darkgreen;
+    stroke: var(--colorStatusSuccessForeground1);
 }
 
 .eclwatch_MetricGraphWidget .edge.completed>polygon {
-    stroke: darkgreen;
-    fill: darkgreen;
+    stroke: var(--colorStatusSuccessForeground1);
 }