New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Status Card to Persistent Dashboard #2897
Add Status Card to Persistent Dashboard #2897
Conversation
50847aa
to
c8120d6
Compare
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Show resolved
Hide resolved
const resiliencyProgressError = prometheusResults.getIn([ | ||
DATA_RESILIENCY_QUERIES[StorageDashboardQuery.RESILIENCY_PROGRESS], | ||
'loadError', | ||
]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please add data type here as well similar to other prometheus response.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It comes as an empty string and a TypeError object.
Is it necessary to define a type for this ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IIRC @rawagner told me that Prometheus error can be arbitrary (any type), so I'd just use as PrometheusResponse
for the query results and leave query error objects untyped.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ack
frontend/public/components/dashboard/status-card/health-item.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...ges/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/utils.ts
Outdated
Show resolved
Hide resolved
@@ -48,3 +51,12 @@ export const getOCSVersion = (items: FirehoseResult): string => { | |||
); | |||
return _.get(operator, 'status.currentCSV'); | |||
}; | |||
|
|||
export const getResiliencyProgress = (results: PrometheusResponse[]): number => { | |||
const progress = getGaugeValue(results[0]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO its better to reuse existing getInstantVectorStats
. You wont have to create your own selector
const progress = getGaugeValue(results[0]); | |
const progress = getInstantVectorStats(result[0])[0]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
getInstantVectorStats
is for graphs. Then we need to get the value as getInstantVectorStats(result[0])[0].y
.This looks a bit hackish but imposes re usability.
Either change it to _.get(results[0], 'data.result[0].value[1]')
only ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking great @afreen23! A few minor things I notice:
FYI @yuvalgalanti |
c8120d6
to
30589f5
Compare
@gnehapk @rawagner @andybraren made the suggested changes |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One last tiny thing and then I'm happy 😄 LGTM! Thank you!
@@ -48,7 +48,7 @@ export const StatusItem: React.FC<StatusItemProps> = ({ | |||
|
|||
export const AlertItem: React.FC<AlertItemProps> = ({ alert }) => { | |||
const LinkComponent = React.useCallback( | |||
() => <Link to={alertURL(alert, alert.rule.id)}>View more</Link>, | |||
() => <Link to={alertURL(alert, alert.rule.id)}>View Details</Link>, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
() => <Link to={alertURL(alert, alert.rule.id)}>View Details</Link>, | |
() => <Link to={alertURL(alert, alert.rule.id)}>View details</Link>, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the reviews @andybraren I have updated the PR. :)
30589f5
to
a563560
Compare
a563560
to
d3476a4
Compare
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
const resiliencyProgressError = prometheusResults.getIn([ | ||
DATA_RESILIENCY_QUERIES[StorageDashboardQuery.RESILIENCY_PROGRESS], | ||
'loadError', | ||
]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IIRC @rawagner told me that Prometheus error can be arbitrary (any type), so I'd just use as PrometheusResponse
for the query results and leave query error objects untyped.
emptyMessage="No persistent storage alerts" | ||
> | ||
{alerts.length | ||
? alerts.map((alert) => <AlertItem key={alertURL(alert, alert.rule.id)} alert={alert} />) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{alerts.length > 0 && <AlertItem key={alertURL(alert, alert.rule.id)} alert={alert} />}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd personally favor alerts.length > 0 && xxx
instead of alerts.length && xxx
but I'm OK with the latter form as well.
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
@afreen23 Please resolve the conflicts. |
d3476a4
to
ea01f2a
Compare
ea01f2a
to
fbce79f
Compare
/approve |
import { PrometheusResponse } from '@console/internal/components/graphs'; | ||
|
||
export const getResiliencyProgress = (results: PrometheusResponse): number => { | ||
const progress = _.get(results, 'data.result[0].value[1]'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: can you make this as a selector? This is being used at multiple [places in both dashboards.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can be done in separate PR, which will change all occurrences of a single stat values.
fbce79f
to
245e963
Compare
error={alertsResponseError} | ||
emptyMessage="No persistent storage alerts" | ||
> | ||
{alerts.length && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need to check for alerts
array emptiness?
We could simply do:
{alerts.map((alert) => <AlertItem key={alertURL(alert, alert.rule.id)} alert={alert} />)}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The ActivityBody
component shows "no persistent storage alerts" only when it gets a falsy
value .
The map function will return [], which will be truthy
.
That's why adding a condition on length.
Reference
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, it's clear to me now.
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Show resolved
Hide resolved
DashboardItemProps, | ||
} from '@console/internal/components/dashboard/with-dashboard-resources'; | ||
import { | ||
DATA_RESILIENCY_QUERY, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't this be DATA_RESILIENCY_QUERIES
(plural) ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It will be singular actually, changed below as well.
The recently merged patch makes it a single query now.
Reference
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, thanks for clarification.
My understanding was that <NAME>_QUERIES
constants in queries.ts
files were, by convention, maps (query name to its value) which is why I suggested the plural.
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
...h-storage-plugin/src/components/dashboard-page/storage-dashboard/status-card/status-card.tsx
Outdated
Show resolved
Hide resolved
245e963
to
ddebc68
Compare
emptyMessage="No persistent storage alerts" | ||
> | ||
{alerts.length | ||
? alerts.map((alert) => <AlertItem key={alertURL(alert, alert.rule.id)} alert={alert} />) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd personally favor alerts.length > 0 && xxx
instead of alerts.length && xxx
but I'm OK with the latter form as well.
/lgtm |
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: afreen23, gnehapk, vojtechszocs The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
/retest Please review the full test history for this PR and help us cut down flakes. |
cc @cloudbehl