feat: timestamp input assistance (#555)

* feat: time assistance input

* style: ui

* style: ui

* Update src/views/dashboard/query/time-assistance.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: delete

* refactor: message

* refactor: remove insert message

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: ZonaHex

.vscode/settings.json

@@ -17,5 +17,9 @@
     "VITE"
   ],
   "vue-i18n.i18nPaths": "src/locale,src/views/dashboard/locale",
-  "i18n-ally.localesPaths": ["src/locale", "src/views/dashboard/locale"]
+  "i18n-ally.localesPaths": [
+    "src/locale",
+    "src/views/dashboard/locale"
+  ],
+  "editor.formatOnSave": true
 }

src/assets/icons.js

@@ -109,3 +109,10 @@
 .arco-btn-size-medium:not(.arco-btn-only-icon) .arco-btn-icon {
   margin-right: 10px;
 }
+
+.arco-radio-group-button {
+  background-color: var(--grey-bg-color);
+  .arco-radio-button.arco-radio-checked {
+    color: var(--brand-color);
+  }
+}

src/assets/style/button.less

@@ -121,27 +121,10 @@
     width: 180px !important;
   }
 
-  .arco-picker {
-    background: var(--grey-bg-color);
-
-    .arco-picker-prefix {
-      display: flex;
-    }
-  }
-
   .arco-picker input {
     width: 150px;
   }
 
-  .arco-picker-focused {
-    background-color: inherit;
-    border-color: var(--hover-brand-color);
-
-    .arco-picker-input-active input {
-      background: inherit;
-    }
-  }
-
   .arco-picker-has-prefix {
     padding-right: 8px;
     padding-left: 8px;
@@ -198,19 +181,6 @@
     background: var(--grey-bg-color);
   }
 
-  .arco-picker-cell-in-range .arco-picker-date {
-    background-color: var(--light-brand-color);
-  }
-
-  .arco-picker-cell-range-start .arco-picker-date-value,
-  .arco-picker-cell-range-end .arco-picker-date-value {
-    background-color: var(--brand-color);
-  }
-
-  .arco-picker-cell-today::after {
-    background-color: var(--brand-color);
-  }
-
   .arco-panel-date-with-view-tabs .arco-panel-date-timepicker .arco-timepicker-cell-inner {
     border-radius: 4px;
   }
@@ -225,3 +195,32 @@
   font-size: 13px;
   color: var(--small-font-color);
 }
+
+.arco-picker {
+  border-radius: 4px;
+  background: var(--grey-bg-color);
+  .arco-picker-prefix {
+    display: flex;
+  }
+}
+
+.arco-picker-focused,
+.arco-picker-focused:hover {
+  background-color: inherit;
+  border-color: var(--hover-brand-color);
+
+  .arco-picker-input-active input {
+    background: inherit;
+  }
+}
+
+.arco-picker-cell-in-range .arco-picker-date {
+  background-color: var(--light-brand-color);
+}
+
+.arco-picker-cell-range-start .arco-picker-date-value,
+.arco-picker-cell-range-end .arco-picker-date-value,
+.arco-picker-cell-selected .arco-picker-date-value,
+.arco-picker-cell-today::after {
+  background-color: var(--brand-color);
+}

src/assets/style/form.less

