feat: UI overhaul (#347)

* refactor(global): generate menu tree; init sidebar menu (#344) use sidebar as menu #343 * feat: new query modal (#346) * feat: init new query modal * feat: use tabs for dataview * feat(query): support drag and fullscreen * feat: table manager (#349) * feat(tables): init table manager and support details load-more * feat: fetch DB details info * style(tables): basic detail style * feat(tables): support details refreshing * style: table style * style(tables): columns basic style * style(tables): details style * fix(tables): search table name * feat(tables): format timestamp for details * fix(tables): add quote for table name in query * feat(tables): find ttl for details * style(tables): details refresh and code * refactor: clean code * refactor(tables): types for table detail * feat(logs): init new logs (#350) * feat(logs): init new logs * fix(editor): insert sql code and focus editor * style(logs): edit style * style(editor): new style * style: new ui * feat(promql): replace code from logs * fix: clear code * style: new ui * style: edit ui * style: table and select bg style * style(tables): fix new ui * style(query): modal position * style: buttons hover color * style: select and button * style: script style * feat(global): new env and role permission * refactor: update icons
GreptimeTeam · Nov 16, 2023 · a08bb42 · a08bb42
1 parent ae7345b
commit a08bb42
Show file tree

Hide file tree

Showing 52 changed files with 1,613 additions and 406 deletions.
diff --git a/.env.development b/.env.development
@@ -1,2 +1,3 @@
 VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
 VITE_API_BASE_URL='https://api-preview.greptime.cloud'
+VITE_ROLE='admin'
diff --git a/.env.production b/.env.production
@@ -1,2 +1,3 @@
 VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
-VITE_API_BASE_URL='https://api.greptime.cloud'
+VITE_API_BASE_URL='https://api-preview.greptime.cloud'
+VITE_ROLE='admin'
diff --git a/.env.staging b/.env.staging
@@ -1,2 +1,3 @@
 VITE_CLOUD_URL='https://console.greptime.cloud'
 VITE_API_BASE_URL='https://api.greptime.cloud'
+VITE_ROLE='cloud'
diff --git a/.env.cloud → .env.test b/.env.cloud → .env.test
@@ -1,2 +1,3 @@
 VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
 VITE_API_BASE_URL='https://api-preview.greptime.cloud'
+VITE_ROLE='cloud'
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
@@ -102,6 +102,8 @@
     "Ref": true,
     "VNode": true,
     "toValue": true,
-    "useWorkbenchStore": true
+    "useWorkbenchStore": true,
+    "WritableComputedRef": true,
+    "stringType": true
   }
 }
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
   </head>
 
   <body>
-    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19361_107.21324b7166c6e57e09f92c0b779c8981.js"></script>
+    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_29317_85.ebf3975f21c549f19223382fe8dde8ee.js"></script>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/package.json b/package.json
@@ -7,15 +7,14 @@
   "license": "Apache-2.0",
   "scripts": {
     "dev": "vite --config ./config/vite.config.dev.ts",
-    "dev:cloud": "vite --mode cloud --base /dashboard/ --config ./config/vite.config.dev.ts ",
-    "dev:staging": "vite --mode staging --base /dashboard/ --config ./config/vite.config.dev.ts ",
+    "cloud": "VITE_ROLE=cloud vite --config ./config/vite.config.dev.ts",
     "build": "vite build --config ./config/vite.config.prod.ts && vue-tsc --noEmit",
     "build:docker": "vite build --config ./config/vite.config.prod.ts --base /dashboard/ && vue-tsc --noEmit",
-    "build:cloud": "vite build --config ./config/vite.config.prod.ts --mode cloud --base /dashboard/ && vue-tsc --noEmit",
+    "build:test": "vite build --config ./config/vite.config.prod.ts --mode test --base /dashboard/ && vue-tsc --noEmit",
     "build:staging": "vite build --config ./config/vite.config.prod.ts --mode staging --base /dashboard/ && vue-tsc --noEmit",
     "report": "cross-env REPORT=true npm run build",
     "preview": "npm run build && vite preview --host --config ./config/vite.config.base.ts",
-    "preview:cloud": "npm run build:cloud && vite preview --host --config ./config/vite.config.base.ts",
+    "preview:cloud": "VITE_ROLE=cloud npm run build && vite preview --host --config ./config/vite.config.base.ts",
     "type:check": "vue-tsc --noEmit --skipLibCheck",
     "lint-staged": "npx lint-staged",
     "prepare": "husky install",

diff --git a/src/App.vue b/src/App.vue
@@ -24,18 +24,21 @@
   })
 
   const { setRole } = useUserStore()
-  const { isCloud, host, username, password, database, guideModalVisible, codeType } = storeToRefs(useAppStore())
+  const { host, username, password, database, guideModalVisible, codeType } = storeToRefs(useAppStore())
   const { fetchDatabases, updateSettings } = useAppStore()
   const { getTables, getScriptsTable } = useDataBaseStore()
 
   host.value = window.location.origin
 
-  // TODO: is there a better way to do this?
+  const role = import.meta.env.VITE_ROLE || 'admin'
+  setRole(role)
+
+  if (role === 'playground') {
+    updateSettings({ navbar: false })
+  }
+
   if (import.meta.env.MODE === 'development' || import.meta.env.MODE === 'production') {
     // Assuming local greptimeDB is up and running
     fetchDatabases()
-  } else {
-    isCloud.value = true
-    setRole('cloud')
   }
 </script>
