From b139abeecc25d8dae61f4d75d20ac7b00ab5aabb Mon Sep 17 00:00:00 2001 From: chriskari Date: Thu, 12 Sep 2024 11:52:58 +0200 Subject: [PATCH 1/5] feat: added additional statistical cards to namespace overview --- .../Namespaces/AllNamespacesDetails.js | 20 ++- src/resources/Namespaces/NamespaceDetails.js | 4 +- .../NamespaceWorkloads/NamespaceWorkloads.js | 114 ++++++++++++++++++ 3 files changed, 131 insertions(+), 7 deletions(-) diff --git a/src/resources/Namespaces/AllNamespacesDetails.js b/src/resources/Namespaces/AllNamespacesDetails.js index e05fcd1ae0..6ef4a59938 100644 --- a/src/resources/Namespaces/AllNamespacesDetails.js +++ b/src/resources/Namespaces/AllNamespacesDetails.js @@ -3,6 +3,7 @@ import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/Dyn import { NamespaceWorkloads } from './NamespaceWorkloads/NamespaceWorkloads'; import { ResourcesUsage } from './ResourcesUsage'; import { spacing } from '@ui5/webcomponents-react-base'; +import { Title } from '@ui5/webcomponents-react'; export function AllNamespacesDetails() { const { t } = useTranslation(); @@ -12,10 +13,21 @@ export function AllNamespacesDetails() { - - - + <> + + {t('common.headers.monitoring-and-health')} + +
+ + +
+ } /> diff --git a/src/resources/Namespaces/NamespaceDetails.js b/src/resources/Namespaces/NamespaceDetails.js index 97453565c5..75f9e990b3 100644 --- a/src/resources/Namespaces/NamespaceDetails.js +++ b/src/resources/Namespaces/NamespaceDetails.js @@ -17,7 +17,7 @@ import { AllNamespacesDetails } from './AllNamespacesDetails'; import { useSetRecoilState } from 'recoil'; import { ResourceDescription } from 'resources/Namespaces'; -export function NamespaceDetails(props) { +export default function NamespaceDetails(props) { const { t } = useTranslation(); const setShowAdd = useSetRecoilState(showYamlUploadDialogState); @@ -101,5 +101,3 @@ export function NamespaceDetails(props) { ); } - -export default NamespaceDetails; diff --git a/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js b/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js index 39587523cc..79c7a42922 100644 --- a/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js +++ b/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js @@ -4,11 +4,13 @@ import PropTypes from 'prop-types'; import { useGetList } from 'shared/hooks/BackendAPI/useGet'; import { + getHealthyDaemonsets, getHealthyReplicasCount, getStatusesPodCount, PodStatusCounterKey, } from './NamespaceWorkloadsHelpers'; import { CountingCard } from 'shared/components/CountingCard/CountingCard'; +import { useEffect, useState } from 'react'; NamespaceWorkloads.propTypes = { namespace: PropTypes.string }; @@ -31,6 +33,24 @@ export function NamespaceWorkloads({ namespace }) { }, ); + const { data: daemonsetsData } = useGetList()( + namespace + ? `/apis/apps/v1/namespaces/${namespace}/daemonsets` + : `/apis/apps/v1/daemonsets`, + { + pollingInterval: 3200, + }, + ); + + const { data: statefulsetsData } = useGetList()( + namespace + ? `/apis/apps/v1/namespaces/${namespace}/statefulsets` + : `/apis/apps/v1/statefulsets`, + { + pollingInterval: 3200, + }, + ); + const statusPodsData = getStatusesPodCount(podsData); const healthyPods = statusPodsData.has(PodStatusCounterKey.Healthy) ? statusPodsData.get(PodStatusCounterKey.Healthy) @@ -43,6 +63,29 @@ export function NamespaceWorkloads({ namespace }) { : 0; const healthyDeployments = getHealthyReplicasCount(deploymentsData); + const healthyDaemonsets = getHealthyDaemonsets(daemonsetsData); + const healthyStatefulsets = getHealthyReplicasCount(statefulsetsData); + + const { data: servicesData } = useGetList()( + namespace ? `/api/v1/namespaces/${namespace}/services` : `/api/v1/services`, + { + pollingInterval: 3200, + }, + ); + + const [loadbalancerNumber, setLoadbalancerNumber] = useState(0); + + useEffect(() => { + if (servicesData) { + let loadbalancers = 0; + for (const sv of servicesData) { + if (sv?.spec?.type === 'LoadBalancer') { + loadbalancers++; + } + } + setLoadbalancerNumber(loadbalancers); + } + }, [servicesData]); return ( <> @@ -96,6 +139,77 @@ export function NamespaceWorkloads({ namespace }) { /> )} + {daemonsetsData && ( +
+ +
+ )} + {statefulsetsData && ( +
+ +
+ )} + {servicesData && ( +
+ +
+ )} )} From eb30dcc8db0e8e166855d946d6b96ff85a615188 Mon Sep 17 00:00:00 2001 From: chriskari Date: Fri, 13 Sep 2024 02:05:36 +0200 Subject: [PATCH 2/5] feat: enhanced all namespaces details --- .../Namespaces/AllNamespacesDetails.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/resources/Namespaces/AllNamespacesDetails.js b/src/resources/Namespaces/AllNamespacesDetails.js index 6ef4a59938..ef53a6c161 100644 --- a/src/resources/Namespaces/AllNamespacesDetails.js +++ b/src/resources/Namespaces/AllNamespacesDetails.js @@ -4,10 +4,40 @@ import { NamespaceWorkloads } from './NamespaceWorkloads/NamespaceWorkloads'; import { ResourcesUsage } from './ResourcesUsage'; import { spacing } from '@ui5/webcomponents-react-base'; import { Title } from '@ui5/webcomponents-react'; +import LimitRangeList from 'resources/LimitRanges/LimitRangeList'; +import { EventsList } from 'shared/components/EventsList'; +import { ResourceQuotasList as ResourceQuotaListComponent } from 'resources/ResourceQuotas/ResourceQuotasList'; +import { EVENT_MESSAGE_TYPE } from 'hooks/useMessageList'; export function AllNamespacesDetails() { const { t } = useTranslation(); + const limitRangesParams = { + hasDetailsView: true, + resourceUrl: `/api/v1/limitranges`, + resourceType: 'LimitRanges', + namespace: '-all-', + isCompact: true, + showTitle: true, + }; + + const LimitrangesList = ; + + const resourceQuotasParams = { + hasDetailsView: true, + resourceUrl: `/api/v1/resourcequotas`, + resourceType: 'ResourceQuotas', + namespace: '-all-', + isCompact: true, + showTitle: true, + }; + + const ResourceQuotasList = ( + + ); + + const Events = ; + return ( <> + {LimitrangesList} + {ResourceQuotasList} + {Events} } /> From aa6130569189251f594a16c7a0ca0ecf062c390d Mon Sep 17 00:00:00 2001 From: chriskari Date: Fri, 13 Sep 2024 09:17:32 +0200 Subject: [PATCH 3/5] feat: disableCreate of resourceQuotas on all namespaces overview --- src/resources/Namespaces/AllNamespacesDetails.js | 1 + src/resources/ResourceQuotas/ResourceQuotasList.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/resources/Namespaces/AllNamespacesDetails.js b/src/resources/Namespaces/AllNamespacesDetails.js index ef53a6c161..a7df25aa17 100644 --- a/src/resources/Namespaces/AllNamespacesDetails.js +++ b/src/resources/Namespaces/AllNamespacesDetails.js @@ -30,6 +30,7 @@ export function AllNamespacesDetails() { namespace: '-all-', isCompact: true, showTitle: true, + disableCreate: true, }; const ResourceQuotasList = ( diff --git a/src/resources/ResourceQuotas/ResourceQuotasList.tsx b/src/resources/ResourceQuotas/ResourceQuotasList.tsx index de251aaa72..e015d444e3 100644 --- a/src/resources/ResourceQuotas/ResourceQuotasList.tsx +++ b/src/resources/ResourceQuotas/ResourceQuotasList.tsx @@ -61,7 +61,7 @@ export function ResourceQuotasList(props: any) { ); }; - const createButton = ( + const createButton = !props?.disableCreate ? ( - ); + ) : null; return ( Date: Fri, 13 Sep 2024 16:49:37 +0200 Subject: [PATCH 4/5] feat: added yaml upload to all namespaces overview & fixed card url --- src/resources/Namespaces/AllNamespacesDetails.js | 3 +++ .../Namespaces/NamespaceWorkloads/NamespaceWorkloads.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/resources/Namespaces/AllNamespacesDetails.js b/src/resources/Namespaces/AllNamespacesDetails.js index a7df25aa17..aedd63a677 100644 --- a/src/resources/Namespaces/AllNamespacesDetails.js +++ b/src/resources/Namespaces/AllNamespacesDetails.js @@ -8,6 +8,8 @@ import LimitRangeList from 'resources/LimitRanges/LimitRangeList'; import { EventsList } from 'shared/components/EventsList'; import { ResourceQuotasList as ResourceQuotaListComponent } from 'resources/ResourceQuotas/ResourceQuotasList'; import { EVENT_MESSAGE_TYPE } from 'hooks/useMessageList'; +import { createPortal } from 'react-dom'; +import YamlUploadDialog from './YamlUpload/YamlUploadDialog'; export function AllNamespacesDetails() { const { t } = useTranslation(); @@ -63,6 +65,7 @@ export function AllNamespacesDetails() { {Events} } + actions={createPortal(, document.body)} /> ); diff --git a/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js b/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js index 79c7a42922..a3211df5cd 100644 --- a/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js +++ b/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js @@ -158,6 +158,7 @@ export function NamespaceWorkloads({ namespace }) { value: daemonsetsData?.length - healthyDaemonsets, }, ]} + allNamespaceURL={false} resourceUrl="daemonsets" /> @@ -183,6 +184,7 @@ export function NamespaceWorkloads({ namespace }) { value: statefulsetsData?.length - healthyStatefulsets, }, ]} + allNamespaceURL={false} resourceUrl="statefulsets" /> @@ -206,6 +208,7 @@ export function NamespaceWorkloads({ namespace }) { value: servicesData?.length - loadbalancerNumber, }, ]} + allNamespaceURL={false} resourceUrl="services" /> From 8d8be9165370f1ec007d70de89018cf80fdf0030 Mon Sep 17 00:00:00 2001 From: chriskari Date: Fri, 13 Sep 2024 17:14:21 +0200 Subject: [PATCH 5/5] feat: added yaml upload button --- .../Namespaces/AllNamespacesDetails.js | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/resources/Namespaces/AllNamespacesDetails.js b/src/resources/Namespaces/AllNamespacesDetails.js index aedd63a677..e248f78a8d 100644 --- a/src/resources/Namespaces/AllNamespacesDetails.js +++ b/src/resources/Namespaces/AllNamespacesDetails.js @@ -3,16 +3,19 @@ import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/Dyn import { NamespaceWorkloads } from './NamespaceWorkloads/NamespaceWorkloads'; import { ResourcesUsage } from './ResourcesUsage'; import { spacing } from '@ui5/webcomponents-react-base'; -import { Title } from '@ui5/webcomponents-react'; +import { Button, Title } from '@ui5/webcomponents-react'; import LimitRangeList from 'resources/LimitRanges/LimitRangeList'; import { EventsList } from 'shared/components/EventsList'; import { ResourceQuotasList as ResourceQuotaListComponent } from 'resources/ResourceQuotas/ResourceQuotasList'; import { EVENT_MESSAGE_TYPE } from 'hooks/useMessageList'; import { createPortal } from 'react-dom'; import YamlUploadDialog from './YamlUpload/YamlUploadDialog'; +import { useSetRecoilState } from 'recoil'; +import { showYamlUploadDialogState } from 'state/showYamlUploadDialogAtom'; export function AllNamespacesDetails() { const { t } = useTranslation(); + const setShowAdd = useSetRecoilState(showYamlUploadDialogState); const limitRangesParams = { hasDetailsView: true, @@ -41,6 +44,20 @@ export function AllNamespacesDetails() { const Events = ; + const headerActions = ( + <> + + {createPortal(, document.body)} + + ); + return ( <> } - actions={createPortal(, document.body)} + actions={headerActions} /> );