feat(query): new editor and UI (#448)

* feat(query): new editor and ui * style: css * refactor: guide and logs
GreptimeTeam · Oct 18, 2024 · 03bf5c3 · 03bf5c3
1 parent 35c4727
commit 03bf5c3
Show file tree

Hide file tree

Showing 24 changed files with 440 additions and 196 deletions.
diff --git a/src/assets/style/dataView.less b/src/assets/style/dataView.less
@@ -253,8 +253,7 @@
   }
 }
 
-.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;
+.arco-table-size-small .arco-table-cell {
+  font-size: 13px;
+  padding: 11px 10px;
 }
diff --git a/src/assets/style/global.less b/src/assets/style/global.less
@@ -66,13 +66,16 @@ body {
   background-color: var(--main-bg-color);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  --navbar-width: 160px;
+  --navbar-width-collapsed: 80px;
   --tables-header-height: 58px;
   --tables-layout-padding: 16px;
   --footer-height: 30px;
   --tables-list-height: calc(
     100vh - var(--tables-header-height) - var(--footer-height) - var(--tables-layout-padding) -
       var(--tables-layout-padding)
   );
+  --layout-header-height: 48px;
 }
 
 .arco-overlay-message {

diff --git a/src/assets/style/new.less b/src/assets/style/new.less
@@ -8,13 +8,24 @@
     box-shadow: none;
     min-width: 210px;
     max-width: 40vw;
+
     &.hide-sider {
       display: none;
     }
   }
 
   > .layout-content {
     height: 100%;
+
+    > .arco-layout-header {
+      height: var(--layout-header-height);
+      display: flex;
+      padding: 0 16px;
+    }
+
+    > .arco-layout-content {
+      height: calc(100% - var(--layout-header-height));
+    }
   }
 
   .arco-layout-footer {
@@ -28,10 +39,12 @@
       padding: 0;
     }
   }
+
   .main-content {
     height: calc(100% - 58px);
     padding-right: 20px;
   }
+
   .layout-space {
     height: 100%;
 
@@ -42,61 +55,54 @@
     }
   }
 
