NETOBSERV-1285 Move "query is slow" info to query summary (#438)

* query is slow alert

* ensure duration text

* fix table scroll perfs

* format above ms

Author: jpinsonneau

web/locales/en/plugin__netobserv-plugin.json

@@ -333,10 +333,15 @@
   "ms": "ms",
   "Filtered avg RTT": "Filtered avg RTT",
   "Overall avg RTT": "Overall avg RTT",
+  "Loading...": "Loading...",
   "Last refresh: {{time}}": "Last refresh: {{time}}",
+  "Query count: {{count}}": "Query count: {{count}}",
+  "Query count: {{count}}_plural": "Query count: {{count}}",
+  "Duration: {{duration}}": "Duration: {{duration}}",
   "running": "running",
   "queries": "queries",
   "query": "query",
+  "in": "in",
   "Configuration": "Configuration",
   "Sampling": "Sampling",
   "Version": "Version",

web/src/components/netflow-overview/netflow-overview.tsx

@@ -673,8 +673,6 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
   } else {
     return (
       <div
-        id="overview-container"
-        className={isDark ? 'dark' : 'light'}
         style={{ padding: `${containerPadding}px 0 ${containerPadding}px ${containerPadding}px` }}
         ref={containerRef}
       >

web/src/components/netflow-table/netflow-table.tsx

@@ -140,7 +140,7 @@ const NetflowTable: React.FC<{
   const handleScroll = React.useCallback(() => {
     const rowHeight = getRowHeight();
     const container = document.getElementById('table-container');
-    const header = container?.children[0].children[0];
+    const header = container?.children[0]?.children[0];
     if (container && header) {
       const position = container.scrollTop - header.clientHeight;
       //updates only when position moved more than one row height
@@ -257,33 +257,31 @@ const NetflowTable: React.FC<{
   }
 
   return (
-    <div id="table-container">
-      <TableComposable
-        data-test="table-composable"
-        data-test-cols-count={columns.length}
-        data-test-rows-count={flows.length}
-        aria-label="Netflow table"
-        variant="compact"
-        style={{ minWidth: `${width}em` }}
-        isStickyHeader
-      >
-        <NetflowTableHeader
-          data-test="table-header"
-          onSort={onSort}
-          sortDirection={activeSortDirection}
-          sortId={activeSortId}
-          columns={columns}
-          setColumns={setColumns}
-          columnSizes={columnSizes}
-          setColumnSizes={setColumnSizes}
-          tableWidth={width}
-          isDark={isDark}
-        />
-        <Tbody id="table-body" data-test="table-body">
-          {getBody()}
-        </Tbody>
-      </TableComposable>
-    </div>
+    <TableComposable
+      data-test="table-composable"
+      data-test-cols-count={columns.length}
+      data-test-rows-count={flows.length}
+      aria-label="Netflow table"
+      variant="compact"
+      style={{ minWidth: `${width}em` }}
+      isStickyHeader
+    >
+      <NetflowTableHeader
+        data-test="table-header"
+        onSort={onSort}
+        sortDirection={activeSortDirection}
+        sortId={activeSortId}
+        columns={columns}
+        setColumns={setColumns}
+        columnSizes={columnSizes}
+        setColumnSizes={setColumnSizes}
+        tableWidth={width}
+        isDark={isDark}
+      />
+      <Tbody id="table-body" data-test="table-body">
+        {getBody()}
+      </Tbody>
+    </TableComposable>
   );
 };
 

web/src/components/netflow-traffic.tsx

@@ -1,7 +1,5 @@
 import { isModelFeatureFlag, ModelFeatureFlag, useResolvedExtensions } from '@openshift-console/dynamic-plugin-sdk';
 import {
-  Alert,
-  AlertActionCloseButton,
   Button,
   Drawer,
   DrawerContent,
@@ -194,7 +192,6 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
     setURLParams(queryParams);
   }
 
-  const warningTimeOut = React.useRef<NodeJS.Timeout | undefined>();
   const [config, setConfig] = React.useState<Config>(defaultConfig);
   const [warningMessage, setWarningMessage] = React.useState<string | undefined>();
   const [showViewOptions, setShowViewOptions] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOW_OPTIONS_KEY, false);
@@ -217,6 +214,7 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
   const metricsRef = React.useRef(metrics);
   const [isShowQuerySummary, setShowQuerySummary] = React.useState<boolean>(false);
   const [lastRefresh, setLastRefresh] = React.useState<Date | undefined>(undefined);
+  const [lastDuration, setLastDuration] = React.useState<number | undefined>(undefined);
   const [error, setError] = React.useState<string | undefined>();
   const [size, setSize] = useLocalStorage<Size>(LOCAL_STORAGE_SIZE_KEY, 'm');
   const [isTRModalOpen, setTRModalOpen] = React.useState(false);
@@ -397,9 +395,8 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
       setFilters(f);
       setFlows([]);
       setMetrics({});
-      setWarningMessage(undefined);
     },
-    [setFilters, setFlows, setWarningMessage]
+    [setFilters, setFlows]
   );
 
   const backAndForth = filters.backAndForth;
@@ -528,7 +525,10 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
 
   const manageWarnings = React.useCallback(
     (query: Promise<unknown>) => {
-      Promise.race([query, new Promise((resolve, reject) => setTimeout(reject, 2000, 'slow'))]).then(
+      setLastRefresh(undefined);
+      setLastDuration(undefined);
+      setWarningMessage(undefined);
+      Promise.race([query, new Promise((resolve, reject) => setTimeout(reject, 4000, 'slow'))]).then(
         null,
         (reason: string) => {
           if (reason === 'slow') {
@@ -877,6 +877,8 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
         break;
     }
     if (promises) {
+      const startDate = new Date();
+      setStats(undefined);
       manageWarnings(
         promises
           .then(allStats => {
@@ -890,8 +892,10 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
             setWarningMessage(undefined);
           })
           .finally(() => {
+            const endDate = new Date();
             setLoading(false);
-            setLastRefresh(new Date());
+            setLastRefresh(endDate);
+            setLastDuration(endDate.getTime() - startDate.getTime());
           })
       );
     }
@@ -1035,15 +1039,6 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filters]);
 
-  //clear warning message after 10s
-  React.useEffect(() => {
-    if (warningTimeOut.current) {
-      clearTimeout(warningTimeOut.current);
-    }
-
-    warningTimeOut.current = setTimeout(() => setWarningMessage(undefined), 10000);
-  }, [warningMessage]);
-
   //invalidate groups if necessary, when metrics scope changed
   React.useEffect(() => {
     const groups = getAvailableGroups(metricScope as MetricScopeOptions);
@@ -1322,6 +1317,9 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
           stats={stats}
           limit={limit}
           lastRefresh={lastRefresh}
+          lastDuration={lastDuration}
+          warningMessage={warningMessage}
+          slownessReason={slownessReason()}
           range={range}
           showDNSLatency={isDNSTracking()}
           showRTTLatency={isFlowRTT()}
@@ -1445,13 +1443,23 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
 
     return (
       <Flex id="page-content-flex" direction={{ default: 'column' }}>
-        <FlexItem flex={{ default: 'flex_1' }}>{content}</FlexItem>
+        <FlexItem
+          id={`${selectedViewId}-container`}
+          flex={{ default: 'flex_1' }}
+          className={isDarkTheme ? 'dark' : 'light'}
+        >
+          {content}
+        </FlexItem>
         <FlexItem>
           {_.isEmpty(flows) ? (
             <MetricsQuerySummary
               metrics={metrics}
               stats={stats}
+              loading={loading}
               lastRefresh={lastRefresh}
+              lastDuration={lastDuration}
+              warningMessage={warningMessage}
+              slownessReason={slownessReason()}
               isShowQuerySummary={isShowQuerySummary}
               toggleQuerySummary={() => onToggleQuerySummary(!isShowQuerySummary)}
               isDark={isDarkTheme}
@@ -1460,7 +1468,11 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
             <FlowsQuerySummary
               flows={flows}
               stats={stats}
+              loading={loading}
               lastRefresh={lastRefresh}
+              lastDuration={lastDuration}
+              warningMessage={warningMessage}
+              slownessReason={slownessReason()}
               range={range}
               type={recordType}
               isShowQuerySummary={isShowQuerySummary}
@@ -1491,7 +1503,7 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
     });
   }, [isFullScreen]);
 
-  const slownessReason = React.useCallback(() => {
+  const slownessReason = React.useCallback((): string => {
     if (match === 'any' && hasNonIndexFields(filters.list)) {
       return t(
         // eslint-disable-next-line max-len
@@ -1782,16 +1794,6 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
           />
         </>
       )}
-      {!_.isEmpty(warningMessage) && (
-        <Alert
-          id="netflow-warning"
-          title={warningMessage}
-          variant="warning"
-          actionClose={<AlertActionCloseButton onClose={() => setWarningMessage(undefined)} />}
-        >
-          {slownessReason()}
-        </Alert>
-      )}
       <GuidedTourPopover id="netobserv" ref={guidedTourRef} isDark={isDarkTheme} />
     </PageSection>
   ) : null;

web/src/components/query-summary/__tests__/summary-panel.spec.tsx

@@ -7,6 +7,8 @@ import SummaryPanel, { SummaryPanelContent } from '../summary-panel';
 import { NetflowMetrics } from 'src/api/loki';
 
 describe('<SummaryPanel />', () => {
+  const now = new Date();
+
   const mocks = {
     onClose: jest.fn(),
     flows: FlowsSample,
@@ -19,7 +21,7 @@ describe('<SummaryPanel />', () => {
     appStats: undefined,
     limit: 5,
     range: 300,
-    lastRefresh: new Date(),
+    lastRefresh: now,
     id: 'summary-panel'
   };
 

web/src/components/query-summary/flows-query-summary.tsx

@@ -17,7 +17,11 @@ export const FlowsQuerySummaryContent: React.FC<{
   numQueries?: number;
   limitReached: boolean;
   range: number | TimeRange;
-  lastRefresh: Date | undefined;
+  loading?: boolean;
+  lastRefresh?: Date;
+  lastDuration?: number;
+  warningMessage?: string;
+  slownessReason?: string;
   direction: 'row' | 'column';
   className?: string;
   isShowQuerySummary?: boolean;
@@ -28,7 +32,11 @@ export const FlowsQuerySummaryContent: React.FC<{
   numQueries,
   limitReached,
   range,
+  loading,
   lastRefresh,
+  lastDuration,
+  warningMessage,
+  slownessReason,
   direction,
   className,
   isShowQuerySummary,
@@ -91,6 +99,15 @@ export const FlowsQuerySummaryContent: React.FC<{
           </Text>
         </FlexItem>
       )}
+      <StatsQuerySummary
+        detailed={direction === 'column'}
+        loading={loading}
+        lastRefresh={lastRefresh}
+        lastDuration={lastDuration}
+        numQueries={numQueries}
+        warningMessage={warningMessage}
+        slownessReason={slownessReason}
+      />
       {!_.isEmpty(flows) && (
         <FlexItem>
           <Flex direction={{ default: 'row' }}>
@@ -124,9 +141,6 @@ export const FlowsQuerySummaryContent: React.FC<{
         </FlexItem>
       )}
       {counters()}
-      {lastRefresh && (
-        <StatsQuerySummary lastRefresh={lastRefresh} numQueries={direction === 'column' ? numQueries : undefined} />
-      )}
       {direction === 'row' && toggleQuerySummary && (
         <FlexItem>
           <Text id="query-summary-toggle" component={TextVariants.a} onClick={toggleQuerySummary}>
@@ -140,13 +154,29 @@ export const FlowsQuerySummaryContent: React.FC<{
 
 export const FlowsQuerySummary: React.FC<{
   flows: Record[];
-  stats: Stats | undefined;
+  stats?: Stats;
   type: RecordType;
   range: number | TimeRange;
-  lastRefresh: Date | undefined;
+  loading?: boolean;
+  lastRefresh?: Date;
+  lastDuration?: number;
+  warningMessage?: string;
+  slownessReason?: string;
   isShowQuerySummary?: boolean;
   toggleQuerySummary?: () => void;
-}> = ({ flows, stats, type, range, lastRefresh, isShowQuerySummary, toggleQuerySummary }) => {
+}> = ({
+  flows,
+  stats,
+  type,
+  range,
+  loading,
+  lastRefresh,
+  lastDuration,
+  warningMessage,
+  slownessReason,
+  isShowQuerySummary,
+  toggleQuerySummary
+}) => {
   if (!_.isEmpty(flows) && stats) {
     return (
       <Card id="query-summary" isFlat>
@@ -157,7 +187,11 @@ export const FlowsQuerySummary: React.FC<{
           numQueries={stats.numQueries}
           limitReached={stats.limitReached}
           range={range}
+          loading={loading}
           lastRefresh={lastRefresh}
+          lastDuration={lastDuration}
+          warningMessage={warningMessage}
+          slownessReason={slownessReason}
           isShowQuerySummary={isShowQuerySummary}
           toggleQuerySummary={toggleQuerySummary}
         />