refine clinic cloud variant (pingcap#1414)

* add start entry * refine start options * refine start options * add more app options * make slow query app configurable from html * support cloud ngm topsql
shhdgit · Nov 2, 2022 · 77576d9 · 77576d9
1 parent 8a3282a
commit 77576d9
Show file tree

Hide file tree

Showing 21 changed files with 426 additions and 150 deletions.
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/package.json b/ui/packages/tidb-dashboard-for-clinic-cloud/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-clinic-cloud",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "main": "dist/dashboardApp.js",
   "module": "dist/dashboardApp.js",
   "files": [

diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/public/index.html b/ui/packages/tidb-dashboard-for-clinic-cloud/public/index.html
@@ -25,6 +25,12 @@
         left: 50%;
       }
 
+      #dashboard_page_spinner p {
+        margin-left: -50%;
+        margin-top: 8px;
+        color: #888;
+      }
+
       .dot-flashing {
         position: relative;
         width: 10px;
@@ -93,36 +99,40 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="dashboard_page_spinner"><div class="dot-flashing"></div></div>
+
+    <div id="dashboard_page_spinner">
+      <div class="dot-flashing"></div>
+      <p>
+        It may take a bit long time to load for the first time, due to download
+        some js files.
+      </p>
+    </div>
     <div id="root"></div>
-    <script
-      type="module"
-      src="./dashboardApp.js?t=%TIME_PLACE_HOLDER%"
-    ></script>
 
-    <script>
-      window.onload = function () {
-        const searchParams = new URLSearchParams(window.location.search)
-        const orgId = searchParams.get('orgId') || ''
-        const clusterId = searchParams.get('clusterId') || ''
-        if (orgId === '' || clusterId === '') {
-          window.alert('Invalid orgId or clusterId parameter!')
-          return
-        }
+    <script type="module">
+      import startDashboard from './dashboardApp.js?t=%TIME_PLACE_HOLDER%'
 
-        const apiBasePath = `/clinic/api/v1/dashboard/proxy/cluster/${clusterId}/pd/dashboard/api`
-        window.dispatchEvent(
-          new CustomEvent('dashboard:portal_event', {
-            detail: {
-              type: 'DASHBOARD_PORTAL_EVENT',
-              token: localStorage.getItem('clinic.auth.csrf_token'),
-              apiBasePath,
-              orgId,
-              clusterId
-            }
-          })
-        )
+      const apiToken = localStorage.getItem('clinic.auth.csrf_token')
+
+      // example entry link:
+      // http://localhost:8181/clinic/dashboard/cloud/?orgId=1&clusterId=63405#/overview
+      const searchParams = new URLSearchParams(window.location.search)
+      const orgId = searchParams.get('orgId') || ''
+      const clusterId = searchParams.get('clusterId') || ''
+      if (apiToken === '' || orgId === '' || clusterId === '') {
+        window.alert('Invalid token, orgId or clusterId!')
+        window.location.assign('/')
       }
+
+      const apiPathBase = `/clinic/api/v1/dashboard/proxy/orgs/${orgId}/clusters/${clusterId}/pd/dashboard/api`
+      startDashboard({
+        clientOptions: {
+          apiPathBase,
+          apiToken,
+          orgId,
+          clusterId
+        }
+      })
     </script>
   </body>
 </html>
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html b/ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="./distro-res/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      http-equiv="Cache-control"
+      content="no-cache, no-store, must-revalidate"
+    />
+    <style>
+      body {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+          sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        background: #fff;
+      }
+
+      #dashboard_page_spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+      }
+
+      #dashboard_page_spinner p {
+        margin-left: -50%;
+        margin-top: 8px;
+        color: #888;
+      }
+
+      .dot-flashing {
+        position: relative;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: #aaa;
+        -webkit-animation: dot-flashing 1s infinite linear alternate;
+        animation: dot-flashing 1s infinite linear alternate;
+        -webkit-animation-delay: 0.5s;
+        animation-delay: 0.5s;
+      }
+
+      .dot-flashing::before,
+      .dot-flashing::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: 0;
+      }
+
+      .dot-flashing::before {
+        left: -15px;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: #aaa;
+        -webkit-animation: dot-flashing 1s infinite alternate;
+        animation: dot-flashing 1s infinite alternate;
+        -webkit-animation-delay: 0s;
+        animation-delay: 0s;
+      }
+
+      .dot-flashing::after {
+        left: 15px;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: #aaa;
+        -webkit-animation: dot-flashing 1s infinite alternate;
+        animation: dot-flashing 1s infinite alternate;
+        -webkit-animation-delay: 1s;
+        animation-delay: 1s;
+      }
+
+      @-webkit-keyframes dot-flashing {
+        0% {
+          background-color: #aaa;
+        }
+        50%,
+        100% {
+          background-color: #ddd;
+        }
+      }
+
+      @keyframes dot-flashing {
+        0% {
+          background-color: #aaa;
+        }
+        50%,
+        100% {
+          background-color: #ddd;
+        }
+      }
+    </style>
+    <link rel="stylesheet" href="./dashboardApp.css?t=%TIME_PLACE_HOLDER%" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="dashboard_page_spinner">
+      <div class="dot-flashing"></div>
+      <p>
+        It may take a bit long time to load for the first time, due to download
+        some js files.
+      </p>
+    </div>
+    <div id="root"></div>
+
+    <script type="module">
+      import startDashboard from './dashboardApp.js?t=%TIME_PLACE_HOLDER%'
+
+      const apiToken = localStorage.getItem('clinic.auth.csrf_token')
+
+      // example entry link:
+      // http://localhost:8181/clinic/dashboard/cloud/ngm.html?provider=aws&region=us-west-2&orgId=30052&projectId=43584&clusterId=61992#/slow_query
+      // http://localhost:8181/clinic/dashboard/cloud/ngm.html?provider=aws&region=us-west-2&orgId=30052&projectId=43584&clusterId=61992#/topsql
+      const searchParams = new URLSearchParams(window.location.search)
+      const provider = searchParams.get('provider') || ''
+      const region = searchParams.get('region') || ''
+      const orgId = searchParams.get('orgId') || ''
+      const projectId = searchParams.get('projectId') || ''
+      const clusterId = searchParams.get('clusterId') || ''
+      if (
+        apiToken === '' ||
+        provider === '' ||
+        region === '' ||
+        orgId === '' ||
+        projectId === '' ||
+        clusterId === ''
+      ) {
+        window.alert(
+          'Invalid token, provider, region, orgId, projectId or clusterId!'
+        )
+        window.location.assign('/')
+      }
+
+      const apiPathBase = `/ngm/api/v1`
+      startDashboard({
+        clientOptions: {
+          apiPathBase,
+          apiToken,
+          provider,
+          region,
+          orgId,
+          projectId,
+          clusterId
+        },
+        appOptions: {
+          hideNav: true,
+          skipLoadAppInfo: true,
+          skipReloadWhoAmI: true
+        },
+        appsConfig: {
+          slowQuery: {
+            enableExport: false,
+            showDBFilter: false
+          },
+          topSQL: {
+            checkNgm: false,
+            showSetting: false
+          }
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/SlowQuery/context.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/SlowQuery/context.ts
@@ -1,6 +1,7 @@
 import {
   ISlowQueryDataSource,
   ISlowQueryContext,
+  ISlowQueryConfig,
   ReqConfig
 } from '@pingcap/tidb-dashboard-lib'
 
@@ -68,11 +69,14 @@ class DataSource implements ISlowQueryDataSource {
 
 const ds = new DataSource()
 
-export const ctx: ISlowQueryContext = {
+export const ctx: (cfg: Partial<ISlowQueryConfig>) => ISlowQueryContext = (
+  cfg
+) => ({
   ds,
   cfg: {
     apiPathBase: client.getBasePath(),
     enableExport: true,
-    showDBFilter: true
+    showDBFilter: true,
+    ...cfg
   }
-}
+})
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/SlowQuery/index.tsx b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/SlowQuery/index.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
 import { SlowQueryApp, SlowQueryProvider } from '@pingcap/tidb-dashboard-lib'
+import { getStartOptions } from '~/uilts/appOptions'
 import { ctx } from './context'
 
 export default function () {
   return (
-    <SlowQueryProvider value={ctx}>
+    <SlowQueryProvider
+      value={ctx(getStartOptions().appsConfig?.slowQuery || {})}
+    >
       <SlowQueryApp />
     </SlowQueryProvider>
   )

diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSQL/context.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSQL/context.ts
@@ -1,6 +1,7 @@
 import {
   ITopSQLDataSource,
   ITopSQLContext,
+  ITopSQLConfig,
   ReqConfig
 } from '@pingcap/tidb-dashboard-lib'
 
@@ -44,6 +45,11 @@ class DataSource implements ITopSQLDataSource {
 
 const ds = new DataSource()
 
-export const ctx: ITopSQLContext = {
-  ds
-}
+export const ctx: (cfg: Partial<ITopSQLConfig>) => ITopSQLContext = (cfg) => ({
+  ds,
+  cfg: {
+    checkNgm: true,
+    showSetting: true,
+    ...cfg
+  }
+})
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSQL/index.tsx b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSQL/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import { TopSQLApp, TopSQLProvider } from '@pingcap/tidb-dashboard-lib'
+import { getStartOptions } from '~/uilts/appOptions'
 import { ctx } from './context'
 
 export default function () {
   return (
-    <TopSQLProvider value={ctx}>
+    <TopSQLProvider value={ctx(getStartOptions().appsConfig?.topSQL || {})}>
       <TopSQLApp />
     </TopSQLProvider>
   )