HPCC-32861 ECL Watch v9 WU logs tab tooltip

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

@@ -112,7 +112,7 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
 
     const now = React.useMemo(() => new Date(), []);
 
-    const { columns: logColumns } = useLogAccessInfo();
+    const { logsColumns: logColumns } = useLogAccessInfo();
 
     //  Grid ---
     const columns = React.useMemo((): FluentColumns => {

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

@@ -2,11 +2,11 @@ import * as React from "react";
 import { IconButton, IContextualMenuItem, INavLink, INavLinkGroup, Link, mergeStyleSets, Nav, Stack } from "@fluentui/react";
 import { useConst } from "@fluentui/react-hooks";
 import nlsHPCC from "src/nlsHPCC";
-import { hasLogAccess } from "src/ESPLog";
 import { containerized, bare_metal } from "src/BuildInfo";
 import { navCategory } from "../util/history";
 import { MainNav, routes } from "../routes";
 import { useFavorite, useFavorites, useHistory } from "../hooks/favorite";
+import { useLogAccessInfo } from "../hooks/platform";
 import { useSessionStore } from "../hooks/store";
 import { useUserTheme } from "../hooks/theme";
 import { useMyAccount } from "../hooks/user";
@@ -295,12 +295,7 @@ export const SubNavigation: React.FunctionComponent<SubNavigationProps> = ({
         }
     }), [theme]);
 
