HPCC-32824 ECL Watch v9 show Open Telemetry ids on WU details

adds the Open Telemetry trace and span ids to the WU details page, as well as a button to easily copy these values out of the UI Signed-off-by: Jeremy Clements <[email protected]>
hpcc-systems · Oct 25, 2024 · a610226 · a610226
1 parent 415de25
commit a610226
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 9 deletions.
diff --git a/esp/src/eclwatch/img/opentelemetry-icon-color.svg b/esp/src/eclwatch/img/opentelemetry-icon-color.svg
diff --git a/esp/src/src-react/components/Variables.tsx b/esp/src/src-react/components/Variables.tsx
@@ -2,24 +2,25 @@ import * as React from "react";
 import { CommandBar, ContextualMenuItemType, ICommandBarItemProps } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
-import { useWorkunitVariables } from "../hooks/workunit";
+import { Variable } from "../hooks/workunit";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
 interface VariablesProps {
-    wuid: string;
+    variables: Variable[];
+    refreshData: () => void;
     sort?: QuerySortItem;
 }
 
 const defaultSort = { attribute: "Wuid", descending: true };
 
 export const Variables: React.FunctionComponent<VariablesProps> = ({
-    wuid,
+    variables,
+    refreshData,
     sort = defaultSort
 }) => {
 
-    const [variables, , , refreshData] = useWorkunitVariables(wuid);
     const [data, setData] = React.useState<any[]>([]);
     const {
         selection, setSelection,

diff --git a/esp/src/src-react/components/WorkunitDetails.tsx b/esp/src/src-react/components/WorkunitDetails.tsx
@@ -7,7 +7,7 @@ import nlsHPCC from "src/nlsHPCC";
 import { hasLogAccess } from "src/ESPLog";
 import { wuidToDate, wuidToTime } from "src/Utility";
 import { emptyFilter, formatQuery } from "src/ESPWorkunit";
-import { useWorkunit } from "../hooks/workunit";
+import { Variable, useWorkunit, useWorkunitVariables } from "../hooks/workunit";
 import { useDeepEffect } from "../hooks/deepHooks";
 import { DojoAdapter } from "../layouts/DojoAdapter";
 import { parseQuery, pushUrl } from "../util/history";
@@ -52,6 +52,8 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
 }) => {
 
     const [workunit] = useWorkunit(wuid, true);
+    const [variables, , , refreshVariables] = useWorkunitVariables(wuid);
+    const [otTraceParent, setOtTraceParent] = React.useState("");
     const [logCount, setLogCount] = React.useState<number | string>("*");
     const [logsDisabled, setLogsDisabled] = React.useState(true);
     const [_nextPrev, setNextPrev] = useNextPrev();
@@ -64,6 +66,11 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
         return parseQuery("?" + parentUrlParts[1]);
     }, [parentUrl]);
 
