aggregated stats charts - machine as id and name

GitOrigin-RevId: 1b7c4f0e34b38886d0c737792c37c54b2e8cd436

platform/built-in-server/start-up-visualizer/package.json

@@ -7,7 +7,7 @@
     "build": "vue-cli-service build && unlink dist/js/pdfmake.*.js && unlink dist/js/pdfmake.*.js.map"
   },
   "dependencies": {
-    "@amcharts/amcharts4": "4.6.4",
+    "@amcharts/amcharts4": "4.6.5",
     "element-ui": "^2.12.0",
     "semver": "^6.3.0",
     "vue": "^2.6.10",

platform/built-in-server/start-up-visualizer/src/aggregatedStats/AggregatedStatsPage.ts

@@ -5,7 +5,7 @@ import {AggregatedDataManager} from "@/aggregatedStats/AggregatedDataManager"
 import {AppStateModule} from "@/state/state"
 import {getModule} from "vuex-module-decorators"
 import {loadJson} from "@/httpUtil"
-import {GroupedMetricResponse, InfoResponse, Metrics} from "@/aggregatedStats/model"
+import {GroupedMetricResponse, InfoResponse, Machine, Metrics} from "@/aggregatedStats/model"
 import {ClusteredChartManager} from "@/aggregatedStats/ClusteredChartManager"
 
 @Component
@@ -19,7 +19,7 @@ export default class AggregatedStatsPage extends Vue {
   chartSettings = this.dataModule.chartSettings
 
   products: Array<string> = []
-  machines: Array<string> = []
+  machines: Array<Machine> = []
 
   private lastInfoResponse: InfoResponse | null = null
 
@@ -70,7 +70,7 @@ export default class AggregatedStatsPage extends Vue {
     }
 
     if (product != null && product.length > 0) {
-      this.machines = infoResponse.productToMachineNames[product] || []
+      this.machines = infoResponse.productToMachine[product] || []
     }
     else {
       this.machines = []
@@ -79,17 +79,17 @@ export default class AggregatedStatsPage extends Vue {
     let selectedMachine = this.chartSettings.selectedMachine
     const machines = this.machines
     if (machines.length === 0) {
-      this.chartSettings.selectedMachine = ""
+      this.chartSettings.selectedMachine = undefined
     }
-    else if (selectedMachine == null || selectedMachine.length === 0 || !machines.includes(selectedMachine)) {
-      this.chartSettings.selectedMachine = machines[0]
+    else if (selectedMachine == null || !machines.find(it => it.id === selectedMachine)) {
+      this.chartSettings.selectedMachine = machines[0].id
     }
   }
 
   @Watch("chartSettings.selectedMachine")
-  selectedMachineChanged(machine: string | null, _oldV: string): void {
+  selectedMachineChanged(machine: number | null | undefined, _oldV: string): void {
     console.log("machine changed", machine, _oldV)
-    if (machine == null || machine.length === 0) {
+    if (machine == null) {
       return
     }
 
@@ -102,10 +102,10 @@ export default class AggregatedStatsPage extends Vue {
     this.loadLineChartData(product, machine)
   }
 
-  loadClusteredChartData(product: string, machine: string): void {
+  loadClusteredChartData(product: string, machineId: number): void {
     const url = new URL(`${this.chartSettings.serverUrl}/groupedMetrics`)
     url.searchParams.set("product", product)
-    url.searchParams.set("machine", machine)
+    url.searchParams.set("machine", machineId.toString())
     loadJson(url, null, this.$notify)
       .then(data => {
         if (data != null) {
@@ -118,10 +118,10 @@ export default class AggregatedStatsPage extends Vue {
   }
 
   // noinspection DuplicatedCode
-  loadLineChartData(product: string, machine: string): void {
+  loadLineChartData(product: string, machineId: number): void {
     const url = new URL(`${this.chartSettings.serverUrl}/metrics`)
     url.searchParams.set("product", product)
-    url.searchParams.set("machine", machine)
+    url.searchParams.set("machine", machineId.toString())
     const infoResponse = this.lastInfoResponse!!
     loadJson(url, null, this.$notify)
       .then(data => {

platform/built-in-server/start-up-visualizer/src/aggregatedStats/AggregatedStatsPage.vue

@@ -40,10 +40,10 @@
       <el-form-item label="Machine">
         <el-select v-model="chartSettings.selectedMachine" filterable>
           <el-option
-                v-for="machineId in machines"
-                :key="machineId"
-                :label="machineId"
-                :value="machineId">
+                v-for="machine in machines"
+                :key="machine.id"
+                :label="machine.name"
+                :value="machine.id">
               </el-option>
         </el-select>
       </el-form-item>
@@ -51,10 +51,10 @@
 
     <div class="aggregatedChart" ref="clusteredChartContainer"></div>
 
-    <h2>Duration Events</h2>
+    <h3>Duration Events</h3>
     <div class="aggregatedChart" ref="durationEventChartContainer"></div>
 
-    <h2>Instant Events</h2>
+    <h3>Instant Events</h3>
     <div class="aggregatedChart" ref="instantEventChartContainer"></div>
 
     <el-row>

platform/built-in-server/start-up-visualizer/src/aggregatedStats/ChartSettings.ts

@@ -3,7 +3,7 @@ export class ChartSettings {
   serverUrl: string = "http://127.0.0.1:9044"
 
   selectedProduct: string = ""
-  selectedMachine: string = ""
+  selectedMachine?: number
 
   showScrollbarXPreview: boolean = false
 }

platform/built-in-server/start-up-visualizer/src/aggregatedStats/model.ts

@@ -3,12 +3,17 @@ export type Metrics = { [key: string]: number; }
 
 export interface InfoResponse {
   readonly productNames: Array<string>
-  readonly productToMachineNames: { [key: string]: Array<string>; }
+  readonly productToMachine: { [key: string]: Array<Machine>; }
 
   readonly durationMetricsNames: Array<string>
   readonly instantMetricsNames: Array<string>
 }
 
+export interface Machine {
+  readonly id: number
+  readonly name: string
+}
+
 export interface GroupedMetricResponse {
   readonly groupNames: Array<string>
   readonly data: Array<{ [key: string]: Array<string | number>; }>

platform/built-in-server/start-up-visualizer/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@amcharts/amcharts4@4.6.4":
-  version "4.6.4"
-  resolved "https://registry.yarnpkg.com/@amcharts/amcharts4/-/amcharts4-4.6.4.tgz#3ef496c0530a410f793e8fc32f04034cf0733179"
-  integrity sha512-QowYmAxExrer302W6g161B/uickssxk0NnYonElkFOXILUsW6TcZR3TvC8FxmCTX8ySCcZjZ4ZHfS6LH1J893g==
+"@amcharts/amcharts4@4.6.5":
+  version "4.6.5"
+  resolved "https://registry.yarnpkg.com/@amcharts/amcharts4/-/amcharts4-4.6.5.tgz#5fffa5296d9336a61cd2a5e2bd41a5ae1f37b1b0"
+  integrity sha512-PyBC9gunHiKuHe/mgRq6GgISbxxKCb0vsJt4iMhibYCRMt1Nh0uxbdYj9tafzVLcZNINjE5gF/ziN274qu/RdA==
   dependencies:
     "@types/regression" "^2.0.0"
     canvg "^2.0.0"
@@ -2351,9 +2351,9 @@ error-stack-parser@^2.0.0:
     stackframe "^1.1.0"
 
 es-abstract@^1.12.0, es-abstract@^1.4.3, es-abstract@^1.5.1:
-  version "1.14.2"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.14.2.tgz#7ce108fad83068c8783c3cdf62e504e084d8c497"
-  integrity sha512-DgoQmbpFNOofkjJtKwr87Ma5EW4Dc8fWhD0R+ndq7Oc456ivUfGOOP6oAZTTKl5/CcNMP+EN+e3/iUzgE0veZg==
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.15.0.tgz#8884928ec7e40a79e3c9bc812d37d10c8b24cc57"
+  integrity sha512-bhkEqWJ2t2lMeaJDuk7okMkJWI/yqgH/EoGwpcvv0XW9RWQsRspI4wt6xuyuvMvvQE3gg/D9HXppgk21w78GyQ==
   dependencies:
     es-to-primitive "^1.2.0"
     function-bind "^1.1.1"
@@ -2363,8 +2363,8 @@ es-abstract@^1.12.0, es-abstract@^1.4.3, es-abstract@^1.5.1:
     is-regex "^1.0.4"
     object-inspect "^1.6.0"
     object-keys "^1.1.1"
-    string.prototype.trimleft "^2.0.0"
-    string.prototype.trimright "^2.0.0"
+    string.prototype.trimleft "^2.1.0"
+    string.prototype.trimright "^2.1.0"
 
 es-to-primitive@^1.2.0:
   version "1.2.0"
@@ -6581,7 +6581,7 @@ string.prototype.padstart@^3.0.0:
     es-abstract "^1.4.3"
     function-bind "^1.0.2"
 
-string.prototype.trimleft@^2.0.0:
+string.prototype.trimleft@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
   integrity sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==
@@ -6589,7 +6589,7 @@ string.prototype.trimleft@^2.0.0:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
 
-string.prototype.trimright@^2.0.0:
+string.prototype.trimright@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58"
   integrity sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==