netobserv · openshift-merge-bot · Feb 1, 2024 · Jan 29, 2024
diff --git a/web/src/components/dropdowns/topology-display-dropdown.css b/web/src/components/dropdowns/topology-display-dropdown.css
@@ -12,4 +12,8 @@
 #truncate>.pf-c-dropdown__menu {
   top: 0;
   left: 100%;
+}
+
+#scope ul {
+  min-width: 105px;
 }
diff --git a/web/src/components/metrics/histogram.tsx b/web/src/components/metrics/histogram.tsx
@@ -235,7 +235,7 @@ export const Histogram: React.FC<{
   return (
     <div
       id={`chart-${id}`}
-      className={`metrics-content-div ${loading ? 'loading' : ''}`}
+      className={`metrics-content-div ${loading ? 'loading' : ''} ${isDark ? 'dark' : 'light'}`}
       ref={containerRef}
       tabIndex={0}
       onKeyDown={e => onKeyDown(e.key)}

diff --git a/web/src/components/metrics/metrics-content.css b/web/src/components/metrics/metrics-content.css
@@ -23,4 +23,8 @@
 
 .small-chart-label>tspan {
   font-size: 11px !important;
+}
+
+.metrics-content-div.dark tspan {
+  fill: #fff !important;
 }
diff --git a/web/src/components/metrics/metrics-donut.tsx b/web/src/components/metrics/metrics-donut.tsx
@@ -24,6 +24,7 @@ export type MetricsDonutProps = {
   smallerTexts?: boolean;
   showLegend?: boolean;
   animate?: boolean;
+  isDark?: boolean;
 };
 
 export const MetricsDonut: React.FC<MetricsDonutProps> = ({
@@ -40,7 +41,8 @@ export const MetricsDonut: React.FC<MetricsDonutProps> = ({
   showOutOfScope,
   smallerTexts,
   showLegend,
-  animate
+  animate,
+  isDark
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
@@ -129,7 +131,12 @@ export const MetricsDonut: React.FC<MetricsDonutProps> = ({
   }, [containerRef, dimensions]);
 
   return (
-    <div id={id} className="metrics-content-div" ref={containerRef} data-test-metrics={topKMetrics.length}>
+    <div
+      id={id}
+      className={`metrics-content-div ${isDark ? 'dark' : 'light'}`}
+      ref={containerRef}
+      data-test-metrics={topKMetrics.length}
+    >
       <ChartDonut
         themeColor={ChartThemeColor.multiUnordered}
         constrainToVisibleArea

diff --git a/web/src/components/metrics/metrics-graph-total.tsx b/web/src/components/metrics/metrics-graph-total.tsx
@@ -48,6 +48,7 @@ export type MetricsGraphWithTotalProps = {
   topAsBars?: boolean;
   showLegend?: boolean;
   animate?: boolean;
+  isDark?: boolean;
 };
 
 export const MetricsGraphWithTotal: React.FC<MetricsGraphWithTotalProps> = ({
@@ -68,7 +69,8 @@ export const MetricsGraphWithTotal: React.FC<MetricsGraphWithTotalProps> = ({
   smallerTexts,
   topAsBars,
   showLegend,
-  animate
+  animate,
+  isDark
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
@@ -135,7 +137,7 @@ export const MetricsGraphWithTotal: React.FC<MetricsGraphWithTotalProps> = ({
   return (
     <>
       <TextContent id="metrics" className="metrics-content-div">
-        <div id={`chart-${id}`} className="metrics-content-div" ref={containerRef}>
+        <div id={`chart-${id}`} className={`metrics-content-div ${isDark ? 'dark' : 'light'}`} ref={containerRef}>
           <Chart
             themeColor={ChartThemeColor.multiUnordered}
             containerComponent={

diff --git a/web/src/components/metrics/metrics-graph.tsx b/web/src/components/metrics/metrics-graph.tsx
@@ -43,6 +43,7 @@ export type MetricsGraphProps = {
   tooltipsTruncate: boolean;
   showLegend?: boolean;
   animate?: boolean;
+  isDark?: boolean;
 };
 
 export const MetricsGraph: React.FC<MetricsGraphProps> = ({
@@ -59,7 +60,8 @@ export const MetricsGraph: React.FC<MetricsGraphProps> = ({
   itemsPerRow,
   tooltipsTruncate,
   showLegend,
-  animate
+  animate,
+  isDark
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
@@ -94,7 +96,12 @@ export const MetricsGraph: React.FC<MetricsGraphProps> = ({
   }, [containerRef, dimensions]);
 
   return (
-    <div id={`chart-${id}`} className="metrics-content-div" ref={containerRef} data-test-metrics={metrics.length}>
+    <div
+      id={`chart-${id}`}
+      className={`metrics-content-div ${isDark ? 'dark' : 'light'}`}
+      ref={containerRef}
+      data-test-metrics={metrics.length}
+    >
       <Chart
         themeColor={ChartThemeColor.multiUnordered}
         containerComponent={

diff --git a/web/src/components/modals/export-modal.tsx b/web/src/components/modals/export-modal.tsx
@@ -27,7 +27,7 @@ import { formatDuration, getDateSInMiliseconds } from '../../utils/duration';
 import { Filter } from '../../model/filters';
 import { getFilterFullName } from '../filters/filters-helper';
 import './export-modal.css';
-import { LOCAL_STORAGE_EXPORT_COLS_KEY, useLocalStorage } from '../../utils/local-storage-hook';
+import { LOCAL_STORAGE_EXPORT_COLS_KEY, getLocalStorage, useLocalStorage } from '../../utils/local-storage-hook';
 
 export interface ExportModalProps {
   isModalOpen: boolean;
@@ -123,6 +123,17 @@ export const ExportModal: React.FC<ExportModalProps> = ({
     setSaveDisabled(!isExportAll && _.isEmpty(selectedColumns.filter(col => col.isSelected)));
   }, [isExportAll, selectedColumns]);
 
+  React.useEffect(() => {
+    // reload selected columns when config is loaded
+    setSelectedColumns(
+      getLocalStorage(LOCAL_STORAGE_EXPORT_COLS_KEY, columns, {
+        id: 'id',
+        criteria: 'isSelected'
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns]);
+
   return (
     <Modal
       id={id}

diff --git a/web/src/components/netflow-overview/netflow-overview.tsx b/web/src/components/netflow-overview/netflow-overview.tsx
@@ -304,6 +304,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                   smallerTexts={smallerTexts}
                   showLegend={!isFocus}
                   animate={animate}
+                  isDark={isDark}
                 />
               ) : (
                 emptyGraph()
@@ -351,6 +352,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                 tooltipsTruncate={false}
                 showLegend={!isFocus}
                 animate={animate}
+                isDark={isDark}
               />
             ) : !_.isEmpty(topKMetrics) || namedTotalMetric || namedTotalDroppedMetric ? (
               <MetricsGraphWithTotal
@@ -370,6 +372,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                 showOthers={false}
                 showLegend={!isFocus}
                 animate={animate}
+                isDark={isDark}
               />
             ) : (
               emptyGraph()
@@ -410,6 +413,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                   smallerTexts={smallerTexts}
                   showLegend={!isFocus}
                   animate={animate}
+                  isDark={isDark}
                 />
               ) : showTopOnly ? (
                 <MetricsGraph
@@ -427,6 +431,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                   tooltipsTruncate={false}
                   showLegend={!isFocus}
                   animate={animate}
+                  isDark={isDark}
                 />
               ) : namedTotalMetric ? (
                 <MetricsGraphWithTotal
@@ -444,6 +449,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                   showOthers={false}
                   showLegend={!isFocus}
                   animate={animate}
+                  isDark={isDark}
                 />
               ) : (
                 emptyGraph()
@@ -501,6 +507,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                     smallerTexts={smallerTexts}
                     showLegend={!isFocus}
                     animate={animate}
+                    isDark={isDark}
                   />
                 ) : (
                   <MetricsGraphWithTotal
@@ -520,6 +527,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                     showOthers={false}
                     showLegend={!isFocus}
                     animate={animate}
+                    isDark={isDark}
                   />
                 )
               ) : (
@@ -561,6 +569,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                     smallerTexts={smallerTexts}
                     showLegend={!isFocus}
                     animate={animate}
+                    isDark={isDark}
                   />
                 ) : (
                   <MetricsGraphWithTotal
@@ -579,6 +588,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
                     showTotalDrop={false}
                     showLegend={!isFocus}
                     animate={animate}
+                    isDark={isDark}
                   />
                 )
               ) : (

diff --git a/web/src/components/netflow-topology/element-panel-metrics.tsx b/web/src/components/netflow-topology/element-panel-metrics.tsx
@@ -20,7 +20,8 @@ export const ElementPanelMetrics: React.FC<{
   metrics: TopologyMetrics[];
   metricType: MetricType;
   truncateLength: TruncateLength;
-}> = ({ aData, bData, isGroup, metrics, metricType, truncateLength }) => {
+  isDark?: boolean;
+}> = ({ aData, bData, isGroup, metrics, metricType, truncateLength, isDark }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const [metricsRadio, setMetricsRadio] = React.useState<MetricsRadio>('both');
 
@@ -124,6 +125,7 @@ export const ElementPanelMetrics: React.FC<{
         showScatter
         tooltipsTruncate={true}
         showLegend={true}
+        isDark={isDark}
       />
     </div>
   );

diff --git a/web/src/components/netflow-topology/element-panel.tsx b/web/src/components/netflow-topology/element-panel.tsx
@@ -135,6 +135,7 @@ export const ElementPanel: React.FC<{
   setFilters: (filters: Filter[]) => void;
   truncateLength: TruncateLength;
   id?: string;
+  isDark?: boolean;
 }> = ({
   id,
   element,
@@ -145,7 +146,8 @@ export const ElementPanel: React.FC<{
   filterDefinitions,
   setFilters,
   onClose,
-  truncateLength
+  truncateLength,
+  isDark
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const [activeTab, setActiveTab] = React.useState<string>('details');
@@ -217,6 +219,7 @@ export const ElementPanel: React.FC<{
                 metrics={metrics}
                 metricType={metricType}
                 truncateLength={truncateLength}
+                isDark={isDark}
               />
             </Tab>
           )}
@@ -229,6 +232,7 @@ export const ElementPanel: React.FC<{
                 metrics={droppedMetrics}
                 metricType={metricType}
                 truncateLength={truncateLength}
+                isDark={isDark}
               />
             </Tab>
           )}

diff --git a/web/src/components/netflow-traffic.css b/web/src/components/netflow-traffic.css
@@ -69,6 +69,15 @@ span.pf-c-button__icon.pf-m-start {
     padding: 0;
 }
 
+/* fix page section color for PF4 compat in OCP 4.15+ */
+#pageSection.light {
+    background: #fff;
+}
+
+#pageSection.dark {
+    background: #1b1d21;
+}
+
 #filter-toolbar {
     padding: 0 1.5rem 0 1.5rem;
 }

diff --git a/web/src/components/netflow-traffic.tsx b/web/src/components/netflow-traffic.tsx
@@ -1084,7 +1084,7 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
   const viewTabs = () => {
     return (
       <Tabs
-        className="netflow-traffic-tabs"
+        className={`netflow-traffic-tabs ${isDarkTheme ? 'dark' : 'light'}`}
         usePageInsets
         activeKey={selectedViewId}
         onSelect={(event, eventkey) => selectView(eventkey as ViewId)}
@@ -1103,8 +1103,14 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
   };
 
   const onOverviewExport = () => {
-    const overview_flex = document.getElementById('overview-flex');
-    exportToPng('overview_page', overview_flex as HTMLElement, isDarkTheme);
+    const prevFocusState = overviewFocus;
+    setOverviewFocus(false);
+    setTimeout(() => {
+      const overview_flex = document.getElementById('overview-flex');
+      exportToPng('overview_page', overview_flex as HTMLElement, isDarkTheme, undefined, () =>
+        setOverviewFocus(prevFocusState)
+      );
+    }, 500);
   };
 
   const viewOptionsContent = () => {
@@ -1356,6 +1362,7 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
           filterDefinitions={getFilterDefs()}
           setFilters={setFiltersList}
           onClose={() => onElementSelect(undefined)}
+          isDark={isDarkTheme}
         />
       );
     } else {
@@ -1607,7 +1614,7 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, i
   const isShowViewOptions = selectedViewId === 'table' ? showViewOptions && !showHistogram : showViewOptions;
 
   return !_.isEmpty(extensions) ? (
-    <PageSection id="pageSection" className={isTab ? 'tab' : ''}>
+    <PageSection id="pageSection" className={`${isDarkTheme ? 'dark' : 'light'} ${isTab ? 'tab' : ''}`}>
       {
         //display title only if forced filters is not set
         !forcedFilters && (

diff --git a/web/src/utils/export.ts b/web/src/utils/export.ts
@@ -1,6 +1,12 @@
 import { toPng } from 'html-to-image';
 
-export const exportToPng = (name: string, element: HTMLElement | undefined, isDark?: boolean, id?: string) => {
+export const exportToPng = (
+  name: string,
+  element: HTMLElement | undefined,
+  isDark?: boolean,
+  id?: string,
+  callback?: () => void
+) => {
   if (element) {
     toPng(element, { cacheBust: true, backgroundColor: isDark ? '#0f1214' : '#f0f0f0' })
       .then(dataUrl => {
@@ -12,6 +18,9 @@ export const exportToPng = (name: string, element: HTMLElement | undefined, isDa
         }
         link.href = dataUrl;
         link.click();
+        if (callback) {
+          callback();
+        }
       })
       .catch(err => {
         console.error(err);