feat (topsql): always show data axis (#1272)

ui/lib/apps/TopSQL/pages/List/List.tsx

@@ -259,7 +259,7 @@ export function TopSQLList() {
                 ref={chartRef}
               />
             </div>
-            {!!topSQLData?.length && (
+            {Boolean(topSQLData?.length) && (
               <ListTable
                 onRowOver={(key: string) =>
                   onLegendItemOver(chartRef.current, key)
@@ -270,6 +270,13 @@ export function TopSQLList() {
                 data={topSQLData}
               />
             )}
+            {Boolean(!topSQLData?.length && timeRange.type === 'recent') && (
+              <Card noMarginBottom noMarginTop>
+                <p className="ant-form-item-extra">
+                  {t('topsql.table.description_no_recent_data')}
+                </p>
+              </Card>
+            )}
           </>
         )}
       </div>

ui/lib/apps/TopSQL/pages/List/ListChart.tsx

@@ -5,9 +5,7 @@ import {
   Position,
   ScaleType,
   Settings,
-  timeFormatter,
   BrushEndListener,
-  PartialTheme,
 } from '@elastic/charts'
 import { orderBy, toPairs } from 'lodash'
 import React, { useMemo, useState, forwardRef } from 'react'
@@ -16,6 +14,7 @@ import { TopsqlSummaryItem } from '@lib/client'
 import { useTranslation } from 'react-i18next'
 import { isOthersDigest } from '../../utils/specialRecord'
 import { useChange } from '@lib/utils/useChange'
+import { DEFAULT_CHART_SETTINGS, timeTickFormatter } from '@lib/utils/charts'
 
 export interface ListChartProps {
   data: TopsqlSummaryItem[]
@@ -24,15 +23,6 @@ export interface ListChartProps {
   onBrushEnd: BrushEndListener
 }
 
-const theme: PartialTheme = {
-  chartPaddings: {
-    right: 0,
-  },
-  chartMargins: {
-    right: 0,
-  },
-}
-
 export const ListChart = forwardRef<Chart, ListChartProps>(
   ({ onBrushEnd, data, timeWindowSize, timeRangeTimestamp }, ref) => {
     const { t } = useTranslation()
@@ -52,10 +42,12 @@ export const ListChart = forwardRef<Chart, ListChartProps>(
     return (
       <Chart ref={ref}>
         <Settings
-          theme={theme}
-          legendPosition={Position.Bottom}
+          {...DEFAULT_CHART_SETTINGS}
+          showLegend={false}
           onBrushEnd={onBrushEnd}
           xDomain={{
+            // Why do we want this? Because some data point may be missing. ech cannot know an
+            // accurate interval.
             minInterval: bundle.timeWindowSize * 1000,
             min: bundle.timeRangeTimestamp[0] * 1000,
             max: bundle.timeRangeTimestamp[1] * 1000,
@@ -65,30 +57,15 @@ export const ListChart = forwardRef<Chart, ListChartProps>(
           id="bottom"
           position={Position.Bottom}
           showOverlappingTicks
-          tickFormat={
-            bundle.timeRangeTimestamp[1] - bundle.timeRangeTimestamp[0] <
-            24 * 60 * 60
-              ? timeFormatter('HH:mm:ss')
-              : timeFormatter('MM-DD HH:mm')
-          }
+          tickFormat={timeTickFormatter(bundle.timeRangeTimestamp)}
         />
         <Axis
           id="left"
           title={t('topsql.chart.cpu_time')}
           position={Position.Left}
-          tickFormat={(v) => getValueFormat('ms')(v, 2)}
-        />
-        <BarSeries<any>
-          key="PLACEHOLDER"
-          id="PLACEHOLDER"
-          name="PLACEHOLDER"
-          hideInLegend
-          xScaleType={ScaleType.Time}
-          yScaleType={ScaleType.Linear}
-          xAccessor={0}
-          yAccessors={[1]}
-          stackAccessors={[0]}
-          data={[timeRangeTimestamp[0], null]}
+          showOverlappingTicks
+          tickFormat={(v) => getValueFormat('ms')(v, 1)}
+          ticks={5}
         />
         {Object.keys(chartData).map((digest) => {
           const sql = digestMap?.[digest] || ''
@@ -117,6 +94,21 @@ export const ListChart = forwardRef<Chart, ListChartProps>(
             />
           )
         })}
+        {Object.keys(chartData).length === 0 && (
+          // When there is no data, supply an empty one to preserve the axis.
+          <BarSeries
+            id="_placeholder"
+            hideInLegend
+            xScaleType={ScaleType.Time}
+            yScaleType={ScaleType.Linear}
+            xAccessor={0}
+            yAccessors={[1]}
+            data={[
+              [bundle.timeRangeTimestamp[0] * 1000, null],
+              [bundle.timeRangeTimestamp[1] * 1000, null],
+            ]}
+          />
+        )}
       </Chart>
     )
   }
@@ -169,11 +161,9 @@ function useChartData(seriesData: TopsqlSummaryItem[]) {
     })
 
     // Order by digest
-    const orderedDigests = orderBy(
-      toPairs(sumValueByDigest),
-      ['1'],
-      ['desc']
-    ).map((v) => v[0])
+    const orderedDigests = orderBy(toPairs(sumValueByDigest), ['1'], ['desc'])
+      .filter((v) => v[1] > 0)
+      .map((v) => v[0])
 
     const datumByDigest: Record<string, Array<[number, number]>> = {}
     for (const digest of orderedDigests) {

ui/lib/apps/TopSQL/translations/en.yaml

@@ -28,6 +28,7 @@ topsql:
     cpu_time: CPU Time
   table:
     description: The following table shows which top {{topN}} queries are contributing the most to load in the current time range. Click one to see details.
+    description_no_recent_data: There is no data currently. You need to wait for about 1 minute for new data being collected.
     others: Other Statements
     others_tooltip: All of other non Top {{topN}} statements
     fields:

ui/lib/apps/TopSQL/translations/zh.yaml

@@ -28,6 +28,7 @@ topsql:
     cpu_time: CPU 耗时
   table:
     description: 以下表格展示了当前时间范围内消耗负载最多的 {{topN}} 类 SQL 查询，点击后可进一步显示详情。
+    description_no_recent_data: 当前暂无数据，您需要等待约 1 分钟完成新数据采集。
     others: 其他语句
     others_tooltip: 所有其他非 Top {{topN}} 的语句
     fields: