Skip to content

Commit a8fe13c

Browse files
lucasgorallucasgoral
committed
fixes
1 parent a033be0 commit a8fe13c

File tree

4 files changed

+70
-181
lines changed

4 files changed

+70
-181
lines changed

‎src/components/ControlPlane/FluxList.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import { FluxRequest } from '../../lib/api/types/flux/listGitRepo';
66
import { FluxKustomization, KustomizationsResponse } from '../../lib/api/types/flux/listKustomization';
77
import { useTranslation } from 'react-i18next';
88
import { timeAgo } from '../../utils/i18n/timeAgo.ts';
9-
import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
9+
1010
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
1111
import { useMemo } from 'react';
1212
import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
1313
import { ResourceStatusCellWithButton } from '../Shared/ResourceStatusCellWithButton.tsx';
14+
import { s } from 'vitest/dist/chunks/reporters.d.BFLkQcL6';
1415

1516
export default function FluxList() {
1617
const { data: gitReposData, error: repoErr, isLoading: repoIsLoading } = useApiResource(FluxRequest); //404 if component not enabled
@@ -37,7 +38,7 @@ export default function FluxList() {
3738
isReady: boolean;
3839
statusUpdateTime?: string;
3940
item: unknown;
40-
status: unknown;
41+
readyStatus: undefined | { message?: string };
4142
};
4243

4344
const gitReposColumns: AnalyticalTableColumnDefinition[] = useMemo(
@@ -61,13 +62,16 @@ export default function FluxList() {
6162
width: 85,
6263
hAlign: 'Center',
6364
Filter: ({ column }) => <StatusFilter column={column} />,
64-
Cell: (cellData: CellData<FluxRow['isReady']>) =>
65+
Cell: (cellData: CellData<FluxRow>) =>
6566
cellData.cell.row.original?.isReady != null ? (
66-
<ResourceStatusCell
67+
<ResourceStatusCellWithButton
68+
positiveText={'Ready'}
69+
negativeText={'Error'}
6770
value={cellData.cell.row.original?.isReady}
6871
transitionTime={
6972
cellData.cell.row.original?.statusUpdateTime ? cellData.cell.row.original?.statusUpdateTime : ''
7073
}
74+
message={cellData.cell.row.original?.readyStatus?.message}
7175
/>
7276
) : null,
7377
},
@@ -105,18 +109,14 @@ export default function FluxList() {
105109
Cell: (cellData: CellData<FluxRow['isReady']>) =>
106110
cellData.cell.row.original?.isReady != null ? (
107111
<span>
108-
<ResourceStatusCell
109-
value={cellData.cell.row.original?.isReady}
110-
transitionTime={
111-
cellData.cell.row.original?.statusUpdateTime ? cellData.cell.row.original?.statusUpdateTime : ''
112-
}
113-
/>
114112
<ResourceStatusCellWithButton
113+
positiveText={'Ready'}
114+
negativeText={'Error'}
115115
value={cellData.cell.row.original?.isReady}
116116
transitionTime={
117117
cellData.cell.row.original?.statusUpdateTime ? cellData.cell.row.original?.statusUpdateTime : ''
118118
}
119-
errorMessage={cellData.cell.row.original?.status?.message}
119+
message={cellData.cell.row.original?.readyStatus?.message}
120120
/>
121121
</span>
122122
) : null,
@@ -152,7 +152,7 @@ export default function FluxList() {
152152
revision: shortenCommitHash(item.status.artifact?.revision ?? '-'),
153153
created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
154154
item: item,
155-
status: item.status?.conditions?.find((x) => x.type === 'Ready'),
155+
readyStatus: item.status?.conditions?.find((x) => x.type === 'Ready'),
156156
};
157157
}) ?? [];
158158

@@ -164,7 +164,7 @@ export default function FluxList() {
164164
statusUpdateTime: item.status?.conditions?.find((x) => x.type === 'Ready')?.lastTransitionTime,
165165
created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
166166
item: item,
167-
status: item.status?.conditions?.find((x) => x.type === 'Ready'),
167+
readyStatus: item.status?.conditions?.find((x) => x.type === 'Ready'),
168168
};
169169
}) ?? [];
170170

‎src/components/ControlPlane/ManagedResources.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
1616
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
1717
import { useMemo } from 'react';
1818
import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
19+
import { ResourceStatusCellWithButton } from '../Shared/ResourceStatusCellWithButton.tsx';
1920

