Skip to content

Commit

Permalink
Redesign ClusterOverview (#2711)
Browse files Browse the repository at this point in the history
* migrated graph to ui5

* bump deployment

* bump deployment

* adjusted ClusterOverview

* moved cluster metadata from pageheader to panel

* cluster can now be deleted from the cluster overview

* code cleanup

* css clean up & responsiveness

* fix tests

* fix cluster validation test

* changed panel to card

* changed delete to disconnect

* adjustments
  • Loading branch information
chriskari authored Jan 2, 2024
1 parent 711ae59 commit cf53552
Show file tree
Hide file tree
Showing 28 changed files with 993 additions and 456 deletions.
550 changes: 550 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"@ui5/webcomponents-icons-tnt": "^1.20.0",
"@ui5/webcomponents-react": "~1.23.0",
"@ui5/webcomponents-react-base": "^1.23.0",
"@ui5/webcomponents-react-charts": "^1.23.0",
"buffer": "^6.0.3",
"classnames": "^2.2.6",
"copy-to-clipboard": "^3.2.0",
Expand Down
31 changes: 20 additions & 11 deletions public/i18n/en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,17 @@ cluster-overview:
memory: Memory
metrics: Metrics
nodes: Nodes
cluster-details: Cluster Details
metadata: Metadata
statistics:
cpu-usage-m: 'CPU Usage (m)'
memory-usage-gib: 'Memory Usage (GiB)'
title: Monitoring and Health
cpu-usage: 'CPU Usage'
memory-usage: 'Memory Usage'
tooltips:
cpu-used: 'CPU Used: {{percentage}}'
memory-used: 'Memory Used: {{percentage}}'
cpu-used-percentage: 'CPU used: {{percentage}}'
memory-used-percentage: 'Memory used: {{percentage}}'
cpu-used-m: 'CPU (m) used: {{value}}/{{max}}'
memory-used-gib: 'Memory (GiB) used: {{value}}/{{max}}'
cluster-role-bindings:
description: <0>ClusterRoleBinding</0> assigns the permissions defined in a ClusterRole to a user.
name_singular: ClusterRoleBinding
Expand Down Expand Up @@ -101,7 +106,8 @@ clusters:
title-all-clusters: Clusters Overview
title-current-cluster: Cluster Details
title-no-clusters-available: No clusters available
version: Version
kyma-version: Kyma Version
kubernetes-version: Kubernetes Version
statuses:
inmemory: In Memory
localstorage: Local Storage
Expand Down Expand Up @@ -222,6 +228,7 @@ common:
copy: Copy
create: Create
delete: Delete
disconnect: Disconnect
edit: Edit
edit-yaml: Edit YAML
generate-name: Generate
Expand Down Expand Up @@ -254,8 +261,10 @@ common:
delete-dialog:
delete-confirm: Don't ask again
information: You've switched off removal confirmations for all resources. You can switch them back on in Preferences.
message: Are you sure you want to delete {{type}} {{name}}?
title: Delete {{type}}
delete-message: Are you sure you want to delete {{type}} {{name}}?
delete-title: Delete {{type}}
disconnect-message: Are you sure you want to disconnect {{type}} {{name}}?
disconnect-title: Disconnect {{type}}
errors:
couldnt-fetch-resources: Couldn't fetch resources.
error: Error
Expand Down Expand Up @@ -865,15 +874,15 @@ limit-ranges:
title: Limit Ranges
machine-info:
architecture-cpus: Architecture and CPUs
cpu-m: CPU (m)
cpu-usage: 'CPU usage:'
cpu-m: 'CPU (m):'
cpu-usage: CPU Usage
cpus: CPUs
gib: GiB
kube-proxy-version: Kube proxy version
kubelet-version: Kubelet version
memory: Memory
memory-gib: Memory (GiB)
memory-usage: 'Memory usage:'
memory-gib: 'Memory (GiB):'
memory-usage: Memory Usage
operating-system: Operating system
pods-capacity: Pods capacity
title: Machine info
Expand Down
2 changes: 1 addition & 1 deletion resources/backend/deployment.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ spec:
spec:
containers:
- name: backend
image: europe-docker.pkg.dev/kyma-project/dev/busola-backend:PR-2704
image: europe-docker.pkg.dev/kyma-project/dev/busola-backend:PR-2711
imagePullPolicy: Always
resources:
limits:
Expand Down
2 changes: 1 addition & 1 deletion resources/web/deployment.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ spec:
spec:
containers:
- name: busola
image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2707
image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2711
imagePullPolicy: Always
resources:
requests:
Expand Down
88 changes: 88 additions & 0 deletions src/components/Clusters/views/ClusterOverview/ClusterDetails.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { spacing } from '@ui5/webcomponents-react-base';
import { useTranslation } from 'react-i18next';
import { Card, CardHeader, Title } from '@ui5/webcomponents-react';
import { ClusterStorageType } from '../ClusterStorageType';
import { useGetGardenerProvider } from './useGetGardenerProvider';
import { useGetVersions } from './useGetVersions';
import { useFeature } from 'hooks/useFeature';
import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/DynamicPageComponent';

const GardenerProvider = () => {
const { t } = useTranslation();
const showGardenerMetadata = useFeature('SHOW_GARDENER_METADATA')?.isEnabled;

const provider = useGetGardenerProvider({
skip: !showGardenerMetadata,
});

if (!showGardenerMetadata) return null;
if (!provider) return null;

return (
<DynamicPageComponent.Column title={t('gardener.headers.provider') + ':'}>
<p className="gardener-provider">{provider}</p>
</DynamicPageComponent.Column>
);
};

export default function ClusterDetails({ currentCluster }) {
const { t } = useTranslation();
const { loading, kymaVersion, k8sVersion } = useGetVersions();
const config = currentCluster?.config;

return (
<>
<Title
level="H4"
style={{
...spacing.sapUiMediumMarginBegin,
...spacing.sapUiMediumMarginTop,
...spacing.sapUiSmallMarginBottom,
}}
>
{t('cluster-overview.headers.cluster-details')}
</Title>
<div
className="cluster-overview__details-wrapper"
style={spacing.sapUiSmallMarginBeginEnd}
>
<Card
header={
<CardHeader titleText={t('cluster-overview.headers.metadata')} />
}
>
<div
className="cluster-overview__details-grid"
style={spacing.sapUiSmallMargin}
>
{!loading && k8sVersion && (
<DynamicPageComponent.Column
title={t('clusters.overview.kubernetes-version') + ':'}
>
{k8sVersion}
</DynamicPageComponent.Column>
)}
{!loading && kymaVersion && (
<DynamicPageComponent.Column
title={t('clusters.overview.kyma-version') + ':'}
>
{kymaVersion}
</DynamicPageComponent.Column>
)}
<DynamicPageComponent.Column
title={t('clusters.storage.title') + ':'}
>
<ClusterStorageType clusterConfig={config} />
</DynamicPageComponent.Column>
<DynamicPageComponent.Column
title={t('clusters.common.api-server-address') + ':'}
>
{currentCluster?.currentContext?.cluster?.cluster?.server}
</DynamicPageComponent.Column>
<GardenerProvider />
</div>
</Card>
</div>
</>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { ErrorPanel } from 'shared/components/ErrorPanel/ErrorPanel';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

import { useNodesQuery } from 'components/Nodes/nodeQueries';
import { EventsList } from 'shared/components/EventsList';
import { EVENT_MESSAGE_TYPE } from 'hooks/useMessageList';
import { GenericList } from 'shared/components/GenericList/GenericList';
Expand All @@ -12,8 +11,6 @@ import { ReadableCreationTimestamp } from 'shared/components/ReadableCreationTim
import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
import { useUrl } from 'hooks/useUrl';
import './ClusterNodes.scss';
import ClusterStats from './ClusterStats';

const NodeHeader = ({ nodeName }) => {
const { clusterUrl } = useUrl();
Expand All @@ -24,9 +21,8 @@ const NodeHeader = ({ nodeName }) => {
);
};

export function ClusterNodes() {
export function ClusterNodes({ data, error, loading }) {
const { t } = useTranslation();
const { nodes: data, error, loading } = useNodesQuery();

const getStatusType = status => {
if (status === 'Ready') return 'success';
Expand Down Expand Up @@ -71,7 +67,7 @@ export function ClusterNodes() {
<ProgressBar
percentage={cpu.percentage}
tooltip={{
content: t('cluster-overview.tooltips.cpu-used', {
content: t('cluster-overview.tooltips.cpu-used-percentage', {
percentage: cpu.percentage,
}),
position: 'bottom',
Expand All @@ -85,7 +81,7 @@ export function ClusterNodes() {
<ProgressBar
percentage={memory.percentage}
tooltip={{
content: t('cluster-overview.tooltips.memory-used', {
content: t('cluster-overview.tooltips.memory-used-percentage', {
percentage: memory.percentage,
}),
position: 'bottom',
Expand Down Expand Up @@ -141,7 +137,6 @@ export function ClusterNodes() {
title={t('cluster-overview.headers.metrics')}
/>
)}
{data && <ClusterStats data={data} />}
{Events}
</>
);
Expand Down

This file was deleted.

This file was deleted.

Loading

0 comments on commit cf53552

Please sign in to comment.