+    React.useEffect(() => {
+        const traceInfo: Variable = variables.filter(v => v.Name === "ottraceparent")[0];
+        setOtTraceParent(traceInfo?.Value ?? "");
+    }, [variables]);
+
     const nextWuid = React.useCallback((wuids: WsWorkunits.ECLWorkunit[]) => {
         let found = false;
         for (const wu of wuids) {
@@ -177,10 +184,10 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
         <div style={{ height: "100%" }}>
             <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
             <DelayLoadedPanel visible={tab === "summary"} size={size}>
-                <WorkunitSummary wuid={wuid} fullscreen={queryParams.summary?.fullscreen !== undefined} />
+                <WorkunitSummary wuid={wuid} otTraceParent={otTraceParent} fullscreen={queryParams.summary?.fullscreen !== undefined} />
             </DelayLoadedPanel>
             <DelayLoadedPanel visible={tab === "variables"} size={size}>
-                <Variables wuid={wuid} />
+                <Variables variables={variables} refreshData={refreshVariables} />
             </DelayLoadedPanel>
             <DelayLoadedPanel visible={tab === "outputs"} size={size}>
                 {state?.outputs ?

diff --git a/esp/src/src-react/components/WorkunitSummary.tsx b/esp/src/src-react/components/WorkunitSummary.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, MessageBar, MessageBarType, ScrollablePane, ScrollbarVisibility, Sticky, StickyPositionType } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, mergeStyles, MessageBar, MessageBarType, registerIcons, ScrollablePane, ScrollbarVisibility, Sticky, StickyPositionType } from "@fluentui/react";
 import { scopedLogger } from "@hpcc-js/util";
 import nlsHPCC from "src/nlsHPCC";
 import { WUStatus } from "src/react/index";
@@ -20,25 +20,58 @@ import { WorkunitPersona } from "./controls/StateIcon";
 
 const logger = scopedLogger("../components/WorkunitDetails.tsx");
 
+registerIcons({
+    icons: {
+        "open-telemetry": (
+            // .../eclwatch/img/opentelemetry-icon-color.svg
+            <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-12.70 -12.70 1024.40 1024.40"><path fill="#f5a800" d="M528.7 545.9c-42 42-42 110.1 0 152.1s110.1 42 152.1 0 42-110.1 0-152.1-110.1-42-152.1 0zm113.7 113.8c-20.8 20.8-54.5 20.8-75.3 0-20.8-20.8-20.8-54.5 0-75.3 20.8-20.8 54.5-20.8 75.3 0 20.8 20.7 20.8 54.5 0 75.3zm36.6-643l-65.9 65.9c-12.9 12.9-12.9 34.1 0 47l257.3 257.3c12.9 12.9 34.1 12.9 47 0l65.9-65.9c12.9-12.9 12.9-34.1 0-47L725.9 16.7c-12.9-12.9-34-12.9-46.9 0zM217.3 858.8c11.7-11.7 11.7-30.8 0-42.5l-33.5-33.5c-11.7-11.7-30.8-11.7-42.5 0L72.1 852l-.1.1-19-19c-10.5-10.5-27.6-10.5-38 0-10.5 10.5-10.5 27.6 0 38l114 114c10.5 10.5 27.6 10.5 38 0s10.5-27.6 0-38l-19-19 .1-.1 69.2-69.2z" /><path fill="#425cc7" d="M565.9 205.9L419.5 352.3c-13 13-13 34.4 0 47.4l90.4 90.4c63.9-46 153.5-40.3 211 17.2l73.2-73.2c13-13 13-34.4 0-47.4L613.3 205.9c-13-13.1-34.4-13.1-47.4 0zm-94 322.3l-53.4-53.4c-12.5-12.5-33-12.5-45.5 0L184.7 663.2c-12.5 12.5-12.5 33 0 45.5l106.7 106.7c12.5 12.5 33 12.5 45.5 0L458 694.1c-25.6-52.9-21-116.8 13.9-165.9z" /></svg>
+        )
+    }
+});
+
+const otIconStyle = mergeStyles({
+    width: 16
+});
+
+interface OtTraceSchema {
+    traceId: string;
+    spanId: string;
+}
+
+const parseOtTraceParent = (parent: string = ""): OtTraceSchema => {
+    const retVal = { traceId: "", spanId: "" };
+    const regex = /00\-([0-9a-z]+)\-([0-9a-z]+)\-01/;
+    const matches = parent.match(regex);
+    if (matches) {
+        retVal.traceId = matches[1] ?? "";
+        retVal.spanId = matches[2] ?? "";
+    }
+    return retVal;
+};
+
 interface MessageBarContent {
     type: MessageBarType;
     message: string;
 }
 
 interface WorkunitSummaryProps {
     wuid: string;
+    otTraceParent?: string;
     fullscreen?: boolean;
 }
 
 export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
     wuid,
+    otTraceParent = "",
     fullscreen = false
 }) => {
 
     const [workunit, , , , refresh] = useWorkunit(wuid, true);
     const [exceptions, , refreshSavings] = useWorkunitExceptions(wuid);
     const [jobname, setJobname] = React.useState("");
     const [description, setDescription] = React.useState("");
+    const [otTraceId, setOtTraceId] = React.useState("");
+    const [otSpanId, setOtSpanId] = React.useState("");
     const [_protected, setProtected] = React.useState(false);
     const [showPublishForm, setShowPublishForm] = React.useState(false);
     const [showZapForm, setShowZapForm] = React.useState(false);
@@ -60,6 +93,12 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
         setProtected(workunit?.Protected);
     }, [workunit?.Description, workunit?.Jobname, workunit?.Protected]);
 
