-
Notifications
You must be signed in to change notification settings - Fork 593
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Changes to Capacity Metrics in OCS Persistent Storage Dashboard
- Add Raw Capacity Card in Dashboard - Remove Avaiable Metric from Breakdown Card - Rename Capacity Breakdown Card - Add Info Tip to Capacity Breakdown Card
- Loading branch information
Showing
6 changed files
with
273 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
.../src/components/dashboard-page/storage-dashboard/raw-capacity-card/raw-capacity-card.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| @import '../../../../../../console-shared/src/styles/skeleton-screen.scss'; | ||
|
|
||
| .ceph-raw-usage { | ||
| &__container { | ||
| display: flex; | ||
| width: 100%; | ||
| margin-top: var(--pf-global--spacer--md); | ||
| } | ||
| &__legend { | ||
| flex-grow: 1; | ||
| padding-top: var(--pf-global--spacer--md); | ||
| } | ||
| &__chart { | ||
| flex-grow: 0.5; | ||
| max-height: 180px; | ||
| } | ||
| &--error { | ||
| margin-top: var(--pf-global--spacer--xs); | ||
| margin-bottom: var(--pf-global--spacer--xs); | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| } | ||
|
|
||
| .ceph-raw-card-legend { | ||
| &__container { | ||
| margin-bottom: 1em; | ||
| flex: 1 1 0; | ||
| display: flex; | ||
| } | ||
| &__color-square { | ||
| width: 15px; | ||
| height: 15px; | ||
| } | ||
| &__title { | ||
| margin-left: 6px; | ||
| line-height: 15px; | ||
| font-weight: bold; | ||
| &--pad { | ||
| padding-right: 30px; | ||
| } | ||
| } | ||
| &__index-block { | ||
| display: flex; | ||
| } | ||
| &__value-block { | ||
| display: flex; | ||
| flex-direction: row-reverse; | ||
| flex-grow: 0.25; | ||
| } | ||
| &__text { | ||
| line-height: 15px; | ||
| font-weight: bold; | ||
| } | ||
| } | ||
|
|
||
| /* Styles related to lodaing state */ | ||
|
|
||
| .skeleton-activity { | ||
| animation: $skeleton-animation; | ||
| background: $skeleton-color; | ||
| opacity: 0; | ||
| border-radius: 6px; | ||
| margin: 0.5rem 0.7em 0.5rem 0.7em; | ||
| height: 30px; | ||
| &::after { | ||
| background-repeat: no-repeat; | ||
| content: ''; | ||
| display: block; | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| .ceph-raw-usage-loading { | ||
| &__legend { | ||
| flex-grow: 1; | ||
| } | ||
| &-legend__item { | ||
| min-width: 1em; | ||
| max-width: 18em; | ||
| flex-grow: 0.5; | ||
| min-height: 1em; | ||
| max-height: 2em; | ||
| } | ||
| &__chart { | ||
| flex-grow: 1; | ||
| min-width: 5em; | ||
| max-width: 10em; | ||
| min-height: 8em; | ||
| max-height: 10em; | ||
| } | ||
| } |
140 changes: 140 additions & 0 deletions
140
...n/src/components/dashboard-page/storage-dashboard/raw-capacity-card/raw-capacity-card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import * as React from 'react'; | ||
| import classNames from 'classnames'; | ||
| import { compose } from 'redux'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { ChartDonut, ChartLabel } from '@patternfly/react-charts'; | ||
| import { usePrometheusQueries } from '@console/shared/src/components/dashboard/utilization-card/prometheus-hook'; | ||
| import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard'; | ||
| import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle'; | ||
| import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody'; | ||
| import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader'; | ||
| import { humanizeBinaryBytes } from '@console/internal/components/utils'; | ||
| import { getInstantVectorStats } from '@console/internal/components/graphs/utils'; | ||
| import { CAPACITY_INFO_QUERIES } from '../../../../constants/queries'; | ||
| import './raw-capacity-card.scss'; | ||
|
|
||
| const queries = (() => Object.values(CAPACITY_INFO_QUERIES))(); | ||
| const colorScale = ['#0166cc', '#d6d6d6']; | ||
|
|
||
| // Enchance instantVectorStats to directly parse the values (else loading state won't be accurate) | ||
| const parser = compose((val) => val?.[0]?.y, getInstantVectorStats); | ||
|
|
||
| const RawCapacityCard: React.FC = React.memo(() => { | ||
| const [values, loading, loadError] = usePrometheusQueries(queries, parser as any); | ||
| const { t } = useTranslation(); | ||
|
|
||
| const totalCapacityMetric = values?.[0]; | ||
| const usedCapacityMetric = values?.[1]; | ||
|
|
||
| const totalCapacity = humanizeBinaryBytes(totalCapacityMetric); | ||
| const availableCapacity = humanizeBinaryBytes( | ||
| totalCapacityMetric - usedCapacityMetric, | ||
| null, | ||
| totalCapacity?.unit, | ||
| ); | ||
| const usedCapacity = humanizeBinaryBytes(usedCapacityMetric, null, totalCapacity?.unit); | ||
|
|
||
| // Adjusted units | ||
| const usedCapacityAdjusted = humanizeBinaryBytes(usedCapacityMetric); | ||
| const availableCapacityAdjusted = humanizeBinaryBytes(totalCapacityMetric - usedCapacityMetric); | ||
|
|
||
| const donutData = [ | ||
| { x: 'Used', y: usedCapacity.value, string: usedCapacityAdjusted.string }, | ||
| { | ||
| x: 'Available', | ||
| y: availableCapacity.value, | ||
| string: availableCapacityAdjusted.string, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <DashboardCard> | ||
| <DashboardCardHeader> | ||
| <DashboardCardTitle>{t('ceph-storage-plugin~Raw Capacity')}</DashboardCardTitle> | ||
| </DashboardCardHeader> | ||
| <DashboardCardBody className="ceph-raw-usage__container"> | ||
| {!loading && !loadError && ( | ||
| <> | ||
| <div className="ceph-raw-usage__item ceph-raw-usage__legend"> | ||
| <ChartLegend | ||
| fill={colorScale[0]} | ||
| title={t('ceph-storage-plugin~Used')} | ||
| text={usedCapacityAdjusted.string} | ||
| titleClassName="ceph-raw-card-legend__title--pad" | ||
| /> | ||
| <ChartLegend | ||
| fill={colorScale[1]} | ||
| title={t('ceph-storage-plugin~Available')} | ||
| text={availableCapacityAdjusted.string} | ||
| /> | ||
| </div> | ||
| <div className="ceph-raw-usage__item ceph-raw-usage__chart"> | ||
| <ChartDonut | ||
| ariaDesc={t('ceph-storage-plugin~Available versus Used Capacity')} | ||
| ariaTitle={t('ceph-storage-plugin~Available versus Used Capacity')} | ||
| height={150} | ||
| width={150} | ||
| data={donutData} | ||
| labels={({ datum }) => `${datum.string}`} | ||
| title={usedCapacityAdjusted.string} | ||
| subTitle={t('ceph-storage-plugin~Used of {{capacity}}', { | ||
| capacity: totalCapacity, | ||
| })} | ||
| colorScale={colorScale} | ||
| padding={{ top: 0, bottom: 0, left: 0, right: 0 }} | ||
| constrainToVisibleArea | ||
| subTitleComponent={ | ||
| <ChartLabel dy={5} style={{ fill: `var(--pf-global--palette--black-500)` }} /> | ||
| } | ||
| /> | ||
| </div> | ||
| </> | ||
| )} | ||
| {!loadError && loading && <LoadingCardBody />} | ||
| {loadError && !loading && <ErrorCardBody />} | ||
| </DashboardCardBody> | ||
| </DashboardCard> | ||
| ); | ||
| }); | ||
|
|
||
| const LoadingCardBody: React.FC = () => ( | ||
| <div className="ceph-raw-usage__container"> | ||
| <div className="ceph-raw-usage-loading__legend"> | ||
| <div className="ceph-raw-usage-loading-legend__item skeleton-activity" /> | ||
| <div className="ceph-raw-usage-loading-legend__item skeleton-activity" /> | ||
| </div> | ||
| <div className="ceph-raw-usage-loading__chart skeleton-activity" /> | ||
| </div> | ||
| ); | ||
|
|
||
| const ErrorCardBody: React.FC = () => { | ||
| const { t } = useTranslation(); | ||
| return ( | ||
| <> | ||
| <div className="ceph-raw-usage--error text-muted"> | ||
| {t('ceph-storage-plugin~Not Available')} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const ChartLegend: React.FC<ChartLegendProps> = ({ fill, title, text, titleClassName }) => ( | ||
| <div className="ceph-raw-card-legend__container"> | ||
| <div className="ceph-raw-card-legend__index-block"> | ||
| <div className="ceph-raw-card-legend__color-square" style={{ backgroundColor: fill }} /> | ||
| <div className={classNames('ceph-raw-card-legend__title', titleClassName)}>{title}</div> | ||
| </div> | ||
| <div className="ceph-raw-card-legend__value-block"> | ||
| <div className="ceph-raw-card-legend__text">{text}</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| type ChartLegendProps = { | ||
| fill: string; | ||
| text: string; | ||
| title: string; | ||
| titleClassName?: string; | ||
| }; | ||
|
|
||
| export default RawCapacityCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters