Skip to content

Commit

Permalink
Merge pull request #935 from TimothyAsirJeyasing/fix-dropdown-issue-d…
Browse files Browse the repository at this point in the history 
…rdashboard

Fix the time selection dropdown issue for the ceph RBD snapshot graph in DR dashboard
  • Loading branch information
@openshift-merge-robot
openshift-merge-robot authored Aug 21, 2023
2 parents 82a8c77 + feb785a commit 559babd
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 75 deletions.
16 changes: 8 additions & 8 deletions locales/en/plugin__odf-console.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,6 @@
"{{ pvcsWithIssueCount }} with issues": "{{ pvcsWithIssueCount }} with issues",
"Snapshot": "Snapshot",
"Last on: {{ lastSyncTime }}": "Last on: {{ lastSyncTime }}",
"Current value: ": "Current value: ",
"Max value: ": "Max value: ",
"Min value: ": "Min value: ",
"Snapshots synced": "Snapshots synced",
"The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.": "The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.",
"Replication throughput": "Replication throughput",
"The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.": "The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.",
"Operator health": "Operator health",
"Operators are responsible for maintaining and reconciling the state of the cluster.": "Operators are responsible for maintaining and reconciling the state of the cluster.",
"Degraded": "Degraded",
Expand All @@ -86,6 +79,14 @@
" {{ appsWithIssues }} of {{ protectedAppSetsCount }} apps with issues": " {{ appsWithIssues }} of {{ protectedAppSetsCount }} apps with issues",
"PVCs": "PVCs",
" {{ protectedPVCsCount }} protected": " {{ protectedPVCsCount }} protected",
"Current value: ": "Current value: ",
"Max value: ": "Max value: ",
"Min value: ": "Min value: ",
"Utilization": "Utilization",
"Snapshots synced": "Snapshots synced",
"The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.": "The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.",
"Replication throughput": "Replication throughput",
"The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.": "The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.",
"Volume replication health": "Volume replication health",
"Volumes": "Volumes",
"Cluster: {{clusterName}}": "Cluster: {{clusterName}}",
Expand Down Expand Up @@ -443,7 +444,6 @@
"In-transit encryption": "In-transit encryption",
"Storage Cluster": "Storage Cluster",
"Requested capacity": "Requested capacity",
"Utilization": "Utilization",
"Expanding StorageCluster": "Expanding StorageCluster",
"Upgrading Data Foundation's Operator": "Upgrading Data Foundation's Operator",
"PersistentVolumeClaims": "PersistentVolumeClaims",
Expand Down
4 changes: 4 additions & 0 deletions packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@
height: auto;
}

.mco-cluster-app__graph--margin-bottom {
margin-bottom: var(--pf-global--spacer--xl);
}

