Add I18N support (#35)

Signed-off-by: Breezewish <me@breeswish.org>
pingcap · Feb 18, 2020 · 7ab5f06 · 7ab5f06
1 parent 571cba6
commit 7ab5f06
Show file tree

Hide file tree

Showing 18 changed files with 661 additions and 236 deletions.
diff --git a/ui/.github_release_version b/ui/.github_release_version
@@ -1,3 +1,3 @@
 # This file contains a version number which will be used to release assets to
 # GitHub. To trigger a new asset release, simply increase this version number.
-20200214_1
+20200218_1
diff --git a/ui/.prettierrc b/ui/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true
+}
diff --git a/ui/config-overrides.js b/ui/config-overrides.js
@@ -1,14 +1,21 @@
 const path = require('path');
-const { override, fixBabelImports, addLessLoader, addWebpackResolve, addWebpackPlugin } = require('customize-cra');
+const {
+  override,
+  fixBabelImports,
+  addLessLoader,
+  addWebpackResolve,
+  addWebpackPlugin,
+} = require('customize-cra');
 const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
+const addYaml = require('react-app-rewire-yaml');
 
 const enableEslintIgnore = () => config => {
   const eslintRule = config.module.rules.filter(
     r => r.use && r.use.some(u => u.options && u.options.useEslintrc !== void 0)
   )[0];
   eslintRule.use[0].options.ignore = true;
   return config;
-}
+};
 
 module.exports = override(
   fixBabelImports('import', {
@@ -29,4 +36,5 @@ module.exports = override(
     alias: { '@': path.resolve(__dirname, 'src') },
   }),
   enableEslintIgnore(),
+  addYaml
 );
diff --git a/ui/package.json b/ui/package.json
@@ -3,15 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@baurine/grafana-value-formats":"^0.1.1",
+    "@baurine/grafana-value-formats": "^0.1.1",
     "@pingcap-incubator/pd-client-js": "^0.1.5",
     "@types/lodash": "^4.14.149",
     "antd": "^3.26.5",
     "axios": "^0.19.0",
+    "classnames": "^2.2.6",
     "d3": "^5.15.0",
+    "i18next": "^19.1.0",
+    "i18next-browser-languagedetector": "^4.0.1",
     "lodash": "^4.17.15",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-i18next": "^11.3.2",
     "react-router-dom": "^5.1.2",
     "single-spa": "^4.4.2",
     "single-spa-react": "^2.11.0"
@@ -50,6 +54,7 @@
     "customize-cra": "^0.9.1",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "react-app-rewire-yaml": "^1.1.0",
     "react-app-rewired": "^2.1.5",
     "react-scripts": "3.1.x",
     "typescript": "^3.7.4"

diff --git a/ui/src/apps/keyvis/RootComponent.tsx b/ui/src/apps/keyvis/RootComponent.tsx
@@ -1,167 +1,172 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { Heatmap, HeatmapData, HeatmapRange, DataTag } from './heatmap'
-import { fetchHeatmap } from './api'
-import './RootComponent.less'
+import React, { useState, useEffect, useCallback } from 'react';
+import { Heatmap, HeatmapData, HeatmapRange, DataTag } from './heatmap';
+import { fetchHeatmap } from './api';
+import './RootComponent.less';
 
-import ToolBar from './ToolBar'
+import ToolBar from './ToolBar';
 
 type CacheEntry = {
-  metricType: DataTag
-  dateRange: number
-  expireTime: number
-  data: HeatmapData
-}
+  metricType: DataTag;
+  dateRange: number;
+  expireTime: number;
+  data: HeatmapData;
+};
 
-const CACHE_EXPRIE_SECS = 60
+const CACHE_EXPRIE_SECS = 60;
 
 class HeatmapCache {
-  cache: CacheEntry[] = []
-  latestFetchIdx = 0
+  cache: CacheEntry[] = [];
+  latestFetchIdx = 0;
 
-  async fetch(range: number | HeatmapRange, metricType: DataTag): Promise<HeatmapData | undefined> {
+  async fetch(
+    range: number | HeatmapRange,
+    metricType: DataTag
+  ): Promise<HeatmapData | undefined> {
     // return fetchDummyHeatmap()
-    let selection
+    let selection;
     if (typeof range === 'number') {
-      const endTime = Math.ceil(new Date().getTime() / 1000)
-      this.cache = this.cache.filter(entry => entry.expireTime > endTime)
-      const entry = this.cache.find(entry => entry.dateRange === range && entry.metricType === metricType)
+      const endTime = Math.ceil(new Date().getTime() / 1000);
+      this.cache = this.cache.filter(entry => entry.expireTime > endTime);
+      const entry = this.cache.find(
+        entry => entry.dateRange === range && entry.metricType === metricType
+      );
       if (entry) {
-        return entry.data
+        return entry.data;
       } else {
         selection = {
           starttime: endTime - range,
-          endtime: endTime
-        }
+          endtime: endTime,
+        };
       }
     } else {
-      selection = range
+      selection = range;
     }
 
-    this.latestFetchIdx += 1
-    const fetchIdx = this.latestFetchIdx
-    const data = await fetchHeatmap(selection, metricType)
+    this.latestFetchIdx += 1;
+    const fetchIdx = this.latestFetchIdx;
+    const data = await fetchHeatmap(selection, metricType);
     if (fetchIdx === this.latestFetchIdx) {
       if (typeof range === 'number') {
         this.cache.push({
           dateRange: range,
           metricType: metricType,
           expireTime: new Date().getTime() / 1000 + CACHE_EXPRIE_SECS,
-          data: data
-        })
+          data: data,
+        });
       }
-      return data
+      return data;
     }
   }
 }
 