-    const [logsDisabled, setLogsDisabled] = React.useState(true);
-    React.useEffect(() => {
-        hasLogAccess().then(response => {
-            setLogsDisabled(!response);
-        });
-    }, []);
+    const { logsEnabled, logsStatusMessage } = useLogAccessInfo();
     const linkStyle = React.useCallback((disabled) => {
         return disabled ? {
             background: themeV9.colorNeutralBackgroundDisabled,
@@ -326,9 +321,10 @@ export const SubNavigation: React.FunctionComponent<SubNavigationProps> = ({
                 <Stack horizontal>
                     <Stack.Item grow={0} className={navStyles.wrapper}>
                         {subMenuItems[mainNav]?.map((row, idx) => {
-                            const linkDisabled = (row.itemKey === "/topology/logs" && logsDisabled) || (row.itemKey.indexOf("security") > -1 && !isAdmin);
+                            const linkDisabled = (row.itemKey === "/topology/logs" && !logsEnabled) || (row.itemKey.indexOf("security") > -1 && !isAdmin);
                             return <Link
                                 disabled={linkDisabled}
+                                title={row.itemKey === "/topology/logs" && !logsEnabled ? logsStatusMessage : ""}
                                 key={`MenuLink_${idx}`}
                                 href={`#${row.itemKey}`}
                                 className={[

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

@@ -4,11 +4,10 @@ import { WsWorkunits, WorkunitsService } from "@hpcc-js/comms";
 import { scopedLogger } from "@hpcc-js/util";
 import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
-import { hasLogAccess } from "src/ESPLog";
 import { wuidToDate, wuidToTime } from "src/Utility";
 import { emptyFilter, formatQuery } from "src/ESPWorkunit";
+import { useLogAccessInfo } from "../hooks/platform";
 import { Variable, useWorkunit, useWorkunitVariables } from "../hooks/workunit";
-import { useDeepEffect } from "../hooks/deepHooks";
 import { DojoAdapter } from "../layouts/DojoAdapter";
 import { FullscreenFrame, FullscreenStack } from "../layouts/Fullscreen";
 import { parseQuery, pushUrl, updateFullscreen } from "../util/history";
@@ -58,7 +57,7 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
     const [variables, , , refreshVariables] = useWorkunitVariables(wuid);
     const [otTraceParent, setOtTraceParent] = React.useState("");
     const [logCount, setLogCount] = React.useState<number | string>("*");
-    const [logsDisabled, setLogsDisabled] = React.useState(true);
+    const { logsEnabled, logsStatusMessage } = useLogAccessInfo();
     const [_nextPrev, setNextPrev] = useNextPrev();
 
     const query = React.useMemo(() => {
@@ -121,13 +120,6 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
         };
     }, [nextWuid, query, setNextPrev, wuid]);
 
-    useDeepEffect(() => {
-        hasLogAccess().then(response => {
-            setLogsDisabled(!response);
-            return response;
-        });
-    }, [wuid], [queryParams]);
-
     const onTabSelect = React.useCallback((tab: TabInfo) => {
         pushUrl(tab.__state ?? `${parentUrl}/${wuid}/${tab.id}`);
         updateFullscreen(fullscreen);
@@ -174,15 +166,16 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
             id: "logs",
             label: nlsHPCC.Logs,
             count: logCount,
-            disabled: logsDisabled
+            tooltipText: !logsEnabled ? (logsStatusMessage || nlsHPCC.LogsDisabled) : null,
+            disabled: !logsEnabled
         }, {
             id: "eclsummary",
             label: nlsHPCC.ECL
         }, {
             id: "xml",
             label: nlsHPCC.XML
         }];
-    }, [logCount, logsDisabled, workunit?.ApplicationValueCount, workunit?.DebugValueCount, workunit?.GraphCount, workunit?.HelpersCount, workunit?.ResourceURLCount, workunit?.ResultCount, workunit?.SourceFileCount, workunit?.VariableCount, workunit?.WorkflowCount, wuid]);
+    }, [logCount, logsEnabled, logsStatusMessage, workunit?.ApplicationValueCount, workunit?.DebugValueCount, workunit?.GraphCount, workunit?.HelpersCount, workunit?.ResourceURLCount, workunit?.ResultCount, workunit?.SourceFileCount, workunit?.VariableCount, workunit?.WorkflowCount, wuid]);
 
     return <FullscreenFrame fullscreen={fullscreen}>
         <SizeMe monitorHeight>{({ size }) =>

esp/src/src-react/components/controls/TabbedPanes/OverflowTabList.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Overflow, OverflowItem, SelectTabData, SelectTabEvent, Tab, TabList } from "@fluentui/react-components";
+import { Overflow, OverflowItem, SelectTabData, SelectTabEvent, Tab, TabList, Tooltip } from "@fluentui/react-components";
 import { Count } from "./Count";
 import { TabInfo } from "./TabInfo";
 import { OverflowMenu } from "../OverflowMenu";
@@ -28,7 +28,9 @@ export const OverflowTabList: React.FunctionComponent<OverflowTabListProps> = ({
                 tab.__state = state;
             }
             return <OverflowItem key={tab.id} id={tab.id} priority={tab.id === selected ? 2 : 1}>
-                <Tab value={tab.id} icon={tab.icon} disabled={tab.disabled}>{tab.label}<Count value={tab.count} /></Tab>
+                <Tooltip content={tab.tooltipText || tab.label} relationship="label">
+                    <Tab value={tab.id} icon={tab.icon} disabled={tab.disabled}>{tab.label}<Count value={tab.count} /></Tab>
+                </Tooltip>
             </OverflowItem>;
         }), tabsIndex];
     }, [selected, state, tabs]);

esp/src/src-react/components/controls/TabbedPanes/TabInfo.ts

@@ -6,5 +6,6 @@ export interface TabInfo {
     label: string;
     count?: string | number;
     disabled?: boolean;
+    tooltipText?: string;
     __state?: any;
 }

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

@@ -3,6 +3,7 @@ import { Octokit } from "octokit";
 import { useConst } from "@fluentui/react-hooks";
 import { scopedLogger } from "@hpcc-js/util";
 import { LogaccessService, Topology, WsLogaccess, WsTopology, WorkunitsServiceEx } from "@hpcc-js/comms";
+import nlsHPCC from "src/nlsHPCC";
 import { getBuildInfo, BuildInfo, fetchModernMode } from "src/Session";
 import { cmake_build_type, containerized, ModernMode } from "src/BuildInfo";
 import { sessionKeyValStore, userKeyValStore } from "src/KeyValStore";
@@ -209,19 +210,34 @@ export function useModernMode(): {
     return { modernMode, setModernMode };
 }
 
-export function useLogAccessInfo(): {
-    managerType: string;
-    columns: WsLogaccess.Column[]
-} {
-    const [managerType, setManagerType] = React.useState("");
-    const [columns, setColumns] = React.useState<WsLogaccess.Column[]>();
+interface LogAccessInfo {
+    logsEnabled: boolean;
+    logsManagerType: string;
+    logsColumns: WsLogaccess.Column[];
+    logsStatusMessage: string;
+}
+
+export function useLogAccessInfo(): LogAccessInfo {
+    const [logsEnabled, setLogsEnabled] = React.useState(false);
+    const [logsManagerType, setLogsManagerType] = React.useState("");
+    const [logsColumns, setLogsColumns] = React.useState<WsLogaccess.Column[]>();
+    const [logsStatusMessage, setLogsStatusMessage] = React.useState("");
 
     React.useEffect(() => {
         service.GetLogAccessInfo({}).then(response => {
-            setManagerType(response.RemoteLogManagerType ?? "");
-            setColumns(response?.Columns?.Column);
+            if (response.hasOwnProperty("Exceptions")) {
+                setLogsStatusMessage(response["Exceptions"]?.Exception[0]?.Message ?? nlsHPCC.LogAccess_GenericException);
+            } else {
+                if (response.RemoteLogManagerType === null) {
+                    setLogsStatusMessage(nlsHPCC.LogAccess_LoggingNotConfigured);
+                } else {
+                    setLogsEnabled(true);
+                    setLogsManagerType(response.RemoteLogManagerType);
+                    setLogsColumns(response?.Columns?.Column);
+                }
+            }
         });
     }, []);
 
-    return { managerType, columns };
+    return { logsEnabled, logsManagerType, logsColumns, logsStatusMessage };
 }

esp/src/src/nls/hpcc.ts

@@ -496,6 +496,8 @@ export = {
         Location: "Location",
         Lock: "Lock",
         LogAccessType: "Log Access Type",
+        LogAccess_GenericException: "ws_logaccess::GetLogAccessInfo, an exception has occurred.",
+        LogAccess_LoggingNotConfigured: "A logging engine has not been configured.",
         LogDirectory: "Log Directory",
         LogEventType: "Log Event Type",
         LogFile: "Log File",
@@ -529,6 +531,7 @@ export = {
         Login: "Login",
         Logout: "Log Out",
         Logs: "Logs",
+        LogsDisabled: "Logs Disabled",
         LogVisualization: "Log Visualization",
         LogVisualizationUnconfigured: "Log Visualization is not configured, please check your configuration manager settings.",
         log_analysis_1: "log_analysis_1*",