Skip to content

Commit

Permalink
update WorkloadStatusComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
ajatprabha committed Mar 22, 2019
1 parent fc19481 commit 72563c9
Show file tree
Hide file tree
Showing 14 changed files with 669 additions and 231 deletions.
9 changes: 9 additions & 0 deletions aio/closure/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ module.exports = {
'styles': [
'../node_modules/material-design-icons/iconfont/material-icons.css',
'../node_modules/roboto-fontface/css/roboto/roboto-fontface.css',
'../node_modules/nvd3/build/nv.d3.css',
'../src/app/frontend/styles.scss'
],
},
Expand All @@ -93,6 +94,8 @@ module.exports = {
process.cwd(), '../node_modules/material-design-icons/iconfont/material-icons.css'),
path.join(
process.cwd(), '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css'),
path.join(
process.cwd(), '../node_modules/nvd3/build/nv.d3.css'),
path.join(process.cwd(), '../src/app/frontend/styles.scss')
],
'test': /\.css$/,
Expand All @@ -110,6 +113,8 @@ module.exports = {
process.cwd(), '../node_modules/material-design-icons/iconfont/material-icons.css'),
path.join(
process.cwd(), '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css'),
path.join(
process.cwd(), '../node_modules/nvd3/build/nv.d3.css'),
path.join(process.cwd(), '../src/app/frontend/styles.scss')
],
'test': /\.css$/,
Expand All @@ -127,6 +132,8 @@ module.exports = {
process.cwd(), '../node_modules/material-design-icons/iconfont/material-icons.css'),
path.join(
process.cwd(), '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css'),
path.join(
process.cwd(), '../node_modules/nvd3/build/nv.d3.css'),
path.join(process.cwd(), '../src/app/frontend/styles.scss')
],
'test': /\.scss$|\.sass$/,
Expand All @@ -148,6 +155,8 @@ module.exports = {
process.cwd(), '../node_modules/material-design-icons/iconfont/material-icons.css'),
path.join(
process.cwd(), '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css'),
path.join(
process.cwd(), '../node_modules/nvd3/build/nv.d3.css'),
path.join(process.cwd(), '../src/app/frontend/styles.scss')
],
'test': /\.scss$|\.sass$/,
Expand Down
2 changes: 2 additions & 0 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"node_modules/material-design-icons/iconfont/material-icons.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/xterm/dist/xterm.css",
"node_modules/nvd3/build/nv.d3.css",
"src/app/frontend/index.scss"
],
"scripts": ["node_modules/sockjs-client/dist/sockjs.min.js"]
Expand Down Expand Up @@ -80,6 +81,7 @@
"styles": [
"node_modules/material-design-icons/iconfont/material-icons.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/nvd3/build/nv.d3.css",
"src/app/frontend/index.scss"
],
"assets": [
Expand Down
14 changes: 7 additions & 7 deletions src/app/frontend/common/components/allocationchart/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,8 @@ export class AllocationChartComponent implements OnInit {
const chart = nv.models.pieChart()
.showLegend(false)
.showLabels(true)
.x((d) => {
return d.value;
})
.y((d) => {
return d.value;
})
.x(d => d.key)
.y(d => d.value)
.donut(true)
.donutRatio(ratio)
.color(colors)
Expand All @@ -78,7 +74,11 @@ export class AllocationChartComponent implements OnInit {
.labelType(labelFunc);

chart.tooltip.enabled(this.enableTooltips);
chart.tooltip.contentGenerator((obj) => {
chart.tooltip.contentGenerator(obj => {
if (obj.data.key.includes(':')) {
const values = obj.data.key.split(':');
return `<h3>${values[0]}</h3><p>${values[1]}</p>`;
}
return obj.data.key;
});

Expand Down
5 changes: 3 additions & 2 deletions src/app/frontend/common/resources/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
this.isLoading = false;
this.data_.data = this.map(data);
clearTimeout(loadingTimeout);
this.onListChange_();
this.onListChange_(data);
});
}

Expand Down Expand Up @@ -275,12 +275,13 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
}
}