+    React.useEffect(() => {
+        const otTrace = parseOtTraceParent(otTraceParent);
+        setOtTraceId(otTrace.traceId);
+        setOtSpanId(otTrace.spanId);
+    }, [otTraceParent]);
+
     const canSave = workunit && (
         jobname !== workunit.Jobname ||
         description !== workunit.Description ||
@@ -98,6 +137,13 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
                 navigator?.clipboard?.writeText(wuid);
             }
         },
+        {
+            key: "copyOtel", text: nlsHPCC.CopyOpenTelemetry, iconProps: { iconName: "open-telemetry", className: otIconStyle },
+            disabled: otTraceParent === "",
+            onClick: () => {
+                navigator?.clipboard?.writeText(JSON.stringify(parseOtTraceParent(otTraceParent)));
+            }
+        },
         { key: "divider_1", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
         {
             key: "save", text: nlsHPCC.Save, iconProps: { iconName: "Save" }, disabled: !canSave,
@@ -172,7 +218,7 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
             key: "slaveLogs", text: nlsHPCC.SlaveLogs, disabled: !workunit?.ThorLogList,
             onClick: () => setShowThorSlaveLogs(true)
         },
-    ], [_protected, canDelete, canDeschedule, canReschedule, canSave, description, jobname, refresh, refreshSavings, setShowDeleteConfirm, showMessageBar, workunit, wuid]);
+    ], [_protected, canDelete, canDeschedule, canReschedule, canSave, description, jobname, otTraceParent, refresh, refreshSavings, setShowDeleteConfirm, showMessageBar, workunit, wuid]);
 
     const rightButtons = React.useMemo((): ICommandBarItemProps[] => [
         {
@@ -222,6 +268,8 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
                             </Sticky>
                             <TableGroup fields={{
                                 "wuid": { label: nlsHPCC.WUID, type: "string", value: wuid, readonly: true },
+                                "otTraceId": { label: nlsHPCC.Trace, type: "string", value: otTraceId, readonly: true },
+                                "otSpanId": { label: nlsHPCC.Span, type: "string", value: otSpanId, readonly: true },
                                 "action": { label: nlsHPCC.Action, type: "string", value: workunit?.ActionEx, readonly: true },
                                 "state": { label: nlsHPCC.State, type: "string", value: workunit?.State + (workunit?.StateEx ? ` (${workunit.StateEx})` : ""), readonly: true },
                                 "owner": { label: nlsHPCC.Owner, type: "string", value: workunit?.Owner, readonly: true },

diff --git a/esp/src/src/nls/hpcc.ts b/esp/src/src/nls/hpcc.ts
@@ -151,6 +151,7 @@ export = {
         CookiesNoticeLinkText: "Our Cookie Notice",
         CookiesAcceptButtonText: "Allow Cookies",
         Copy: "Copy",
+        CopyOpenTelemetry: "Copy Open Telemetry",
         CopyToClipboard: "Copy to clipboard",
         CopyURLToClipboard: "Copy URL to clipboard",
         CopyWUID: "Copy WUID",
@@ -896,6 +897,7 @@ export = {
         SourceLogicalFile: "Source Logical Name",
         SourcePath: "Source Path (Wildcard Enabled)",
         SourceProcess: "Source Process",
+        Span: "Span",
         SparkThor: "SparkThor",
         Spill: "Spill",
         SplitPrefix: "Split Prefix",
@@ -1060,6 +1062,7 @@ export = {
         TotalSize: "Total Size",
         TotalClusterTime: "Total Cluster Time",
         ToTime: "To Time",
+        Trace: "Trace",
         TransferRate: "Transfer Rate",
         TransferRateAvg: "Transfer Rate (Avg)",
         TransitionGuide: "Transition Guide",