diff --git a/src/assets/images/logo-text.png b/src/assets/images/logo-text.png
diff --git a/src/assets/images/logo-text.webp b/src/assets/images/logo-text.webp
diff --git a/src/assets/style/button.less b/src/assets/style/button.less
@@ -2,7 +2,7 @@
   padding: 7px 14px;
   font-size: 14px;
   line-height: 16px;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 .arco-btn-primary[type='button'] {

diff --git a/src/assets/style/dataView.less b/src/assets/style/dataView.less
@@ -72,71 +72,6 @@
   }
 }
 
-.arco-table-border .arco-table-container {
-  border: 1px solid var(--light-border-color) !important;
-  border-radius: 8px;
-}
-
-.arco-table-border.arco-table-empty .arco-table-container {
-  border: 0 !important;
-}
-
-.arco-table {
-  border: 0;
-
-  .arco-table-th-title {
-    height: 22px;
-  }
-
-  .arco-table-tr:last-of-type {
-    .arco-table-td:first-of-type {
-      border-radius: 0 0 0 8px;
-    }
-
-    .arco-table-td:last-of-type {
-      border-radius: 0 0 8px;
-    }
-
-    .arco-table-td:only-of-type {
-      border-radius: 0 0 8px 8px;
-    }
-  }
-
-  .arco-table-cell {
-    padding: 8px 15px;
-  }
-
-  .arco-table-tr .arco-table-th {
-    color: var(--main-font-color);
-    font-weight: 600;
-    font-size: 14px;
-    background: var(--th-bg-color);
-    border-bottom: 1px solid transparent;
-    border-radius: 6px 6px 0 0;
-  }
-
-  .arco-table-td {
-    font-size: 14px;
-    border-top: 1px solid var(--light-border-color);
-    border-bottom: 0;
-  }
-
-  .arco-table-tr-empty .arco-table-td {
-    border: 0;
-  }
-
-  .arco-table-td-content {
-    color: var(--main-font-color);
-    opacity: 0.8;
-  }
-}
-
-.arco-table-hover:not(.arco-table-dragging)
-  .arco-table-tr:not(.arco-table-tr-empty, .arco-table-tr-summary):hover
-  .arco-table-td:not(.arco-table-col-fixed-left, .arco-table-col-fixed-right) {
-  background-color: var(--light-brand-color) !important;
-}
-
 .chart-form {
   align-items: center;
 
@@ -148,6 +83,10 @@
     margin-right: 24px;
     margin-bottom: 0;
   }
+
+  .arco-form-item-label-col {
+    width: 97px;
+  }
 }
 
 .arco-table-pagination {
@@ -158,7 +97,7 @@
     height: 22px;
     margin: 0;
     padding: 0;
-    color: var(--font-color-40);
+    color: var(--third-font-color);
     font-weight: 600;
     font-size: 13px;
     line-height: 22px;
@@ -237,7 +176,7 @@
   font-size: 11px !important;
 }
 
-.arco-table.data-table {
+.arco-table.arco-table-border.data-table {
   .arco-pagination-total {
     color: var(--hover-font-color);
     font-size: 13px;
@@ -255,4 +194,58 @@
       font-size: 13px;
     }
   }
+
+  .arco-table-container {
+    border-color: var(--border-color);
+    border-radius: 4px;
+
+    .arco-table-content {
+      border-bottom: 1px solid var(--border-color);
+      border-radius: 4px;
+    }
+  }
+
+  .arco-table-cell {
+    padding: 8px 15px;
+  }
+
+  .arco-table-th {
+    color: var(--small-font-color);
+    font-weight: 400;
+    line-height: 21px;
+
+    .arco-table-cell {
+      padding: 6px 15px;
+    }
+
+    .arco-table-th-title {
+      display: flex;
+    }
+  }
+
+  .arco-table-td {
+    color: var(--small-font-color);
+    line-height: 17px;
+    border-color: var(--border-color);
+  }
+
+  .arco-table-tr .arco-table-th {
+    background-color: var(--th-bg-color);
+    border-color: var(--border-color);
+    border-bottom: none;
+  }
+
+  tbody .arco-table-tr:last-of-type {
+    border-bottom: 1px solid var(--border-color);
+
+    .arco-table-td {
+      border: none;
+    }
+  }
+}
+
+.arco-table-hover:not(.arco-table-dragging)
+  .arco-table-tr:not(.arco-table-tr-empty, .arco-table-tr-summary):hover
+  .arco-table-td:not(.arco-table-col-fixed-left, .arco-table-col-fixed-right) {
+  background-color: var(--light-brand-color) !important;
 }
diff --git a/src/assets/style/editor.less b/src/assets/style/editor.less
@@ -1,7 +1,7 @@
 .editor-card {
   .ͼo {
     background: var(--main-font-color);
-    font-size: 14px;
+    font-size: 12px;
 
     .cm-gutters {
       color: #fdfcff;

diff --git a/src/assets/style/form.less b/src/assets/style/form.less
@@ -48,7 +48,6 @@
     height: 100%;
     background-color: transparent;
     border: 1px solid var(--border-color);
-    border-radius: 6px;
   }
 
   .arco-input-wrapper:hover {
@@ -92,30 +91,6 @@
   }
 }
 
-.arco-drawer {
-  height: calc(100% - 52px);
-  margin-top: 52px;
-  border-radius: 10px 0 0 10px;
-  box-shadow: 0 4px 10px 0 var(--border-color);
-
-  .arco-drawer-header {
-    height: 58px;
-    padding: 0 20px;
-    border-bottom: 0;
-
-    .arco-drawer-title {
-      display: flex;
-      align-items: center;
-      font-weight: 600;
-      font-size: 18px;
-    }
-  }
-
-  .arco-drawer-body {
-    padding: 8px 20px;
-  }
-}
-
 .drawer-icon {
   width: 20px;
   height: 20px;