RepoMirrors/ceph
1
0
Fork 0
mirror of https://github.com/ceph/ceph synced 2024-12-28 06:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #25155 from rhcs-dashboard/37283-mgr-info-card-improvements

Browse Source 
mgr/dashboard: Status info cards' improvements

Reviewed-by: Ernesto Puerta <epuertat@redhat.com>
This commit is contained in:
Lenz Grimmer 2018-11-21 14:55:39 +01:00 committed by GitHub
commit 0b521bbdab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 122 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
View File

@ -15,7 +15,7 @@
<cd-info-card cardTitle="Cluster Status"
i18n-cardTitle
class="col-sm-6 col-md-4 col-lg-3"
[contentClass]="contentData.health?.checks?.length > 0 ? 'content-highlight content-row-size-1-5' : 'content-highlight'"
[contentClass]="contentData.health?.checks?.length > 0 ? 'content-highlight text-area-size-2' : 'content-highlight'"
*ngIf="contentData.health?.status">
<ng-container *ngIf="contentData.health?.checks?.length > 0">
<ng-template #healthChecks>
@ -59,9 +59,10 @@
i18n-cardTitle
link="/osd"
class="col-sm-6 col-md-4 col-lg-3"
*ngIf="contentData.osd_map"
contentClass="content-row-size-2 content-highlight">
<span *ngFor="let result of (contentData.osd_map | osdSummary)" [ngClass]="result.class">
*ngIf="(contentData.osd_map | osdSummary) as transformedResult"
[contentClass]="(transformedResult.length == 5 ? 'text-area-size-3' : 'text-area-size-2') + ' content-highlight'">
<span *ngFor="let result of transformedResult"
[ngClass]="result.class">
{{ result.content }}
</span>
</cd-info-card>
@ -69,9 +70,13 @@
<cd-info-card cardTitle="Manager Daemons"
i18n-cardTitle
class="col-sm-6 col-md-4 col-lg-3"
contentClass="content-highlight"
contentClass="content-highlight text-area-size-2"
*ngIf="contentData.mgr_map">
{{ contentData.mgr_map | mgrSummary }}
<span *ngFor="let result of (contentData.mgr_map | mgrSummary)"
[ngClass]="result.class"
[title]="result.titleText != null ? result.titleText : ''">
{{ result.content }}
</span>
</cd-info-card>
<cd-info-card cardTitle="Hosts"
@ -80,7 +85,7 @@
class="col-sm-6 col-md-4 col-lg-3"
contentClass="content-medium content-highlight"
*ngIf="contentData.hosts != null">
{{ contentData.hosts }}
{{ contentData.hosts }} total
</cd-info-card>
<cd-info-card cardTitle="Object Gateways"
@ -89,14 +94,17 @@
class="col-sm-6 col-md-4 col-lg-3"
contentClass="content-medium content-highlight"
*ngIf="contentData.rgw != null">
{{ contentData.rgw }}
{{ contentData.rgw }} total
</cd-info-card>
<cd-info-card cardTitle="Metadata Servers"
i18n-cardTitle
class="col-sm-6 col-md-4 col-lg-3"
contentClass="content-highlight"
*ngIf="contentData.fs_map">
{{ contentData.fs_map | mdsSummary }}
*ngIf="(contentData.fs_map | mdsSummary) as transformedResult"
[contentClass]="(transformedResult.length > 1 ? 'text-area-size-2' : '') + ' content-highlight'">
<span *ngFor="let result of transformedResult"
[ngClass]="result.class">
{{ result.content }}
</span>
</cd-info-card>
<cd-info-card cardTitle="iSCSI Gateways"
@ -105,7 +113,7 @@
class="col-sm-6 col-md-4 col-lg-3"
contentClass="content-medium content-highlight"
*ngIf="contentData.iscsi_daemons != null">
{{ contentData.iscsi_daemons }}
{{ contentData.iscsi_daemons }} total
</cd-info-card>
</cd-info-group>

4
src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
View File

@ -83,3 +83,7 @@ cd-info-card {
content: '\A';
white-space: pre;
}
.mgr-active-name:hover {
cursor: pointer;
}

4
src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
View File

