Skip to content

Commit 8de16e2

Browse files
josunectjosunect
authored
fix(kiali): update load for overview page (janus-idp#1491)
* Update load for overview * Add loading bar for lists * lint * Update view for tables in ENTITY * remove config from entity view card * remove config from entity view card
1 parent 328d23a commit 8de16e2

File tree

7 files changed

+97
-30
lines changed

7 files changed

+97
-30
lines changed

‎plugins/kiali/src/components/VirtualList/VirtualList.tsx

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react';
22

33
import {
4+
Box,
5+
CircularProgress,
46
Paper,
57
SortDirection,
68
Table,
@@ -16,6 +18,7 @@ import { kialiStyle } from '../../styles/StyleUtils';
1618
import { Namespace } from '../../types/Namespace';
1719
import { NamespaceInfo } from '../../types/NamespaceInfo';
1820
import { SortField } from '../../types/SortFilters';
21+
import { ENTITY } from '../../types/types';
1922
import { StatefulFiltersProps } from '../Filters/StatefulFilters';
2023
import { config, RenderResource, Resource, ResourceType } from './Config';
2124
import { VirtualItem } from './VirtualItem';
@@ -44,6 +47,7 @@ type VirtualListProps<R> = {
4447
tableToolbar?: React.ReactNode;
4548
type: string;
4649
view?: string;
50+
loading: boolean;
4751
};
4852

4953
export const VirtualList = <R extends RenderResource>(
@@ -71,6 +75,16 @@ export const VirtualList = <R extends RenderResource>(
7175
const typeDisplay =
7276
listProps.type === 'istio' ? 'Istio config' : listProps.type;
7377

78+
const tableEntityHeaderStyle: any = {
79+
minWidth: '100px',
80+
fontWeight: '700',
81+
color: 'grey',
82+
borderTop: '1px solid #d5d5d5',
83+
borderBottom: '1px solid #d5d5d5',
84+
whiteSpace: 'nowrap',
85+
padding: '15px',
86+
};
87+
7488
const tableHeaderStyle: any = {
7589
minWidth: '120px',
7690
fontWeight: '700',
@@ -141,7 +155,11 @@ export const VirtualList = <R extends RenderResource>(
141155
<TableCell
142156
key={`column_${index}`}
143157
align="center"
144-
style={tableHeaderStyle}
158+
style={
159+
listProps.view === ENTITY
160+
? tableEntityHeaderStyle
161+
: tableHeaderStyle
162+
}
145163
sortDirection={
146164
column.sortable && orderBy === column.title.toLowerCase()
147165
? order
@@ -158,14 +176,28 @@ export const VirtualList = <R extends RenderResource>(
158176
handleRequestSort(e, column.title.toLowerCase())
159177
}
160178
>
161-
{column.title.toUpperCase()}
179+
{listProps.view === ENTITY &&
180+
column.title === 'Configuration'
181+
? 'CONFIG'
182+
: column.title.toUpperCase()}
162183
</TableSortLabel>
163184
</TableCell>
164185
))}
165186
</TableRow>
166187
</TableHead>
167188
<TableBody>
168-
{listProps.rows.length > 0 ? (
189+
{/* eslint-disable-next-line no-nested-ternary */}
190+
{listProps.loading === true ? (
191+
<Box
192+
display="flex"
193+
justifyContent="center"
194+
alignItems="center"
195+
minHeight="10vh"
196+
marginLeft="60vh"
197+
>
198+
<CircularProgress />
199+
</Box>
200+
) : listProps.rows.length > 0 ? (
169201
stableSort(rows, getComparator()).map(
170202
(row: RenderResource, index: number) => (
171203
<VirtualItem

‎plugins/kiali/src/pages/AppList/AppListPage.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const AppListPage = (props: { view?: string }): React.JSX.Element => {
3131
const activeNs = kialiState.namespaces.activeNamespaces.map(ns => ns.name);
3232
const prevActiveNs = useRef(activeNs);
3333
const prevDuration = useRef(duration);
34+
const [loadingD, setLoading] = React.useState<boolean>(true);
3435

3536
const hiddenColumns = isMultiCluster ? [] : ['cluster'];
3637
if (props.view === ENTITY) {
@@ -96,6 +97,9 @@ export const AppListPage = (props: { view?: string }): React.JSX.Element => {
9697
setNamespaces(namespaceInfos);
9798
fetchApps(namespaceInfos, duration);
9899
});
100+
setTimeout(() => {
101+
setLoading(false);
102+
}, 400);
99103
};
100104

101105
const [_, refresh] = useAsyncFn(
@@ -112,6 +116,7 @@ export const AppListPage = (props: { view?: string }): React.JSX.Element => {
112116
duration !== prevDuration.current ||
113117
!nsEqual(activeNs, prevActiveNs.current)
114118
) {
119+
setLoading(true);
115120
getNS();
116121
prevDuration.current = duration;
117122
prevActiveNs.current = activeNs;
@@ -134,6 +139,7 @@ export const AppListPage = (props: { view?: string }): React.JSX.Element => {
134139
type="applications"
135140
hiddenColumns={hiddenColumns}
136141
view={props.view}
142+
loading={loadingD}
137143
/>
138144
</Content>
139145
</div>

‎plugins/kiali/src/pages/IstioConfigList/IstioConfigListPage.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const IstioConfigListPage = (props: {
2929
);
3030
const activeNs = kialiState.namespaces.activeNamespaces.map(ns => ns.name);
3131
const prevActiveNs = React.useRef(activeNs);
32+
const [loadingD, setLoading] = React.useState<boolean>(true);
3233

3334
const fetchIstioConfigs = async (nss: NamespaceInfo[]): Promise<void> => {
3435
return kialiClient
@@ -62,6 +63,9 @@ export const IstioConfigListPage = (props: {
6263
setNamespaces(nsl);
6364
fetchIstioConfigs(nsl);
6465
});
66+
setTimeout(() => {
67+
setLoading(false);
68+
}, 400);
6569
};
6670

6771
const [{ loading }, refresh] = useAsyncFn(
@@ -76,6 +80,7 @@ export const IstioConfigListPage = (props: {
7680

7781
React.useEffect(() => {
7882
if (!nsEqual(activeNs, prevActiveNs.current)) {
83+
setLoading(true);
7984
load();
8085
prevActiveNs.current = activeNs;
8186
}
@@ -100,6 +105,7 @@ export const IstioConfigListPage = (props: {
100105
type="istio"
101106
hiddenColumns={hiddenColumns}
102107
view={props.view}
108+
loading={loadingD}
103109
/>
104110
</Content>
105111
</div>

‎plugins/kiali/src/pages/Overview/ListView/ListViewPage.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { CardTab, TabbedCard } from '@backstage/core-components';
44

55
import { ENTITY } from '../../../types/types';
66
import { AppListPage } from '../../AppList/AppListPage';
7-
import { IstioConfigListPage } from '../../IstioConfigList/IstioConfigListPage';
87
import { ServiceListPage } from '../../ServiceList/ServiceListPage';
98
import { WorkloadListPage } from '../../WorkloadList/WorkloadListPage';
109

@@ -36,11 +35,6 @@ export const ListViewPage = () => {
3635
<AppListPage view={ENTITY} />
3736
</div>
3837
</CardTab>
39-
<CardTab label="Istio Config">
40-
<div style={tabStyle}>
41-
<IstioConfigListPage view={ENTITY} />
42-
</div>
43-
</CardTab>
4438
</TabbedCard>
4539
</div>
4640
);

‎plugins/kiali/src/pages/Overview/OverviewPage.tsx

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useRef } from 'react';
22

33
import { CardTab, Content, TabbedCard } from '@backstage/core-components';
44
import { useApi } from '@backstage/core-plugin-api';
@@ -8,6 +8,7 @@ import _ from 'lodash';
88

99
import * as FilterHelper from '../../components/FilterList/FilterHelper';
1010
import { isMultiCluster, serverConfig } from '../../config';
11+
import { nsEqual } from '../../helpers/namespaces';
1112
import { getErrorString, kialiApiRef } from '../../services/Api';
1213
import { computePrometheusRateParams } from '../../services/Prometheus';
1314
import { KialiAppState, KialiContext } from '../../store';
@@ -69,6 +70,10 @@ export const getNamespaces = (
6970
export const OverviewPage = (props: { entity?: boolean }) => {
7071
const kialiClient = useApi(kialiApiRef);
7172
const kialiState = React.useContext(KialiContext) as KialiAppState;
73+
const activeNsName = kialiState.namespaces.activeNamespaces.map(
74+
ns => ns.name,
75+
);
76+
const prevActiveNs = useRef(activeNsName);
7277
const promises = new PromisesRegistry();
7378
const [namespaces, setNamespaces] = React.useState<NamespaceInfo[]>([]);
7479
const [outboundTrafficPolicy, setOutboundTrafficPolicy] =
@@ -87,6 +92,7 @@ export const OverviewPage = (props: { entity?: boolean }) => {
8792
const [directionType, setDirectionType] = React.useState<DirectionType>(
8893
currentDirectionType(),
8994
);
95+
const [activeNs, setActiveNs] = React.useState<NamespaceInfo[]>([]);
9096

9197
const sortedNamespaces = (nss: NamespaceInfo[]) => {
9298
nss.sort((a, b) => {
@@ -340,7 +346,7 @@ export const OverviewPage = (props: { entity?: boolean }) => {
340346
});
341347
};
342348

343-
const fetchMetricsChunk = (chunk: NamespaceInfo[]) => {
349+
const fetchMetricsChunk = async (chunk: NamespaceInfo[]) => {
344350
const rateParams = computePrometheusRateParams(duration, 10);
345351
const options: IstioMetricsOptions = {
346352
filters: ['request_count', 'request_error_count'],
@@ -379,22 +385,24 @@ export const OverviewPage = (props: { entity?: boolean }) => {
379385
);
380386
};
381387

382-
const fetchMetrics = (nss: NamespaceInfo[]) => {
388+
const filterActiveNamespaces = (nss: NamespaceInfo[]) => {
389+
return nss.filter(ns => activeNsName.includes(ns.name));
390+
};
391+
392+
const fetchMetrics = async (nss: NamespaceInfo[]) => {
383393
// debounce async for back-pressure, ten by ten
384394
_.chunk(nss, 10).forEach(chunk => {
385395
promises
386396
.registerChained('metricschunks', undefined, () =>
387397
fetchMetricsChunk(chunk),
388398
)
389-
.then(() => nss.slice());
399+
.then(() => {
400+
nss.slice();
401+
setActiveNs(filterActiveNamespaces(nss));
402+
});
390403
});
391404
};
392405

393-
const filterActiveNamespaces = () => {
394-
const activeNs = kialiState.namespaces.activeNamespaces.map(ns => ns.name);
395-
return namespaces.filter(ns => activeNs.includes(ns.name));
396-
};
397-
398406
const load = async () => {
399407
await kialiClient.getNamespaces().then(namespacesResponse => {
400408
const allNamespaces: NamespaceInfo[] = getNamespaces(
@@ -420,6 +428,14 @@ export const OverviewPage = (props: { entity?: boolean }) => {
420428
});
421429
};
422430

431+
React.useEffect(() => {
432+
if (!nsEqual(activeNsName, prevActiveNs.current)) {
433+
prevActiveNs.current = activeNsName;
434+
load();
435+
}
436+
// eslint-disable-next-line react-hooks/exhaustive-deps
437+
}, [activeNsName]);
438+
423439
React.useEffect(() => {
424440
load();
425441
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -434,7 +450,7 @@ export const OverviewPage = (props: { entity?: boolean }) => {
434450
{props.entity ? (
435451
<div style={{ marginBottom: '20px' }}>
436452
<TabbedCard title="Overview">
437-
{filterActiveNamespaces().map(ns => (
453+
{activeNs.map(ns => (
438454
<CardTab label={ns.name} key={`card_ns_${ns.name}`}>
439455
<OverviewCard
440456
entity
@@ -470,7 +486,7 @@ export const OverviewPage = (props: { entity?: boolean }) => {
470486
setDuration={setDuration}
471487
/>
472488
<Grid container spacing={2}>
473-
{filterActiveNamespaces().map((ns, i) => (
489+
{activeNs.map((ns, i) => (
474490
<Grid
475491
key={`Card_${ns.name}_${i}`}
476492
item

‎plugins/kiali/src/pages/ServiceList/ServiceListPage.tsx

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const ServiceListPage = (props: {
4141
const prevActiveNs = useRef(activeNs);
4242
const prevDuration = useRef(duration);
4343
const activeToggles: ActiveTogglesInfo = Toggles.getToggles();
44+
const [loadingD, setLoading] = React.useState<boolean>(true);
4445

4546
const hiddenColumns = isMultiCluster ? [] : ['cluster'];
4647
if (props.view === ENTITY) {
@@ -162,30 +163,34 @@ export const ServiceListPage = (props: {
162163
setNamespaces(nsl);
163164
fetchServices(nsl, duration, activeToggles);
164165
});
166+
setTimeout(() => {
167+
setLoading(false);
168+
}, 400);
165169
};
166170

167-
const [{ loading }, refresh] = useAsyncFn(
168-
async () => {
169-
// Check if the config is loaded
170-
await load();
171-
},
172-
[],
173-
{ loading: true },
174-
);
175-
useDebounce(refresh, 10);
176-
177171
React.useEffect(() => {
178172
if (
179173
duration !== prevDuration.current ||
180174
!nsEqual(activeNs, prevActiveNs.current)
181175
) {
176+
setLoading(true);
182177
load();
183178
prevDuration.current = duration;
184179
prevActiveNs.current = activeNs;
185180
}
186181
// eslint-disable-next-line react-hooks/exhaustive-deps
187182
}, [activeNs, duration]);
188183

184+
const [{ loading }, refresh] = useAsyncFn(
185+
async () => {
186+
// Check if the config is loaded
187+
await load();
188+
},
189+
[],
190+
{ loading: true },
191+
);
192+
useDebounce(refresh, 10);
193+
189194
if (loading) {
190195
return <CircularProgress />;
191196
}
@@ -205,6 +210,7 @@ export const ServiceListPage = (props: {
205210
type="services"
206211
hiddenColumns={hiddenColumns}
207212
view={props.view}
213+
loading={loadingD}
208214
/>
209215
</Content>
210216
</div>

‎plugins/kiali/src/pages/WorkloadList/WorkloadListPage.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const WorkloadListPage = (props: { view?: string }) => {
3232
const activeNs = kialiState.namespaces.activeNamespaces.map(ns => ns.name);
3333
const prevActiveNs = useRef(activeNs);
3434
const prevDuration = useRef(duration);
35+
const [loadingData, setLoadingData] = React.useState<boolean>(true);
3536

3637
const fetchWorkloads = (
3738
nss: NamespaceInfo[],
@@ -70,6 +71,10 @@ export const WorkloadListPage = (props: { view?: string }) => {
7071
setNamespaces(nsl);
7172
fetchWorkloads(nsl, duration);
7273
});
74+
// Add a delay so it doesn't look like a flash
75+
setTimeout(() => {
76+
setLoadingData(false);
77+
}, 400);
7378
};
7479

7580
const [{ loading }, refresh] = useAsyncFn(
@@ -87,6 +92,7 @@ export const WorkloadListPage = (props: { view?: string }) => {
8792
duration !== prevDuration.current ||
8893
!nsEqual(activeNs, prevActiveNs.current)
8994
) {
95+
setLoadingData(true);
9096
load();
9197
prevDuration.current = duration;
9298
prevActiveNs.current = activeNs;
@@ -133,6 +139,7 @@ export const WorkloadListPage = (props: { view?: string }) => {
133139
type="workloads"
134140
hiddenColumns={hiddenColumns}
135141
view={props.view}
142+
loading={loadingData}
136143
/>
137144
</Content>
138145
</div>

0 commit comments

Comments
 (0)