columnMode="flex"
[toolHeader]="false"
[footer]="false"
- [limit]="0">
+ [limit]="0"
+ (fetchData)="getHosts()">
<ng-template #servicesTpl let-value="value">
<span *ngFor="let service of value; last as isLast">
<a [routerLink]="[service.cdLink]">{{ service.type }}.{{ service.id }}</a>{{ !isLast ? ", " : "" }}
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
import { HostService } from '../../../shared/services/host.service';
})
export class HostsComponent implements OnInit {
- columns: Array<object> = [];
+ columns: Array<CdTableColumn> = [];
hosts: Array<object> = [];
@ViewChild('servicesTpl') public servicesTpl: TemplateRef<any>;
pipe: this.cephShortVersionPipe
}
];
+ }
+
+ getHosts() {
this.hostService.list().then((resp) => {
resp.map((host) => {
host.services.map((service) => {
this.hosts = resp;
});
}
-
}
columnMode="flex"
[toolHeader]="false"
[footer]="false"
- [limit]="0">
+ [limit]="0"
+ (fetchData)="getCounters()">
<ng-template #valueTpl let-row="row">
{{ row.value | dimless }} {{ row.unit }}
</ng-template>
flexGrow: 1
}
];
- this.getCounters();
}
getCounters() {
<tabset>
<tab heading="Details">
- <cd-table-key-value [data]="metadata">
+ <cd-table-key-value [data]="metadata"
+ (fetchData)="getMetaData()">
</cd-table-key-value>
</tab>
<tab heading="Performance Counters">
constructor(private rgwDaemonService: RgwDaemonService) { }
ngOnInit() {
- this.getMetaData();
+ // Get the service id of the first selected row.
+ if (this.selected.length > 0) {
+ this.serviceId = this.selected[0].id;
+ }
}
- private getMetaData() {
- if (this.selected.length < 1) {
+ getMetaData() {
+ if (_.isEmpty(this.serviceId)) {
return;
}
- // Get the service id of the first selected row.
- this.serviceId = this.selected[0].id;
-
this.rgwDaemonService.get(this.serviceId)
.then((resp) => {
const metadata = [];
</nav>
<cd-table [data]="daemons"
[columns]="columns"
+ columnMode="flex"
[detailsComponent]="detailsComponent"
(fetchData)="getDaemonList()"
[beforeShowDetails]="beforeShowDetails">
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
templateUrl: './rgw-daemon-list.component.html',
styleUrls: ['./rgw-daemon-list.component.scss']
})
-export class RgwDaemonListComponent implements OnInit {
+export class RgwDaemonListComponent {
columns: Array<CdTableColumn> = [];
daemons: Array<object> = [];
detailsComponent = 'RgwDaemonDetailsComponent';
- constructor(private rgwDaemonService: RgwDaemonService) {
+ constructor(private rgwDaemonService: RgwDaemonService,
+ cephShortVersionPipe: CephShortVersionPipe) {
this.columns = [
{
name: 'ID',
prop: 'id',
- width: 100
+ flexGrow: 2
},
{
name: 'Hostname',
prop: 'server_hostname',
- width: 100
+ flexGrow: 2
},
{
name: 'Version',
prop: 'version',
- width: 50,
- pipe: new CephShortVersionPipe()
+ flexGrow: 1,
+ pipe: cephShortVersionPipe
}
];
}
- ngOnInit() {
- this.getDaemonList();
- }
-
getDaemonList() {
this.rgwDaemonService.list()
.then((resp) => {
[toolHeader]="false"
[header]="false"
[footer]="false"
- [limit]="0">
+ [limit]="0"
+ (fetchData)="reloadData()">
</cd-table>
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { CellTemplate } from '../../enum/cell-template.enum';
import { CdTableColumn } from '../../models/cd-table-column';
*/
@Input() value = 'value';
+ /**
+ * The function that will be called to update the input data.
+ */
+ @Output() fetchData = new EventEmitter();
+
constructor() { }
ngOnInit() {
}
];
}
+
+ reloadData() {
+ // Forward event triggered by the 'cd-table' datatable.
+ this.fetchData.emit();
+ }
}
[headerHeight]="header ? 'auto' : 0"
[footerHeight]="footer ? 'auto' : 0"
[limit]="limit > 0 ? limit : undefined"
- [loadingIndicator]="true"
+ [loadingIndicator]="loadingIndicator"
[rowHeight]="'auto'">
<!-- Row Detail Template -->
<ngx-datatable-row-detail (toggle)="updateDetailView()">
<!-- cell templates that can be accessed from outside -->
<ng-template #tableCellBoldTpl
- let-row="row"
let-value="value">
<strong>{{ value }}</strong>
</ng-template>
}
.input-group.dataTables_paginate {
width: 8%;
+ min-width: 85px;
}
}
border: $border-color;
margin-bottom: 0;
max-width: none!important;
+ .progress-linear {
+ display: block;
+ position: relative;
+ width: 100%;
+ height: 5px;
+ padding: 0;
+ margin: 0;
+ .container {
+ background-color: $oa-color-light-blue;
+ .bar {
+ left: 0;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ overflow: hidden;
+ background-color: $oa-color-light-blue;
+ }
+ .bar:before{
+ display: block;
+ position: absolute;
+ content: "";
+ left: -200px;
+ width: 200px;
+ height: 100%;
+ background-color: $oa-color-blue;
+ animation: progress-loading 3s linear infinite;
+ }
+ }
+ }
.datatable-header {
background-clip: padding-box;
background-color: #f9f9f9;
}
}
}
+
+@keyframes progress-loading {
+ from {
+ left: -200px;
+ width: 15%;
+ }
+ 50% {
+ width: 30%;
+ }
+ 70% {
+ width: 70%;
+ }
+ 80% {
+ left: 50%;
+ }
+ 95% {
+ left: 120%;
+ }
+ to {
+ left: 100%;
+ }
+}
@ViewChild('routerLinkTpl') routerLinkTpl: TemplateRef<any>;
// This is the array with the items to be shown.
- @Input() data: any[];
+ @Input() data: any[] = [];
// Each item -> { prop: 'attribute name', name: 'display name' }
@Input() columns: CdTableColumn[];
// Method used for setting column widths.
// The current selection is passed as function argument. To do not display
// the details page, return false.
@Input() beforeShowDetails: Function;
+
// Should be the function that will update the input data.
@Output() fetchData = new EventEmitter();
search = '';
rows = [];
selected = [];
+ loadingIndicator = false;
paginationClasses = {
pagerLeftArrow: 'i fa fa-angle-double-left',
pagerRightArrow: 'i fa fa-angle-double-right',
}
reloadData() {
+ this.loadingIndicator = true;
this.fetchData.emit();
}
useData() {
this.rows = [...this.data];
+ this.loadingIndicator = false;
}
toggleExpandRow() {
projects / ceph-ci.git / commitdiff