.mco-cluster-app__donut-chart {
width: 350px;
height: 220px;
Expand Down
70 changes: 6 additions & 64 deletions packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,9 @@ import {
MirrorPeerKind,
} from '@odf/mco/types';
import { getClusterNamesFromMirrorPeers } from '@odf/mco/utils';
import { getMax, getMin } from '@odf/shared/charts';
import { CustomUtilizationSummaryProps } from '@odf/shared/dashboards/utilization-card/utilization-item';
import { DataUnavailableError } from '@odf/shared/generic/Error';
import { useCustomPrometheusPoll } from '@odf/shared/hooks/custom-prometheus-poll';
import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
import {
humanizeBinaryBytes,
humanizeDecimalBytesPerSec,
humanizeNumber,
referenceForModel,
} from '@odf/shared/utils';
import { referenceForModel } from '@odf/shared/utils';
import {
PrometheusResponse,
useK8sWatchResource,
Expand All @@ -46,7 +38,7 @@ import {
getProtectedPVCFromVRG,
filterPVCDataUsingAppsets,
} from '../../../../utils';
import { DRDashboard, getLastSyncPerClusterQuery } from '../../queries';
import { getLastSyncPerClusterQuery } from '../../queries';
import {
CSVStatusesContext,
DRResourcesContext,
Expand All @@ -61,51 +53,18 @@ import {
PeerConnectionSection,
ApplicationsSection,
PVCsSection,
SnapshotUtilizationCard,
UtilizationCard,
} from './cluster';
import { ClusterAppDropdown, VolumeSummarySection } from './common';
import './cluster-app-card.scss';

const CustomUtilizationSummary: React.FC<CustomUtilizationSummaryProps> = ({
currentHumanized,
utilizationData,
}) => {
const { t } = useCustomTranslation();
const maxVal = getMax(utilizationData);
const minVal = getMin(utilizationData);
const humanizedMax = !!maxVal ? humanizeBinaryBytes(maxVal).string : null;
const humanizedMin = !!minVal ? humanizeBinaryBytes(minVal).string : null;

return (
<div className="co-utilization-card__item-value co-utilization-card__item-summary">
<div>
<span>{t('Current value: ')}</span>
<span className="bold">{currentHumanized}</span>
</div>
{!!utilizationData?.length && (
<>
<div>
<span>{t('Max value: ')}</span>
<span className="bold">{humanizedMax}</span>
</div>
<div>
<span>{t('Min value: ')}</span>
<span className="bold">{humanizedMin}</span>
</div>
</>
)}
</div>
);
};

export const ClusterWiseCard: React.FC<ClusterWiseCardProps> = ({
clusterName,
lastSyncTimeData,
protectedPVCData,
csvData,
clusterResources,
}) => {
const { t } = useCustomTranslation();
const [mirrorPeers] = useK8sWatchResource<MirrorPeerKind[]>({
kind: referenceForModel(MirrorPeerModel),
isList: true,
Expand Down Expand Up @@ -145,26 +104,9 @@ export const ClusterWiseCard: React.FC<ClusterWiseCardProps> = ({
<VolumeSummarySection protectedPVCData={protectedPVCData} />
</GridItem>
<GridItem lg={12} rowSpan={8} sm={12}>
<SnapshotUtilizationCard
clusters={peerClusters}
title={t('Snapshots synced')}
queryType={DRDashboard.RBD_SNAPSHOT_SNAPSHOTS}
titleToolTip={t(
'The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.'
)}
humanizeValue={humanizeNumber}
/>
</GridItem>
<GridItem lg={12} rowSpan={8} sm={12}>
<SnapshotUtilizationCard
clusters={[clusterName]}
title={t('Replication throughput')}
queryType={DRDashboard.RBD_SNAPSHOTS_SYNC_BYTES}
titleToolTip={t(
'The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.'
)}
humanizeValue={humanizeDecimalBytesPerSec}
CustomUtilizationSummary={CustomUtilizationSummary}
<UtilizationCard
clusterName={clusterName}
peerClusters={peerClusters}
/>
</GridItem>
</Grid>
Expand Down
92 changes: 89 additions & 3 deletions packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
getVolumeReplicationHealth,
getManagedClusterAvailableCondition,
} from '@odf/mco/utils';
import { getMax, getMin } from '@odf/shared/charts';
import HealthItem from '@odf/shared/dashboards/status-card/HealthItem';
import { healthStateMapping } from '@odf/shared/dashboards/status-card/states';
import { PrometheusUtilizationItem } from '@odf/shared/dashboards/utilization-card/prometheus-utilization-item';
Expand All @@ -34,6 +35,7 @@ import { FieldLevelHelp } from '@odf/shared/generic';
import { useCustomPrometheusPoll } from '@odf/shared/hooks/custom-prometheus-poll';
import Status, { StatusPopupSection } from '@odf/shared/popup/status-popup';
import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
import { humanizeDecimalBytesPerSec, humanizeNumber } from '@odf/shared/utils';
import {
HealthState,
PrometheusResponse,
Expand Down Expand Up @@ -266,9 +268,6 @@ export const SnapshotUtilizationCard: React.FC<SnapshotUtilizationCardProps> =
}) => {
return (
<>
<div className="mco-dashboard__contentRow mco-cluster-app__contentRow--flexEnd">
<UtilizationDurationDropdown />
</div>
<div>
<StatusText>
{title}
Expand All @@ -294,6 +293,88 @@ export const SnapshotUtilizationCard: React.FC<SnapshotUtilizationCardProps> =
);
};

const CustomUtilizationSummary: React.FC<CustomUtilizationSummaryProps> = ({
currentHumanized,
utilizationData,
}) => {
const { t } = useCustomTranslation();
const maxVal = getMax(utilizationData);
const minVal = getMin(utilizationData);
const humanizedMax = !!maxVal
? humanizeDecimalBytesPerSec(maxVal).string
: null;
const humanizedMin = !!minVal
? humanizeDecimalBytesPerSec(minVal).string
: null;

return (
<div className="co-utilization-card__item-value co-utilization-card__item-summary">
<div>
<span>{t('Current value: ')}</span>
<span className="bold">{currentHumanized}</span>
</div>
{!!utilizationData?.length && (
<>
<div>
<span>{t('Max value: ')}</span>
<span className="bold">{humanizedMax}</span>
</div>
<div>
<span>{t('Min value: ')}</span>
<span className="bold">{humanizedMin}</span>
</div>
</>
)}
</div>
);
};

export const UtilizationCard: React.FC<UtilizationCardProps> = ({
clusterName,
peerClusters,
}) => {
const { t } = useCustomTranslation();

return (
<div className="mco-dashboard__contentColumn">
<div className="mco-dashboard__contentRow mco-cluster-app__contentRow--spaceBetween">
<Text
component={TextVariants.h3}
className="mco-cluster-app__contentRow--flexStart"
>
{t('Utilization')}
</Text>
<div className="mco-dashboard__contentRow mco-cluster-app__contentRow--flexEnd">
<UtilizationDurationDropdown />
</div>
</div>
<div className="mco-cluster-app__graph--margin-bottom">
<SnapshotUtilizationCard
clusters={peerClusters}
title={t('Snapshots synced')}
queryType={DRDashboard.RBD_SNAPSHOT_SNAPSHOTS}
titleToolTip={t(
'The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.'
)}
humanizeValue={humanizeNumber}
/>
</div>
<div className="mco-cluster-app__graph--margin-bottom">
<SnapshotUtilizationCard
clusters={[clusterName]}
title={t('Replication throughput')}
queryType={DRDashboard.RBD_SNAPSHOTS_SYNC_BYTES}
humanizeValue={humanizeDecimalBytesPerSec}
titleToolTip={t(
'The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.'
)}
CustomUtilizationSummary={CustomUtilizationSummary}
/>
</div>
</div>
);
};

type ClusterCSVStatus = {
[ODR_CLUSTER_OPERATOR]: string;
[VOL_SYNC]: string;
Expand Down Expand Up @@ -333,3 +414,8 @@ type SnapshotUtilizationCardProps = {
titleToolTip: string;
CustomUtilizationSummary?: React.FC<CustomUtilizationSummaryProps>;
};

type UtilizationCardProps = {
clusterName: string;
peerClusters: string[];
};

0 comments on commit 559babd

Please sign in to comment.