start-up visualizer: use rison instead of json

GitOrigin-RevId: 0c859eff2c22b46c714489039634f6a61a1dbd9d
2026-09-27 10:03:11 +07:00 · 2019-11-23 18:04:55 +00:00
parent 2d7308e5f6
commit 6c91f25a71
7 changed files with 59 additions and 34 deletions
@@ -12,6 +12,7 @@
    "element-ui": "^2.12.0",
    "humanize-duration": "^3.21.0",
    "p-queue": "^6.2.1",
+    "rison-node": "^2.1.0",
    "semver": "^6.3.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.1.0",
@@ -75,8 +75,10 @@
    </el-row>

    <el-tabs value="date" size="small">
-      <el-tab-pane v-for="item in [{name: 'By Date', order: 'date'}, {name: 'By Build Number', order: 'buildNumber'}]"
-                   :key="item.order" :label="item.name" :name="item.order" lazy>
+      <el-tab-pane v-for='item in [
+          {name: "By Date", order: "date"},
+          {name: "By Build", order: "buildNumber"}
+          ]' :key="item.order" :label="item.name" :name="item.order" lazy>
        <keep-alive>
          <div>
            <el-form v-if="item.order === 'date'" :inline="true" size="small">
@@ -99,6 +101,7 @@
                </el-card>
              </el-col>
            </el-row>
+
            <el-row :gutter="5" style="margin-top: 5px;">
              <el-col :span="12">
                <el-card shadow="never" :body-style="{ padding: '0px' }">
@@ -106,7 +109,7 @@
                </el-card>
              </el-col>
              <el-col :span="12">
-                <el-card shadow="never" :body-style="{ padding: '0px' }">
+                <el-card v-if="item.order === 'date'" shadow="never" :body-style="{ padding: '0px' }">
                  <ClusteredChartComponent :dataRequest="dataRequest" :metrics='["bootstrap_d", "appInitPreparation_d", "appInit_d", "splash_i"]' :chartSettings="chartSettings" timeRange="lastMonth"/>
                </el-card>
              </el-col>
@@ -122,6 +125,9 @@
          <li>
            <small>Events <code>bootstrap</code> and <code>splash</code> are not available for reports <= v5 (May 2019, Idea 2019.2).</small>
          </li>
+          <li>
+            <small>Events <code>editorRestoring</code> is reliably reported since 23 November 2019.</small>
+          </li>
        </ul>
      </el-col>
    </el-row>
@@ -11,6 +11,8 @@
  import {BaseStatChartComponent} from "@/aggregatedStats/BaseStatChartComponent"
  import {DEFAULT_AGGREGATION_OPERATOR} from "@/aggregatedStats/ChartSettings"

+  const rison = require("rison-node")
+
  @Component
  export default class ClusteredChartComponent extends BaseStatChartComponent<ClusteredChartManager> {
    @Watch("chartSettings.aggregationOperator")
@@ -59,7 +61,7 @@
        dataQuery.filters!!.push({field: "generated_time", sql: "> subtractMonths(now(), 1)"})
      }

-      const url = `${chartSettings.serverUrl}/api/v1/groupedMetrics/` + encodeURIComponent(JSON.stringify(dataQuery))
+      const url = `${chartSettings.serverUrl}/api/v1/groupedMetrics/` + rison.encode(dataQuery)

      const onFinish = () => {
        this.isLoading = false
@@ -9,9 +9,11 @@
  import {ChartSettings} from "@/aggregatedStats/ChartSettings"
  import {loadJson} from "@/httpUtil"
  import {SortedByCategory, SortedByDate} from "@/aggregatedStats/ChartConfigurator"
-  import {DataQuery, DataRequest, expandMachine, expandMachineAsFilterValue} from "@/aggregatedStats/model"
+  import {DataQuery, DataQueryDimension, DataRequest, expandMachine, expandMachineAsFilterValue} from "@/aggregatedStats/model"
  import {BaseStatChartComponent} from "@/aggregatedStats/BaseStatChartComponent"

+  const rison = require("rison-node")
+
  @Component
  export default class LineChartComponent extends BaseStatChartComponent<LineChartManager> {
    @Prop({type: String, required: true})
@@ -55,41 +57,51 @@
          {name: "build_c3"},
        ]

-        dataQuery.fields = [{name: "t", sql: `toUnixTimestamp(anyHeavy(generated_time)) * 1000`}]
-        dataQuery.fields = dataQuery.fields.concat(this.metrics)
+        const fields: Array<string | DataQueryDimension> = [{name: "t", sql: `toUnixTimestamp(anyHeavy(generated_time)) * 1000`}]
+        fields.push(...this.metrics)
+        dataQuery.fields = fields
        dataQuery.order = dataQuery.dimensions.map(it => it.name)
      }
