[YUNIKORN-325] add node resource utilization chart (#136)

Add node utilisation to the dashboard in the form of a bar chart.
New component for a bar chart, besides the donut chart added.
Add nodes/utilization mock data to json db

Closes: #136

Signed-off-by: Wilfred Spiegelenburg <[email protected]>

json-routes.json

@@ -1,4 +1,5 @@
 {
+  "/ws/v1/nodes/utilization": "/utilization",
   "/ws/v1/*": "/$1",
   "/history/apps": "/appHistory",
   "/history/containers": "/containerHistory",

src/app/app.module.ts

@@ -40,24 +40,26 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatExpansionModule } from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
 
-import { AppRoutingModule } from './app-routing.module';
-import { envConfigFactory, EnvconfigService } from './services/envconfig/envconfig.service';
-import { ApiErrorInterceptor } from './interceptors/api-error/api-error.interceptor';
-import { AppComponent } from './app.component';
-import { DashboardComponent } from './components/dashboard/dashboard.component';
-import { QueuesViewComponent } from './components/queues-view/queues-view.component';
-import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
-import { AreaChartComponent } from './components/area-chart/area-chart.component';
-import { AppStatusComponent } from './components/app-status/app-status.component';
-import { AppHistoryComponent } from './components/app-history/app-history.component';
-import { ContainerStatusComponent } from './components/container-status/container-status.component';
-import { ContainerHistoryComponent } from './components/container-history/container-history.component';
-import { QueueRackComponent } from './components/queue-rack/queue-rack.component';
-import { AppsViewComponent } from './components/apps-view/apps-view.component';
-import { NodesViewComponent } from './components/nodes-view/nodes-view.component';
-import { ErrorViewComponent } from './components/error-view/error-view.component';
-import { StatusViewComponent } from './components/status-view/status-view.component';
-import { HealthchecksComponent } from './components/healthchecks/healthchecks.component';
+import { AppRoutingModule } from '@app/app-routing.module';
+import { envConfigFactory, EnvconfigService } from '@app/services/envconfig/envconfig.service';
+import { ApiErrorInterceptor } from '@app/interceptors/api-error/api-error.interceptor';
+import { AppComponent } from '@app/app.component';
+import { DashboardComponent } from '@app/components/dashboard/dashboard.component';
+import { QueuesViewComponent } from '@app/components/queues-view/queues-view.component';
+import { DonutChartComponent } from '@app/components/donut-chart/donut-chart.component';
+import { AreaChartComponent } from '@app/components/area-chart/area-chart.component';
+import { AppStatusComponent } from '@app/components/app-status/app-status.component';
+import { AppHistoryComponent } from '@app/components/app-history/app-history.component';
+import { ContainerStatusComponent } from '@app/components/container-status/container-status.component';
+import { ContainerHistoryComponent } from '@app/components/container-history/container-history.component';
+import { QueueRackComponent } from '@app/components/queue-rack/queue-rack.component';
+import { AppsViewComponent } from '@app/components/apps-view/apps-view.component';
+import { NodesViewComponent } from '@app/components/nodes-view/nodes-view.component';
+import { ErrorViewComponent } from '@app/components/error-view/error-view.component';
+import { StatusViewComponent } from '@app/components/status-view/status-view.component';
+import { HealthchecksComponent } from '@app/components/healthchecks/healthchecks.component';
+import { AppNodeUtilizationComponent } from '@app/components/app-node-utilization/app-node-utilization.component';
+import { BarChartComponent } from '@app/components/bar-chart/bar-chart.component';
 
 @NgModule({
   declarations: [
@@ -76,6 +78,8 @@ import { HealthchecksComponent } from './components/healthchecks/healthchecks.co
     ErrorViewComponent,
     StatusViewComponent,
     HealthchecksComponent,
+    AppNodeUtilizationComponent,
+    BarChartComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/app-node-utilization/app-node-utilization.component.html

@@ -0,0 +1,30 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ -->
+
+<mat-card appearance="outlined" class="box-card">
+  <mat-card-header>
+    <mat-card-title>Nodes Resource Utilization</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="status-wrapper flex-grid">
+      <div class="chart-wrapper flex-primary">
+        <app-bar-chart [data]="chartData" />
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

src/app/components/app-node-utilization/app-node-utilization.component.scss

@@ -0,0 +1,23 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+.status-wrapper {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}

src/app/components/app-node-utilization/app-node-utilization.component.spec.ts

@@ -0,0 +1,38 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppNodeUtilizationComponent } from '@app/components/app-node-utilization/app-node-utilization.component';
+
+describe('AppNodeUtilizationComponent', () => {
+  let component: AppNodeUtilizationComponent;
+  let fixture: ComponentFixture<AppNodeUtilizationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AppNodeUtilizationComponent]
+    });
+    fixture = TestBed.createComponent(AppNodeUtilizationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/app-node-utilization/app-node-utilization.component.ts

@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { Component, Input } from '@angular/core';
+import { ChartDataItem } from '@app/models/chart-data.model';
+
+@Component({
+  selector: 'app-node-utilization',
+  templateUrl: './app-node-utilization.component.html',
+  styleUrls: ['./app-node-utilization.component.scss']
+})
+export class AppNodeUtilizationComponent {
+  @Input() chartData: ChartDataItem[] = [];
+}

src/app/components/app-status/app-status.component.ts

@@ -17,16 +17,15 @@
  */
 
 import { Component, OnInit, Input } from '@angular/core';
-
-import { DonutDataItem } from '@app/models/donut-data.model';
+import { ChartDataItem } from '@app/models/chart-data.model';
 
 @Component({
   selector: 'app-application-status',
   templateUrl: './app-status.component.html',
   styleUrls: ['./app-status.component.scss'],
 })
 export class AppStatusComponent implements OnInit {
-  @Input() chartData: DonutDataItem[] = [];
+  @Input() chartData: ChartDataItem[] = [];
 
   constructor() {}
 

src/app/components/bar-chart/bar-chart.component.html

@@ -0,0 +1,21 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ -->
+
+<div style="width: 100%; height: 100%">
+  <canvas class="bar-chart" id="{{ chartContainerId }}"></canvas>
+</div>

src/app/components/bar-chart/bar-chart.component.scss

@@ -0,0 +1,22 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+.bar-chart {
+  width: 100%;
+  height: 100%;
+}

src/app/components/bar-chart/bar-chart.component.spec.ts

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarChartComponent } from './bar-chart.component';
+
+describe('BarChartComponent', () => {
+  let component: BarChartComponent;
+  let fixture: ComponentFixture<BarChartComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BarChartComponent]
+    });
+    fixture = TestBed.createComponent(BarChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});