Skip to content

Commit 613a568

Browse files
jpinsonneaujpinsonneau
authored
temporary scope slider scaling (#468)
1 parent c70d29b commit 613a568

File tree

3 files changed

+124
-69
lines changed

3 files changed

+124
-69
lines changed

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

Lines changed: 97 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import componentFactory from './2d/componentFactories/componentFactory';
1616
import stylesComponentFactory from './2d/componentFactories/stylesComponentFactory';
1717
import layoutFactory from './2d/layouts/layoutFactory';
1818
import { ScopeSlider } from '../scope-slider/scope-slider';
19+
import { observeDOMRect } from '../metrics/metrics-helper';
1920

2021
export const NetflowTopology: React.FC<{
2122
loading?: boolean;
@@ -63,80 +64,121 @@ export const NetflowTopology: React.FC<{
6364
allowZone
6465
}) => {
6566
const { t } = useTranslation('plugin__netobserv-plugin');
67+
const containerRef = React.createRef<HTMLDivElement>();
68+
const [containerSize, setContainerSize] = React.useState<DOMRect>({ width: 0, height: 0 } as DOMRect);
6669
const [controller, setController] = React.useState<Visualization>();
6770

6871
//show fully dropped metrics if no metrics available
6972
const displayedMetrics = _.isEmpty(metrics) ? droppedMetrics : metrics;
7073

71-
//create controller on startup and register factories
72-
React.useEffect(() => {
73-
const c = new Visualization();
74-
c.registerLayoutFactory(layoutFactory);
75-
c.registerComponentFactory(componentFactory);
76-
c.registerComponentFactory(stylesComponentFactory);
77-
setController(c);
78-
// eslint-disable-next-line react-hooks/exhaustive-deps
79-
}, []);
80-
81-
if (error) {
82-
return <LokiError title={t('Unable to get topology')} error={error} />;
83-
} else if (!controller || (_.isEmpty(metrics) && loading)) {
84-
return (
85-
<Bullseye data-test="loading-contents">
86-
<Spinner size="xl" />
87-
</Bullseye>
88-
);
89-
} else if (options.layout === LayoutName.ThreeD) {
90-
return (
91-
<ThreeDTopologyContent
92-
k8sModels={k8sModels}
93-
metricFunction={metricFunction}
94-
metricType={metricType}
95-
metricScope={metricScope}
96-
setMetricScope={setMetricScope}
97-
metrics={displayedMetrics}
98-
options={options}
99-
setOptions={setOptions}
100-
filters={filters.list}
101-
setFilters={(l: Filter[]) => setFilters({ ...filters, list: l })}
102-
selected={selected}
103-
onSelect={onSelect}
104-
searchHandle={searchHandle}
105-
searchEvent={searchEvent}
106-
isDark={isDark}
107-
/>
108-
);
109-
} else {
110-
return (
111-
<VisualizationProvider data-test="visualization-provider" controller={controller}>
112-
<ScopeSlider
113-
scope={metricScope}
114-
setScope={setMetricScope}
115-
allowMultiCluster={allowMultiCluster}
116-
allowZone={allowZone}
117-
/>
118-
<TopologyContent
74+
const getContent = React.useCallback(() => {
75+
if (error) {
76+
return <LokiError title={t('Unable to get topology')} error={error} />;
77+
} else if (!controller || (_.isEmpty(metrics) && loading)) {
78+
return (
79+
<Bullseye data-test="loading-contents">
80+
<Spinner size="xl" />
81+
</Bullseye>
82+
);
83+
} else if (options.layout === LayoutName.ThreeD) {
84+
return (
85+
<ThreeDTopologyContent
11986
k8sModels={k8sModels}
12087
metricFunction={metricFunction}
12188
metricType={metricType}
12289
metricScope={metricScope}
12390
setMetricScope={setMetricScope}
12491
metrics={displayedMetrics}
125-
droppedMetrics={droppedMetrics}
12692
options={options}
12793
setOptions={setOptions}
128-
filters={filters}
129-
filterDefinitions={filterDefinitions}
130-
setFilters={setFilters}
94+
filters={filters.list}
95+
setFilters={(l: Filter[]) => setFilters({ ...filters, list: l })}
13196
selected={selected}
13297
onSelect={onSelect}
13398
searchHandle={searchHandle}
13499
searchEvent={searchEvent}
135100
isDark={isDark}
136101
/>
137-
</VisualizationProvider>
138-
);
139-
}
102+
);
103+
} else {
104+
return (
105+
<VisualizationProvider data-test="visualization-provider" controller={controller}>
106+
<ScopeSlider
107+
allowMultiCluster={allowMultiCluster}
108+
allowZone={allowZone}
109+
sizePx={containerSize?.height || 300}
110+
scope={metricScope}
111+
setScope={setMetricScope}
112+
/>
113+
<TopologyContent
114+
k8sModels={k8sModels}
115+
metricFunction={metricFunction}
116+
metricType={metricType}
117+
metricScope={metricScope}
118+
setMetricScope={setMetricScope}
119+
metrics={displayedMetrics}
120+
droppedMetrics={droppedMetrics}
121+
options={options}
122+
setOptions={setOptions}
123+
filters={filters}
124+
filterDefinitions={filterDefinitions}
125+
setFilters={setFilters}
126+
selected={selected}
127+
onSelect={onSelect}
128+
searchHandle={searchHandle}
129+
searchEvent={searchEvent}
130+
isDark={isDark}
131+
/>
132+
</VisualizationProvider>
133+
);
134+
}
135+
}, [
136+
allowMultiCluster,
137+
allowZone,
138+
containerSize?.height,
139+
controller,
140+
displayedMetrics,
141+
droppedMetrics,
142+
error,
143+
filterDefinitions,
144+
filters,
145+
isDark,
146+
k8sModels,
147+
loading,
148+
metricFunction,
149+
metricScope,
150+
metricType,
151+
metrics,
152+
onSelect,
153+
options,
154+
searchEvent,
155+
searchHandle,
156+
selected,
157+
setFilters,
158+
setMetricScope,
159+
setOptions,
160+
t
161+
]);
162+
163+
//create controller on startup and register factories
164+
React.useEffect(() => {
165+
const c = new Visualization();
166+
c.registerLayoutFactory(layoutFactory);
167+
c.registerComponentFactory(componentFactory);
168+
c.registerComponentFactory(stylesComponentFactory);
169+
setController(c);
170+
// eslint-disable-next-line react-hooks/exhaustive-deps
171+
}, []);
172+
173+
React.useEffect(() => {
174+
observeDOMRect(containerRef, containerSize, setContainerSize);
175+
}, [containerRef, containerSize]);
176+
177+
return (
178+
<div style={{ width: '100%', height: '100%' }} ref={containerRef}>
179+
{getContent()}
180+
</div>
181+
);
140182
};
141183

142184
export default NetflowTopology;

‎web/src/components/scope-slider/scope-slider.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
#scope-slider {
22
position: relative;
33
height: 0;
4-
width: 400px;
5-
top: 200px;
6-
left: -165px;
74
z-index: 2;
85
}

