[YUNIKORN-2339] Remove Nodes Utilisation chart from Dashboard page (Web) (#164)

Closes: #164

Signed-off-by: Chia-Ping Tsai <chia7712@gmail.com>
diff --git a/json-db.json b/json-db.json
index cdecd82..1517ea7 100644
--- a/json-db.json
+++ b/json-db.json
@@ -881,88 +881,6 @@
       "reservations": []
     }
   ],
-  "node-utilization": {
-    "type": "vcore",
-    "utilization": [
-      {
-        "bucketName": "0-10%",
-        "numOfNodes": 1,
-        "nodeNames": [
-          "node-01"
-        ]
-      },
-      {
-        "bucketName": "10-20%",
-        "numOfNodes": 3,
-        "nodeNames": [
-          "node-02",
-          "node-03",
-          "node-04"
-        ]
-      },
-      {
-        "bucketName": "20-30%",
-        "numOfNodes": 20,
-        "nodeNames": [
-          "node-05",
-          "node-06",
-          "node-07",
-          "node-08",
-          "node-09",
-          "node-10",
-          "node-11",
-          "node-12",
-          "node-13",
-          "node-14",
-          "node-15",
-          "node-16",
-          "node-17",
-          "node-18",
-          "node-19",
-          "node-20",
-          "node-21",
-          "node-22",
-          "node-23",
-          "node-24"
-        ]
-      },
-      {
-        "bucketName": "30-40%",
-        "numOfNodes": 0,
-        "nodeNames": null
-      },
-      {
-        "bucketName": "40-50%",
-        "numOfNodes": 0,
-        "nodeNames": null
-      },
-      {
-        "bucketName": "50-60%",
-        "numOfNodes": 0,
-        "nodeNames": null
-      },
-      {
-        "bucketName": "60-70%",
-        "numOfNodes": 0,
-        "nodeNames": null
-      },
-      {
-        "bucketName": "70-80%",
-        "numOfNodes": 0,
-        "nodeNames": null
-      },
-      {
-        "bucketName": "80-90%",
-        "numOfNodes": 0,
-        "nodeNames": null
-      },
-      {
-        "bucketName": "90-100%",
-        "numOfNodes": 0,
-        "nodeNames": null
-      }
-    ]
-  },
   "node-utilizations": [
     {
       "clusterId": "mycluster",
diff --git a/json-routes.json b/json-routes.json
index 068091b..382eddc 100644
--- a/json-routes.json
+++ b/json-routes.json
@@ -1,5 +1,4 @@
 {
-  "/ws/v1/scheduler/node-utilization": "/node-utilization",
   "/ws/v1/scheduler/node-utilizations": "/node-utilizations",
   "/ws/v1/*": "/$1",
   "/history/apps": "/appHistory",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ced1b06..66b6458 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -59,8 +59,6 @@
 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';
 import { AppNodeUtilizationsComponent } from '@app/components/app-node-utilizations/app-node-utilizations.component';
 import { VerticalBarChartComponent } from '@app/components/vertical-bar-chart/vertical-bar-chart.component';
 
@@ -82,8 +80,6 @@
     ErrorViewComponent,
     StatusViewComponent,
     HealthchecksComponent,
-    AppNodeUtilizationComponent,
-    BarChartComponent,
     AppNodeUtilizationsComponent,
     VerticalBarChartComponent,
   ],
diff --git a/src/app/components/app-node-utilization/app-node-utilization.component.html b/src/app/components/app-node-utilization/app-node-utilization.component.html
deleted file mode 100644
index 4407b5a..0000000
--- a/src/app/components/app-node-utilization/app-node-utilization.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- * 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>{{title}}</mat-card-title>
-    <mat-card-subtitle>{{subtitle}}</mat-card-subtitle>
-  </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>
diff --git a/src/app/components/app-node-utilization/app-node-utilization.component.scss b/src/app/components/app-node-utilization/app-node-utilization.component.scss
deleted file mode 100644
index 9dc82d0..0000000
--- a/src/app/components/app-node-utilization/app-node-utilization.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * 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;
-}
diff --git a/src/app/components/app-node-utilization/app-node-utilization.component.spec.ts b/src/app/components/app-node-utilization/app-node-utilization.component.spec.ts
deleted file mode 100644
index feb4663..0000000
--- a/src/app/components/app-node-utilization/app-node-utilization.component.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * 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 { MatCardModule } from '@angular/material/card';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AppNodeUtilizationComponent } from '@app/components/app-node-utilization/app-node-utilization.component';
-import { BarChartComponent } from '@app/components/bar-chart/bar-chart.component';
-
-describe('AppNodeUtilizationComponent', () => {
-  let component: AppNodeUtilizationComponent;
-  let fixture: ComponentFixture<AppNodeUtilizationComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [AppNodeUtilizationComponent, BarChartComponent],
-      imports: [MatCardModule],
-    });
-    fixture = TestBed.createComponent(AppNodeUtilizationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/components/app-node-utilization/app-node-utilization.component.ts b/src/app/components/app-node-utilization/app-node-utilization.component.ts
deleted file mode 100644
index 4e7b134..0000000
--- a/src/app/components/app-node-utilization/app-node-utilization.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * 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[] = [];
-  @Input() title: String = "";
-  @Input() subtitle: String = "";
-}
diff --git a/src/app/components/bar-chart/bar-chart.component.html b/src/app/components/bar-chart/bar-chart.component.html
deleted file mode 100644
index 5d08ea8..0000000
--- a/src/app/components/bar-chart/bar-chart.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- * 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>
diff --git a/src/app/components/bar-chart/bar-chart.component.scss b/src/app/components/bar-chart/bar-chart.component.scss
deleted file mode 100644
index 6a5db9a..0000000
--- a/src/app/components/bar-chart/bar-chart.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * 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%;
-}
diff --git a/src/app/components/bar-chart/bar-chart.component.spec.ts b/src/app/components/bar-chart/bar-chart.component.spec.ts
deleted file mode 100644
index 49e06be..0000000
--- a/src/app/components/bar-chart/bar-chart.component.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 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();
-  });
-});
diff --git a/src/app/components/bar-chart/bar-chart.component.ts b/src/app/components/bar-chart/bar-chart.component.ts
deleted file mode 100644
index 4ea3a57..0000000
--- a/src/app/components/bar-chart/bar-chart.component.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * 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 { AfterViewInit, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { ChartDataItem } from '@app/models/chart-data.model';
-import { EventBusService, EventMap } from '@app/services/event-bus/event-bus.service';
-import { CommonUtil } from '@app/utils/common.util';
-import { Chart, BarController, CategoryScale, BarElement, Tooltip} from 'chart.js';
-import { Subject, takeUntil } from 'rxjs';
-
-Chart.register(BarElement, CategoryScale, BarController, Tooltip);
-
-@Component({
-  selector: 'app-bar-chart',
-  templateUrl: './bar-chart.component.html',
-  styleUrls: ['./bar-chart.component.scss']
-})
-export class BarChartComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
-  destroy$ = new Subject<boolean>();
-  chartContainerId = '';
-  barChartData: ChartDataItem[] = [];
-  barChart: Chart<'bar', number[], string> | undefined;
-
-  @Input() data: ChartDataItem[] = [];
-  constructor(private eventBus: EventBusService) { }
-
-  ngOnInit() {
-    this.chartContainerId = CommonUtil.createUniqId('bar_chart_');
-
-    this.eventBus
-      .getEvent(EventMap.WindowResizedEvent)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(() => this.renderChart(this.barChartData));
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next(true);
-    this.destroy$.unsubscribe();
-  }
-
-  ngAfterViewInit() {
-    if (this.data) {
-      this.renderChart(this.data);
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (
-      changes['data'] &&
-      changes['data'].currentValue &&
-      changes['data'].currentValue.length > 0
-    ) {
-      this.barChartData = changes['data'].currentValue;
-      this.renderChart(this.barChartData);
-    }
-  }
-
-  renderChart(chartData: ChartDataItem[] = []) {
-    if (!this.chartContainerId) {
-      return;
-    }
-    const ctx = (document.getElementById(this.chartContainerId) as HTMLCanvasElement).getContext(
-      '2d'
-    );
-
-    const dataValues = chartData.map((d) => d.value);
-    const chartLabels = chartData.map((d) => d.name);
-    const colors = chartData.map((d) => d.color);
-    const descriptions = chartData.map((d) => d.description);
-
-    if (this.barChart) {
-      this.barChart.destroy();
-    }
-
-    this.barChart = new Chart(ctx!, {
-      type: 'bar',
-      data: {
-        labels: chartLabels,
-        datasets: [
-          {
-            data: dataValues,
-            backgroundColor: colors,
-            borderWidth: 1
-          }
-        ],
-      },
-      options: {
-        responsive: true,
-        plugins: {
-          legend: {
-            display: false,
-          },
-          title: {
-            display: false,
-          },
-          tooltip: {
-            enabled: true,
-            position: 'nearest',
-            callbacks: {
-              label: function(context) {
-                let unit = context.parsed.y > 1 ? 'nodes' : 'node';
-                return 'Total: ' + context.parsed.y + ' ' + unit;
-              },
-              footer: function(context) {
-                return descriptions[context[0].dataIndex]
-              }
-            }
-          },
-        },
-      },
-    });
-
-    this.barChart.update();
-  }
-}
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index e1a5f3b..7cc895f 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -93,9 +93,4 @@
       <app-container-history [chartData]="containerHistoryData"></app-container-history>
     </div>
   </div>
-  <div class="flex-grid grid-row">
-    <div class="half-col flex-primary">
-      <app-node-utilization [chartData]="nodeUtilizationChartData.chartDataItems" title="Node Resource Utilization" [subtitle]="('Dominant Resource:' + nodeUtilizationChartData.type)"/>
-    </div>
-  </div>
 </div>
diff --git a/src/app/components/dashboard/dashboard.component.spec.ts b/src/app/components/dashboard/dashboard.component.spec.ts
index 189a48e..071f465 100644
--- a/src/app/components/dashboard/dashboard.component.spec.ts
+++ b/src/app/components/dashboard/dashboard.component.spec.ts
@@ -30,7 +30,6 @@
 import { ContainerHistoryComponent } from '@app/components/container-history/container-history.component';
 import { SchedulerService } from '@app/services/scheduler/scheduler.service';
 import { EventBusService } from '@app/services/event-bus/event-bus.service';
-import { AppNodeUtilizationComponent } from '@app/components/app-node-utilization/app-node-utilization.component';
 import {
   MockSchedulerService,
   MockNgxSpinnerService,
@@ -49,7 +48,6 @@
         MockComponent(AppHistoryComponent),
         MockComponent(ContainerStatusComponent),
         MockComponent(ContainerHistoryComponent),
-        MockComponent(AppNodeUtilizationComponent),
       ],
       imports: [MatCardModule, MatMenuModule, RouterTestingModule],
       providers: [
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index c02083c..063fbb3 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -27,7 +27,6 @@
 import { Applications, Partition } from '@app/models/partition-info.model';
 import { EventBusService, EventMap } from '@app/services/event-bus/event-bus.service';
 import { NOT_AVAILABLE } from '@app/utils/constants';
-import { NodeUtilization, NodeUtilizationChartData } from '@app/models/node-utilization.model';
 
 @Component({
   selector: 'app-dashboard',
@@ -50,7 +49,6 @@
   buildInfo: BuildInfo = this.getEmptyBuildInfo();
   initialAppHistory: HistoryInfo[] = [];
   initialContainerHistory: HistoryInfo[] = [];
-  nodeUtilizationChartData: NodeUtilizationChartData = new NodeUtilizationChartData("NA", []);
 
   constructor(
     private scheduler: SchedulerService,
@@ -108,11 +106,6 @@
       this.initialAppHistory = data;
       this.appHistoryData = this.getAreaChartData(data);
     });
-    
-    this.scheduler.fetchNodeUtilization().subscribe((data) => {
-      let nodeUtilization = new NodeUtilization(data.type, data.utilization);
-      this.nodeUtilizationChartData = nodeUtilization.toNodeUtilizationChartData();
-    });
 
     this.scheduler.fetchContainerHistory().subscribe((data) => {
       this.initialContainerHistory = data;
diff --git a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts
index 424e655..8b507e9 100644
--- a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts
+++ b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts
@@ -20,10 +20,10 @@
 import { BarChartDataSet } from '@app/models/chart-data.model';
 import { EventBusService, EventMap } from '@app/services/event-bus/event-bus.service';
 import { CommonUtil } from '@app/utils/common.util';
-import { Chart, Tooltip } from 'chart.js';
+import { Chart, BarElement, BarController, CategoryScale, Tooltip } from 'chart.js';
 import { Subject, takeUntil } from 'rxjs';
 
-Chart.register(Tooltip);
+Chart.register(BarElement, BarController, CategoryScale, Tooltip);
 
 @Component({
   selector: 'app-vertical-bar-chart',
@@ -103,7 +103,7 @@
             display: true,
             position: 'left',
             align: 'start',
-            onClick: (e) => {}, // disable legend click event
+            onClick: (e) => { }, // disable legend click event
             onHover: (event, legendItem, legend) => {
               let datasetIndex = legendItem.datasetIndex
               if (this.barChart != undefined && datasetIndex !== undefined) {
diff --git a/src/app/models/node-utilization.model.spec.ts b/src/app/models/node-utilization.model.spec.ts
deleted file mode 100644
index 0a51c8b..0000000
--- a/src/app/models/node-utilization.model.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * 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 { ChartDataItem } from '@app/models/chart-data.model';
-import { DEFAULT_BAR_COLOR } from '@app/utils/constants';
-import { NodeUtilization, NodeUtilizationChartData } from '@app/models/node-utilization.model';
-
-describe('NodeUtilization', () => {
-
-  it('test NodeUtilization.toNodeUtilizationChartData()', () => {
-    const nodeUtilization = new NodeUtilization('vcores', [
-      { bucketName: '0-10%', numOfNodes: 2, nodeNames: ['node1', 'node2'] },
-      { bucketName: '10-20%', numOfNodes: 3, nodeNames: ['node3', 'node4', 'node5'] },
-      { bucketName: '20-30%', numOfNodes: 16, nodeNames: ['node6', 'node7', 'node8','node9', 'node10', 'node11','node12', 'node13', 'node14','node15', 'node16', 'node17','node18', 'node19', 'node20', 'node21'] },
-    ]);
-
-    const result = nodeUtilization.toNodeUtilizationChartData();
-
-    expect(result).toBeInstanceOf(NodeUtilizationChartData);
-    expect(result.type).toBe('vcores');
-    expect(result.chartDataItems).toEqual([
-      new ChartDataItem('0-10%', 2, DEFAULT_BAR_COLOR, 'node1\nnode2'),
-      new ChartDataItem('10-20%', 3, DEFAULT_BAR_COLOR, 'node3\nnode4\nnode5'),
-      new ChartDataItem('20-30%', 16, DEFAULT_BAR_COLOR, 'node10\nnode11\nnode12\nnode13\nnode14\nnode15\nnode16\nnode17\nnode18\nnode19\nnode20\nnode6\nnode7\nnode8\nnode9\n...1 more'),
-    ]);
-  });
-});
diff --git a/src/app/models/node-utilization.model.ts b/src/app/models/node-utilization.model.ts
index d56a722..5dd232c 100644
--- a/src/app/models/node-utilization.model.ts
+++ b/src/app/models/node-utilization.model.ts
@@ -16,9 +16,6 @@
  * limitations under the License.
  */
 
-import { ChartDataItem } from '@app/models/chart-data.model';
-import { DEFAULT_BAR_COLOR } from '@app/utils/constants';
-
 export class NodeUtilization {
   constructor(
     public type: string,
@@ -28,33 +25,6 @@
       nodeNames: null | string[];
     }[],
   ) { }
-
-  // transform NodeUtilization to NodeUtilizationChartData for NodeUtilization bar chart
-  toNodeUtilizationChartData() {
-    const MAX_NODES_IN_DESCRIPTION = 15;
-    const backgroundColor = DEFAULT_BAR_COLOR;
-    let type = this.type;
-    let utilization = this.utilization;
-    // prepare data
-    let chartDataItems = new Array<ChartDataItem>();
-    utilization.forEach(({ bucketName, numOfNodes, nodeNames }) => {
-      const numOfNodesValue = numOfNodes === -1 ? 0 : numOfNodes;
-      let description: string | undefined;
-      if (nodeNames && nodeNames.length > MAX_NODES_IN_DESCRIPTION) {
-        // only put MAX_NODES_IN_DESCRIPTION nodes in description, others will be replaced by '...N more'
-        description = nodeNames.slice(0, MAX_NODES_IN_DESCRIPTION).sort().join("\n") + "\n..." + (nodeNames.length - MAX_NODES_IN_DESCRIPTION) + " more";
-      } else {
-        description = nodeNames ? nodeNames.sort().join("\n") : undefined;
-      }
-      chartDataItems.push(new ChartDataItem(
-        bucketName,
-        numOfNodesValue,
-        backgroundColor,
-        description
-      ));
-    });
-    return new NodeUtilizationChartData(type, chartDataItems)
-  }
 }
 
 export class NodeUtilizationsInfo {
@@ -64,13 +34,3 @@
     public utilizations: NodeUtilization[],
   ) { }
 }
-
-export class NodeUtilizationChartData {
-  type: string;
-  chartDataItems: ChartDataItem[];
-
-  constructor(type: string, chartDataItems: ChartDataItem[]) {
-    this.type = type;
-    this.chartDataItems = chartDataItems;
-  }
-}
diff --git a/src/app/services/scheduler/scheduler.service.ts b/src/app/services/scheduler/scheduler.service.ts
index f848bb3..d5a74c3 100644
--- a/src/app/services/scheduler/scheduler.service.ts
+++ b/src/app/services/scheduler/scheduler.service.ts
@@ -23,7 +23,7 @@
 import {ClusterInfo} from '@app/models/cluster-info.model';
 import {HistoryInfo} from '@app/models/history-info.model';
 import {NodeInfo} from '@app/models/node-info.model';
-import {NodeUtilization, NodeUtilizationsInfo} from '@app/models/node-utilization.model';
+import {NodeUtilizationsInfo} from '@app/models/node-utilization.model';
 import {Partition} from '@app/models/partition-info.model';
 
 import {QueueInfo, QueuePropertyItem} from '@app/models/queue-info.model';
@@ -255,11 +255,6 @@
     );
   }
 
-  fetchNodeUtilization(): Observable<NodeUtilization>{
-    const nodeUtilizationUrl = `${this.envConfig.getSchedulerWebAddress()}/ws/v1/scheduler/node-utilization`;
-    return this.httpClient.get(nodeUtilizationUrl).pipe(map((data: any) => data as NodeUtilization));
-  }
-
   fetchNodeUtilizationsInfo(): Observable<NodeUtilizationsInfo[]>{
     const nodeUtilizationsUrl = `${this.envConfig.getSchedulerWebAddress()}/ws/v1/scheduler/node-utilizations`;
     return this.httpClient.get(nodeUtilizationsUrl).pipe(map((data: any) => data as NodeUtilizationsInfo[]));
diff --git a/src/app/testing/mocks.ts b/src/app/testing/mocks.ts
index 805dadb..45efbd4 100644
--- a/src/app/testing/mocks.ts
+++ b/src/app/testing/mocks.ts
@@ -31,7 +31,6 @@
   fetchAppHistory: () => of([]),
   fetchContainerHistory: () => of([]),
   fetchNodeList: () => of([]),
-  fetchNodeUtilization: () => of([]),
   fecthHealthchecks: () => of([]),
 };