-  .arco-tabs.panel-tabs {
+  .arco-tabs.arco-tabs-type-line.panel-tabs {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--main-bg-color);
-
-    .arco-tabs-content-list {
-      height: 100%;
-    }
-
-    .arco-tabs-content .arco-tabs-content-item {
-      height: 100%;
-      // TODO: better scrollbar style
-      max-height: calc(40vh - 32px);
-      overflow: auto;
-    }
-
-    .arco-tabs-tab {
-      border-radius: 0;
-      // border-top: none;
-      height: 100%;
-      margin: 0;
-      padding: 0 15px;
-    }
 
-    .arco-tabs-content {
-      padding: 0;
-    }
-
-    .arco-tabs-nav-ink {
-      background: var(--brand-color);
-    }
-
-    .arco-tabs-nav {
+    > .arco-tabs-nav {
       height: 28px;
-      background: var(--main-bg-color);
 
       &:before {
         background-color: var(--border-color);
       }
-    }
 
-    .arco-tabs-nav-tab {
-      height: 100%;
+      .arco-tabs-nav-tab {
+        height: 100%;
+
+        .arco-tabs-tab {
+          border-radius: 0;
+          font-size: 13px;
+          height: 100%;
+          margin: 0;
+          padding: 0 12px;
+
+          &.arco-tabs-tab-active {
+            color: var(--main-font-color);
+            font-weight: 600;
+          }
+        }
+      }
+      .arco-tabs-nav-ink {
+        background: var(--brand-color);
+      }
     }
 
-    .arco-tabs-tab-active {
-      color: var(--main-font-color);
-      font-weight: 600;
-    }
+    .arco-tabs-content {
+      height: calc(100% - 28px);
 
-    :deep(> .arco-tabs-content) {
-      height: calc(100% - 30px);
-      // TODO: better scrollbar style
-      overflow: auto;
+      padding: 0;
+
+      > .arco-tabs-content-list {
+        height: 100%;
+        > .arco-tabs-content-item {
+          height: 100%;
+          overflow: auto;
+          > .arco-tabs-pane {
+            height: 100%;
+          }
+        }
+      }
     }
   }
 

diff --git a/src/components/navbar/index.vue b/src/components/navbar/index.vue
@@ -5,9 +5,6 @@ a-layout.navbar
       use(href="#logo")
   a-layout-content
     .new-query
-      a-tooltip(position="right" :content="$t('menu.newQuery')")
-        a-button#new-query(type="primary" @click="openQuery")
-          span +
     .menu
       a-menu(mode="vertical" collapsed :selected-keys="[menuSelectedKey]")
         a-menu-item(
@@ -47,8 +44,8 @@ a-layout.navbar
 
   const router = useRouter()
   const { updateSettings } = useAppStore()
-  const { menuSelectedKey, globalSettings, queryModalVisible } = storeToRefs(useAppStore())
-  const { activeTab } = storeToRefs(useIngestStore())
+  const { menuSelectedKey, globalSettings, isFullScreen } = storeToRefs(useAppStore())
+  const { activeTab: ingestTab } = storeToRefs(useIngestStore())
   const { menuTree } = useMenuTree()
 
   const menu = menuTree.value[0].children
@@ -77,13 +74,16 @@ a-layout.navbar
   }
 
   const menuClick = (key: string) => {
-    if (key !== menuSelectedKey.value) {
-      updateSettings({ queryModalVisible: false })
-    }
-    if (key === 'ingest') {
-      router.push({ name: activeTab.value || (menu[1].children[0].name as string) })
-    } else {
-      router.push({ name: key })
+    // if (key === menuSelectedKey.value) {
+    //   isFullScreen.value = !isFullScreen.value
+    // }
+    switch (key) {
+      case 'ingest':
+        router.push({ name: ingestTab.value || 'ingest' })
+        break
+      default:
+        router.push({ name: key })
+        break
     }
   }
 
@@ -95,13 +95,9 @@ a-layout.navbar
   listenerRouteChange((newRoute) => {
     menuSelectedKey.value = newRoute.matched[1].name as string
     if (newRoute.matched[1].name === 'ingest') {
-      activeTab.value = newRoute.matched[3].name as string
+      ingestTab.value = newRoute.matched[3].name as string
     }
   }, true)
-
-  const openQuery = () => {
-    updateSettings({ queryModalVisible: !queryModalVisible.value })
-  }
 </script>
 
 <style scoped lang="less">

diff --git a/src/components/short-cut/index.vue b/src/components/short-cut/index.vue
@@ -32,7 +32,6 @@ a-tooltip(:content="codeInfo.code")
 
   const clickShortCut = (info: string, cursorPosition: number) => {
     inputFromNewLineToQueryCode(info, cursorPosition)
-    updateSettings({ queryModalVisible: true })
   }
 
   const formatter = (code: string) => {

diff --git a/src/config/settings.json b/src/config/settings.json
@@ -22,6 +22,6 @@
   "guideModalVisible": false,
   "lifetime": "long",
   "menuSelectedKey": "tables",
-  "queryModalVisible": false,
-  "userTimezone": ""
+  "userTimezone": "",
+  "isFullScreen": false
 }
diff --git a/src/layout/default-layout.vue b/src/layout/default-layout.vue
@@ -6,7 +6,6 @@ a-layout
     a-layout-content.layout-content
       PageLayout
   Footer(v-if="footer")
-QueryModal
 </template>
 
 <script lang="ts" setup>
@@ -59,6 +58,7 @@ QueryModal
   }
 
   .layout-content {
+    width: calc(100vw - var(--navbar-width-collapsed));
     overflow-y: hidden;
     transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   }

diff --git a/src/locale/en-US/menu.ts b/src/locale/en-US/menu.ts
@@ -22,7 +22,8 @@ export default {
   'menu.user': 'User Center',
   'menu.visualization': 'Data Visualization',
   'menu.newQuery': 'New Query',
-  'menu.tour.newQuery': 'Place SQL and PromQL query in our query editor.',
+  'menu.tour.query':
+    'Check full list of tables and their metadata of your instance. Place SQL and PromQL query in our query editor.',
   'menu.tour.tables': 'Full list of tables and their metadata of your instance.',
   'menu.tour.ingest': 'Ingest time-series data from the Ingest UI.',
   'menu.tour.workbench': 'Build advanced dashboard using UI builder and YAML based configuration, all managed by git.',

diff --git a/src/locale/zh-CN/menu.ts b/src/locale/zh-CN/menu.ts
@@ -22,8 +22,7 @@ export default {
   'menu.user': '个人中心',
   'menu.faq': '常见问题',
   'menu.newQuery': '新查询',
-  'menu.tour.newQuery': '在查询编辑器中放置 SQL 和 PromQL 查询。',
-  'menu.tour.tables': '您实例的所有表及其元数据的完整列表。',
+  'menu.tour.query': '查看实例的完整表列表及其元数据。将 SQL 和 PromQL 查询放入我们的查询编辑器。',
   'menu.tour.ingest': '从 Ingest UI 中摄取时间序列数据。',
   'menu.tour.workbench': '使用 UI 构建器和基于 YAML 的配置构建高级仪表板，所有这些都由 git 管理。',
 }
diff --git a/src/router/routes/modules/dashboard.ts b/src/router/routes/modules/dashboard.ts
@@ -6,7 +6,7 @@ const DASHBOARD: AppRouteRecordRaw = {
   path: '/dashboard',
   name: 'dashboard',
 
-  redirect: '/dashboard/tables',
+  redirect: '/dashboard/query',
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.dashboard',
@@ -15,15 +15,28 @@ const DASHBOARD: AppRouteRecordRaw = {
     order: 0,
   },
   children: [
+    {
+      path: 'query',
+      name: 'query',
+      component: () => import('@/views/dashboard/query/index.vue'),
+      meta: {
+        locale: 'menu.dashboard.query',
+        requiresAuth: false,
+        icon: 'query-menu',
+        roles: ['admin', 'cloud'],
+      },
+    },
     {
       path: 'tables',
       name: 'tables',
+      redirect: '/dashboard/query',
       component: () => import('@/views/dashboard/query/index.vue'),
       meta: {
         locale: 'menu.dashboard.tables',
         requiresAuth: false,
         icon: 'query-menu',
         roles: ['admin', 'cloud'],
+        hideInMenu: true,
       },
     },
     {

diff --git a/src/store/modules/app/types.ts b/src/store/modules/app/types.ts
@@ -24,7 +24,7 @@ export interface AppState {
   dbId: string
   lifetime: string
   menuSelectedKey: string
-  queryModalVisible: boolean
   userTimezone: string
+  isFullScreen: boolean
   [key: string]: unknown
 }
diff --git a/src/store/modules/code-run/index.ts b/src/store/modules/code-run/index.ts
@@ -7,6 +7,7 @@ import dayjs from 'dayjs'
 import { dateTypes } from '@/views/dashboard/config'
 import { AnyObject } from '@/types/global'
 import { HttpResponse, OutputType } from '@/api/interceptor'
+import { isObject } from '@/utils/is'
 import { ResultType, DimensionType, SchemaType, PromForm } from './types'
 import { Log, ResultInLog } from '../log/types'
 
@@ -108,6 +109,7 @@ const useCodeRunStore = defineStore('codeRun', () => {
         ...res,
         codeInfo,
         message,
+        codeTooltip: codeInfo,
       }
       if (type === 'promql') {
         let start
@@ -139,7 +141,7 @@ const useCodeRunStore = defineStore('codeRun', () => {
         codeInfo,
         ...error,
       }
-      if (Reflect.has(error, 'error')) {
+      if (isObject(error) && Reflect.has(error, 'error')) {
         return {
           log,
           error: 'error',
@@ -158,7 +160,7 @@ const useCodeRunStore = defineStore('codeRun', () => {
         ...res,
       }
     } catch (error: any) {
-      if (Reflect.has(error, 'error')) {
+      if (isObject(error) && Reflect.has(error, 'error')) {
         throw new Error(JSON.stringify(error))
       } else {
         throw new Error('error')

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -46,9 +46,9 @@ export const dateFormatter = (dataType: string, value: number | null) => {
   switch (dataType) {
     case 'Date':
       return value && dayjs(0).add(value, 'day').format('YYYY-MM-DD HH:mm:ss')
-    case 'DateTime':
     case 'TimestampSecond':
       return value && dayjs.unix(value).format('YYYY-MM-DD HH:mm:ss')
+    case 'DateTime':
     case 'TimestampMillisecond':
       return value && dayjs(value).format('YYYY-MM-DD HH:mm:ss')
     case 'TimestampMicrosecond':

diff --git a/src/views/dashboard/config.ts b/src/views/dashboard/config.ts
@@ -96,17 +96,10 @@ export const SEMANTIC_TYPE_MAP: { [key: string]: string } = {
 
 export const navbarSteps: DriveStep[] = [
   {
-    element: '#new-query',
+    element: '#menu-query',
     popover: {
-      title: i18n.global.t('menu.newQuery'),
-      description: i18n.global.t('menu.tour.newQuery'),
-    },
-  },
-  {
-    element: '#menu-tables',
-    popover: {
-      title: i18n.global.t('menu.dashboard.tables'),
-      description: i18n.global.t('menu.tour.tables'),
+      title: i18n.global.t('menu.dashboard.query'),
+      description: i18n.global.t('menu.tour.query'),
     },
   },
   {