Skip to content

Commit 5c45e1f

Browse files
amlannandyamlannandy
authored
chore: infra monitoring bug fixes (#6795)
1 parent 16e61b4 commit 5c45e1f

File tree

21 files changed

+340
-283
lines changed

21 files changed

+340
-283
lines changed

‎frontend/src/api/infraMonitoring/getK8sNodesList.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ApiBaseInstance } from 'api';
1+
import axios from 'api';
22
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
33
import { AxiosError } from 'axios';
44
import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -47,7 +47,7 @@ export const getK8sNodesList = async (
4747
headers?: Record<string, string>,
4848
): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
4949
try {
50-
const response = await ApiBaseInstance.post('/nodes/list', props, {
50+
const response = await axios.post('/nodes/list', props, {
5151
signal,
5252
headers,
5353
});

‎frontend/src/api/infraMonitoring/getK8sPodsList.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ApiBaseInstance } from 'api';
1+
import axios from 'api';
22
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
33
import { AxiosError } from 'axios';
44
import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -75,7 +75,7 @@ export const getK8sPodsList = async (
7575
headers?: Record<string, string>,
7676
): Promise<SuccessResponse<K8sPodsListResponse> | ErrorResponse> => {
7777
try {
78-
const response = await ApiBaseInstance.post('/pods/list', props, {
78+
const response = await axios.post('/pods/list', props, {
7979
signal,
8080
headers,
8181
});

‎frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

+54-10
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,6 @@
3939
.ant-collapse-header {
4040
border-bottom: 1px solid var(--bg-slate-400);
4141
padding: 12px 8px;
42-
43-
&[aria-expanded='true'] {
44-
background: var(--bg-ink-400);
45-
}
4642
}
4743

4844
.ant-collapse-content-box {
@@ -271,8 +267,6 @@
271267

272268
.group-by-label {
273269
min-width: max-content;
274-
275-
color: var(--bg-vanilla-100, #c0c1c3);
276270
font-size: 13px;
277271
font-style: normal;
278272
font-weight: 400;
@@ -282,7 +276,6 @@
282276
border-radius: 2px 0px 0px 2px;
283277
border: 1px solid var(--bg-slate-400, #1d212d);
284278
border-right: none;
285-
background: var(--bg-ink-100, #16181d);
286279
border-top-right-radius: 0px;
287280
border-bottom-right-radius: 0px;
288281

@@ -488,7 +481,7 @@
488481
.expanded-table-container {
489482
border: 1px solid var(--bg-ink-400);
490483
overflow-x: auto;
491-
padding-left: 16px;
484+
padding-left: 48px;
492485

493486
&::-webkit-scrollbar {
494487
width: 0.1rem;
@@ -710,8 +703,34 @@
710703
}
711704

712705
.ant-table-cell {
713-
min-width: 170px !important;
714-
max-width: 170px !important;
706+
min-width: 140px !important;
707+
max-width: 140px !important;
708+
}
709+
710+
.ant-table-cell {
711+
&:has(.pod-name-header) {
712+
min-width: 250px !important;
713+
max-width: 250px !important;
714+
}
715+
}
716+
717+
.ant-table-cell {
718+
&:has(.med-col) {
719+
min-width: 180px !important;
720+
max-width: 180px !important;
721+
}
722+
}
723+
724+
.expanded-k8s-list-table {
725+
.ant-table-cell {
726+
min-width: 180px !important;
727+
max-width: 180px !important;
728+
}
729+
730+
.ant-table-row-expand-icon-cell {
731+
min-width: 30px !important;
732+
max-width: 30px !important;
733+
}
715734
}
716735

717736
.ant-table-row-expand-icon-cell {
@@ -808,6 +827,24 @@
808827
}
809828

810829
.lightMode {
830+
.infra-monitoring-container {
831+
.k8s-list-table {
832+
.ant-table-expanded-row {
833+
&:hover {
834+
background: var(--bg-vanilla-100) !important;
835+
}
836+
837+
.ant-table-cell {
838+
background: var(--bg-vanilla-100) !important;
839+
}
840+
841+
.ant-table .ant-table-thead > tr > th {
842+
padding: 4px 16px !important;
843+
}
844+
}
845+
}
846+
}
847+
811848
.event-content-container {
812849
.ant-table {
813850
background: var(--bg-vanilla-100);
@@ -831,4 +868,11 @@
831868
}
832869
}
833870
}
871+
872+
.entity-group-header {
873+
.ant-tag {
874+
background-color: var(--bg-vanilla-300) !important;
875+
color: var(--bg-slate-400) !important;
876+
}
877+
}
834878
}

‎frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
99
import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
1010
import { Container, Workflow } from 'lucide-react';
1111
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
12-
import { useCallback, useState } from 'react';
12+
import { useState } from 'react';
1313
import { Query } from 'types/api/queryBuilder/queryBuilderData';
1414

1515
import {
@@ -24,6 +24,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
2424
const [showFilters, setShowFilters] = useState(true);
2525

2626
const [selectedCategory, setSelectedCategory] = useState(K8sCategories.PODS);
27+
const [quickFiltersLastUpdated, setQuickFiltersLastUpdated] = useState(-1);
2728

2829
const { currentQuery } = useQueryBuilder();
2930

@@ -37,14 +38,12 @@ export default function InfraMonitoringK8s(): JSX.Element {
3738
entityVersion: '',
3839
});
3940

40-
const handleFilterChange = useCallback(
41-
(query: Query): void => {
42-
// update the current query with the new filters
43-
// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
44-
handleChangeQueryData('filters', query.builder.queryData[0].filters);
45-
},
46-
[handleChangeQueryData],
47-
);
41+
const handleFilterChange = (query: Query): void => {
42+
// update the current query with the new filters
43+
// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
44+
handleChangeQueryData('filters', query.builder.queryData[0].filters);
45+
setQuickFiltersLastUpdated(Date.now());
46+
};
4847

4948
const items: CollapseProps['items'] = [
5049
{
@@ -262,6 +261,8 @@ export default function InfraMonitoringK8s(): JSX.Element {
262261
const handleCategoryChange = (key: string | string[]): void => {
263262
if (Array.isArray(key) && key.length > 0) {
264263
setSelectedCategory(key[0] as string);
264+
// Reset filters
265+
handleChangeQueryData('filters', { items: [], op: 'and' });
265266
}
266267
};
267268

@@ -302,13 +303,15 @@ export default function InfraMonitoringK8s(): JSX.Element {
302303
<K8sPodLists
303304
isFiltersVisible={showFilters}
304305
handleFilterVisibilityChange={handleFilterVisibilityChange}
306+
quickFiltersLastUpdated={quickFiltersLastUpdated}
305307
/>
306308
)}
307309

308310
{selectedCategory === K8sCategories.NODES && (
309311
<K8sNodesList
310312
isFiltersVisible={showFilters}
311313
handleFilterVisibilityChange={handleFilterVisibilityChange}
314+
quickFiltersLastUpdated={quickFiltersLastUpdated}
312315
/>
313316
)}
314317
</div>

‎frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Button, Input } from 'antd';
77
import { GripVertical, TableColumnsSplit, X } from 'lucide-react';
88
import { useEffect, useRef, useState } from 'react';
99

10-
import { IPodColumn } from '../utils';
10+
import { IEntityColumn } from '../utils';
1111

1212
function K8sFiltersSidePanel({
1313
defaultAddedColumns,
@@ -17,12 +17,12 @@ function K8sFiltersSidePanel({
1717
onAddColumn = () => {},
1818
onRemoveColumn = () => {},
1919
}: {
20-
defaultAddedColumns: IPodColumn[];
20+
defaultAddedColumns: IEntityColumn[];
2121
onClose: () => void;
22-
addedColumns?: IPodColumn[];
23-
availableColumns?: IPodColumn[];
24-
onAddColumn?: (column: IPodColumn) => void;
25-
onRemoveColumn?: (column: IPodColumn) => void;
22+
addedColumns?: IEntityColumn[];
23+
availableColumns?: IEntityColumn[];
24+
onAddColumn?: (column: IEntityColumn) => void;
25+
onRemoveColumn?: (column: IEntityColumn) => void;
2626
}): JSX.Element {
2727
const [searchValue, setSearchValue] = useState('');
2828
const sidePanelRef = useRef<HTMLDivElement>(null);

‎frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,19 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
1212

1313
import { K8sCategory } from './constants';
1414
import K8sFiltersSidePanel from './K8sFiltersSidePanel/K8sFiltersSidePanel';
15-
import { IPodColumn } from './utils';
15+
import { IEntityColumn } from './utils';
1616

1717
interface K8sHeaderProps {
1818
selectedGroupBy: BaseAutocompleteData[];
1919
groupByOptions: { value: string; label: string }[];
2020
isLoadingGroupByFilters: boolean;
2121
handleFiltersChange: (value: IBuilderQuery['filters']) => void;
2222
handleGroupByChange: (value: IBuilderQuery['groupBy']) => void;
23-
defaultAddedColumns: IPodColumn[];
24-
addedColumns?: IPodColumn[];
25-
availableColumns?: IPodColumn[];
26-
onAddColumn?: (column: IPodColumn) => void;
27-
onRemoveColumn?: (column: IPodColumn) => void;
23+
defaultAddedColumns: IEntityColumn[];
24+
addedColumns?: IEntityColumn[];
25+
availableColumns?: IEntityColumn[];
26+
onAddColumn?: (column: IEntityColumn) => void;
27+
onRemoveColumn?: (column: IEntityColumn) => void;
2828
handleFilterVisibilityChange: () => void;
2929
isFiltersVisible: boolean;
3030
entity: K8sCategory;

0 commit comments

Comments
 (0)