@ -57,12 +57,12 @@ $logs-text-font-size: $card-font-min-size;
transform: unset;
}
.content-row-size-1-5 {
.text-area-size-2 {
margin-right: -50%;
transform: translate(-50%, -20%);
}
.content-row-size-2 {
.text-area-size-3 {
margin-right: -50%;
transform: translate(-50%, -40%);
}

35
src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.spec.ts
View File

@ -19,32 +19,51 @@ describe('MdsSummaryPipe', () => {
});
it('transforms with 0 active and 2 standy', () => {
const value = {
const payload = {
standbys: [0],
filesystems: [{ mdsmap: { info: [{ state: 'up:standby-replay' }] } }]
};
expect(pipe.transform(value)).toBe('0 active, 2 standby');
const expected = [
{ class: '', content: '0 active' },
{ class: 'card-text-line-break', content: '' },
{ class: '', content: '2 standby' }
];
expect(pipe.transform(payload)).toEqual(expected);
});
it('transforms with 1 active and 1 standy', () => {
const value = {
const payload = {
standbys: [0],
filesystems: [{ mdsmap: { info: [{ state: 'up:active' }] } }]
};
expect(pipe.transform(value)).toBe('1 active, 1 standby');
const expected = [
{ class: '', content: '1 active' },
{ class: 'card-text-line-break', content: '' },
{ class: '', content: '1 standby' }
];
expect(pipe.transform(payload)).toEqual(expected);
});
it('transforms with 0 filesystems', () => {
const value = {
const payload = {
standbys: [0],
filesystems: []
};
expect(pipe.transform(value)).toBe('no filesystems');
const expected = [{ class: '', content: 'no filesystems' }];
expect(pipe.transform(payload)).toEqual(expected);
});
it('transforms without filesystem', () => {
const value = { standbys: [0] };
expect(pipe.transform(value)).toBe('1, no filesystems');
const payload = { standbys: [0] };
const expected = [
{ class: '', content: '1 up' },
{ class: 'card-text-line-break', content: '' },
{ class: '', content: 'no filesystems' }
];
expect(pipe.transform(payload)).toEqual(expected);
});
it('transforms without value', () => {

32
src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.ts
View File

@ -14,6 +14,8 @@ export class MdsSummaryPipe implements PipeTransform {
return '';
}
let contentLine1 = '';
let contentLine2 = '';
let standbys = 0;
let active = 0;
let standbyReplay = 0;
@ -22,9 +24,10 @@ export class MdsSummaryPipe implements PipeTransform {
});
if (value.standbys && !value.filesystems) {
return standbys + ', ' + this.i18n('no filesystems');
contentLine1 = `${standbys} ${this.i18n('up')}`;
contentLine2 = this.i18n('no filesystems');
} else if (value.filesystems.length === 0) {
return this.i18n('no filesystems');
contentLine1 = this.i18n('no filesystems');
} else {
_.each(value.filesystems, (fs, i) => {
_.each(fs.mdsmap.info, (mds, j) => {
@ -36,9 +39,28 @@ export class MdsSummaryPipe implements PipeTransform {
});
});
return `${active} ${this.i18n('active')}, ${standbys + standbyReplay} ${this.i18n(
'standby'
)}`;
contentLine1 = `${active} ${this.i18n('active')}`;
contentLine2 = `${standbys + standbyReplay} ${this.i18n('standby')}`;
}
const mgrSummary = [
{
content: contentLine1,
class: ''
}
];
if (contentLine2) {
mgrSummary.push({
content: '',
class: 'card-text-line-break'
});
mgrSummary.push({
content: contentLine2,
class: ''
});
}
return mgrSummary;
}
}

20
src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.spec.ts
View File

@ -24,18 +24,30 @@ describe('MgrSummaryPipe', () => {
});
it('transforms with active_name undefined', () => {
const value = {
const payload = {
active_name: undefined,
standbys: []
};
expect(pipe.transform(value)).toBe('active: n/a');
const expected = [
{ class: 'mgr-active-name', content: 'n/a active', titleText: '' },
{ class: 'card-text-line-break', content: '', titleText: '' },
{ class: '', content: '0 standby', titleText: '' }
];
expect(pipe.transform(payload)).toEqual(expected);
});
it('transforms with 1 active and 2 standbys', () => {
const value = {
const payload = {
active_name: 'a',
standbys: ['b', 'c']
};
expect(pipe.transform(value)).toBe('active: a, 2 standbys');
const expected = [
{ class: 'mgr-active-name', content: '1 active', titleText: 'active daemon: a' },
{ class: 'card-text-line-break', content: '', titleText: '' },
{ class: '', content: '2 standby', titleText: '' }
];
expect(pipe.transform(payload)).toEqual(expected);
});
});

32
src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.ts
View File

@ -14,13 +14,33 @@ export class MgrSummaryPipe implements PipeTransform {
return '';
}
let result = 'active: ';
result += _.isUndefined(value.active_name) ? 'n/a' : value.active_name;
if (value.standbys.length) {
result += ', ' + value.standbys.length + ' ' + this.i18n('standbys');
let activeCount = this.i18n('n/a');
const titleText = _.isUndefined(value.active_name)
? ''
: `${this.i18n('active daemon')}: ${value.active_name}`;
if (titleText.length > 0) {
activeCount = '1';
}
const standbyCount = value.standbys.length;
const mgrSummary = [
{
content: `${activeCount} ${this.i18n('active')}`,
class: 'mgr-active-name',
titleText: titleText
}
];
return result;
mgrSummary.push({
content: '',
class: 'card-text-line-break',
titleText: ''
});
mgrSummary.push({
content: `${standbyCount} ${this.i18n('standby')}`,
class: '',
titleText: ''
});
return mgrSummary;
}
}