-      else if (granularity !== "as is") {
-        let sql: string
-        if (granularity == null || granularity === "hour") {
-          sql = "toStartOfHour(generated_time)"
-        }
-        else if (granularity === "day") {
-          sql = "toStartOfDay(generated_time)"
-        }
-        else if (granularity === "week") {
-          // Monday is the first day of week
-          sql = "toStartOfWeek(generated_time, 1)"
+      else {
+        if (granularity !== "as is") {
+          let sql: string
+          if (granularity == null || granularity === "hour") {
+            sql = "toStartOfHour(generated_time)"
+          }
+          else if (granularity === "day") {
+            sql = "toStartOfDay(generated_time)"
+          }
+          else if (granularity === "week") {
+            // Monday is the first day of week
+            sql = "toStartOfWeek(generated_time, 1)"
+          }
+          else {
+            sql = "toStartOfMonth(generated_time)"
+          }
+
+          dataQuery.dimensions = [
+            // seconds to milliseconds
+            {name: "t", sql: `toUnixTimestamp(${sql}) * 1000`}
+          ]
+
+          dataQuery.fields = ["build_c1", "build_c2", "build_c3"].map(it => {
+            return {name: it, sql: `anyHeavy(${it})`}
+          })
+          dataQuery.fields = dataQuery.fields.concat(this.metrics)
        }
        else {
-          sql = "toStartOfMonth(generated_time)"
+          const fields: Array<string | DataQueryDimension> = [{name: "t", sql: `toUnixTimestamp(generated_time) * 1000`}, "build_c1", "build_c2", "build_c3"]
+          fields.push(...this.metrics)
+          dataQuery.fields = fields
        }
-
-        dataQuery.dimensions = [
-          // seconds to milliseconds
-          {name: "t", sql: `toUnixTimestamp(${sql}) * 1000`}
-        ]
-
-        dataQuery.fields = ["build_c1", "build_c2", "build_c3"].map(it => {
-          return {name: it, sql: `anyHeavy(${it})`}
-        })
-        dataQuery.fields = dataQuery.fields.concat(this.metrics)
        dataQuery.order = ["t"]
      }

-      dataQuery.aggregator = "medianTDigest"
+      if (granularity !== "as is") {
+        dataQuery.aggregator = "medianTDigest"
+      }

-      const url = `${chartSettings.serverUrl}/api/v1/metrics/` + encodeURIComponent(JSON.stringify(dataQuery))
+      const url = `${chartSettings.serverUrl}/api/v1/metrics/` + rison.encode(dataQuery)
      const reportUrlPrefix = `${chartSettings.serverUrl}/api/v1/report/` + `product=${encodeURIComponent(request.product)}&machine=${encodeURIComponent(expandMachine(request))}`

      const onFinish = () => {
@@ -24,7 +24,7 @@ export interface GroupedMetricResponse {
 }

 export interface DataQuery {
-  fields: Array<string | DataQueryDimension>
+  fields?: Array<string | DataQueryDimension>

  filters?: Array<DataQueryFilter>
  order?: Array<string>
@@ -1,7 +1,6 @@
 // Copyright 2000-2019 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file.
 export function loadJson(url: string, processed: (() => void) | null, notificationManager: any): Promise<any> {
-  const parsedUrl = new URL(url)
-  console.log(`load (path=${decodeURIComponent(parsedUrl.pathname)}, query: ${parsedUrl.searchParams})`)
+  console.log(`load`, url)

  function showError(reason: string) {
    notificationManager.error({
@@ -5996,6 +5996,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
    hash-base "^3.0.0"
    inherits "^2.0.1"

+rison-node@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/rison-node/-/rison-node-2.1.0.tgz#7c6d38b72d7174628fc43987ec613fe2c6c030ef"
+  integrity sha512-YN84FJMSv9j0DRceSSGSKv1z9UBBRi5hzN0PAisGl9hKyQa0aeZygBstm2mPYgPz0o6w1sytEhSl73Q6KSSAmA==
+
 run-queue@^1.0.0, run-queue@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"