Skip to content

Commit 9930767

Browse files
dzsakdzsak
authored
Ability to filter Kustomizations/Sources/HelmReleases/Events by state (#54)
1 parent d4725f4 commit 9930767

File tree

2 files changed

+122
-47
lines changed

2 files changed

+122
-47
lines changed

‎web/src/FluxEvents.js

+56-42
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,68 @@
11
import { NavigationButton } from './NavigationButton'
22
import { TimeLabel } from './TimeLabel'
33
import { format } from "date-fns";
4+
import { useState } from 'react';
45

56
function FluxEvents(props) {
67
const { events, handleNavigationSelect } = props
8+
const [filter, setFilter] = useState(false)
9+
10+
let filteredEvents = events;
11+
if (filter) {
12+
filteredEvents = filteredEvents.filter(e => e.type === "Warning")
13+
}
714

815
return (
9-
<div className="flow-root bg-white p-4 rounded-lg">
10-
<div className="overflow-x-auto">
11-
<div className="inline-block min-w-full py-2 align-middle">
12-
<table className="min-w-full divide-y divide-gray-300">
13-
<thead>
14-
<tr>
15-
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
16-
Last Seen
17-
</th>
18-
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
19-
Object
20-
</th>
21-
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
22-
Type
23-
</th>
24-
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
25-
Reason
26-
</th>
27-
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
28-
Message
29-
</th>
30-
</tr>
31-
</thead>
32-
<tbody className="divide-y divide-gray-200">
33-
{events.map((e, index) => {
34-
return (
35-
<tr key={index} className={e.type === "Warning" ? "bg-orange-400" : ""}>
36-
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
37-
<LastSeen event={e} />
38-
</td>
39-
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-700">
40-
<NavigationButton handleNavigation={() => handleNavigationSelect(e.involvedObjectKind === "Kustomization" ? "Kustomizations" : "Sources", e.involvedObjectNamespace, e.involvedObject, e.involvedObjectKind)}>
41-
{e.involvedObjectKind}: {e.involvedObjectNamespace}/{e.involvedObject}
42-
</NavigationButton>
43-
</td>
44-
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-700">{e.type}</td>
45-
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-700">{e.reason}</td>
46-
<td className="px-3 py-4 text-sm text-gray-700">{e.message}</td>
16+
<div className="space-y-4">
17+
<button className={(filter ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
18+
onClick={() => setFilter(!filter)}
19+
>
20+
Filter errors
21+
</button>
22+
<div className="flow-root bg-white p-4 rounded-lg">
23+
<div className="overflow-x-auto">
24+
<div className="inline-block min-w-full py-2 align-middle">
25+
<table className="min-w-full divide-y divide-gray-300">
26+
<thead>
27+
<tr>
28+
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
29+
Last Seen
30+
</th>
31+
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
32+
Object
33+
</th>
34+
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
35+
Type
36+
</th>
37+
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
38+
Reason
39+
</th>
40+
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
41+
Message
42+
</th>
4743
</tr>
48-
)
49-
})}
50-
</tbody>
51-
</table>
44+
</thead>
45+
<tbody className="divide-y divide-gray-200">
46+
{filteredEvents.map((e, index) => {
47+
return (
48+
<tr key={index} className={e.type === "Warning" ? "bg-orange-400" : ""}>
49+
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
50+
<LastSeen event={e} />
51+
</td>
52+
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-700">
53+
<NavigationButton handleNavigation={() => handleNavigationSelect(e.involvedObjectKind === "Kustomization" ? "Kustomizations" : "Sources", e.involvedObjectNamespace, e.involvedObject, e.involvedObjectKind)}>
54+
{e.involvedObjectKind}: {e.involvedObjectNamespace}/{e.involvedObject}
55+
</NavigationButton>
56+
</td>
57+
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-700">{e.type}</td>
58+
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-700">{e.reason}</td>
59+
<td className="px-3 py-4 text-sm text-gray-700">{e.message}</td>
60+
</tr>
61+
)
62+
})}
63+
</tbody>
64+
</table>
65+
</div>
5266
</div>
5367
</div>
5468
</div>

‎web/src/FluxState.js

+66-5
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ function FluxState(props) {
2222

2323
export function Kustomizations(props){
2424
const { capacitorClient, fluxState, targetReference, handleNavigationSelect } = props
25+
const [filter, setFilter] = useState(false)
2526
const kustomizations = fluxState.kustomizations;
2627

2728
const sortedKustomizations = useMemo(() => {
@@ -32,10 +33,17 @@ export function Kustomizations(props){
3233
return [...kustomizations].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
3334
}, [kustomizations]);
3435

36+
const filteredKustomizations = filterResources(sortedKustomizations, filter)
37+
3538
return (
3639
<div className="space-y-4">
40+
<button className={(filter ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
41+
onClick={() => setFilter(!filter)}
42+
>
43+
Filter errors
44+
</button>
3745
{
38-
sortedKustomizations?.map(kustomization =>
46+
filteredKustomizations?.map(kustomization =>
3947
<Kustomization
4048
key={kustomization.metadata.namespace + kustomization.metadata.name}
4149
capacitorClient={capacitorClient}
@@ -52,7 +60,7 @@ export function Kustomizations(props){
5260

5361
export function HelmReleases(props) {
5462
const { capacitorClient, helmReleases, targetReference, handleNavigationSelect } = props
55-
63+
const [filter, setFilter] = useState(false)
5664
const sortedHelmReleases = useMemo(() => {
5765
if (!helmReleases) {
5866
return null;
@@ -61,10 +69,17 @@ export function HelmReleases(props) {
6169
return [...helmReleases].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
6270
}, [helmReleases]);
6371

72+
const filteredHelmReleases = filterResources(sortedHelmReleases, filter)
73+
6474
return (
6575
<div className="space-y-4">
76+
<button className={(filter ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
77+
onClick={() => setFilter(!filter)}
78+
>
79+
Filter errors
80+
</button>
6681
{
67-
sortedHelmReleases?.map(helmRelease =>
82+
filteredHelmReleases?.map(helmRelease =>
6883
<HelmRelease
6984
key={"hr-"+ helmRelease.metadata.namespace + helmRelease.metadata.name}
7085
capacitorClient={capacitorClient}
@@ -122,7 +137,7 @@ function HelmRelease(props) {
122137

123138
export function Sources(props){
124139
const { capacitorClient, fluxState, targetReference } = props
125-
140+
const [filter, setFilter] = useState(false)
126141
const sortedSources = useMemo(() => {
127142
const sources = [];
128143
if (fluxState.ociRepositories) {
@@ -133,10 +148,17 @@ export function Sources(props){
133148
return [...sources].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
134149
}, [fluxState]);
135150

151+
const filteredSources = filterResources(sortedSources, filter)
152+
136153
return (
137154
<div className="space-y-4">
155+
<button className={(filter ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
156+
onClick={() => setFilter(!filter)}
157+
>
158+
Filter errors
159+
</button>
138160
{
139-
sortedSources?.map(source =>
161+
filteredSources?.map(source =>
140162
<Source
141163
key={"source-"+ source.metadata.namespace + source.metadata.name}
142164
capacitorClient={capacitorClient}
@@ -149,6 +171,45 @@ export function Sources(props){
149171
)
150172
}
151173

174+
function filterResources(resources, filterErrors) {
175+
let filteredResources = resources;
176+
if (filterErrors) {
177+
filteredResources = filteredResources.filter(resource => {
178+
const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Ready")]');
179+
const readyCondition = readyConditions.length === 1 ? readyConditions[0] : undefined
180+
const ready = readyCondition && readyConditions[0].status === "True"
181+
182+
const dependencyNotReady = readyCondition && readyCondition.reason === "DependencyNotReady"
183+
184+
const readyTransitionTime = readyCondition ? readyCondition.lastTransitionTime : undefined
185+
const parsed = Date.parse(readyTransitionTime, "yyyy-MM-dd'T'HH:mm:ss");
186+
const fiveMinutesAgo = new Date();
187+
fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
188+
const stalled = fiveMinutesAgo > parsed
189+
190+
const reconcilingConditions = jp.query(resource.status, '$..conditions[?(@.type=="Reconciling")]');
191+
const reconcilingCondition = reconcilingConditions.length === 1 ? reconcilingConditions[0] : undefined
192+
const reconciling = reconcilingCondition && reconcilingCondition.status === "True"
193+
194+
const fetchFailedConditions = jp.query(resource.status, '$..conditions[?(@.type=="FetchFailed")]');
195+
const fetchFailedCondition = fetchFailedConditions.length === 1 ? fetchFailedConditions[0] : undefined
196+
const fetchFailed = fetchFailedCondition && fetchFailedCondition.status === "True"
197+
198+
if (resource.kind === 'GitRepository' || resource.kind === "OCIRepository" || resource.kind === "Bucket") {
199+
return fetchFailed
200+
}
201+
202+
if (ready || ((reconciling || dependencyNotReady) && !stalled)) {
203+
return false;
204+
} else {
205+
return true;
206+
}
207+
})
208+
}
209+
210+
return filteredResources;
211+
}
212+
152213
function Source(props) {
153214
const { capacitorClient, source, targetReference } = props;
154215
const ref = useRef(null);

0 commit comments

Comments
 (0)