‎web/src/components/scope-slider/scope-slider.tsx‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ export interface ScopeSliderProps {
1010
setScope: (ms: FlowScope) => void;
1111
allowMultiCluster: boolean;
1212
allowZone: boolean;
13+
sizePx: number;
1314
}
1415

15-
export const ScopeSlider: React.FC<ScopeSliderProps> = ({ scope, setScope, allowMultiCluster, allowZone }) => {
16+
export const ScopeSlider: React.FC<ScopeSliderProps> = ({ scope, setScope, allowMultiCluster, allowZone, sizePx }) => {
1617
const { t } = useTranslation('plugin__netobserv-plugin');
1718

1819
const scopes: [FlowScope, string][] = [
@@ -25,17 +26,32 @@ export const ScopeSlider: React.FC<ScopeSliderProps> = ({ scope, setScope, allow
2526
].filter(s => (allowMultiCluster || s[0] !== 'cluster') && (allowZone || s[0] !== 'zone')) as [FlowScope, string][];
2627

2728
const index = scopes.findIndex(s => s[0] === scope);
28-
29+
/* TODO: refactor vertical slider
30+
* In between the display is block to working dimensions managing two cases
31+
* Non supported dimensions simply hide the slider from the view
32+
* since we can manage scopes from advanced view
33+
*/
34+
const canDisplay = sizePx > 350 && sizePx < 2000;
35+
const isBig = sizePx > 700;
2936
return (
30-
<div id={'scope-slider'}>
31-
<Slider
32-
value={index < 0 ? 2 : index}
33-
showTicks
34-
max={scopes.length - 1}
35-
customSteps={scopes.map((s, idx) => ({ value: idx, label: s[1] }))}
36-
onChange={(value: number) => setScope(scopes[value][0])}
37-
vertical
38-
/>
37+
<div
38+
id={'scope-slider'}
39+
style={{
40+
width: sizePx * (isBig ? 0.85 : 0.7),
41+
top: sizePx * (isBig ? 0.45 : 0.4),
42+
left: -sizePx * (isBig ? 0.38 : 0.28)
43+
}}
44+
>
45+
{canDisplay && (
46+
<Slider
47+
value={index < 0 ? 2 : index}
48+
showTicks
49+
max={scopes.length - 1}
50+
customSteps={scopes.map((s, idx) => ({ value: idx, label: s[1] }))}
51+
onChange={(value: number) => setScope(scopes[value][0])}
52+
vertical
53+
/>
54+
)}
3955
</div>
4056
);
4157
};

0 commit comments

Comments
 (0)