2021
interface CellData<T> {
2122
cell: {
@@ -35,6 +36,8 @@ type ResourceRow = {
3536
ready: boolean;
3637
readyTransitionTime: string;
3738
item: unknown;
39+
conditionReadyMessage: string;
40+
conditionSyncedMessage: string;
3841
};
3942

4043
export function ManagedResources() {
@@ -70,9 +73,12 @@ export function ManagedResources() {
7073
Filter: ({ column }) => <StatusFilter column={column} />,
7174
Cell: (cellData: CellData<ResourceRow['synced']>) =>
7275
cellData.cell.row.original?.synced != null ? (
73-
<ResourceStatusCell
76+
<ResourceStatusCellWithButton
7477
value={cellData.cell.row.original?.synced}
7578
transitionTime={cellData.cell.row.original?.syncedTransitionTime}
79+
positiveText={'Synced'}
80+
negativeText={'Sync error'}
81+
message={cellData.cell.row.original?.conditionSyncedMessage}
7682
/>
7783
) : null,
7884
},
@@ -84,9 +90,12 @@ export function ManagedResources() {
8490
Filter: ({ column }) => <StatusFilter column={column} />,
8591
Cell: (cellData: CellData<ResourceRow['ready']>) =>
8692
cellData.cell.row.original?.ready != null ? (
87-
<ResourceStatusCell
93+
<ResourceStatusCellWithButton
8894
value={cellData.cell.row.original?.ready}
8995
transitionTime={cellData.cell.row.original?.readyTransitionTime}
96+
positiveText={'Ready'}
97+
negativeText={'Not ready'}
98+
message={cellData.cell.row.original?.conditionReadyMessage}
9099
/>
91100
) : null,
92101
},
@@ -122,6 +131,8 @@ export function ManagedResources() {
122131
ready: conditionReady?.status === 'True',
123132
readyTransitionTime: conditionReady?.lastTransitionTime ?? '',
124133
item: item,
134+
conditionSyncedMessage: conditionSynced?.message ?? conditionSynced?.reason ?? '',
135+
conditionReadyMessage: conditionReady?.message ?? conditionReady?.reason ?? '',
125136
};
126137
}),
127138
) ?? [];

‎src/components/ControlPlane/ResourceStatusPopoverButton.tsx‎

Lines changed: 0 additions & 155 deletions
This file was deleted.

‎src/components/Shared/ResourceStatusCellWithButton.tsx‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,55 @@
1-
import { Icon } from '@ui5/webcomponents-react';
1+
import { Icon, Popover, PopoverDomRef, Text } from '@ui5/webcomponents-react';
22
import { timeAgo } from '../../utils/i18n/timeAgo';
3+
import { MouseEvent, useRef, useState } from 'react';
4+
import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
5+
import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
36
export interface StatusCellProps {
47
value: boolean;
58
transitionTime: string;
6-
errorMessage?: string;
9+
message?: string;
10+
positiveText: string;
11+
negativeText: string;
712
}
13+
export const ResourceStatusCellWithButton = ({
14+
value,
15+
transitionTime,
16+
message,
17+
positiveText,
18+
negativeText,
19+
}: StatusCellProps) => {
20+
const popoverRef = useRef<PopoverDomRef>(null);
21+
const [open, setOpen] = useState(false);
822

9-
export const ResourceStatusCellWithButton = ({ value, transitionTime, errorMessage }: StatusCellProps) => {
23+
const handleOpenerClick = (e: MouseEvent<HTMLButtonElement>) => {
24+
if (popoverRef.current) {
25+
(popoverRef.current as unknown as { opener: EventTarget | null }).opener = e.target;
26+
setOpen((prev) => !prev);
27+
}
28+
};
1029
// if (!value) {
11-
console.log(errorMessage);
30+
// console.log(errorMessage);
1231
// }
13-
alert(errorMessage);
32+
// alert(errorMessage);
1433
return (
15-
<Icon
16-
design={value ? 'Positive' : 'Negative'}
17-
name={value ? 'sys-enter-2' : 'sys-cancel-2'}
18-
showTooltip={true}
19-
accessibleName={transitionTime ? timeAgo.format(new Date(transitionTime)) : '-'}
20-
/>
34+
<span>
35+
<AnimatedHoverTextButton
36+
icon={
37+
<Icon
38+
design={value ? 'Positive' : 'Negative'}
39+
name={value ? 'sys-enter-2' : 'sys-cancel-2'}
40+
showTooltip={true}
41+
accessibleName={transitionTime ? timeAgo.format(new Date(transitionTime)) : '-'}
42+
/>
43+
}
44+
text={value ? positiveText : negativeText}
45+
onClick={handleOpenerClick}
46+
/>
47+
<Popover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom}>
48+
<Text style={{ maxWidth: '60ch', textAlign: 'left', lineHeight: '1.5em' }}>{message}</Text>
49+
<Text style={{ maxWidth: '60ch', textAlign: 'left', lineHeight: '1.5em', fontWeight: 'bold' }}>
50+
{timeAgo.format(new Date(transitionTime))}
51+
</Text>
52+
</Popover>
53+
</span>
2154
);
2255
};

0 commit comments

Comments
 (0)