private onListChange_(): void {
private onListChange_(data: T): void {
const emitValue = {
id: this.id,
groupId: this.groupId,
items: this.totalItems,
filtered: false,
resourceList: data
};

if (this.cardFilter_) {
Expand Down
5 changes: 5 additions & 0 deletions src/app/frontend/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -312,3 +312,8 @@ code {
border-bottom: 0;
}
}

// Override Arial font type
.nvtooltip {
font-family: Roboto, sans-serif;
}
159 changes: 159 additions & 0 deletions src/app/frontend/overview/component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
// Copyright 2017 The Kubernetes Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {FlexLayoutModule} from '@angular/flex-layout';
import {MatCardModule, MatDividerModule, MatIconModule, MatTooltipModule} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {AppConfig, CronJobList, DaemonSetList, PodList} from '@api/backendapi';

import {AllocationChartComponent} from '../common/components/allocationchart/component';
import {CardComponent} from '../common/components/card/component';
import {ListGroupIdentifiers, ListIdentifiers} from '../common/components/resourcelist/groupids';
import {ConfigService} from '../common/services/global/config';
import {NotificationsService} from '../common/services/global/notifications';

import {OverviewComponent} from './component';
import {Helper, ResourceRatioModes} from './helper';
import {emptyResourcesRatio, WorkloadStatusComponent} from './workloadstatus/component';

const mockDaemonSetData: DaemonSetList = {
listMeta: {totalItems: 1},
daemonSets: [],
status: {running: 1, pending: 0, succeeded: 0, failed: 0},
errors: []
};

const mockPodsData: PodList = {
listMeta: {totalItems: 12},
pods: [],
cumulativeMetrics: null,
status: {running: 9, pending: 1, succeeded: 0, failed: 2},
errors: []
};

const mockCronJobsData: CronJobList = {
listMeta: {totalItems: 18},
items: [],
status: {running: 8, pending: 1, succeeded: 4, failed: 5},
errors: []
};

@Component({selector: 'kd-daemon-set-list', template: ''})
class MockDaemonSetListComponent {
}

describe('OverviewComponent', () => {
let httpMock: HttpTestingController;
let configService: ConfigService;
let testHostFixture: ComponentFixture<OverviewComponent>;

beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [
CardComponent, OverviewComponent, MockDaemonSetListComponent, AllocationChartComponent,
WorkloadStatusComponent
],
imports: [
MatIconModule, MatCardModule, MatDividerModule, MatTooltipModule, NoopAnimationsModule,
HttpClientTestingModule, FlexLayoutModule
],
providers: [ConfigService, NotificationsService],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
httpMock = TestBed.get(HttpTestingController);
configService = TestBed.get(ConfigService);
}));

beforeEach(() => {
configService.init();
const configRequest = httpMock.expectOne('config');
const config: AppConfig = {serverTime: new Date().getTime()};
configRequest.flush(config);

testHostFixture = TestBed.createComponent(OverviewComponent);
});

it('should mount with empty resourcesRatio', () => {
const instance = testHostFixture.componentInstance;
expect(instance.resourcesRatio).toEqual(emptyResourcesRatio);
});

it('should update resourcesRatio', () => {
const instance = testHostFixture.componentInstance;

instance.updateResourcesRatio({
id: ListIdentifiers.daemonSet,
groupId: ListGroupIdentifiers.workloads,
items: mockDaemonSetData.listMeta.totalItems,
filtered: false,
resourceList: mockDaemonSetData
});

expect(instance.resourcesRatio).toEqual({
...emptyResourcesRatio,
daemonSetRatio:
Helper.getResourceRatio(mockDaemonSetData.status, mockDaemonSetData.listMeta.totalItems)
});

expect(instance.showWorkloadStatuses()).toEqual(true);
});

it('should update resourcesRatio on pod identifier', () => {
// This checks the ResourceRatioModes.Completable
const instance = testHostFixture.componentInstance;

instance.updateResourcesRatio({
id: ListIdentifiers.pod,
groupId: ListGroupIdentifiers.workloads,
items: mockPodsData.listMeta.totalItems,
filtered: false,
resourceList: mockPodsData
});

expect(instance.resourcesRatio).toEqual({
...emptyResourcesRatio,
podRatio: Helper.getResourceRatio(
mockPodsData.status, mockPodsData.listMeta.totalItems, ResourceRatioModes.Completable)
});

expect(instance.showWorkloadStatuses()).toEqual(true);
});

it('should update resourcesRatio on cron job(suspendable) identifier', () => {
// This checks the ResourceRatioModes.Suspendable
const instance = testHostFixture.componentInstance;

instance.updateResourcesRatio({
id: ListIdentifiers.cronJob,
groupId: ListGroupIdentifiers.workloads,
items: mockCronJobsData.listMeta.totalItems,
filtered: false,
resourceList: mockCronJobsData
});

expect(instance.resourcesRatio).toEqual({
...emptyResourcesRatio,
cronJobRatio: Helper.getResourceRatio(
mockCronJobsData.status, mockCronJobsData.listMeta.totalItems,
ResourceRatioModes.Suspendable)
});

expect(instance.showWorkloadStatuses()).toEqual(true);
});
});
70 changes: 69 additions & 1 deletion src/app/frontend/overview/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,22 @@
// limitations under the License.

