Skip to content
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.

Sign up for GitHub

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

Jump to bottom

mgr/dashboard: remove daemon list for badges #46565

Closed
wants to merge 3 commits into from
Closed

mgr/dashboard: remove daemon list for badges #46565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
461e5fb
mgr/dashboard: remove daemon list for badges
Pegonzal Jun 8, 2022
08fc86a
mgr/dashboard: fixes and proposed changes
Pegonzal Jun 13, 2022
b81f5ac
mgr/dashboard: changed functions from ifs to dictionaries, updated to…
Pegonzal Jun 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 10 additions & 12 deletions ...gr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.html
View file
Open in desktop
@@ -1,13 +1,11 @@
<cd-table [data]="data"
columnMode="flex"
[columns]="columns"
[autoReload]="-1"
(fetchData)="refresh()"
[status]="tableStatus">
</cd-table>
<ng-container *ngIf="empty">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's always use the ngIf="this else that".

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to cache data yourself. Angular works better when you check the data you want. Angular does the memoization for you.

Suggested change
<ng-container *ngIf="empty">
<ng-container *ngIf="data">

<strong class="text-danger"
i18n>There are no daemons</strong>
</ng-container>

<ng-template #healthTmpl
let-row="row"
let-value="value">
<span [ngClass]="row.health_color | mirrorHealthColor">{{ value }}</span>
</ng-template>
<ng-container *ngFor="let daemon of daemons | keyvalue">
<span *ngIf="daemon.value > 0"
[ngClass]="daemon.key | mirrorHealthColor"
class="m-1"
i18n>{{daemon.value}} {{daemonStatus(daemon.key)}}</span>
Pegonzal marked this conversation as resolved.
Show resolved Hide resolved
</ng-container>
11 changes: 11 additions & 0 deletions ...dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts
View file
Open in desktop
Expand Up @@ -25,4 +25,15 @@ describe('DaemonListComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});

it('should return daemons states', () => {
component.data = [
{ health_color: 'error' },
{ health_color: 'warning' },
{ health_color: 'success' },
{ health_color: 'success' }
];
const result = component.countDaemons();
expect(result).toStrictEqual({ info: 0, error: 1, warning: 1, success: 2 });
});
});
47 changes: 20 additions & 27 deletions .../mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.ts
View file
Open in desktop
Expand Up @@ -4,7 +4,6 @@ import { Subscription } from 'rxjs';

import { RbdMirroringService } from '~/app/shared/api/rbd-mirroring.service';
import { TableStatusViewCache } from '~/app/shared/classes/table-status-view-cache';
import { CephShortVersionPipe } from '~/app/shared/pipes/ceph-short-version.pipe';

@Component({
selector: 'cd-mirroring-daemons',
Expand All @@ -17,46 +16,40 @@ export class DaemonListComponent implements OnInit, OnDestroy {

subs: Subscription;

data: [];
columns: {};
data: any[];
daemons: {};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's name things clearly: this is count/histogram of the daemon statuses, not the daemons themselves. Additionally, a proper type should be here

Suggested change
daemons: {};
daemonCount: Record<'up' | 'down' | ..., number>;

Or:

enum DaemonStatus {
  up,
  down,
}

let countDaemon: {[Key in DaemonStatus as string]: number} = {up: 1, down: 2};

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I Will do it. I'll be more careful with the naming

empty: boolean;

tableStatus = new TableStatusViewCache();

constructor(
private rbdMirroringService: RbdMirroringService,
private cephShortVersionPipe: CephShortVersionPipe
) {}
constructor(private rbdMirroringService: RbdMirroringService) {
this.empty = false;
}

ngOnInit() {
this.columns = [
{ prop: 'instance_id', name: $localize`Instance`, flexGrow: 2 },
{ prop: 'id', name: $localize`ID`, flexGrow: 2 },
{ prop: 'server_hostname', name: $localize`Hostname`, flexGrow: 2 },
{
prop: 'version',
name: $localize`Version`,
pipe: this.cephShortVersionPipe,
flexGrow: 2
},
{
prop: 'health',
name: $localize`Health`,
cellTemplate: this.healthTmpl,
flexGrow: 1
}
];

this.subs = this.rbdMirroringService.subscribeSummary((data) => {
this.data = data.content_data.daemons;
this.tableStatus = new TableStatusViewCache(data.status);
this.daemons = this.countDaemons();
});
}

ngOnDestroy(): void {
this.subs.unsubscribe();
}

refresh() {
this.rbdMirroringService.refresh();
countDaemons(): {} {
const daemon_states = { info: 0, error: 0, warning: 0, success: 0 };
this.empty = this.data.length > 0 ? false : true;
for (let i = 0; i < this.data.length; i++) {
const health_color = this.data[i]['health_color'];
daemon_states[health_color]++;
}
return daemon_states;
}

daemonStatus(daemon_status: string): string {
const display_names = {success: 'UP', error: 'DOWN', warning: 'WARNING', info: 'UNKNOWN'};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is rather an enum.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont see how would this work as an enum since im getting the values from the keys in the HTML

Comment on lines +42 to +52
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we sure this mapping is ok? error and down seem 2 different conditions (down means that the service is not running, while error means the service is running but encountered a condition that impedes it from continuing).

And info = unknown is a bit shocking to me...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yo are right, I think it should be 'error'.

I also agree that info = unknoen is a little bit wierd but thats what I'm getting from the backend. From get_daemon_health function at src/pybind/mgr/dashboard/controllers/rbd_mirroring.py

return display_names[daemon_status];
}
}
6 changes: 3 additions & 3 deletions ...bind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html
View file
Open in desktop
Expand Up @@ -10,14 +10,14 @@
</div>

<div class="row">
<div class="col-sm-6">
<legend i18n>Daemons</legend>
<div class="col-md-12">
<strong i18n>rbd-mirror daemons: </strong>

<cd-mirroring-daemons>
</cd-mirroring-daemons>
</div>

<div class="col-sm-6">
<div class="col-md-12">
<legend i18n>Pools</legend>

<cd-mirroring-pools>
Expand Down