Skip to content

Commit e67dc95

Browse files
jpinsonneaujpinsonneau
authored
polishing & fixes (#463)
1 parent 320fbd3 commit e67dc95

File tree

13 files changed

+91
-15
lines changed

13 files changed

+91
-15
lines changed

‎web/src/components/dropdowns/topology-display-dropdown.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,8 @@
1212
#truncate>.pf-c-dropdown__menu {
1313
top: 0;
1414
left: 100%;
15+
}
16+
17+
#scope ul {
18+
min-width: 105px;
1519
}

‎web/src/components/metrics/histogram.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ export const Histogram: React.FC<{
235235
return (
236236
<div
237237
id={`chart-${id}`}
238-
className={`metrics-content-div ${loading ? 'loading' : ''}`}
238+
className={`metrics-content-div ${loading ? 'loading' : ''} ${isDark ? 'dark' : 'light'}`}
239239
ref={containerRef}
240240
tabIndex={0}
241241
onKeyDown={e => onKeyDown(e.key)}

‎web/src/components/metrics/metrics-content.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,8 @@
2323

2424
.small-chart-label>tspan {
2525
font-size: 11px !important;
26+
}
27+
28+
.metrics-content-div.dark tspan {
29+
fill: #fff !important;
2630
}

‎web/src/components/metrics/metrics-donut.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export type MetricsDonutProps = {
2424
smallerTexts?: boolean;
2525
showLegend?: boolean;
2626
animate?: boolean;
27+
isDark?: boolean;
2728
};
2829

2930
export const MetricsDonut: React.FC<MetricsDonutProps> = ({
@@ -40,7 +41,8 @@ export const MetricsDonut: React.FC<MetricsDonutProps> = ({
4041
showOutOfScope,
4142
smallerTexts,
4243
showLegend,
43-
animate
44+
animate,
45+
isDark
4446
}) => {
4547
const { t } = useTranslation('plugin__netobserv-plugin');
4648

@@ -129,7 +131,12 @@ export const MetricsDonut: React.FC<MetricsDonutProps> = ({
129131
}, [containerRef, dimensions]);
130132

131133
return (
132-
<div id={id} className="metrics-content-div" ref={containerRef} data-test-metrics={topKMetrics.length}>
134+
<div
135+
id={id}
136+
className={`metrics-content-div ${isDark ? 'dark' : 'light'}`}
137+
ref={containerRef}
138+
data-test-metrics={topKMetrics.length}
139+
>
133140
<ChartDonut
134141
themeColor={ChartThemeColor.multiUnordered}
135142
constrainToVisibleArea

‎web/src/components/metrics/metrics-graph-total.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export type MetricsGraphWithTotalProps = {
4848
topAsBars?: boolean;
4949
showLegend?: boolean;
5050
animate?: boolean;
51+
isDark?: boolean;
5152
};
5253

5354
export const MetricsGraphWithTotal: React.FC<MetricsGraphWithTotalProps> = ({
@@ -68,7 +69,8 @@ export const MetricsGraphWithTotal: React.FC<MetricsGraphWithTotalProps> = ({
6869
smallerTexts,
6970
topAsBars,
7071
showLegend,
71-
animate
72+
animate,
73+
isDark
7274
}) => {
7375
const { t } = useTranslation('plugin__netobserv-plugin');
7476

@@ -135,7 +137,7 @@ export const MetricsGraphWithTotal: React.FC<MetricsGraphWithTotalProps> = ({
135137
return (
136138
<>
137139
<TextContent id="metrics" className="metrics-content-div">
138-
<div id={`chart-${id}`} className="metrics-content-div" ref={containerRef}>
140+
<div id={`chart-${id}`} className={`metrics-content-div ${isDark ? 'dark' : 'light'}`} ref={containerRef}>
139141
<Chart
140142
themeColor={ChartThemeColor.multiUnordered}
141143
containerComponent={

‎web/src/components/metrics/metrics-graph.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export type MetricsGraphProps = {
4343
tooltipsTruncate: boolean;
4444
showLegend?: boolean;
4545
animate?: boolean;
46+
isDark?: boolean;
4647
};
4748

4849
export const MetricsGraph: React.FC<MetricsGraphProps> = ({
@@ -59,7 +60,8 @@ export const MetricsGraph: React.FC<MetricsGraphProps> = ({
5960
itemsPerRow,
6061
tooltipsTruncate,
6162
showLegend,
62-
animate
63+
animate,
64+
isDark
6365
}) => {
6466
const { t } = useTranslation('plugin__netobserv-plugin');
6567

@@ -94,7 +96,12 @@ export const MetricsGraph: React.FC<MetricsGraphProps> = ({
9496
}, [containerRef, dimensions]);
9597

9698
return (
97-
<div id={`chart-${id}`} className="metrics-content-div" ref={containerRef} data-test-metrics={metrics.length}>
99+
<div
100+
id={`chart-${id}`}
101+
className={`metrics-content-div ${isDark ? 'dark' : 'light'}`}
102+
ref={containerRef}
103+
data-test-metrics={metrics.length}
104+
>
98105
<Chart
99106
themeColor={ChartThemeColor.multiUnordered}
100107
containerComponent={

‎web/src/components/modals/export-modal.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { formatDuration, getDateSInMiliseconds } from '../../utils/duration';
2727
import { Filter } from '../../model/filters';
2828
import { getFilterFullName } from '../filters/filters-helper';
2929
import './export-modal.css';
30-
import { LOCAL_STORAGE_EXPORT_COLS_KEY, useLocalStorage } from '../../utils/local-storage-hook';
30+
import { LOCAL_STORAGE_EXPORT_COLS_KEY, getLocalStorage, useLocalStorage } from '../../utils/local-storage-hook';
3131

3232
export interface ExportModalProps {
3333
isModalOpen: boolean;
@@ -123,6 +123,17 @@ export const ExportModal: React.FC<ExportModalProps> = ({
123123
setSaveDisabled(!isExportAll && _.isEmpty(selectedColumns.filter(col => col.isSelected)));
124124
}, [isExportAll, selectedColumns]);
125125

126+
React.useEffect(() => {
127+
// reload selected columns when config is loaded
128+
setSelectedColumns(
129+
getLocalStorage(LOCAL_STORAGE_EXPORT_COLS_KEY, columns, {
130+
id: 'id',
131+
criteria: 'isSelected'
132+
})
133+
);
134+
// eslint-disable-next-line react-hooks/exhaustive-deps
135+
}, [columns]);
136+
126137
return (
127138
<Modal
128139
id={id}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
304304
smallerTexts={smallerTexts}
305305
showLegend={!isFocus}
306306
animate={animate}
307+
isDark={isDark}
307308
/>
308309
) : (
309310
emptyGraph()
@@ -351,6 +352,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
351352
tooltipsTruncate={false}
352353
showLegend={!isFocus}
353354
animate={animate}
355+
isDark={isDark}
354356
/>
355357
) : !_.isEmpty(topKMetrics) || namedTotalMetric || namedTotalDroppedMetric ? (
356358
<MetricsGraphWithTotal
@@ -370,6 +372,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
370372
showOthers={false}
371373
showLegend={!isFocus}
372374
animate={animate}
375+
isDark={isDark}
373376
/>
374377
) : (
375378
emptyGraph()
@@ -410,6 +413,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
410413
smallerTexts={smallerTexts}
411414
showLegend={!isFocus}
412415
animate={animate}
416+
isDark={isDark}
413417
/>
414418
) : showTopOnly ? (
415419
<MetricsGraph
@@ -427,6 +431,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
427431
tooltipsTruncate={false}
428432
showLegend={!isFocus}
429433
animate={animate}
434+
isDark={isDark}
430435
/>
431436
) : namedTotalMetric ? (
432437
<MetricsGraphWithTotal
@@ -444,6 +449,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
444449
showOthers={false}
445450
showLegend={!isFocus}
446451
animate={animate}
452+
isDark={isDark}
447453
/>
448454
) : (
449455
emptyGraph()
@@ -501,6 +507,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
501507
smallerTexts={smallerTexts}
502508
showLegend={!isFocus}
503509
animate={animate}
510+
isDark={isDark}
504511
/>
505512
) : (
506513
<MetricsGraphWithTotal
@@ -520,6 +527,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
520527
showOthers={false}
521528
showLegend={!isFocus}
522529
animate={animate}
530+
isDark={isDark}
523531
/>
524532
)
525533
) : (
@@ -561,6 +569,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
561569
smallerTexts={smallerTexts}
562570
showLegend={!isFocus}
563571
animate={animate}
572+
isDark={isDark}
564573
/>
565574
) : (
566575
<MetricsGraphWithTotal
@@ -579,6 +588,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
579588
showTotalDrop={false}
580589
showLegend={!isFocus}
581590
animate={animate}
591+
isDark={isDark}
582592
/>
583593
)
584594
) : (

‎web/src/components/netflow-topology/element-panel-metrics.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ export const ElementPanelMetrics: React.FC<{
2020
metrics: TopologyMetrics[];
2121
metricType: MetricType;
2222
truncateLength: TruncateLength;
23-
}> = ({ aData, bData, isGroup, metrics, metricType, truncateLength }) => {
23+
isDark?: boolean;
24+
}> = ({ aData, bData, isGroup, metrics, metricType, truncateLength, isDark }) => {
2425
const { t } = useTranslation('plugin__netobserv-plugin');
2526
const [metricsRadio, setMetricsRadio] = React.useState<MetricsRadio>('both');
2627

@@ -124,6 +125,7 @@ export const ElementPanelMetrics: React.FC<{
124125
showScatter
125126
tooltipsTruncate={true}
126127
showLegend={true}
128+
isDark={isDark}
127129
/>
128130
</div>
129131
);

‎web/src/components/netflow-topology/element-panel.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ export const ElementPanel: React.FC<{
135135
setFilters: (filters: Filter[]) => void;
136136
truncateLength: TruncateLength;
137137
id?: string;
138+
isDark?: boolean;
138139
}> = ({
139140
id,
140141
element,
@@ -145,7 +146,8 @@ export const ElementPanel: React.FC<{
145146
filterDefinitions,
146147
setFilters,
147148
onClose,
148-
truncateLength
149+
truncateLength,
150+
isDark
149151
}) => {
150152
const { t } = useTranslation('plugin__netobserv-plugin');
151153
const [activeTab, setActiveTab] = React.useState<string>('details');
@@ -217,6 +219,7 @@ export const ElementPanel: React.FC<{
217219
metrics={metrics}
218220
metricType={metricType}
219221
truncateLength={truncateLength}
222+
isDark={isDark}
220223
/>
221224
</Tab>
222225
)}
@@ -229,6 +232,7 @@ export const ElementPanel: React.FC<{
229232
metrics={droppedMetrics}
230233
metricType={metricType}
231234
truncateLength={truncateLength}
235+
isDark={isDark}
232236
/>
233237
</Tab>
234238
)}

0 commit comments

Comments
 (0)