import {Component} from '@angular/core';
import {ListGroupIdentifiers} from '../common/components/resourcelist/groupids';
import {CronJobList, DaemonSetList, DeploymentList, JobList, PodList, ReplicaSetList, ReplicationControllerList, StatefulSetList} from '@api/backendapi';
import {OnListChangeEvent, ResourcesRatio} from '@api/frontendapi';

import {ListGroupIdentifiers, ListIdentifiers} from '../common/components/resourcelist/groupids';
import {GroupedResourceList} from '../common/resources/groupedlist';

import {Helper, ResourceRatioModes} from './helper';
import {emptyResourcesRatio} from './workloadstatus/component';

@Component({
selector: 'kd-overview',
templateUrl: './template.html',
})
export class OverviewComponent extends GroupedResourceList {
resourcesRatio: ResourcesRatio = emptyResourcesRatio;

hasWorkloads(): boolean {
return this.isGroupVisible(ListGroupIdentifiers.workloads);
}
Expand All @@ -32,4 +40,64 @@ export class OverviewComponent extends GroupedResourceList {
hasConfig(): boolean {
return this.isGroupVisible(ListGroupIdentifiers.config);
}

updateResourcesRatio(event: OnListChangeEvent) {
switch (event.id) {
case ListIdentifiers.cronJob: {
const cronJobs = event.resourceList as CronJobList;
this.resourcesRatio.cronJobRatio = Helper.getResourceRatio(
cronJobs.status, cronJobs.listMeta.totalItems, ResourceRatioModes.Suspendable);
break;
}
case ListIdentifiers.daemonSet: {
const daemonSets = event.resourceList as DaemonSetList;
this.resourcesRatio.daemonSetRatio =
Helper.getResourceRatio(daemonSets.status, daemonSets.listMeta.totalItems);
break;
}
case ListIdentifiers.deployment: {
const deployments = event.resourceList as DeploymentList;
this.resourcesRatio.deploymentRatio =
Helper.getResourceRatio(deployments.status, deployments.listMeta.totalItems);
break;
}
case ListIdentifiers.job: {
const jobs = event.resourceList as JobList;
this.resourcesRatio.jobRatio = Helper.getResourceRatio(
jobs.status, jobs.listMeta.totalItems, ResourceRatioModes.Completable);
break;
}
case ListIdentifiers.pod: {
const pods = event.resourceList as PodList;
this.resourcesRatio.podRatio = Helper.getResourceRatio(
pods.status, pods.listMeta.totalItems, ResourceRatioModes.Completable);
break;
}
case ListIdentifiers.replicaSet: {
const replicaSets = event.resourceList as ReplicaSetList;
this.resourcesRatio.replicaSetRatio =
Helper.getResourceRatio(replicaSets.status, replicaSets.listMeta.totalItems);
break;
}
case ListIdentifiers.replicationController: {
const replicationControllers = event.resourceList as ReplicationControllerList;
this.resourcesRatio.replicationControllerRatio = Helper.getResourceRatio(
replicationControllers.status, replicationControllers.listMeta.totalItems);
break;
}
case ListIdentifiers.statefulSet: {
const statefulSets = event.resourceList as StatefulSetList;
this.resourcesRatio.statefulSetRatio =
Helper.getResourceRatio(statefulSets.status, statefulSets.listMeta.totalItems);
break;
}
default:
break;
}
}

showWorkloadStatuses(): boolean {
return Object.values(this.resourcesRatio)
.reduce((sum, ratioItems) => sum + ratioItems.length, 0) !== 0;
}
}
Loading

0 comments on commit 72563c9

Please sign in to comment.