-const DEFAULT_INTERVAL = 60000
+const DEFAULT_INTERVAL = 60000;
 
 // Todo: define heatmap state, with auto check control, date range select, reset to zoom
 // fetchData ,  changeType, add loading state, change zoom level to reset autofetch,
 
 type ChartState = {
-  heatmapData: HeatmapData
-  metricType: DataTag
-}
+  heatmapData: HeatmapData;
+  metricType: DataTag;
+};
 
 // TODO: using global state is not a good idea
-let _chart
-let cache = new HeatmapCache()
+let _chart;
+let cache = new HeatmapCache();
 
 const KeyVis = props => {
-  const [chartState, setChartState] = useState<ChartState>()
-  const [selection, setSelection] = useState<HeatmapRange | null>(null)
-  const [isLoading, setLoading] = useState(false)
-  const [isAutoFetch, setAutoFetch] = useState(false)
-  const [isOnBrush, setOnBrush] = useState(false)
-  const [dateRange, setDateRange] = useState(3600 * 6)
-  const [brightLevel, setBrightLevel] = useState(1)
-  const [metricType, setMetricType] = useState<DataTag>('written_bytes')
+  const [chartState, setChartState] = useState<ChartState>();
+  const [selection, setSelection] = useState<HeatmapRange | null>(null);
+  const [isLoading, setLoading] = useState(false);
+  const [isAutoFetch, setAutoFetch] = useState(false);
+  const [isOnBrush, setOnBrush] = useState(false);
+  const [dateRange, setDateRange] = useState(3600 * 6);
+  const [brightLevel, setBrightLevel] = useState(1);
+  const [metricType, setMetricType] = useState<DataTag>('written_bytes');
 
   useEffect(() => {
     const timerId =
       isAutoFetch &&
       setInterval(() => {
-        _fetchHeatmap()
-      }, DEFAULT_INTERVAL)
+        _fetchHeatmap();
+      }, DEFAULT_INTERVAL);
 
     return () => {
       // _chart = null
-      timerId && clearInterval(timerId)
-    }
-  }, [isAutoFetch])
+      timerId && clearInterval(timerId);
+    };
+  }, [isAutoFetch]);
 
   useEffect(() => {
-    _fetchHeatmap()
-  }, [selection, metricType, dateRange])
+    _fetchHeatmap();
+  }, [selection, metricType, dateRange]);
 
   const _fetchHeatmap = async () => {
-    setLoading(true)
-    setOnBrush(false)
-    const data = await cache.fetch(selection || dateRange, metricType)
-    setChartState({ heatmapData: data!, metricType: metricType })
-    setLoading(false)
-  }
+    setLoading(true);
+    setOnBrush(false);
+    const data = await cache.fetch(selection || dateRange, metricType);
+    setChartState({ heatmapData: data!, metricType: metricType });
+    setLoading(false);
+  };
 
   const onChangeBrightLevel = val => {
-    if (!_chart) return
-    setBrightLevel(val)
-    _chart.brightness(val)
-  }
+    if (!_chart) return;
+    setBrightLevel(val);
+    _chart.brightness(val);
+  };
 
   const onToggleAutoFetch = (enable: Boolean | undefined) => {
     if (enable === undefined) {
-      enable = !isAutoFetch
+      enable = !isAutoFetch;
     }
-    setAutoFetch(enable as boolean)
+    setAutoFetch(enable as boolean);
     if (enable) {
-      _chart.resetZoom()
-      setOnBrush(false)
-      _fetchHeatmap()
+      _chart.resetZoom();
+      setOnBrush(false);
+      _fetchHeatmap();
     }
-  }
+  };
 
   const onChangeMetric = value => {
-    setMetricType(value)
-  }
+    setMetricType(value);
+  };
 
   const onChartInit = useCallback(
     chart => {
-      _chart = chart
-      setLoading(false)
-      setBrightLevel(1)
-      _chart.brightness(1)
+      _chart = chart;
+      setLoading(false);
+      setBrightLevel(1);
+      _chart.brightness(1);
     },
     [props]
-  )
+  );
 
   const onChangeDateRange = (v: number) => {
-    setDateRange(v)
-    setSelection(null)
-  }
+    setDateRange(v);
+    setSelection(null);
+  };
 
   const onResetZoom = () => {
-    setSelection(null)
-  }
+    setSelection(null);
+  };
 
   const onToggleBrush = () => {
-    setAutoFetch(false)
-    setOnBrush(!isOnBrush)
-    _chart.brush(!isOnBrush)
-  }
+    setAutoFetch(false);
+    setOnBrush(!isOnBrush);
+    _chart.brush(!isOnBrush);
+  };
 
   const onBrush = useCallback(
     (selection: HeatmapRange) => {
-      setOnBrush(false)
-      setAutoFetch(false)
-      setSelection(selection)
+      setOnBrush(false);
+      setAutoFetch(false);
+      setSelection(selection);
     },
     [props]
-  )
+  );
 
   const onZoom = useCallback(() => {
-    setAutoFetch(false)
-  }, [props])
+    setAutoFetch(false);
+  }, [props]);
 
   return (
     <div className="PD-KeyVis">
@@ -191,7 +196,7 @@ const KeyVis = props => {
         <></>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default KeyVis
+export default KeyVis;