Limit fields to max 4 and valid statuses

This commit is contained in:
Felix Cornelius
2024-11-19 21:03:32 +01:00
parent 55dd26ce44
commit 5e938b69a0
2 changed files with 21 additions and 13 deletions

View File

@@ -5,7 +5,7 @@ description: ArgoCD Widget Configuration
Learn more about [ArgoCD](https://argo-cd.readthedocs.io/en/stable/).
Allowed fields: `["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"]`
Allowed fields (limited to a max of 4): `["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"]`
```yaml
widget:

View File

@@ -5,20 +5,28 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { widget } = service;
// Limits fields to available statuses
const validFields = ["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"];
widget.fields = widget.fields.filter((field) => validFields.includes(field));
// Limits max number of displayed fields
const MAX_ALLOWED_FIELDS = 4;
if (widget.fields != null && widget.fields.length > MAX_ALLOWED_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
}
const { data: appsData, error: appsError } = useWidgetAPI(widget, "applications");
const appCounts = ["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"].map(
(status) => {
if (status === "apps") {
return { status, count: appsData?.items?.length };
}
const apiStatus = status.charAt(0).toUpperCase() + status.slice(1);
const count = appsData?.items?.filter(
(item) => item.status?.sync?.status === apiStatus || item.status?.health?.status === apiStatus,
).length;
return { status, count };
},
);
const appCounts = widget.fields.map((status) => {
if (status === "apps") {
return { status, count: appsData?.items?.length };
}
const apiStatus = status.charAt(0).toUpperCase() + status.slice(1);
const count = appsData?.items?.filter(
(item) => item.status?.sync?.status === apiStatus || item.status?.health?.status === apiStatus,
).length;
return { status, count };
});
if (appsError) {
return <Container service={service} error={appsError} />;