@@ -471,7 +471,7 @@ samp {
 .arco-icon {
   stroke-linecap: round;
   stroke-linejoin: round;
-  stroke-width: 3px;
+  stroke-width: 3.5;
 }
 
 #app {

src/assets/style/global.less

@@ -85,7 +85,6 @@
 .arco-select-view-clear-btn svg,
 .arco-select-view-icon svg {
   font-size: 9px;
-  stroke-width: 6px;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

src/assets/style/select.less

@@ -81,4 +81,5 @@ export default {
   'dashboard.hideSidebar': 'Hide sidebar',
   'dashboard.rerunQuery': 'Rerun Query',
   'dashboard.clearResults': 'Clear results?',
+  'dashboard.timeAssistance': 'Time Input Assistance',
 }

src/locale/en-US/dashboard.ts

@@ -81,4 +81,5 @@ export default {
   'dashboard.hideSidebar': '隐藏侧边栏',
   'dashboard.rerunQuery': '重新执行查询',
   'dashboard.clearResults': '清除结果？',
+  'dashboard.timeAssistance': 'Time Assistance',
 }

src/locale/zh-CN/dashboard.ts

@@ -102,9 +102,6 @@ a-modal.query-modal(
           justify-content: center;
           border-radius: 4px;
           margin-left: 3px;
-          svg {
-            stroke-width: 3px;
-          }
         }
         .arco-modal-close-btn:hover {
           background: var(--th-bg-color);

src/views/dashboard/modules/query-modal/index.vue

@@ -8,12 +8,13 @@ a-card.editor-card(:bordered="false")
         :disabled="isButtonDisabled || explainQueryRunning"
         @click="runPartQuery()"
       )
-        a-popover(position="bl" content-class="code-tooltip" :content="currentStatement")
-          a-space(:size="4")
-            icon-loading(v-if="secondaryCodeRunning" spin)
-            icon-play-arrow(v-else)
-            div {{ $t('dashboard.runQuery') + (queryType === 'sql' && currentQueryNumber ? ' #' + currentQueryNumber : '') }}
-            icon-close-circle-fill.icon-16(v-if="secondaryCodeRunning") 
+        a-tooltip(position="left" content="Ctrl + Enter")
+          a-popover(position="bl" content-class="code-tooltip" :content="currentStatement")
+            a-space(:size="4")
+              icon-loading(v-if="secondaryCodeRunning" spin)
+              icon-play-arrow(v-else)
+              div {{ $t('dashboard.runQuery') + (queryType === 'sql' && currentQueryNumber ? ' #' + currentQueryNumber : '') }}
+              icon-close-circle-fill.icon-16(v-if="secondaryCodeRunning") 
         template(#icon)
           icon-down
         template(#content)
@@ -47,17 +48,24 @@ a-card.editor-card(:bordered="false")
             template(#icon)
               icon-import
             | {{ $t('dashboard.importExplain') }}
-      a-button(
+      a-tooltip(
         v-if="queryType === 'sql'"
-        type="outline"
-        :disabled="isButtonDisabled"
-        @click="runQueryAll()"
+        position="br"
+        content="Alt + Enter"
+        mini
       )
-        a-space(:size="4")
-          icon-loading(v-if="primaryCodeRunning" spin)
-          icon-play-arrow(v-else)
-          | {{ $t('dashboard.runAll') }}
-          icon-close-circle-fill.icon-16(v-if="primaryCodeRunning")
+        a-button(type="outline" :disabled="isButtonDisabled" @click="runQueryAll()")
+          a-space(:size="4")
+            icon-loading(v-if="primaryCodeRunning" spin)
+            icon-play-arrow(v-else)
+            | {{ $t('dashboard.runAll') }}
+            icon-close-circle-fill.icon-16(v-if="primaryCodeRunning")
+      a-tooltip(mini position="right" :content="$t('dashboard.timeAssistance')")
+        a-button(type="secondary" @click="openTimeAssistance")
+          template(#icon)
+            svg.icon-18
+              use(href="#time-index")
+      TimeAssistance(ref="tsRef" :cm="currentView")
     .query-select
       a-space(size="medium")
         a-tooltip(v-if="queryType === 'sql'" mini :content="$t('dashboard.format')")
@@ -154,7 +162,7 @@ a-card.editor-card(:bordered="false")
   import { acceptCompletion } from '@codemirror/autocomplete'
   import type { PromForm } from '@/store/modules/code-run/types'
   import { useStorage } from '@vueuse/core'
-  import { sqlFormatter, parseSqlStatements, findStatementAtPosition, debounce } from '@/utils/sql'
+  import { sqlFormatter, parseSqlStatements, findStatementAtPosition } from '@/utils/sql'
   import { Message } from '@arco-design/web-vue'
   import fileDownload from 'js-file-download'
 
@@ -173,6 +181,8 @@ a-card.editor-card(:bordered="false")
     tabSize: 2,
   })
 
+  const tsRef = ref<InstanceType<typeof import('./time-assistance.vue').default> | null>(null)
+
   const {
     codes,
     queryType,
@@ -185,9 +195,12 @@ a-card.editor-card(:bordered="false")
     clearCode,
   } = useQueryCode()
 
+  // Get current active CodeMirror view based on query type
+  const currentView = computed(() => {
+    return queryType.value === 'sql' ? sqlView.value : promqlView.value
+  })
+
   const currentSqlPreview = ref('')
-  const triggerVisible = ref(false)
-  const rangePickerVisible = ref(false)
   const promForm = reactive<PromForm>({
     time: 5,
     step: '30s',
@@ -206,6 +219,11 @@ a-card.editor-card(:bordered="false")
 
   const emit = defineEmits(['selectExplainTab'])
 
+  const openTimeAssistance = () => {
+    if (tsRef.value) {
+      tsRef.value?.open()
+    }
+  }
   // Show the import explain modal
   const showImportExplainModal = () => {
     importExplainModalVisible.value = true
@@ -417,28 +435,36 @@ a-card.editor-card(:bordered="false")
     label: `Last ${value} minutes`,
   }))
 
-  // TODO: fix this
-  const defaultKeymap = [
+  const myKeymap = keymap.of([
     {
-      key: 'alt-Enter',
+      key: `Ctrl-Enter`,
+      run: () => {
+        runPartQuery()
+        return true
+      },
+    },
+    {
+      key: 'Alt-Enter', // Run All
       run: () => {
         runQueryAll()
+        return true
       },
     },
     {
-      key: 'ctrl-Enter',
+      key: 'Ctrl-Shift-;', // Time Assistant（Cmd/Ctrl+Shift+;）
       run: () => {
-        runPartQuery()
+        openTimeAssistance()
+        return true
       },
     },
     {
       key: 'Tab',
       run: acceptCompletion,
     },
-  ]
+  ])
 
-  const extensionsForSql = [...extensions.value.sql, keymap.of(defaultKeymap as any)]
-  const extensionsForPromql = [...extensions.value.promql, keymap.of(defaultKeymap as any)]
+  const extensionsForSql = [myKeymap, ...extensions.value.sql]
+  const extensionsForPromql = [myKeymap, ...extensions.value.promql]
   const placeholder = `Paste response from explain analyze format json here. Example format:
   {
     "output": [