From e900f8f39645a46ae70567d09f8ef1a57da0502c Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Mon, 3 Apr 2023 12:43:00 +0200 Subject: [PATCH 1/2] Hide Trace button in Recent activity if Jaeger is not enabled --- .storybook/preview-body.html | 2 +- .../RecentActivityTable/index.tsx | 20 ++++++++++++------- src/globals.d.ts | 1 + 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index b2d207e8b..013c9defe 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -3,10 +3,10 @@ window.theme; window.mainFont; window.codeFont; + window.isJaegerEnabled; window.recentActivityRefreshInterval; window.recentActivityExpirationLimit; window.recentActivityDocumentationURL; window.wizardSkipInstallationStep; window.assetsRefreshInterval; - window.insightsRefreshInterval; diff --git a/src/components/RecentActivity/RecentActivityTable/index.tsx b/src/components/RecentActivity/RecentActivityTable/index.tsx index 3b16d4618..187dbd31d 100644 --- a/src/components/RecentActivity/RecentActivityTable/index.tsx +++ b/src/components/RecentActivity/RecentActivityTable/index.tsx @@ -12,16 +12,18 @@ import { Button } from "../../common/Button"; import { BottleneckIcon } from "../../common/icons/BottleneckIcon"; import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; import { MeterHighIcon } from "../../common/icons/MeterHighIcon"; +import { SQLDatabaseIcon } from "../../common/icons/SQLDatabaseIcon"; import { ScalesIcon } from "../../common/icons/ScalesIcon"; import { SnailIcon } from "../../common/icons/SnailIcon"; import { SpotIcon } from "../../common/icons/SpotIcon"; -import { SQLDatabaseIcon } from "../../common/icons/SQLDatabaseIcon"; import { ViewMode } from "../EnvironmentPanel/types"; import { ActivityEntry, EntrySpan, SlimInsight } from "../types"; import { SpanLink } from "./SpanLink"; import * as s from "./styles"; import { INSIGHT_TYPES, RecentActivityTableProps } from "./types"; +const isJaegerEnabled = window.isJaegerEnabled === true; + const getInsightInfo = ( type: string, theme: DefaultTheme @@ -201,11 +203,15 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => { header: "Insights", cell: (info) => renderInsights(info.getValue()) }), - columnHelper.accessor((row) => row, { - id: "latestTraceId", - header: "", - cell: (info) => renderTraceButton(info.getValue()) - }) + ...(isJaegerEnabled + ? [ + columnHelper.accessor((row) => row, { + id: "latestTraceId", + header: "", + cell: (info) => renderTraceButton(info.getValue()) + }) + ] + : []) ]; const table = useReactTable({ @@ -259,7 +265,7 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => { {renderSpanLinks(entry)} {renderDuration(entry.latestTraceDuration, props.viewMode)} {renderInsights(entry.slimAggregatedInsights)} - {renderTraceButton(entry)} + {isJaegerEnabled && renderTraceButton(entry)} ))} diff --git a/src/globals.d.ts b/src/globals.d.ts index 757391abb..e87c8fcc6 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -24,6 +24,7 @@ declare global { environment?: unknown; mainFont?: unknown; codeFont?: unknown; + isJaegerEnabled?: unknown; recentActivityRefreshInterval?: unknown; recentActivityExpirationLimit?: unknown; recentActivityDocumentationURL?: unknown; From f463430f1917b394b64e36612a0606cc58fb314b Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Mon, 3 Apr 2023 13:19:10 +0200 Subject: [PATCH 2/2] Add action to dynamically toggle if Jaeger is enabled or not --- .../RecentActivityTable/index.tsx | 6 ++-- .../RecentActivityTable/types.ts | 1 + src/components/RecentActivity/index.tsx | 28 +++++++++++++++++-- src/components/RecentActivity/types.ts | 4 +++ 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/components/RecentActivity/RecentActivityTable/index.tsx b/src/components/RecentActivity/RecentActivityTable/index.tsx index 187dbd31d..abb9118ed 100644 --- a/src/components/RecentActivity/RecentActivityTable/index.tsx +++ b/src/components/RecentActivity/RecentActivityTable/index.tsx @@ -22,8 +22,6 @@ import { SpanLink } from "./SpanLink"; import * as s from "./styles"; import { INSIGHT_TYPES, RecentActivityTableProps } from "./types"; -const isJaegerEnabled = window.isJaegerEnabled === true; - const getInsightInfo = ( type: string, theme: DefaultTheme @@ -203,7 +201,7 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => { header: "Insights", cell: (info) => renderInsights(info.getValue()) }), - ...(isJaegerEnabled + ...(props.isTraceButtonVisible ? [ columnHelper.accessor((row) => row, { id: "latestTraceId", @@ -265,7 +263,7 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => { {renderSpanLinks(entry)} {renderDuration(entry.latestTraceDuration, props.viewMode)} {renderInsights(entry.slimAggregatedInsights)} - {isJaegerEnabled && renderTraceButton(entry)} + {props.isTraceButtonVisible && renderTraceButton(entry)} ))} diff --git a/src/components/RecentActivity/RecentActivityTable/types.ts b/src/components/RecentActivity/RecentActivityTable/types.ts index 03fac014f..4e1f21bdd 100644 --- a/src/components/RecentActivity/RecentActivityTable/types.ts +++ b/src/components/RecentActivity/RecentActivityTable/types.ts @@ -6,6 +6,7 @@ export interface RecentActivityTableProps { onSpanLinkClick: (span: EntrySpan, environment: string) => void; onTraceButtonClick: (traceId: string, span: EntrySpan) => void; viewMode: ViewMode; + isTraceButtonVisible: boolean; } export enum INSIGHT_TYPES { diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index e50aae49c..bdff8afe1 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -7,9 +7,14 @@ import { CursorFollower } from "../common/CursorFollower"; import { DigmaLogoFlatIcon } from "../common/icons/DigmaLogoFlatIcon"; import { EnvironmentPanel } from "./EnvironmentPanel"; import { ViewMode } from "./EnvironmentPanel/types"; -import { isRecent, RecentActivityTable } from "./RecentActivityTable"; +import { RecentActivityTable, isRecent } from "./RecentActivityTable"; import * as s from "./styles"; -import { EntrySpan, RecentActivityData, RecentActivityProps } from "./types"; +import { + EntrySpan, + RecentActivityData, + RecentActivityProps, + SetIsJaegerData +} from "./types"; const documentationURL = typeof window.recentActivityDocumentationURL === "string" @@ -27,7 +32,8 @@ const actions = getActions(ACTION_PREFIX, { getData: "GET_DATA", setData: "SET_DATA", goToSpan: "GO_TO_SPAN", - goToTrace: "GO_TO_TRACE" + goToTrace: "GO_TO_TRACE", + setIsJaegerEnabled: "SET_IS_JAEGER_ENABLED" }); const renderNoData = () => { @@ -61,6 +67,9 @@ export const RecentActivity = (props: RecentActivityProps) => { const [data, setData] = useState(); const previousSelectedEnvironment = usePrevious(selectedEnvironment); const [viewMode, setViewMode] = useState("table"); + const [isJaegerEnabled, setIsJaegerEnabled] = useState( + window.isJaegerEnabled === true + ); useEffect(() => { window.sendMessageToDigma({ @@ -76,7 +85,15 @@ export const RecentActivity = (props: RecentActivityProps) => { setData(data as RecentActivityData); }; + const handleSetIsJaegerEnabledData = (data: unknown) => { + setIsJaegerEnabled((data as SetIsJaegerData).isJaegerEnabled); + }; + dispatcher.addActionListener(actions.setData, handleRecentActivityData); + dispatcher.addActionListener( + actions.setIsJaegerEnabled, + handleSetIsJaegerEnabledData + ); return () => { clearInterval(refreshInterval); @@ -85,6 +102,10 @@ export const RecentActivity = (props: RecentActivityProps) => { actions.setData, handleRecentActivityData ); + dispatcher.removeActionListener( + actions.setIsJaegerEnabled, + handleSetIsJaegerEnabledData + ); }; }, []); @@ -170,6 +191,7 @@ export const RecentActivity = (props: RecentActivityProps) => { data={environmentActivities[selectedEnvironment]} onSpanLinkClick={handleSpanLinkClick} onTraceButtonClick={handleTraceButtonClick} + isTraceButtonVisible={isJaegerEnabled} /> )} diff --git a/src/components/RecentActivity/types.ts b/src/components/RecentActivity/types.ts index b1bac30ed..516173a73 100644 --- a/src/components/RecentActivity/types.ts +++ b/src/components/RecentActivity/types.ts @@ -32,3 +32,7 @@ export interface RecentActivityData { export interface RecentActivityProps { data?: RecentActivityData; } + +export interface SetIsJaegerData { + isJaegerEnabled: boolean; +}