Hide some menu items in non dev mode (#32)

Signed-off-by: Breezewish <[email protected]>

README.md

@@ -74,6 +74,7 @@ A standalone TiDB Dashboard Server contains the following components:
 To build a dashboard server that only serves Dashboard API:
 
 ```sh
+# under Dashboard directory:
 make server
 # make run
 ```
@@ -83,6 +84,7 @@ make server
 To build a dashboard server that serves both API and the Swagger API UI:
 
 ```sh
+# under Dashboard directory:
 make # or more verbose: SWAGGER=1 make server
 # make run
 ```
@@ -97,6 +99,7 @@ Note: You need Node.js and yarn installed in order to build a full-featured dash
 Requirements section for details.
 
 ```sh
+# under Dashboard directory:
 make ui  # Build UI from source
 SWAGGER=1 UI=1 make server
 # make run
@@ -120,6 +123,7 @@ If you want to develop Dashboard UI, the recommended workflow is as follows:
    first time (or backend interface has been changed), you need to build or rebuild the API client:
 
    ```bash
+   # under Dashboard directory:
    make swagger_client
    ```
 
@@ -134,6 +138,7 @@ If you want to develop Dashboard UI, the recommended workflow is as follows:
 3. Start React Development Server
 
    ```sh
+   # under Dashboard directory:
    cd ui
    npm start
    ```

go.mod

@@ -5,14 +5,14 @@ go 1.13
 require (
 	github.com/alecthomas/template v0.0.0-20190718012654-fb15b899a751
 	github.com/elazarl/go-bindata-assetfs v1.0.0
-	github.com/gin-contrib/cors v1.3.0
 	github.com/gin-contrib/gzip v0.0.1
 	github.com/gin-gonic/gin v1.5.0
 	github.com/go-bindata/go-bindata v3.1.2+incompatible
 	github.com/jinzhu/gorm v1.9.12
 	github.com/pingcap/check v0.0.0-20191216031241-8a5a85928f12
 	github.com/pingcap/log v0.0.0-20200117041106-d28c14d3b1cd
 	github.com/pkg/errors v0.9.1
+	github.com/rs/cors v1.7.0
 	github.com/swaggo/http-swagger v0.0.0-20200103000832-0e9263c4b516
 	github.com/swaggo/swag v1.6.5
 	go.etcd.io/etcd v0.0.0-20191023171146-3cf2f69b5738

go.sum

@@ -45,8 +45,6 @@ github.com/fatih/color v1.7.0 h1:DkWD4oS2D8LGGgTQ6IvwJJXSL5Vp2ffcQg58nFV38Ys=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
 github.com/ghodss/yaml v1.0.0 h1:wQHKEahhL6wmXdzwWG11gIVCkOv05bNOh+Rxn0yngAk=
 github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
-github.com/gin-contrib/cors v1.3.0 h1:PolezCc89peu+NgkIWt9OB01Kbzt6IP0J/JvkG6xxlg=
-github.com/gin-contrib/cors v1.3.0/go.mod h1:artPvLlhkF7oG06nK8v3U8TNz6IeX+w1uzCSEId5/Vc=
 github.com/gin-contrib/gzip v0.0.1 h1:ezvKOL6jH+jlzdHNE4h9h8q8uMpDQjyl0NN0Jd7jozc=
 github.com/gin-contrib/gzip v0.0.1/go.mod h1:fGBJBCdt6qCZuCAOwWuFhBB4OOq9EFqlo5dEaFhhu5w=
 github.com/gin-contrib/sse v0.0.0-20170109093832-22d885f9ecc7/go.mod h1:VJ0WA2NBN22VlZ2dKZQPAPnyWw5XTlK1KymzLKsr59s=
@@ -203,6 +201,8 @@ github.com/prometheus/procfs v0.0.2 h1:6LJUbpNm42llc4HRCuvApCSWB/WfhuNo9K98Q9sNG
 github.com/prometheus/procfs v0.0.2/go.mod h1:TjEm7ze935MbeOT/UhFTIMYKhuLP4wbCsTZCD3I8kEA=
 github.com/rogpeppe/fastuuid v0.0.0-20150106093220-6724a57986af/go.mod h1:XWv6SoW27p1b0cqNHllgS5HIMJraePCO15w5zCzIWYg=
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
+github.com/rs/cors v1.7.0 h1:+88SsELBHx5r+hZ8TCkggzSstaWNbDvThkVK8H6f9ik=
+github.com/rs/cors v1.7.0/go.mod h1:gFx+x8UowdsKA9AchylcLynDq+nNFfI8FkUZdN/jGCU=
 github.com/russross/blackfriday/v2 v2.0.1 h1:lPqVAte+HuHNfhJ/0LC98ESWRz8afy9tM/0RK8m9o+Q=
 github.com/russross/blackfriday/v2 v2.0.1/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
 github.com/satori/go.uuid v1.2.0/go.mod h1:dA0hQrYB0VpLJoorglMZABFdXlWrHn1NEOzdhQKdks0=
@@ -309,7 +309,6 @@ golang.org/x/sys v0.0.0-20181228144115-9a3f9b0469bb/go.mod h1:STP8DvDyc/dI5b8T5h
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190222072716-a9d3bda3a223/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20190507160741-ecd444e8653b/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190610200419-93c9922d18ae/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190616124812-15dcb6c0061f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190813064441-fde4db37ae7a h1:aYOabOQFp6Vj6W1F80affTUvO9UxmJRx8K0gsfABByQ=

pkg/apiserver/apiserver.go

@@ -17,9 +17,9 @@ import (
 	"net/http"
 	"sync"
 
-	"github.com/gin-contrib/cors"
 	"github.com/gin-contrib/gzip"
 	"github.com/gin-gonic/gin"
+	cors "github.com/rs/cors/wrapper/gin"
 
 	"github.com/pingcap-incubator/tidb-dashboard/pkg/apiserver/foo"
 	"github.com/pingcap-incubator/tidb-dashboard/pkg/apiserver/info"
@@ -42,9 +42,10 @@ func Handler(apiPrefix string, config *config.Config, services *Services) http.H
 	})
 
 	r := gin.New()
-	r.Use(cors.Default())
+	r.Use(cors.AllowAll())
 	r.Use(gin.Recovery())
 	r.Use(gzip.Gzip(gzip.BestSpeed))
+
 	endpoint := r.Group(apiPrefix)
 
 	foo.NewService(config).Register(endpoint)

pkg/apiserver/info/info.go

@@ -38,17 +38,18 @@ func NewService(config *config.Config, db *dbstore.DB) *Service {
 
 func (s *Service) Register(r *gin.RouterGroup) {
 	endpoint := r.Group("/info")
-	endpoint.GET("/", s.infoHandler)
+	endpoint.GET("/info", s.infoHandler)
 }
 
 // @Summary Dashboard info
 // @Description Get information about the dashboard service.
 // @Produce json
 // @Success 200 {object} Info
-// @Router /info [get]
+// @Router /info/info [get]
 func (s *Service) infoHandler(c *gin.Context) {
-	c.JSON(http.StatusOK, Info{
+	info := Info{
 		Version:    s.config.Version,
 		PDEndPoint: s.config.PDEndPoint,
-	})
+	}
+	c.JSON(http.StatusOK, info)
 }

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.
-20200210_1
+20200214_1

ui/src/apps/demo/index.js

@@ -4,5 +4,4 @@ module.exports = {
   routerPrefix: '/demo',
   icon: 'pie-chart',
   menuTitle: 'Demo 2', // TODO: I18N
-  isDefaultRouter: true,
 }

ui/src/apps/keyvis/RootComponent.less

@@ -47,6 +47,10 @@
     .space {
       width: 12px;
     }
+
+    .ant-select .anticon {
+      margin-right: 5px;
+    }
   }
 
   svg,

ui/src/apps/keyvis/RootComponent.tsx

@@ -70,7 +70,6 @@ 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)
@@ -79,19 +78,14 @@ const KeyVis = props => {
   const [brightLevel, setBrightLevel] = useState(1)
   const [metricType, setMetricType] = useState<DataTag>('written_bytes')
 
-  console.log('Keyvis Init')
-
   useEffect(() => {
-    console.log('side effect in keyvis')
-
     const timerId =
       isAutoFetch &&
       setInterval(() => {
         _fetchHeatmap()
       }, DEFAULT_INTERVAL)
 
     return () => {
-      console.log('side effect in keyvis cleanup')
       // _chart = null
       timerId && clearInterval(timerId)
     }
@@ -106,17 +100,13 @@ const KeyVis = props => {
     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)
-    const update = async () => {
-      await _chart.brightness(val)
-      setLoading(false)
-    }
-    setLoading(true)
-    update()
+    _chart.brightness(val)
   }
 
   const onToggleAutoFetch = (enable: Boolean | undefined) => {
@@ -140,6 +130,7 @@ const KeyVis = props => {
       _chart = chart
       setLoading(false)
       setBrightLevel(1)
+      _chart.brightness(1)
     },
     [props]
   )

ui/src/apps/keyvis/ToolBar.tsx

@@ -1,4 +1,4 @@
-import { Slider, Spin, Icon, Select, Dropdown, Button, Input } from 'antd'
+import { Slider, Spin, Icon, Select, Dropdown, Button } from 'antd'
 import React, { Component } from 'react'
 
 export interface IKeyVisToolBarProps {
@@ -27,8 +27,8 @@ const DateRangeOptions = [
 const MetricOptions = [
   { text: '读取字节量', value: 'read_bytes' },
   { text: '写入字节量', value: 'written_bytes' },
-  { text: '读取 keys', value: 'read_keys' },
-  { text: '写入 keys', value: 'written_keys' },
+  { text: '读取次数', value: 'read_keys' },
+  { text: '写入次数', value: 'written_keys' },
   { text: '所有', value: 'integration' }
 ]
 
@@ -57,7 +57,9 @@ export default class KeyVisToolBar extends Component<IKeyVisToolBarProps> {
 
   handleBrightnessDropdown = (visible: boolean) => {
     this.setState({ brightnessDropdownVisible: visible })
-    this.props.onChangeBrightLevel(1 * Math.pow(2, this.state.exp))
+    setTimeout(() => {
+      this.handleBrightLevel(this.state.exp);
+    }, 0)
   }
 
   render() {
@@ -114,7 +116,7 @@ export default class KeyVisToolBar extends Component<IKeyVisToolBarProps> {
 
         <div className="space" />
 
-        <Select onChange={this.handleDateRange} value={dateRange}>
+        <Select onChange={this.handleDateRange} value={dateRange} style={{ width: 120 }}>
           {DateRangeOptions.map(option => (
             <Select.Option
               key={option.text}
@@ -128,7 +130,7 @@ export default class KeyVisToolBar extends Component<IKeyVisToolBarProps> {
 
         <div className="space" />
 
-        <Select onChange={this.handleMetricChange} value={metricType}>
+        <Select onChange={this.handleMetricChange} value={metricType} style={{ width: 160 }}>
           {MetricOptions.map(option => (
             <Select.Option
               key={option.text}

ui/src/apps/keyvis/api.ts

@@ -11,12 +11,3 @@ export async function fetchHeatmap(selection?: HeatmapRange, type: DataTag = 'wr
   )
   return resp.data
 }
-
-/*
-// Dummy Data
-const dummyData: HeatmapData = require('./dummydata.json')
-
-export async function fetchDummyHeatmap() {
-  return dummyData
-}
-*/