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

mgr/dashboard: Add usage bar component #21128

Merged
merged 4 commits into from Apr 6, 2018

Conversation

Projects
None yet
4 participants
@ricardoasmarques
Copy link
Member

ricardoasmarques commented Mar 29, 2018

This PR adds a component that can be used to display disk usage (e.g. RBD disk usage).

How to use:

<cd-usage-bar [totalBytes]="2048" [usedBytes]="512"></cd-usage-bar>

screenshot from 2018-03-29 16-29-26

Signed-off-by: Ricardo Marques rimarques@suse.com

@tspmelo

This comment has been minimized.

Copy link
Contributor

tspmelo commented Mar 29, 2018

Could you apply this on the Cephfs and Mirroring components? we are using a basic version of the usage bar.

@ricardoasmarques ricardoasmarques force-pushed the ricardoasmarques:wip-usage-bar branch from 3f93438 to 9eb0ca9 Apr 2, 2018

@ricardoasmarques

This comment has been minimized.

Copy link
Member Author

ricardoasmarques commented Apr 2, 2018

@tspmelo I'm now using this component on:

Health page
screenshot from 2018-04-02 12-05-08

CephFS
screenshot from 2018-04-02 12-00-20

OSDs
screenshot from 2018-04-02 12-00-37

Mirroring page is not applicable here because this is a "usage bar", not a "progress bar".

@tspmelo

This comment has been minimized.

Copy link
Contributor

tspmelo commented Apr 2, 2018

jenkins retest this please

<progressbar type="danger"
[value]="row.used * 100.0 / row.avail">
</progressbar>
<cd-usage-bar [totalBytes]="row.used + row.avail" [usedBytes]="row.used"></cd-usage-bar>

This comment has been minimized.

@tspmelo

tspmelo Apr 2, 2018

Contributor

You could use row.size instead of calculating it again.

@@ -0,0 +1,26 @@
<ng-template #usageTooltipTpl>
<div [innerHtml]="'<table>' +

This comment has been minimized.

@tspmelo

tspmelo Apr 2, 2018

Contributor

You can remove this div and all the strings. Just use a normal table element and use {{ }} on the variables.

ricardoasmarques added some commits Mar 29, 2018

mgr/dashboard: Add usage bar component
Signed-off-by: Ricardo Marques <rimarques@suse.com>
mgr/dashboard: Apply usage-bar component on cephfs
Signed-off-by: Ricardo Marques <rimarques@suse.com>
mgr/dashboard: Apply usage-bar component on osd
Signed-off-by: Ricardo Marques <rimarques@suse.com>
mgr/dashboard: Apply usage-bar component on health
Signed-off-by: Ricardo Marques <rimarques@suse.com>

@ricardoasmarques ricardoasmarques force-pushed the ricardoasmarques:wip-usage-bar branch from 9eb0ca9 to 4b7f56a Apr 4, 2018

@ricardoasmarques

This comment has been minimized.

Copy link
Member Author

ricardoasmarques commented Apr 4, 2018

@tspmelo I've addressed all your comments.

@tspmelo

tspmelo approved these changes Apr 4, 2018

@votdev

votdev approved these changes Apr 5, 2018

@ricardoasmarques

This comment has been minimized.

Copy link
Member Author

ricardoasmarques commented Apr 5, 2018

jenkins retest this please

@LenzGr

This comment has been minimized.

Copy link
Contributor

LenzGr commented Apr 6, 2018

retest this please

@LenzGr LenzGr merged commit 658e5d5 into ceph:master Apr 6, 2018

4 of 5 checks passed

make check (arm64) running make check
Details
Docs: build check OK - docs built
Details
Signed-off-by all commits in this PR are signed
Details
Unmodified Submodules submodules for project are unmodified
Details
make check make check succeeded
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment