diff --git a/api/package.json b/api/package.json
index 3aa9a1c1d..3219afbd2 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "13.43.13",
+  "version": "13.44.0",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/api/src/api_models/dashboard_content.ts b/api/src/api_models/dashboard_content.ts
index ff7db60fb..421a90e7e 100644
--- a/api/src/api_models/dashboard_content.ts
+++ b/api/src/api_models/dashboard_content.ts
@@ -15,12 +15,12 @@ export class Query {
   })
   id: string;
 
-  @IsIn(['postgresql', 'mysql', 'http', 'transform'])
+  @IsIn(['postgresql', 'mysql', 'http', 'transform', 'merico_metric_system'])
   @ApiModelProperty({
     description: 'Datasource type',
     required: true,
   })
-  type: 'postgresql' | 'mysql' | 'http' | 'transform';
+  type: 'postgresql' | 'mysql' | 'http' | 'transform' | 'merico_metric_system';
 
   @IsString()
   @ApiModelProperty({
diff --git a/api/src/api_models/datasource.ts b/api/src/api_models/datasource.ts
index 900077b20..5a2294a66 100644
--- a/api/src/api_models/datasource.ts
+++ b/api/src/api_models/datasource.ts
@@ -91,7 +91,7 @@ export class DataSource {
   @ApiModelProperty({
     description: 'type of the datasource',
     required: true,
-    enum: ['postgresql', 'mysql', 'http', 'transform'],
+    enum: ['postgresql', 'mysql', 'http', 'transform', 'merico_metric_system'],
   })
   type: string;
 
@@ -232,13 +232,13 @@ export class DataSourcePaginationResponse implements PaginationResponse<DataSour
 })
 export class DataSourceCreateRequest {
   @IsString()
-  @IsIn(['postgresql', 'mysql', 'http', 'transform'])
+  @IsIn(['postgresql', 'mysql', 'http', 'transform', 'merico_metric_system'])
   @ApiModelProperty({
     description: 'type of the datasource',
     required: true,
-    enum: ['postgresql', 'mysql', 'http', 'transform'],
+    enum: ['postgresql', 'mysql', 'http', 'transform', 'merico_metric_system'],
   })
-  type: 'postgresql' | 'mysql' | 'http' | 'transform';
+  type: 'postgresql' | 'mysql' | 'http' | 'transform' | 'merico_metric_system';
 
   @IsString()
   @Length(1, 250)
diff --git a/api/src/controller/datasource.controller.ts b/api/src/controller/datasource.controller.ts
index 2650c4b10..381206f05 100644
--- a/api/src/controller/datasource.controller.ts
+++ b/api/src/controller/datasource.controller.ts
@@ -178,7 +178,7 @@ export class DataSourceController implements interfaces.Controller {
   }
 
   private validateConfig(
-    type: 'mysql' | 'postgresql' | 'http' | 'transform',
+    type: 'mysql' | 'postgresql' | 'http' | 'transform' | 'merico_metric_system',
     config: DataSourceConfig,
     locale: string,
   ): void {
diff --git a/api/src/services/datasource.service.ts b/api/src/services/datasource.service.ts
index 0a5d49a48..5b7371dd8 100644
--- a/api/src/services/datasource.service.ts
+++ b/api/src/services/datasource.service.ts
@@ -72,12 +72,12 @@ export class DataSourceService {
   }
 
   async create(
-    type: 'mysql' | 'postgresql' | 'http' | 'transform',
+    type: 'mysql' | 'postgresql' | 'http' | 'transform' | 'merico_metric_system',
     key: string,
     config: DataSourceConfig,
     locale: string,
   ): Promise<DataSource> {
-    if (type !== 'http' && type !== 'transform') {
+    if (type === 'mysql' || type === 'postgresql') {
       await this.testDatabaseConfiguration(type, config, locale);
     }
     maybeEncryptPassword(config);
diff --git a/api/tests/unit/validation.test.ts b/api/tests/unit/validation.test.ts
index 91283447c..d4e7e1f22 100644
--- a/api/tests/unit/validation.test.ts
+++ b/api/tests/unit/validation.test.ts
@@ -1520,7 +1520,7 @@ describe('DataSourceCreateRequest', () => {
           property: 'type',
           children: [],
           constraints: {
-            isIn: 'type must be one of the following values: postgresql, mysql, http, transform',
+            isIn: 'type must be one of the following values: postgresql, mysql, http, transform, merico_metric_system',
             isString: 'type must be a string',
           },
         },
diff --git a/dashboard/package.json b/dashboard/package.json
index a7168b146..eb0595fab 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "13.43.13",
+  "version": "13.44.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/dashboard/src/api-caller/request.ts b/dashboard/src/api-caller/request.ts
index a55040684..7d4a1e0ce 100644
--- a/dashboard/src/api-caller/request.ts
+++ b/dashboard/src/api-caller/request.ts
@@ -20,7 +20,7 @@ export type TQueryPayload = {
 
 export type TQueryStructureRequest = {
   query_type: 'TABLES' | 'COLUMNS' | 'DATA' | 'INDEXES' | 'COUNT';
-  type: DataSourceType.Postgresql | DataSourceType.MySQL;
+  type: DataSourceType.Postgresql | DataSourceType.MySQL | DataSourceType.MericoMetricSystem;
   key: string; // datasource key
   table_schema: string;
   table_name: string;
diff --git a/dashboard/src/components/widgets/inline-function-input/index.tsx b/dashboard/src/components/widgets/inline-function-input/index.tsx
index 68b2e0df3..f3ab623c1 100644
--- a/dashboard/src/components/widgets/inline-function-input/index.tsx
+++ b/dashboard/src/components/widgets/inline-function-input/index.tsx
@@ -7,16 +7,16 @@ import { useTranslation } from 'react-i18next';
 import { OnMount } from '@monaco-editor/react';
 // @ts-expect-error type of this lib
 import { constrainedEditor } from 'constrained-editor-plugin/dist/esm/constrainedEditor.js';
-interface IInlineFunctionInput {
+type Props = {
   value: TFunctionString;
   onChange: (v: TFunctionString) => void;
   defaultValue: TFunctionString;
   label: string;
   restrictions?: MonacoEditorRestriction[];
-}
+};
 
-export const InlineFunctionInput = forwardRef(
-  ({ value, onChange, label, defaultValue, restrictions = [] }: IInlineFunctionInput, _ref: any) => {
+export const InlineFunctionInput = forwardRef<HTMLElement, Props>(
+  ({ value, onChange, label, defaultValue, restrictions = [] }, _ref) => {
     const { t } = useTranslation();
     const [localValue, setLocalValue] = useState<string>(value);
 
diff --git a/dashboard/src/dashboard-editor/model/dashboard.ts b/dashboard/src/dashboard-editor/model/dashboard.ts
index c0af6ad8d..133783f5e 100644
--- a/dashboard/src/dashboard-editor/model/dashboard.ts
+++ b/dashboard/src/dashboard-editor/model/dashboard.ts
@@ -30,6 +30,20 @@ export const DashboardModel = types
         content_id: self.content_id,
       };
     },
+    get queryVariables() {
+      const ret: Record<string, any> = {
+        context: {
+          ...self.content.mock_context.current,
+          ...self.context.current,
+        },
+        filters: self.content.filters.previewValues,
+      };
+
+      return ret;
+    },
+    get queryVariablesString() {
+      return JSON.stringify(this.queryVariables, null, 2);
+    },
   }))
   .actions((self) => ({
     updateCurrentContent(content: DashboardContentDBType) {
diff --git a/dashboard/src/dashboard-editor/model/datasources/tables.ts b/dashboard/src/dashboard-editor/model/datasources/tables.ts
index 02155779b..9fa7e15df 100644
--- a/dashboard/src/dashboard-editor/model/datasources/tables.ts
+++ b/dashboard/src/dashboard-editor/model/datasources/tables.ts
@@ -1,5 +1,4 @@
-import { getParent, types } from 'mobx-state-tree';
-import { DataSourceType } from '~/model';
+import { types } from 'mobx-state-tree';
 
 export type TableInfoType = {
   table_schema: string;
diff --git a/dashboard/src/dashboard-editor/model/filters/index.ts b/dashboard/src/dashboard-editor/model/filters/index.ts
index 8eb17a130..0e1317af6 100644
--- a/dashboard/src/dashboard-editor/model/filters/index.ts
+++ b/dashboard/src/dashboard-editor/model/filters/index.ts
@@ -72,6 +72,7 @@ export const FiltersModel = types
       return self.current.map((f) => ({
         label: f.label ?? f.key,
         value: f.key,
+        widget: f.type,
       }));
     },
     get sortedList() {
diff --git a/dashboard/src/dashboard-editor/model/queries/query.ts b/dashboard/src/dashboard-editor/model/queries/query.ts
index 066a17fbe..0aaff667c 100644
--- a/dashboard/src/dashboard-editor/model/queries/query.ts
+++ b/dashboard/src/dashboard-editor/model/queries/query.ts
@@ -1,5 +1,5 @@
 import { Instance, SnapshotIn } from 'mobx-state-tree';
-import { QueryRenderModel } from '~/model';
+import { QueryRenderModel, QueryUsageType } from '~/model';
 
 export const QueryModel = QueryRenderModel.views((self) => ({
   get canPreviewData() {
@@ -14,6 +14,24 @@ export const QueryModel = QueryRenderModel.views((self) => ({
     }
     return 'Need to pick a Data Source first';
   },
+  get usage() {
+    return self.contentModel.findQueryUsage(self.id) as QueryUsageType[];
+  },
+  get runBySet() {
+    return new Set(...self.run_by);
+  },
+  keyInRunBy(key: string) {
+    return this.runBySet.has(key);
+  },
+})).actions((self) => ({
+  changeRunByRecord(key: string, checked: boolean) {
+    const set = new Set(self.run_by);
+    if (!checked) {
+      set.delete(key);
+    } else {
+      set.add(key);
+    }
+  },
 }));
 
 export type QueryModelInstance = Instance<typeof QueryModel>;
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/data-preview/query-state-message.tsx b/dashboard/src/dashboard-editor/ui/settings/content/data-preview/query-state-message.tsx
index 5f58a7546..a28e17d24 100644
--- a/dashboard/src/dashboard-editor/ui/settings/content/data-preview/query-state-message.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/content/data-preview/query-state-message.tsx
@@ -1,11 +1,12 @@
 import { Text } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useRenderContentModelContext } from '~/contexts';
 
 interface IQueryStateMessage {
   queryID: string;
 }
-export const QueryStateMessage = ({ queryID }: IQueryStateMessage) => {
+export const QueryStateMessage = observer(({ queryID }: IQueryStateMessage) => {
   const model = useRenderContentModelContext();
   const { state, error } = model.getDataStuffByID(queryID);
   const query = React.useMemo(() => model.queries.findByID(queryID), [model, queryID]);
@@ -28,4 +29,4 @@ export const QueryStateMessage = ({ queryID }: IQueryStateMessage) => {
   }
 
   return null;
-};
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/db-explorer-modal/index.tsx b/dashboard/src/dashboard-editor/ui/settings/content/db-explorer-modal/index.tsx
index 9c0712212..90880ae78 100644
--- a/dashboard/src/dashboard-editor/ui/settings/content/db-explorer-modal/index.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/content/db-explorer-modal/index.tsx
@@ -24,7 +24,8 @@ export const DBExplorerModal = observer(({ dataSource, triggerButtonProps = {} }
   const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
 
-  if (dataSource.type === 'http') {
+  const { type } = dataSource;
+  if (type === 'http' || type === 'merico_metric_system') {
     return null;
   }
   return (
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/index.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/index.tsx
index 66717de07..cdefd1ca9 100644
--- a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/index.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/index.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { useEditContentModelContext } from '~/contexts';
 import { QueryEditorForm } from './query-editor-form';
 import { QueryModelInstance } from '~/dashboard-editor/model/queries';
+import { MericoMetricQueryEditorForm } from './merico-metric-query-editor-form';
 
 export const EditQuery = observer(({ id }: { id: string }) => {
   const content = useEditContentModelContext();
@@ -20,5 +21,8 @@ export const EditQuery = observer(({ id }: { id: string }) => {
     );
   }
 
+  if (query.isMericoMetricQuery) {
+    return <MericoMetricQueryEditorForm queryModel={query} />;
+  }
   return <QueryEditorForm queryModel={query} />;
 });
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/index.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/index.tsx
new file mode 100644
index 000000000..316f9ce12
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/index.tsx
@@ -0,0 +1,73 @@
+import { Group, Stack, TextInput } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { SelectDataSource } from '../query-editor-form/select-data-source';
+import { MoreActions } from './more-actions';
+import { PreviewData } from './preview-data';
+import { QueryTabs } from './query-tabs';
+import { QueryVariablesPreview } from './query-variables-preview';
+import { RunQuery } from './run-query';
+import { SelectMetric } from './select-metric';
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const MericoMetricQueryEditorForm = observer(({ queryModel }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack
+      pt={8}
+      pb={16}
+      px={24}
+      gap={8}
+      styles={{
+        root: {
+          height: '100vh',
+          overflow: 'hidden',
+        },
+      }}
+    >
+      <Group styles={{ root: { flexGrow: 0, flexShrink: 0 } }}>
+        <TextInput
+          size="xs"
+          placeholder={t('query.name_description')}
+          label={t('query.name')}
+          value={queryModel.name}
+          onChange={(e) => {
+            queryModel.setName(e.currentTarget.value);
+          }}
+          styles={{
+            root: {
+              flexGrow: 0,
+              width: 'calc(50% - 44px)',
+            },
+          }}
+        />
+      </Group>
+      <Group justify="space-between" grow gap={8} align="flex-end" styles={{ root: { flexGrow: 0, flexShrink: 0 } }}>
+        <Group justify="flex-start" grow gap={24} align="flex-end">
+          <SelectDataSource queryModel={queryModel} size="xs" />
+          <SelectMetric queryModel={queryModel} />
+        </Group>
+        <Group justify="flex-end">
+          <RunQuery queryModel={queryModel} />
+          <MoreActions queryModel={queryModel} />
+        </Group>
+      </Group>
+
+      <Group
+        justify="space-between"
+        grow
+        gap={12}
+        align="flex-start"
+        sx={{ flexGrow: 0, flexShrink: 1, overflowY: 'hidden' }}
+      >
+        <QueryTabs queryModel={queryModel} />
+        <QueryVariablesPreview />
+      </Group>
+      <PreviewData queryModel={queryModel} />
+    </Stack>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/copy.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/copy.tsx
new file mode 100644
index 000000000..d89638f60
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/copy.tsx
@@ -0,0 +1,25 @@
+import { MericoIconProps } from './types';
+
+export const MericoIconCopy = ({ width, height }: MericoIconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" width={width} height={height}>
+    <g clipPath="url(#clip0_421_7552)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.33331 6.66634C6.96512 6.66634 6.66665 6.96482 6.66665 7.33301V13.333C6.66665 13.7012 6.96512 13.9997 7.33331 13.9997H13.3333C13.7015 13.9997 14 13.7012 14 13.333V7.33301C14 6.96482 13.7015 6.66634 13.3333 6.66634H7.33331ZM5.33331 7.33301C5.33331 6.22844 6.22874 5.33301 7.33331 5.33301H13.3333C14.4379 5.33301 15.3333 6.22844 15.3333 7.33301V13.333C15.3333 14.4376 14.4379 15.333 13.3333 15.333H7.33331C6.22874 15.333 5.33331 14.4376 5.33331 13.333V7.33301Z"
+        fill="#3D3E45"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.66669 2.00033C2.48988 2.00033 2.32031 2.07056 2.19528 2.19559C2.07026 2.32061 2.00002 2.49018 2.00002 2.66699V8.66699C2.00002 8.8438 2.07026 9.01337 2.19528 9.1384C2.32031 9.26342 2.48988 9.33366 2.66669 9.33366H3.33335C3.70154 9.33366 4.00002 9.63214 4.00002 10.0003C4.00002 10.3685 3.70154 10.667 3.33335 10.667H2.66669C2.13625 10.667 1.62755 10.4563 1.25247 10.0812C0.877401 9.70613 0.666687 9.19742 0.666687 8.66699V2.66699C0.666687 2.13656 0.877401 1.62785 1.25247 1.25278C1.62755 0.877706 2.13625 0.666992 2.66669 0.666992H8.66669C9.19712 0.666992 9.70583 0.877706 10.0809 1.25278C10.456 1.62785 10.6667 2.13656 10.6667 2.66699V3.33366C10.6667 3.70185 10.3682 4.00033 10 4.00033C9.63183 4.00033 9.33335 3.70185 9.33335 3.33366V2.66699C9.33335 2.49018 9.26312 2.32061 9.13809 2.19559C9.01307 2.07056 8.8435 2.00033 8.66669 2.00033H2.66669Z"
+        fill="#3D3E45"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_421_7552">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/delete.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/delete.tsx
new file mode 100644
index 000000000..391aae5ab
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/delete.tsx
@@ -0,0 +1,20 @@
+import { MericoIconProps } from './types';
+
+export const MericoIconDelete = ({ width, height, color = '#EB1212' }: MericoIconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" width={width} height={height}>
+    <path
+      d="M6.66665 6.66699C7.03484 6.66699 7.33331 6.96547 7.33331 7.33366V11.3337C7.33331 11.7018 7.03484 12.0003 6.66665 12.0003C6.29846 12.0003 5.99998 11.7018 5.99998 11.3337V7.33366C5.99998 6.96547 6.29846 6.66699 6.66665 6.66699Z"
+      fill={color}
+    />
+    <path
+      d="M9.99998 11.3337V7.33366C9.99998 6.96547 9.7015 6.66699 9.33331 6.66699C8.96512 6.66699 8.66665 6.96547 8.66665 7.33366V11.3337C8.66665 11.7018 8.96512 12.0003 9.33331 12.0003C9.7015 12.0003 9.99998 11.7018 9.99998 11.3337Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.66665 3.33366V2.66699C4.66665 2.13656 4.87736 1.62785 5.25243 1.25278C5.62751 0.877706 6.13621 0.666992 6.66665 0.666992H9.33331C9.86375 0.666992 10.3725 0.877706 10.7475 1.25278C11.1226 1.62785 11.3333 2.13656 11.3333 2.66699V3.33366H14C14.3682 3.33366 14.6666 3.63214 14.6666 4.00033C14.6666 4.36852 14.3682 4.66699 14 4.66699H13.3333V13.3337C13.3333 13.8641 13.1226 14.3728 12.7475 14.7479C12.3725 15.1229 11.8637 15.3337 11.3333 15.3337H4.66665C4.13621 15.3337 3.62751 15.1229 3.25243 14.7479C2.87736 14.3728 2.66665 13.8641 2.66665 13.3337V4.66699H1.99998C1.63179 4.66699 1.33331 4.36852 1.33331 4.00033C1.33331 3.63214 1.63179 3.33366 1.99998 3.33366H4.66665ZM6.19524 2.19559C6.32027 2.07056 6.48984 2.00033 6.66665 2.00033H9.33331C9.51012 2.00033 9.67969 2.07056 9.80472 2.19559C9.92974 2.32061 9.99998 2.49018 9.99998 2.66699V3.33366H5.99998V2.66699C5.99998 2.49018 6.07022 2.32061 6.19524 2.19559ZM3.99998 4.66699V13.3337C3.99998 13.5105 4.07022 13.68 4.19524 13.8051C4.32027 13.9301 4.48984 14.0003 4.66665 14.0003H11.3333C11.5101 14.0003 11.6797 13.9301 11.8047 13.8051C11.9297 13.68 12 13.5105 12 13.3337V4.66699H3.99998Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/external-link.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/external-link.tsx
new file mode 100644
index 000000000..5e0d38a76
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/external-link.tsx
@@ -0,0 +1,16 @@
+import { MericoIconProps } from './types';
+
+export const MericoIconExternalLink = ({ width, height }: MericoIconProps) => (
+  <svg width={width} height={height} viewBox="0 0 36 36" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.5 10.5C7.10217 10.5 6.72064 10.658 6.43934 10.9393C6.15804 11.2206 6 11.6022 6 12V28.5C6 28.8978 6.15804 29.2794 6.43934 29.5607C6.72064 29.842 7.10218 30 7.5 30H24C24.3978 30 24.7794 29.842 25.0607 29.5607C25.342 29.2794 25.5 28.8978 25.5 28.5V19.5C25.5 18.6716 26.1716 18 27 18C27.8284 18 28.5 18.6716 28.5 19.5V28.5C28.5 29.6935 28.0259 30.8381 27.182 31.682C26.3381 32.5259 25.1935 33 24 33H7.5C6.30653 33 5.16193 32.5259 4.31802 31.682C3.47411 30.8381 3 29.6935 3 28.5V12C3 10.8065 3.47411 9.66193 4.31802 8.81802C5.16193 7.97411 6.30653 7.5 7.5 7.5H16.5C17.3284 7.5 18 8.17157 18 9C18 9.82843 17.3284 10.5 16.5 10.5H7.5Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M32.8862 3.92582C32.8135 3.75021 32.7061 3.5856 32.5638 3.44253C32.5617 3.4404 32.5596 3.43828 32.5575 3.43616C32.2863 3.16658 31.9126 3 31.5 3H22.5C21.6716 3 21 3.67157 21 4.5C21 5.32843 21.6716 6 22.5 6H27.8787L13.9393 19.9393C13.3536 20.5251 13.3536 21.4749 13.9393 22.0607C14.5251 22.6464 15.4749 22.6464 16.0607 22.0607L30 8.12132V13.5C30 14.3284 30.6716 15 31.5 15C32.3284 15 33 14.3284 33 13.5V4.5C33 4.29662 32.9595 4.10268 32.8862 3.92582Z"
+      fill="#3D3E45"
+    />
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/index.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/index.ts
new file mode 100644
index 000000000..ba97e4439
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/index.ts
@@ -0,0 +1,5 @@
+export * from './external-link';
+export * from './play';
+export * from './copy';
+export * from './delete';
+export * from './more';
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/more.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/more.tsx
new file mode 100644
index 000000000..d08f575b6
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/more.tsx
@@ -0,0 +1,18 @@
+import { MericoIconProps } from './types';
+
+export const MericoIconMore = ({ width, height }: MericoIconProps) => (
+  <svg viewBox="0 0 18 18" fill="none" width={width} height={height}>
+    <path
+      d="M7.5 3.75C7.5 2.92157 8.17157 2.25 9 2.25C9.82843 2.25 10.5 2.92157 10.5 3.75C10.5 4.57843 9.82843 5.25 9 5.25C8.17157 5.25 7.5 4.57843 7.5 3.75Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M7.5 9C7.5 8.17157 8.17157 7.5 9 7.5C9.82843 7.5 10.5 8.17157 10.5 9C10.5 9.82843 9.82843 10.5 9 10.5C8.17157 10.5 7.5 9.82843 7.5 9Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M9 12.75C8.17157 12.75 7.5 13.4216 7.5 14.25C7.5 15.0784 8.17157 15.75 9 15.75C9.82843 15.75 10.5 15.0784 10.5 14.25C10.5 13.4216 9.82843 12.75 9 12.75Z"
+      fill="#3D3E45"
+    />
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/play.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/play.tsx
new file mode 100644
index 000000000..3a6ad5905
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/play.tsx
@@ -0,0 +1,18 @@
+import { MericoIconProps } from './types';
+
+export const MericoIconPlay = ({ width, height }: MericoIconProps) => (
+  <svg viewBox="0 0 36 36" fill="none" width={width} height={height}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M24.6931 20.547C26.1129 19.5516 26.113 17.4483 24.6931 16.4529L16.9351 11.0141C15.2783 9.85255 13 11.0377 13 13.0611L13 23.9389C13 25.9623 15.2783 27.1474 16.9351 25.9859L24.6931 20.547ZM16 14.0223L22.387 18.5L16 22.9777L16 14.0223Z"
+      fill="#FFFFFF"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18 1.5C8.8873 1.5 1.5 8.8873 1.5 18C1.5 27.1127 8.8873 34.5 18 34.5C27.1127 34.5 34.5 27.1127 34.5 18C34.5 8.8873 27.1127 1.5 18 1.5ZM4.5 18C4.5 10.5442 10.5442 4.5 18 4.5C25.4558 4.5 31.5 10.5442 31.5 18C31.5 25.4558 25.4558 31.5 18 31.5C10.5442 31.5 4.5 25.4558 4.5 18Z"
+      fill="#FFFFFF"
+    />
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/types.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/types.ts
new file mode 100644
index 000000000..27336f91e
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/merico-icons/types.ts
@@ -0,0 +1,5 @@
+export type MericoIconProps = {
+  width: number | string;
+  height: number | string;
+  color?: string;
+};
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/more-actions.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/more-actions.tsx
new file mode 100644
index 000000000..0e4adb0f7
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/more-actions.tsx
@@ -0,0 +1,80 @@
+import { ActionIcon, Button, Menu, Tooltip } from '@mantine/core';
+import { useModals } from '@mantine/modals';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+import { useEditContentModelContext, useEditDashboardContext } from '~/contexts';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { MericoIconDelete, MericoIconMore } from './merico-icons';
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+
+const DeleteQuery = observer(({ queryModel }: Props) => {
+  const { t } = useTranslation();
+  const model = useEditDashboardContext();
+  const content = useEditContentModelContext();
+  const usage = content.findQueryUsage(queryModel.id);
+  const disabled = usage.length > 0;
+
+  const modals = useModals();
+  const remove = () => {
+    modals.openConfirmModal({
+      title: `${t('query.delete')}?`,
+      labels: { confirm: t('common.actions.confirm'), cancel: t('common.actions.cancel') },
+      onCancel: () => console.log('Cancel'),
+      onConfirm: () => {
+        content.queries.removeQuery(queryModel.id);
+        model.editor.setPath(['_QUERIES_', '']);
+      },
+      confirmProps: { color: 'red' },
+      zIndex: 320,
+    });
+  };
+
+  if (disabled) {
+    return (
+      <Tooltip
+        label="此查询在使用中，不能删除。请查看“使用情况”标签页以了解详情"
+        withArrow
+        events={{ hover: true, focus: false, touch: false }}
+        withinPortal
+        zIndex={320}
+        position="bottom-end"
+      >
+        <Button
+          leftSection={<MericoIconDelete width={14} height={14} color="gray" />}
+          variant="subtle"
+          color="gray"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          删除查询
+        </Button>
+      </Tooltip>
+    );
+  }
+  return (
+    <Menu.Item leftSection={<MericoIconDelete width={14} height={14} />} color="red" onClick={remove}>
+      删除查询
+    </Menu.Item>
+  );
+});
+
+export const MoreActions = observer(({ queryModel }: Props) => {
+  return (
+    <Menu shadow="md" width={120} trigger="hover">
+      <Menu.Target>
+        <ActionIcon variant="subtle" aria-label="Settings">
+          <MericoIconMore width={18} height={18} />
+        </ActionIcon>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        {/* <Menu.Item leftSection={<MericoIconCopy width={14} height={14} />}>复制API</Menu.Item> */}
+        <DeleteQuery queryModel={queryModel} />
+      </Menu.Dropdown>
+    </Menu>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table-with-pagination.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table-with-pagination.tsx
new file mode 100644
index 000000000..c4e589d5a
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table-with-pagination.tsx
@@ -0,0 +1,26 @@
+import { Box, LoadingOverlay, Stack } from '@mantine/core';
+import { useMemo, useState } from 'react';
+import { ErrorBoundary, errorBoundary } from '~/utils';
+import { DataTable } from './data-table';
+import { PaginationControl } from './pagination-control';
+
+export const DataTableWithPagination = errorBoundary(({ data, loading }: { data: TQueryData; loading: boolean }) => {
+  const [page, setPage] = useState<number>(1);
+  const [limit, setLimit] = useState<number>(20);
+  const tableData = useMemo(() => {
+    const start = (page - 1) * limit;
+    const end = start + limit;
+    return data.slice(start, end);
+  }, [data, page, limit]);
+  return (
+    <ErrorBoundary>
+      <Stack gap={10} styles={{ root: { height: '100%', overflow: 'hidden' } }}>
+        <PaginationControl data={data} page={page} setPage={setPage} limit={limit} setLimit={setLimit} />
+        <Box sx={{ width: '100%', height: 'calc(100% - 42px)', overflow: 'auto', position: 'relative' }}>
+          <LoadingOverlay visible={loading} overlayProps={{ blur: 2 }} />
+          <DataTable data={tableData} />
+        </Box>
+      </Stack>
+    </ErrorBoundary>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table.style.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table.style.ts
new file mode 100644
index 000000000..60e4ca4e2
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table.style.ts
@@ -0,0 +1,44 @@
+import { EmotionSx } from '@mantine/emotion';
+
+export const TableStyle: EmotionSx = {
+  width: 'fit-content',
+  minWidth: '100%',
+  tableLayout: 'fixed',
+
+  tr: {
+    width: 'fit-content',
+  },
+  th: {
+    position: 'relative',
+  },
+  'th, td': {
+    wordBreak: 'break-word',
+  },
+
+  '.resizer': {
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    cursor: 'col-resize',
+    userSelect: 'none',
+    touchAction: 'none',
+  },
+
+  '.resizer.isResizing': {
+    color: '#228be6',
+    opacity: '1',
+    backgroundColor: 'rgb(248, 249, 250)',
+  },
+
+  '@media (hover: hover)': {
+    '.resizer': {
+      opacity: '0',
+    },
+
+    '*:hover > .resizer': {
+      color: '#228be6',
+      opacity: '1',
+    },
+  },
+};
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table.tsx
new file mode 100644
index 000000000..a493b6643
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/data-table.tsx
@@ -0,0 +1,73 @@
+import { ActionIcon, Box, Table } from '@mantine/core';
+import { IconArrowBarToRight } from '@tabler/icons-react';
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useMemo } from 'react';
+import { AnyObject } from '~/types';
+import { ErrorBoundary } from '~/utils';
+import { TableStyle } from './data-table.style';
+
+export function DataTable({ data }: { data: AnyObject[] }) {
+  const columns = useMemo(() => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return [];
+    }
+    const columnHelper = createColumnHelper<AnyObject>();
+    return Object.keys(data[0]).map((k) => {
+      return columnHelper.accessor(k, {
+        cell: (info) => info.getValue(),
+      });
+    });
+  }, [data]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    columnResizeMode: 'onChange',
+    getCoreRowModel: getCoreRowModel(),
+  });
+  if (data.length === 0) {
+    return <Box sx={{ height: '5em' }} />;
+  }
+  return (
+    <ErrorBoundary>
+      <Table sx={TableStyle} stickyHeader stickyHeaderOffset={0}>
+        <Table.Thead style={{ backgroundColor: '#F9F9FA' }}>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Table.Tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <Table.Th key={header.id} style={{ width: header.getSize() }}>
+                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  <ActionIcon
+                    variant="subtle"
+                    onMouseDown={header.getResizeHandler()}
+                    onTouchStart={header.getResizeHandler()}
+                    className={`resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`}
+                  >
+                    <IconArrowBarToRight />
+                  </ActionIcon>
+                </Table.Th>
+              ))}
+            </Table.Tr>
+          ))}
+        </Table.Thead>
+        <Table.Tbody>
+          {table.getRowModel().rows.map((row) => (
+            <Table.Tr key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <Table.Td key={cell.id}>
+                  <ErrorBoundary>
+                    {typeof cell.getValue() === 'object' ? (
+                      <pre>{JSON.stringify(cell.getValue(), null, 2)}</pre>
+                    ) : (
+                      flexRender(cell.column.columnDef.cell, cell.getContext())
+                    )}
+                  </ErrorBoundary>
+                </Table.Td>
+              ))}
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </ErrorBoundary>
+  );
+}
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/index.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/index.ts
new file mode 100644
index 000000000..aad359407
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/index.ts
@@ -0,0 +1 @@
+export * from './preview-data';
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/pagination-control.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/pagination-control.tsx
new file mode 100644
index 000000000..cbafcc6be
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/pagination-control.tsx
@@ -0,0 +1,91 @@
+import { Group, Pagination, Select, Text } from '@mantine/core';
+import { SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const limitOptions = [
+  { label: '10', value: '10' },
+  { label: '20', value: '20' },
+  { label: '50', value: '50' },
+  { label: '100', value: '100' },
+];
+
+const selectorStyles = {
+  root: {
+    width: '150px',
+  },
+  section: {
+    '&[data-position=left]': {
+      width: '70px',
+      textAlign: 'center',
+    },
+  },
+  input: {
+    paddingLeft: '70px',
+    paddingRight: 0,
+  },
+};
+
+type Props = {
+  data: TQueryData;
+  page: number;
+  setPage: React.Dispatch<SetStateAction<number>>;
+  limit: number;
+  setLimit: React.Dispatch<SetStateAction<number>>;
+};
+export const PaginationControl = ({ data, page, setPage, limit, setLimit }: Props) => {
+  const { t } = useTranslation();
+  const total = data.length;
+  const maxPage = Math.ceil(total / limit);
+
+  const changeLimit = (limit: string | null) => {
+    if (!limit) {
+      return;
+    }
+
+    setPage(1);
+    setLimit(Number(limit));
+  };
+
+  if (total === 0) {
+    return null;
+  }
+
+  const hideLimitSelector = maxPage === 1 && total <= 10;
+  return (
+    <Group pt={10} px={10} justify="space-between">
+      <Group justify="flex-start">
+        {!hideLimitSelector && (
+          <Select
+            leftSection={
+              <Text ta="center" c="dimmed" size="xs">
+                {t('common.pagination.page_size')}
+              </Text>
+            }
+            size="xs"
+            // @ts-expect-error type error caused by !important
+            styles={selectorStyles}
+            data={limitOptions}
+            value={String(limit)}
+            onChange={changeLimit}
+          />
+        )}
+        {maxPage > 1 && (
+          <Pagination
+            size="sm"
+            value={page}
+            onChange={setPage}
+            total={maxPage}
+            withEdges={maxPage > 7}
+            styles={{ control: { height: '30px' } }}
+            color="red"
+          />
+        )}
+      </Group>
+      <Group justify="flex-end">
+        <Text c="dimmed" my={0} size={'14px'}>
+          {t('common.pagination.total_rows', { total })}
+        </Text>
+      </Group>
+    </Group>
+  );
+};
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/preview-data.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/preview-data.tsx
new file mode 100644
index 000000000..1ec66d320
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/preview-data.tsx
@@ -0,0 +1,58 @@
+import { Box, Button, Group, Stack, Text } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useEffect } from 'react';
+
+import { IconDownload } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { downloadDataAsCSV } from '~/utils/download';
+import { DataTableWithPagination } from './data-table-with-pagination';
+import { QueryStateMessage } from './query-state-message';
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const PreviewData = observer(({ queryModel }: Props) => {
+  const { t } = useTranslation();
+  const { data, state } = queryModel;
+  const loading = state === 'loading';
+  const refresh = useCallback(() => {
+    queryModel.fetchData(true);
+  }, [queryModel.fetchData]);
+
+  const download = () => {
+    downloadDataAsCSV(queryModel.name, queryModel.data);
+  };
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const dataEmpty = !Array.isArray(data) || data.length === 0;
+  return (
+    <Stack
+      gap={0}
+      sx={{ minHeight: '250px', maxHeight: 'calc(50vh - 48px)', flexGrow: 1, flexShrink: 0, background: '#F9F9FA' }}
+    >
+      <Group justify="space-between" py={7} px={8}>
+        <Text size="sm" fw={500}>
+          查询结果
+        </Text>
+        <Button
+          size="xs"
+          variant="transparent"
+          color="gray"
+          leftSection={<IconDownload size={16} />}
+          disabled={loading || dataEmpty}
+          onClick={download}
+        >
+          下载查询结果
+        </Button>
+      </Group>
+      <Box sx={{ position: 'relative', flexGrow: 1, overflow: 'hidden' }}>
+        <QueryStateMessage queryModel={queryModel} />
+        <DataTableWithPagination data={data} loading={loading} />
+      </Box>
+    </Stack>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/query-state-message.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/query-state-message.tsx
new file mode 100644
index 000000000..e3a095044
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/preview-data/query-state-message.tsx
@@ -0,0 +1,29 @@
+import { Text } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const QueryStateMessage = observer(({ queryModel }: Props) => {
+  const { state, error, stateMessage } = queryModel;
+  if (state === 'loading') {
+    return null;
+  }
+  if (!!error) {
+    return (
+      <Text mt={10} c="red" size="md" ta="center" ff="monospace">
+        {error}
+      </Text>
+    );
+  }
+  if (!!stateMessage) {
+    return (
+      <Text size="sm" mt={10} c="gray" ta="center">
+        {stateMessage}
+      </Text>
+    );
+  }
+
+  return null;
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/boolean.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/boolean.tsx
new file mode 100644
index 000000000..07b67b0ae
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/boolean.tsx
@@ -0,0 +1,18 @@
+export const DimensionIconBoolean = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.24335 1.62305C7.50108 1.62305 7.71001 1.83198 7.71001 2.08971L7.71001 11.423C7.71001 11.6808 7.50108 11.8897 7.24335 11.8897C6.98561 11.8897 6.77668 11.6808 6.77668 11.423L6.77668 2.08971C6.77668 1.83198 6.98561 1.62305 7.24335 1.62305Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M9.93845 9.4786C9.80779 9.4786 9.70045 9.43893 9.61645 9.3596C9.53712 9.2756 9.49745 9.17293 9.49745 9.0516L9.49745 5.0056C9.49745 4.88427 9.53712 4.78393 9.61645 4.7046C9.70045 4.6206 9.80312 4.5786 9.92445 4.5786L12.1995 4.5786C12.3208 4.5786 12.4211 4.61827 12.5005 4.6976C12.5845 4.77227 12.6265 4.87027 12.6265 4.9916C12.6265 5.09427 12.5845 5.18527 12.5005 5.2646C12.4211 5.34393 12.3208 5.3836 12.1995 5.3836L10.3725 5.3836V6.6156H11.8845C12.0058 6.6156 12.1061 6.65527 12.1855 6.7346C12.2695 6.80927 12.3115 6.90727 12.3115 7.0286C12.3115 7.13127 12.2695 7.22227 12.1855 7.3016C12.1061 7.38093 12.0058 7.4206 11.8845 7.4206H10.3725L10.3725 9.0516C10.3725 9.17293 10.3281 9.2756 10.2395 9.3596C10.1555 9.43893 10.0551 9.4786 9.93845 9.4786Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M3.34754 9.4786C3.21687 9.4786 3.10954 9.43893 3.02554 9.3596C2.94154 9.2756 2.89954 9.17293 2.89954 9.0516L2.89954 5.3836H1.80054C1.6792 5.3836 1.57654 5.34627 1.49254 5.2716C1.4132 5.19693 1.37354 5.09893 1.37354 4.9776C1.37354 4.85627 1.4132 4.7606 1.49254 4.6906C1.57654 4.61593 1.6792 4.5786 1.80054 4.5786H4.90854C5.02987 4.5786 5.1302 4.61593 5.20954 4.6906C5.29354 4.76527 5.33554 4.86327 5.33554 4.9846C5.33554 5.10593 5.29354 5.20393 5.20954 5.2786C5.1302 5.3486 5.02987 5.3836 4.90854 5.3836H3.80954L3.80954 9.0516C3.80954 9.17293 3.7652 9.2756 3.67654 9.3596C3.59254 9.43893 3.48287 9.4786 3.34754 9.4786Z"
+      fill="#3D3E45"
+    />
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/date.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/date.tsx
new file mode 100644
index 000000000..9c5d62d7c
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/date.tsx
@@ -0,0 +1,17 @@
+export const DimensionIconDate = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_245_10828)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.91663 1.16634C9.91663 0.844175 9.65546 0.583008 9.33329 0.583008C9.01113 0.583008 8.74996 0.844175 8.74996 1.16634V1.74967L5.24996 1.74967V1.16634C5.24996 0.844175 4.98879 0.583008 4.66663 0.583008C4.34446 0.583008 4.08329 0.844175 4.08329 1.16634V1.74967H2.91663C1.95013 1.74967 1.16663 2.53318 1.16663 3.49967L1.16663 11.6663C1.16663 12.6328 1.95013 13.4163 2.91663 13.4163L11.0833 13.4163C12.0498 13.4163 12.8333 12.6328 12.8333 11.6663L12.8333 3.49967C12.8333 2.53318 12.0498 1.74967 11.0833 1.74967H9.91663V1.16634ZM11.6666 5.24967V3.49967C11.6666 3.17751 11.4055 2.91634 11.0833 2.91634H9.91663V3.49967C9.91663 3.82184 9.65546 4.08301 9.33329 4.08301C9.01113 4.08301 8.74996 3.82184 8.74996 3.49967V2.91634L5.24996 2.91634V3.49967C5.24996 3.82184 4.98879 4.08301 4.66663 4.08301C4.34446 4.08301 4.08329 3.82184 4.08329 3.49967V2.91634L2.91663 2.91634C2.59446 2.91634 2.33329 3.17751 2.33329 3.49967L2.33329 5.24967L11.6666 5.24967ZM2.33329 6.41634L11.6666 6.41634L11.6666 11.6663C11.6666 11.9885 11.4055 12.2497 11.0833 12.2497L2.91663 12.2497C2.59446 12.2497 2.33329 11.9885 2.33329 11.6663V6.41634Z"
+        fill="#3D3E45"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_245_10828">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/dimension-icon.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/dimension-icon.tsx
new file mode 100644
index 000000000..f999152e2
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/dimension-icon.tsx
@@ -0,0 +1,20 @@
+import { DimensionOption } from '../type';
+import { DimensionIconBoolean } from './boolean';
+import { DimensionIconDate } from './date';
+import { DimensionIconNumber } from './number';
+import { DimensionIconString } from './string';
+
+export const DimensionIcon = ({ type }: { type: DimensionOption['type'] }) => {
+  switch (type) {
+    case 'boolean':
+      return <DimensionIconBoolean />;
+    case 'date':
+      return <DimensionIconDate />;
+    case 'number':
+      return <DimensionIconNumber />;
+    case 'string':
+      return <DimensionIconString />;
+    default:
+      return null;
+  }
+};
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/index.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/index.ts
new file mode 100644
index 000000000..449ac4eeb
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/index.ts
@@ -0,0 +1 @@
+export * from './dimension-icon';
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/number.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/number.tsx
new file mode 100644
index 000000000..0dec7977f
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/number.tsx
@@ -0,0 +1,18 @@
+export const DimensionIconNumber = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.11108 2.13932C2.78892 2.13932 2.52775 2.40049 2.52775 2.72266V10.8893C2.52775 11.2115 2.78892 11.4727 3.11108 11.4727H11.2778C11.5999 11.4727 11.8611 11.2115 11.8611 10.8893V2.72266C11.8611 2.40049 11.5999 2.13932 11.2778 2.13932H3.11108ZM1.36108 2.72266C1.36108 1.75616 2.14459 0.972656 3.11108 0.972656H11.2778C12.2442 0.972656 13.0278 1.75616 13.0278 2.72266V10.8893C13.0278 11.8558 12.2442 12.6393 11.2778 12.6393H3.11108C2.14459 12.6393 1.36108 11.8558 1.36108 10.8893V2.72266Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M9.84418 8.37166C9.94816 8.37166 10.0348 8.40631 10.1041 8.47563C10.1734 8.54494 10.2081 8.63159 10.2081 8.73556C10.2081 8.8352 10.1734 8.91968 10.1041 8.989C10.0348 9.05398 9.94816 9.08647 9.84418 9.08647H7.63475C7.52211 9.08647 7.4333 9.05182 7.36832 8.9825C7.30334 8.91318 7.27084 8.82437 7.27084 8.71607C7.27084 8.60776 7.30983 8.51245 7.38781 8.43014L8.80445 6.91603C8.96474 6.74274 9.09038 6.56512 9.18135 6.38317C9.27666 6.20121 9.32432 6.04309 9.32432 5.90879C9.32432 5.69218 9.2615 5.51889 9.13587 5.38892C9.01023 5.25462 8.84344 5.18747 8.63549 5.18747C8.55318 5.18747 8.4687 5.20697 8.38206 5.24596C8.29541 5.28495 8.21094 5.3391 8.12862 5.40842C8.05064 5.47773 7.977 5.55788 7.90768 5.64885C7.85569 5.71817 7.80371 5.76149 7.75172 5.77882C7.69973 5.79615 7.65208 5.80481 7.60876 5.80481C7.51345 5.80481 7.42464 5.77016 7.34233 5.70084C7.26435 5.62719 7.22536 5.54271 7.22536 5.44741C7.22536 5.37376 7.24918 5.30228 7.29684 5.23296C7.34882 5.16365 7.41164 5.09216 7.48529 5.01852C7.59359 4.91021 7.7149 4.8149 7.8492 4.73259C7.98349 4.65028 8.12213 4.58746 8.26509 4.54414C8.40805 4.49648 8.54668 4.47266 8.68098 4.47266C8.97124 4.47266 9.22251 4.53114 9.43479 4.64811C9.6514 4.76075 9.81819 4.92321 9.93516 5.13549C10.0521 5.34343 10.1106 5.59037 10.1106 5.8763C10.1106 6.11457 10.0391 6.381 9.89617 6.67559C9.75754 6.96585 9.56909 7.23878 9.33081 7.49438L8.50837 8.37166H9.84418Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M5.49994 9.08647C5.37864 9.08647 5.279 9.04965 5.20102 8.976C5.12304 8.89802 5.08405 8.80271 5.08405 8.69007V5.62518L4.70065 5.90879C4.64 5.95644 4.56418 5.98027 4.47321 5.98027C4.36923 5.98027 4.27826 5.94128 4.20028 5.8633C4.1223 5.78532 4.08331 5.69218 4.08331 5.58387C4.08331 5.44524 4.15046 5.3326 4.28475 5.24596L5.22051 4.62212C5.26384 4.59179 5.31149 4.57013 5.36348 4.55713C5.4198 4.54414 5.47178 4.53764 5.51944 4.53764C5.64507 4.53764 5.74471 4.57663 5.81836 4.65461C5.89201 4.72826 5.92883 4.8214 5.92883 4.93404V8.69007C5.92883 8.80271 5.88768 8.89802 5.80536 8.976C5.72738 9.04965 5.62558 9.08647 5.49994 9.08647Z"
+      fill="#3D3E45"
+    />
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/string.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/string.tsx
new file mode 100644
index 000000000..d0386f5b3
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-icon/string.tsx
@@ -0,0 +1,16 @@
+export const DimensionIconString = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.0334 5.64833C12.3099 5.64833 12.55 5.67744 12.7537 5.73565C12.9623 5.79386 13.1224 5.87632 13.2339 5.98303C13.3504 6.0849 13.4086 6.20859 13.4086 6.35412C13.4086 6.45113 13.3795 6.5433 13.3213 6.63061C13.263 6.71307 13.1782 6.7543 13.0666 6.7543C12.989 6.7543 12.9235 6.7446 12.8701 6.7252C12.8216 6.70094 12.778 6.67184 12.7392 6.63788C12.7004 6.60393 12.6543 6.5724 12.6009 6.54329C12.5524 6.51419 12.4772 6.49236 12.3754 6.47781C12.2783 6.45841 12.2056 6.44871 12.1571 6.44871C11.9097 6.44871 11.6987 6.50206 11.5241 6.60878C11.3543 6.7155 11.2233 6.86102 11.1311 7.04535C11.039 7.22482 10.9929 7.43341 10.9929 7.67109C10.9929 7.90393 11.039 8.11251 11.1311 8.29684C11.2282 8.47631 11.3591 8.61941 11.5241 8.72613C11.6938 8.83284 11.8879 8.8862 12.1061 8.8862C12.2274 8.8862 12.3317 8.87893 12.419 8.86437C12.5063 8.84982 12.5791 8.82799 12.6373 8.79889C12.7052 8.76008 12.7658 8.71885 12.8192 8.6752C12.8726 8.63154 12.9526 8.60971 13.0593 8.60971C13.1854 8.60971 13.2824 8.65094 13.3504 8.7334C13.4183 8.81102 13.4522 8.90803 13.4522 9.02445C13.4522 9.14572 13.3843 9.25728 13.2485 9.35915C13.1127 9.45616 12.9332 9.5362 12.7101 9.59926C12.4918 9.65747 12.2541 9.68657 11.997 9.68657C11.6138 9.68657 11.2815 9.59926 11.0002 9.42463C10.7188 9.24516 10.5005 9.00262 10.3453 8.69702C10.1949 8.39143 10.1198 8.04945 10.1198 7.67109C10.1198 7.27333 10.1998 6.92408 10.3599 6.62333C10.5248 6.31774 10.7504 6.08005 11.0366 5.91027C11.3276 5.73565 11.6599 5.64833 12.0334 5.64833Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M7.74826 5.64833C8.08781 5.64833 8.39099 5.73565 8.65778 5.91027C8.92942 6.08005 9.14285 6.31531 9.29807 6.61606C9.45815 6.9168 9.53819 7.26606 9.53819 7.66382C9.53819 8.06158 9.45815 8.41326 9.29807 8.71885C9.14285 9.0196 8.93184 9.25728 8.66505 9.43191C8.40311 9.60169 8.10722 9.68657 7.77737 9.68657C7.58334 9.68657 7.40143 9.65505 7.23166 9.59199C7.06188 9.52893 6.91151 9.44889 6.78054 9.35187C6.65442 9.25486 6.55498 9.15784 6.48222 9.06083C6.41431 8.95896 6.38035 8.87408 6.38035 8.80617L6.60591 8.71158V9.24273C6.60591 9.36885 6.56468 9.47557 6.48222 9.56288C6.39976 9.64534 6.29547 9.68657 6.16935 9.68657C6.04323 9.68657 5.93894 9.64534 5.85647 9.56288C5.77401 9.48042 5.73278 9.3737 5.73278 9.24273V4.67333C5.73278 4.54722 5.77401 4.44292 5.85647 4.36046C5.93894 4.27315 6.04323 4.22949 6.16935 4.22949C6.29547 4.22949 6.39976 4.27315 6.48222 4.36046C6.56468 4.44292 6.60591 4.54722 6.60591 4.67333V6.52147L6.48222 6.45598C6.48222 6.39292 6.51617 6.31774 6.58408 6.23042C6.652 6.13826 6.74416 6.04852 6.86058 5.96121C6.97699 5.86904 7.11039 5.79386 7.26076 5.73565C7.41599 5.67744 7.57849 5.64833 7.74826 5.64833ZM7.63912 6.44871C7.42569 6.44871 7.23893 6.50206 7.07886 6.60878C6.91879 6.7155 6.79267 6.86102 6.7005 7.04535C6.61319 7.22482 6.56953 7.43098 6.56953 7.66382C6.56953 7.8918 6.61319 8.10038 6.7005 8.28956C6.79267 8.47389 6.91879 8.61941 7.07886 8.72613C7.23893 8.83285 7.42569 8.8862 7.63912 8.8862C7.85255 8.8862 8.03688 8.83285 8.19211 8.72613C8.35218 8.61941 8.47587 8.47389 8.56319 8.28956C8.65535 8.10038 8.70143 7.8918 8.70143 7.66382C8.70143 7.43098 8.65535 7.22482 8.56319 7.04535C8.47587 6.86102 8.35218 6.7155 8.19211 6.60878C8.03688 6.50206 7.85255 6.44871 7.63912 6.44871Z"
+      fill="#3D3E45"
+    />
+    <path
+      d="M3.02845 5.66289L1.45681 9.35915C1.42286 9.45131 1.3695 9.52408 1.29674 9.57743C1.22883 9.62594 1.15364 9.65019 1.07118 9.65019C0.940211 9.65019 0.843196 9.61381 0.780136 9.54105C0.717077 9.46829 0.685547 9.37855 0.685547 9.27184C0.685547 9.22818 0.692823 9.1821 0.707375 9.13359L2.51913 4.78248C2.55793 4.68546 2.61614 4.61028 2.69375 4.55692C2.77622 4.50356 2.86353 4.48173 2.95569 4.49143C3.04301 4.49143 3.12304 4.51811 3.19581 4.57147C3.27342 4.61998 3.3292 4.69031 3.36316 4.78248L5.15308 9.04628C5.17733 9.10934 5.18946 9.16755 5.18946 9.2209C5.18946 9.35187 5.1458 9.45616 5.05849 9.53378C4.97603 9.61139 4.88386 9.65019 4.782 9.65019C4.69468 9.65019 4.61465 9.62352 4.54189 9.57016C4.47398 9.5168 4.42062 9.44404 4.38181 9.35187L2.81745 5.70654L3.02845 5.66289ZM1.68237 8.47146L2.08256 7.63471H4.04711L4.18536 8.47146H1.68237Z"
+      fill="#3D3E45"
+    />
+  </svg>
+);
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-selector.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-selector.tsx
new file mode 100644
index 000000000..a7afb8197
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/dimension-selector.tsx
@@ -0,0 +1,164 @@
+import { ComboboxLikeRenderOptionInput, Group, Select, SelectProps, Stack, Text } from '@mantine/core';
+import _ from 'lodash';
+import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { DimensionIcon } from './dimension-icon/dimension-icon';
+import { DimensionOption } from './type';
+
+const data: DimensionOption[] = [
+  {
+    label: 'dev_eq',
+    value: 'dev_eq',
+    description: '代码提交的代码当量。',
+    type: 'number',
+  },
+  {
+    label: 'some_num',
+    value: 'some_num',
+    description: '代码提交的代码当量。',
+    type: 'number',
+  },
+  {
+    label: 'commit_hash',
+    value: 'commit_hash',
+    description: '代码提交的代码当量。',
+    type: 'string',
+  },
+  {
+    label: 'commit_author_time',
+    value: 'commit_author_time',
+    description: '代码提交的创作时间。',
+    type: 'date',
+  },
+  {
+    label: 'commit_commit_time',
+    value: 'commit_commit_time',
+    description: '代码提交的最终提交时间。',
+    type: 'date',
+  },
+  {
+    label: 'is_latest',
+    value: 'is_latest',
+    description: '是否是最新纪录',
+    type: 'boolean',
+  },
+  {
+    label: 'account -> id',
+    value: 'account -> id',
+    description: '系统账号的ID。',
+    type: 'string',
+    group_name: '系统账号',
+    group_value: 'account',
+  },
+  {
+    label: 'account -> user_type',
+    value: 'account -> user_type',
+    description: '用户的类型。',
+    type: 'string',
+    group_name: '系统账号',
+    group_value: 'account',
+  },
+  {
+    label: 'account -> is_enabled',
+    value: 'account -> is_enabled',
+    description: '账号是否处于激活状态',
+    type: 'boolean',
+    group_name: '系统账号',
+    group_value: 'account',
+  },
+];
+
+const typeNames: Record<string, string> = {
+  string: '维度列',
+  number: '数值列',
+  date: '数值列',
+  boolean: '维度列',
+};
+
+const options = Object.entries(
+  _.groupBy(data, (item) => {
+    if ('group_name' in item) {
+      return '扩展维度';
+    }
+    return typeNames[item.type];
+  }),
+).map(([group, items]) => ({
+  group: `${group}(${items.length})`,
+  items,
+}));
+
+const renderOption = ({ option, checked }: ComboboxLikeRenderOptionInput<any>) => {
+  const o = option as DimensionOption;
+  return (
+    <Stack gap={1}>
+      <Group gap={4}>
+        <DimensionIcon type={o.type} />
+        <Text size="xs">{o.label}</Text>
+      </Group>
+      <Text size="xs" c="dimmed" pl={18}>
+        {o.description}
+      </Text>
+    </Stack>
+  );
+};
+
+type DimensionSelectorProps = {
+  queryModel: QueryModelInstance;
+  value: string | null;
+  onChange: (v: string | null) => void;
+  label?: string;
+};
+export const DimensionSelector = observer(({ queryModel, label, value, onChange }: DimensionSelectorProps) => {
+  const DimensionSelectorStyles = useMemo(
+    () => ({
+      root: {
+        maxWidth: 'unset',
+      },
+      option: {
+        fontFamily: 'monospace',
+      },
+      section: {
+        '&[data-position="left"]': {
+          width: label ? '70px' : '0px',
+          justifyContent: 'flex-start',
+        },
+      },
+      input: {
+        paddingInlineStart: label ? '70px' : 'var(--input-padding-inline-start)',
+        color: 'gray',
+      },
+      groupLabel: {
+        '&::before': {
+          content: '""',
+          flex: 1,
+          insetInline: 0,
+          height: 'calc(0.0625rem* var(--mantine-scale))',
+          marginInlineEnd: 'var(--mantine-spacing-xs)',
+          backgroundColor: 'var(--mantine-color-gray-2)',
+        },
+      },
+    }),
+    [label],
+  );
+
+  return (
+    <Select
+      size="xs"
+      variant="unstyled"
+      leftSection={
+        label ? (
+          <Text size="sm" c="black">
+            {label}
+          </Text>
+        ) : null
+      }
+      styles={DimensionSelectorStyles}
+      value={value}
+      onChange={onChange}
+      data={options}
+      maxDropdownHeight={600}
+      renderOption={renderOption}
+    />
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/index.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/index.ts
new file mode 100644
index 000000000..1a3428898
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/index.ts
@@ -0,0 +1 @@
+export * from './dimension-selector';
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/type.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/type.ts
new file mode 100644
index 000000000..4093e3bb8
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/dimension-selector/type.ts
@@ -0,0 +1,8 @@
+export type DimensionOption = {
+  label: string;
+  value: string;
+  description: string;
+  type: 'number' | 'string' | 'date' | 'boolean';
+  group_name?: string;
+  group_value?: string;
+};
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/edit-metric-query.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/edit-metric-query.tsx
new file mode 100644
index 000000000..224b22f0f
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/edit-metric-query.tsx
@@ -0,0 +1,19 @@
+import { Stack } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { LinkMetricsToVariables } from './link-metrics-to-variables';
+import { LinkMetricsToTimeAndStep } from './link-metrics-to-time-and-step';
+import { SetGroupbyMetrics } from './set-groupby-metrics';
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const EditMetricQuery = observer(({ queryModel }: Props) => {
+  return (
+    <Stack gap={16}>
+      <LinkMetricsToVariables queryModel={queryModel} />
+      <LinkMetricsToTimeAndStep queryModel={queryModel} />
+      <SetGroupbyMetrics queryModel={queryModel} />
+    </Stack>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/index.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/index.ts
new file mode 100644
index 000000000..1ed51622c
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/index.ts
@@ -0,0 +1 @@
+export * from './edit-metric-query';
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/link-metrics-to-time-and-step.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/link-metrics-to-time-and-step.tsx
new file mode 100644
index 000000000..91e6bfdae
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/link-metrics-to-time-and-step.tsx
@@ -0,0 +1,76 @@
+import { ActionIcon, Group, Select, Stack, Switch, Table, Text, Tooltip } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { RunByCheckbox } from './run-by-checkbox';
+import { MetricTableStyles } from './table-styles';
+import { VariableSelector } from './variable-selector';
+import { VariableStat } from './variable-stats';
+import { DimensionSelector } from './dimension-selector/dimension-selector';
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const LinkMetricsToTimeAndStep = observer(({ queryModel }: Props) => {
+  const [timeField, setTimeField] = useState<string | null>('commit_author_time');
+  const [timeVar, setTimeVar] = useState<string | null>('filter.date_range');
+  const [stepVar, setStepVar] = useState<string | null>('filter.granularity');
+  return (
+    <Stack gap={7}>
+      <Group justify="flex-start" gap={8}>
+        <Text size="sm">按时间序列展示</Text>
+        <Tooltip label="将看板的时间&步长筛选器与相应的查询维度关联上。">
+          <ActionIcon size="xs" variant="subtle" color="gray">
+            <IconInfoCircle />
+          </ActionIcon>
+        </Tooltip>
+        <Switch size="xs" defaultChecked color="red" />
+      </Group>
+
+      <Table withTableBorder withColumnBorders layout="fixed" styles={MetricTableStyles}>
+        <colgroup>
+          <col style={{ width: 250 }} />
+          <col />
+          <col style={{ width: 130 }} />
+          <col style={{ width: 40 }} />
+        </colgroup>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Td></Table.Td>
+            <Table.Td>看板变量</Table.Td>
+            <Table.Td colSpan={2}>变量值为真时运行查询</Table.Td>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr key="dimension.time">
+            <Table.Td pr={0}>
+              <DimensionSelector queryModel={queryModel} label="时间维度" value={timeField} onChange={setTimeField} />
+            </Table.Td>
+            <Table.Td colSpan={2} pr={0}>
+              <Group justify="flex-start" gap={0} grow>
+                <VariableStat variable={timeVar} />
+                <VariableSelector queryModel={queryModel} value={timeVar} onChange={setTimeVar} />
+              </Group>
+            </Table.Td>
+            <Table.Td>
+              <RunByCheckbox queryModel={queryModel} variable={timeVar} />
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr key="dimension.step">
+            <Table.Td>步长</Table.Td>
+            <Table.Td colSpan={2} pr={0}>
+              <Group justify="flex-start" gap={0} grow>
+                <VariableStat variable={stepVar} />
+                <VariableSelector queryModel={queryModel} value={stepVar} onChange={setStepVar} />
+              </Group>
+            </Table.Td>
+            <Table.Td>
+              <RunByCheckbox queryModel={queryModel} variable={stepVar} />
+            </Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>
+    </Stack>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/link-metrics-to-variables.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/link-metrics-to-variables.tsx
new file mode 100644
index 000000000..9370fcbff
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/link-metrics-to-variables.tsx
@@ -0,0 +1,82 @@
+import { ActionIcon, Checkbox, Group, Select, Stack, Table, Text, Tooltip } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { observer } from 'mobx-react-lite';
+import { useEditDashboardContext } from '~/contexts';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { MetricTableStyles } from './table-styles';
+import { VariableSelector } from './variable-selector';
+import { VariableStat } from './variable-stats';
+import { DimensionSelector } from './dimension-selector/dimension-selector';
+
+const rows = [
+  { metric: 'repository_project -> id', variable: 'context.project_ids', checked: true },
+  { metric: 'account -> id', variable: 'context.account_id', checked: false },
+  { metric: 'organization -> id', variable: 'filters.tree_select', checked: false },
+  { metric: 'team -> id', variable: 'filters.multi_select', checked: true },
+];
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const LinkMetricsToVariables = observer(({ queryModel }: Props) => {
+  const model = useEditDashboardContext();
+  return (
+    <Stack gap={7}>
+      <Group justify="flex-start" gap={8}>
+        <Text size="sm">看板变量与指标维度关联</Text>
+        <Tooltip label="将看板的筛选器参数与指标的查询维度关联上，使指标可以按照看板的筛选条件和背景变量进行关联展示。">
+          <ActionIcon size="xs" variant="subtle" color="gray">
+            <IconInfoCircle />
+          </ActionIcon>
+        </Tooltip>
+      </Group>
+
+      <Table withTableBorder withColumnBorders layout="fixed" styles={MetricTableStyles}>
+        <colgroup>
+          <col style={{ width: 250 }} />
+          <col />
+          <col style={{ width: 130 }} />
+          <col style={{ width: 40 }} />
+        </colgroup>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Td>指标筛选维度</Table.Td>
+            <Table.Td>看板变量</Table.Td>
+            <Table.Td colSpan={2}>变量值为真时运行查询</Table.Td>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {rows.map((row) => (
+            <Table.Tr key={row.metric}>
+              <Table.Td>{row.metric}</Table.Td>
+              <Table.Td colSpan={2} pr={0}>
+                <Group justify="flex-start" grow gap={0} w="100%">
+                  <VariableStat variable={row.variable} />
+                  <VariableSelector queryModel={queryModel} value={row.variable} onChange={console.log} />
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <Checkbox size="xs" defaultChecked={row.checked} color="red" />
+              </Table.Td>
+            </Table.Tr>
+          ))}
+          <Table.Tr className="add-a-row">
+            <Table.Td pr={0}>
+              <DimensionSelector
+                queryModel={queryModel}
+                value={null}
+                onChange={function (v: string | null): void {
+                  throw new Error('Function not implemented.');
+                }}
+              />
+            </Table.Td>
+            <Table.Td colSpan={2} pr={0}>
+              <VariableSelector queryModel={queryModel} value={null} onChange={console.log} />
+            </Table.Td>
+            <Table.Td />
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>
+    </Stack>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/run-by-checkbox.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/run-by-checkbox.tsx
new file mode 100644
index 000000000..f14ce3eba
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/run-by-checkbox.tsx
@@ -0,0 +1,28 @@
+import { Checkbox } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { ChangeEventHandler } from 'react';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+
+type CheckerProps = {
+  queryModel: QueryModelInstance;
+  variable: string;
+};
+
+const Checker = observer(({ queryModel, variable }: CheckerProps) => {
+  const checked = queryModel.keyInRunBy(variable);
+  const handleCheck: ChangeEventHandler<HTMLInputElement> = (e) => {
+    queryModel.changeRunByRecord(variable, e.currentTarget.checked);
+  };
+  return <Checkbox size="xs" checked={checked} onChange={handleCheck} color="red" />;
+});
+
+type Props = {
+  queryModel: QueryModelInstance;
+  variable: string | null;
+};
+export const RunByCheckbox = ({ queryModel, variable }: Props) => {
+  if (!variable) {
+    return null;
+  }
+  return <Checker queryModel={queryModel} variable={variable} />;
+};
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/set-groupby-metrics.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/set-groupby-metrics.tsx
new file mode 100644
index 000000000..91b670bff
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/set-groupby-metrics.tsx
@@ -0,0 +1,28 @@
+import { MultiSelect } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+
+const options = [
+  { label: 'account', value: 'account' },
+  { label: 'team', value: 'team' },
+];
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const SetGroupbyMetrics = observer(({ queryModel }: Props) => {
+  return (
+    <MultiSelect
+      size="sm"
+      label="分组聚合维度"
+      description="指标在查询时按照哪些维度进行聚合计算。最多支持两个维度的聚合计算。若选择按时间序列展示，则仅可选择一个聚合维度。"
+      data={options}
+      searchable
+      styles={{
+        label: {
+          fontWeight: 'normal',
+        },
+      }}
+    />
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/table-styles.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/table-styles.ts
new file mode 100644
index 000000000..79f5eaa3a
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/table-styles.ts
@@ -0,0 +1,7 @@
+export const MetricTableStyles = {
+  tbody: {
+    td: {
+      fontFamily: 'monospace',
+    },
+  },
+};
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/variable-selector.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/variable-selector.tsx
new file mode 100644
index 000000000..8f4706c80
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/variable-selector.tsx
@@ -0,0 +1,112 @@
+import { ComboboxItem, Group, Select, SelectProps, Stack, Text } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { filterTypeNames } from '~/components/filter/filter-settings/filter-setting';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { DashboardFilterType } from '~/types';
+
+const SelectorStyles: SelectProps['styles'] = {
+  root: {
+    maxWidth: 'unset',
+  },
+  option: {
+    fontFamily: 'monospace',
+  },
+  groupLabel: {
+    '&::before': {
+      content: '""',
+      flex: 1,
+      insetInline: 0,
+      height: 'calc(0.0625rem* var(--mantine-scale))',
+      marginInlineEnd: 'var(--mantine-spacing-xs)',
+      backgroundColor: 'var(--mantine-color-gray-2)',
+    },
+  },
+};
+
+type CustomOption = ComboboxItem & {
+  description: string;
+  type: string;
+  widget: DashboardFilterType;
+  widget_label: string;
+};
+const renderOption: SelectProps['renderOption'] = ({ option, ...rest }) => {
+  const { t } = useTranslation();
+  const o = option as CustomOption;
+  const showDescription = o.type === 'filter';
+  return (
+    <Stack
+      gap={0}
+      py={4}
+      styles={{
+        root: {
+          flexGrow: 1,
+          '&[data-selected="true"]': { '.mantine-Text-root': { color: 'white' }, svg: { stroke: 'white' } },
+        },
+      }}
+      {...rest}
+    >
+      <Group flex="1" gap={4}>
+        <Text size="xs">{option.value}</Text>
+      </Group>
+      {showDescription && (
+        <Group justify="space-between" wrap="nowrap">
+          <Text size="xs" c={rest.checked ? 'rgba(255,255,255,.8)' : 'dimmed'} style={{ flexShrink: 1, flexGrow: 1 }}>
+            {o.widget_label}
+          </Text>
+          <Text size="xs" c={rest.checked ? 'rgba(255,255,255,.8)' : 'dimmed'} style={{ flexShrink: 0, flexGrow: 0 }}>
+            {t(filterTypeNames[o.widget])}
+          </Text>
+        </Group>
+      )}
+    </Stack>
+  );
+};
+
+type Props = {
+  queryModel: QueryModelInstance;
+  value: string | null;
+  onChange: (value: string | null, option: CustomOption) => void;
+};
+
+export const VariableSelector = observer(({ queryModel, value, onChange }: Props) => {
+  const { t } = useTranslation();
+  const options = useMemo(() => {
+    const groups = queryModel.getConditionOptionsWithInvalidValue(value).optionGroups;
+    return groups.map((optionGroup) => {
+      const count = optionGroup.items.length;
+      const name = t(optionGroup.group);
+      return {
+        group: `${name}(${count})`,
+        items: optionGroup.items.map((item) => ({
+          ...item,
+          label: item.value,
+          widget_label: item.label,
+        })),
+      };
+    });
+  }, [queryModel.getConditionOptionsWithInvalidValue, t, value]);
+
+  const handleChange = useCallback(
+    (value: string | null, option: ComboboxItem) => {
+      onChange(value, option as CustomOption);
+    },
+    [onChange],
+  );
+
+  return (
+    <Select
+      size="xs"
+      variant="unstyled"
+      // searchable
+      placeholder="选择变量"
+      styles={SelectorStyles}
+      data={options}
+      renderOption={renderOption}
+      maxDropdownHeight={600}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/variable-stats.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/variable-stats.tsx
new file mode 100644
index 000000000..8c6666216
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/variable-stats.tsx
@@ -0,0 +1,24 @@
+import { ThemeIcon } from '@mantine/core';
+import { IconPointFilled } from '@tabler/icons-react';
+import _ from 'lodash';
+import { observer } from 'mobx-react-lite';
+import { useEditDashboardContext } from '~/contexts';
+
+export const VariableStat = observer(({ variable }: { variable: string | null }) => {
+  const model = useEditDashboardContext();
+  if (!variable) {
+    return null;
+  }
+
+  const valid = _.has(model.queryVariables, variable);
+  return (
+    <ThemeIcon
+      variant="white"
+      size="xs"
+      color={valid ? '#88CE98' : '#F15050'}
+      styles={{ root: { flexGrow: 0, flexShrink: 0 } }}
+    >
+      <IconPointFilled />
+    </ThemeIcon>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/index.ts b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/index.ts
new file mode 100644
index 000000000..3e223b3b2
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/index.ts
@@ -0,0 +1 @@
+export * from './query-tabs';
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/query-tabs.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/query-tabs.tsx
new file mode 100644
index 000000000..f50a49739
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/query-tabs.tsx
@@ -0,0 +1,84 @@
+import { Button, Group, Tabs } from '@mantine/core';
+import { IconEye } from '@tabler/icons-react';
+import { observer } from 'mobx-react-lite';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { EditMetricQuery } from './edit-metric-query/edit-metric-query';
+import { QueryUsage } from '../../query-editor-form/query-usage';
+import { InlineFunctionInput } from '~/components/widgets';
+
+const DEFAULT_MMQ_REQ_POST_PROCESSING = [
+  'function process_result(resp, utils, state) {',
+  '    return resp.data',
+  '}',
+].join('\n');
+
+const TabsStyles = {
+  root: {
+    minHeight: '350px',
+    maxHeight: '50vh',
+    height: '100%',
+    overflow: 'hidden',
+  },
+  list: {
+    '&::before': {
+      borderColor: 'transparent',
+    },
+  },
+  panel: {
+    height: 'calc(100% - 36px)',
+    overflowY: 'auto',
+  },
+} as const;
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const QueryTabs = observer(({ queryModel }: Props) => {
+  return (
+    <Tabs color="red" defaultValue="编辑查询" styles={TabsStyles}>
+      <Group>
+        <Tabs.List>
+          <Tabs.Tab value="编辑查询" size="xs">
+            编辑查询
+          </Tabs.Tab>
+          <Tabs.Tab value="加工结果" size="xs">
+            加工结果
+          </Tabs.Tab>
+          <Tabs.Tab value="使用情况" size="xs">
+            使用情况
+          </Tabs.Tab>
+        </Tabs.List>
+        <Button
+          variant="subtle"
+          ml="auto"
+          size="xs"
+          color="gray"
+          leftSection={<IconEye size={14} />}
+          styles={{
+            section: {
+              marginInlineEnd: 4,
+            },
+          }}
+        >
+          预览查询
+        </Button>
+      </Group>
+
+      <Tabs.Panel value="编辑查询" pt="xs">
+        <EditMetricQuery queryModel={queryModel} />
+      </Tabs.Panel>
+
+      <Tabs.Panel value="加工结果" pt="xs">
+        <InlineFunctionInput
+          label=""
+          value={queryModel.post_process}
+          onChange={queryModel.setPostProcess}
+          defaultValue={DEFAULT_MMQ_REQ_POST_PROCESSING}
+        />
+      </Tabs.Panel>
+      <Tabs.Panel value="使用情况" pt="xs">
+        <QueryUsage queryModel={queryModel} />
+      </Tabs.Panel>
+    </Tabs>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-variables-preview.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-variables-preview.tsx
new file mode 100644
index 000000000..c00a0741c
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-variables-preview.tsx
@@ -0,0 +1,35 @@
+import { CodeHighlight } from '@mantine/code-highlight';
+import { Box, Stack, Text } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { useEditDashboardContext } from '~/contexts';
+
+export const QueryVariablesPreview = observer(() => {
+  const model = useEditDashboardContext();
+
+  return (
+    <Stack
+      styles={{
+        root: {
+          borderRadius: 4,
+          backgroundColor: '#F9F9FA',
+          height: '100%',
+          minHeight: '350px',
+          maxHeight: '50vh',
+          overflow: 'hidden',
+        },
+      }}
+    >
+      <Box py={7} px={8}>
+        <Text fw="bold" size="sm">
+          看板变量预览
+        </Text>
+      </Box>
+      <CodeHighlight
+        language="json"
+        sx={{ width: '100%', height: '100%', minHeight: '400px', overflowY: 'auto' }}
+        withCopyButton={false}
+        code={model.queryVariablesString}
+      />
+    </Stack>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/run-query.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/run-query.tsx
new file mode 100644
index 000000000..3fe15187f
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/run-query.tsx
@@ -0,0 +1,22 @@
+import { Button } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { observer } from 'mobx-react-lite';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { MericoIconPlay } from './merico-icons';
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+export const RunQuery = observer(({ queryModel }: Props) => {
+  return (
+    <Button
+      size="xs"
+      leftSection={<MericoIconPlay width={14} height={14} />}
+      variant="filled"
+      color="red"
+      onClick={() => queryModel.fetchData(true)}
+    >
+      执行查询
+    </Button>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/select-metric.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/select-metric.tsx
new file mode 100644
index 000000000..3a81d2e7d
--- /dev/null
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/select-metric.tsx
@@ -0,0 +1,79 @@
+import { ActionIcon, ComboboxItem, Group, Select, Text, Stack, ThemeIcon, Tooltip, SelectProps } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { MericoIconExternalLink } from './merico-icons';
+import { showNotification } from '@mantine/notifications';
+import { IconHash } from '@tabler/icons-react';
+import { ErrorBoundary } from '~/utils';
+
+type CustomOption = ComboboxItem & { description: string };
+const renderSelectOption: SelectProps['renderOption'] = ({ option, ...rest }) => {
+  const o = option as CustomOption;
+  return (
+    <Stack
+      gap={0}
+      py={4}
+      styles={{
+        root: {
+          flexGrow: 1,
+          '&[data-selected="true"]': { '.mantine-Text-root': { color: 'white' }, svg: { stroke: 'white' } },
+        },
+      }}
+      {...rest}
+    >
+      <Group flex="1" gap={4}>
+        <IconHash size={12} />
+        <Text size="xs">{o.label}</Text>
+      </Group>
+      <Text ml={16} size="xs" c={rest.checked ? 'rgba(255,255,255,.8)' : 'dimmed'}>
+        {o.description}
+      </Text>
+    </Stack>
+  );
+};
+
+const mockOptions = [
+  {
+    label: '项目的重点问题数（aspect）',
+    value: '项目的重点问题数（aspect）',
+    description: '代码提交的最终提交时间。',
+  },
+  { label: '衍生指标1', value: '衍生指标1', description: '代码提交的最终提交时间。' },
+  { label: '衍生指标2', value: '衍生指标2', description: '代码提交的最终提交时间。' },
+  { label: '衍生指标3', value: '衍生指标3', description: '代码提交的最终提交时间。' },
+  { label: '项目的新增代码当量', value: '项目的新增代码当量', description: '代码提交的最终提交时间。' },
+  { label: '衍生指标4', value: '衍生指标4', description: '代码提交的最终提交时间。' },
+  { label: '衍生指标5', value: '衍生指标5', description: '代码提交的最终提交时间。' },
+  { label: '衍生指标6', value: '衍生指标6', description: '代码提交的最终提交时间。' },
+];
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+
+export const SelectMetric = observer(({ queryModel }: Props) => {
+  return (
+    <ErrorBoundary>
+      <Group justify="flex-end" gap={4} align="flex-end">
+        <Select
+          size="xs"
+          label="指标"
+          data={mockOptions}
+          renderOption={renderSelectOption}
+          styles={{ root: { flexGrow: 1 } }}
+          maxDropdownHeight={500}
+        />
+        <Tooltip label="跳转到指标明细页查看详情。">
+          <ActionIcon
+            size="md"
+            variant="subtle"
+            mb={2}
+            onClick={() => showNotification({ message: 'TODO', color: 'red' })}
+          >
+            <MericoIconExternalLink width={14} height={14} />
+          </ActionIcon>
+        </Tooltip>
+      </Group>
+    </ErrorBoundary>
+  );
+});
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/configurations.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/configurations.tsx
index 7e691f5d4..6bc634416 100644
--- a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/configurations.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/configurations.tsx
@@ -1,15 +1,15 @@
 import { ActionIcon, Center, Divider, MultiSelect, Stack, TextInput } from '@mantine/core';
 import { IconDeviceFloppy } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useState } from 'react';
-import { QueryRenderModelInstance } from '~/model';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CustomSelectorItem } from '~/components/widgets/custom-selector-item';
+import { QueryModelInstance } from '~/dashboard-editor/model';
 import { DeleteQuery } from './delete-query';
 import { SelectDataSource } from './select-data-source';
-import { CustomSelectorItem } from '~/components/widgets/custom-selector-item';
-import { useTranslation } from 'react-i18next';
 
 interface IQueryConfigurations {
-  queryModel: QueryRenderModelInstance;
+  queryModel: QueryModelInstance;
 }
 
 export const QueryConfigurations = observer(({ queryModel }: IQueryConfigurations) => {
@@ -18,6 +18,18 @@ export const QueryConfigurations = observer(({ queryModel }: IQueryConfiguration
   useEffect(() => {
     setName(queryModel.name);
   }, [queryModel.name]);
+
+  const options = useMemo(() => {
+    const groups = queryModel.conditionOptionsWithInvalidRunbys.optionGroups;
+    return groups.map((optionGroup) => {
+      const group = t(optionGroup.group);
+      return {
+        group,
+        items: optionGroup.items,
+      };
+    });
+  }, [queryModel.conditionOptionsWithInvalidRunbys.optionGroups]);
+
   return (
     <Center ml={20} mt={20} sx={{ maxWidth: '600px' }}>
       <Stack gap={10} sx={{ width: '100%' }}>
@@ -46,22 +58,13 @@ export const QueryConfigurations = observer(({ queryModel }: IQueryConfiguration
             queryModel.setName(name);
           }}
         />
-        <SelectDataSource
-          value={{
-            type: queryModel.type,
-            key: queryModel.key,
-          }}
-          onChange={({ type, key }) => {
-            queryModel.setKey(key);
-            queryModel.setType(type);
-          }}
-        />
+        <SelectDataSource queryModel={queryModel} />
         <Divider mt={10} mb={-10} variant="dashed" label={t('query.conditions')} labelPosition="center" />
         <MultiSelect
           label={t('query.run_by_condition.label')}
           description={t('query.run_by_condition.description')}
           placeholder={t('query.run_by_condition.unset')}
-          data={queryModel.conditionOptions}
+          data={options}
           value={[...queryModel.run_by]}
           onChange={queryModel.setRunBy}
           renderOption={CustomSelectorItem}
@@ -71,7 +74,7 @@ export const QueryConfigurations = observer(({ queryModel }: IQueryConfiguration
           <MultiSelect
             label={t('query.re_run_condition.label')}
             placeholder={t('query.re_run_condition.label')}
-            data={queryModel.conditionOptions}
+            data={options}
             value={[...queryModel.react_to]}
             onChange={queryModel.setReactTo}
             renderOption={CustomSelectorItem}
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/index.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/index.tsx
index 9efa09c66..27942101a 100644
--- a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/index.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/index.tsx
@@ -101,8 +101,8 @@ export const QueryEditorForm = observer(({ queryModel }: IQueryEditorForm) => {
         <DataPreview id={queryModel.id} moreActions={null} refreshOnMount />
       </Tabs.Panel>
 
-      <Tabs.Panel value="Usage" sx={{ ...TabPanelStyle, overflow: 'hidden' }}>
-        <QueryUsage queryID={queryModel.id} usage={usage} />
+      <Tabs.Panel value="Usage" py="sm" px="md" sx={{ ...TabPanelStyle, overflow: 'hidden' }}>
+        <QueryUsage queryModel={queryModel} />
       </Tabs.Panel>
     </Tabs>
   );
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/query-usage.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/query-usage.tsx
index 3acea934d..a3f97b385 100644
--- a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/query-usage.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/query-usage.tsx
@@ -3,16 +3,17 @@ import _ from 'lodash';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { useEditDashboardContext } from '~/contexts';
+import { QueryModelInstance } from '~/dashboard-editor/model';
 import { QueryUsageType } from '~/model';
 
-interface IQueryUsage {
-  queryID: string;
-  usage: QueryUsageType[];
-}
+type Props = {
+  queryModel: QueryModelInstance;
+};
 
-export const QueryUsage = observer(({ queryID, usage }: IQueryUsage) => {
+export const QueryUsage = observer(({ queryModel }: Props) => {
   const { t } = useTranslation();
   const editor = useEditDashboardContext().editor;
+
   const open = (u: QueryUsageType) => {
     if (u.type === 'filter') {
       editor.setPath(['_FILTERS_', u.id]);
@@ -28,39 +29,47 @@ export const QueryUsage = observer(({ queryID, usage }: IQueryUsage) => {
   const openView = (id: string) => {
     editor.setPath(['_VIEWS_', id]);
   };
+
+  const usage = queryModel.usage;
   return (
-    <Stack py="sm" px="md">
-      <Table highlightOnHover sx={{ tableLayout: 'fixed' }}>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th style={{ width: 100 }}>{t('common.type')}</Table.Th>
-            <Table.Th style={{ width: 'calc(50% - 50px)' }}>{t('common.name')}</Table.Th>
-            <Table.Th>{t('query.usage.in_views')}</Table.Th>
+    <Table
+      highlightOnHover
+      layout="fixed"
+      styles={{
+        table: {
+          fontSize: '14px',
+        },
+      }}
+    >
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th style={{ width: 100 }}>{t('common.type')}</Table.Th>
+          <Table.Th style={{ width: 'calc(50% - 50px)' }}>{t('common.name')}</Table.Th>
+          <Table.Th>{t('query.usage.in_views')}</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {usage.map((u) => (
+          <Table.Tr key={u.id}>
+            <Table.Td>{t(u.type_label)}</Table.Td>
+            <Table.Td>
+              <Anchor size="sm" component="button" type="button" onClick={() => open(u)}>
+                {u.label}
+              </Anchor>
+            </Table.Td>
+            <Table.Td>
+              <Stack align="flex-start" justify="flex-start" gap={2}>
+                {u.views.map((v) => (
+                  <Anchor key={v.id} size="sm" component="button" type="button" onClick={() => openView(v.id)}>
+                    <Box>{v.label}</Box>
+                  </Anchor>
+                ))}
+                {u.views.length === 0 && <Box>--</Box>}
+              </Stack>
+            </Table.Td>
           </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {usage.map((u) => (
-            <Table.Tr key={u.id}>
-              <Table.Td>{t(u.type_label)}</Table.Td>
-              <Table.Td>
-                <Anchor component="button" type="button" onClick={() => open(u)}>
-                  {u.label}
-                </Anchor>
-              </Table.Td>
-              <Table.Td>
-                <Stack align="flex-start" justify="flex-start" gap={2}>
-                  {u.views.map((v) => (
-                    <Anchor key={v.id} component="button" type="button" onClick={() => openView(v.id)}>
-                      <Box>{v.label}</Box>
-                    </Anchor>
-                  ))}
-                  {u.views.length === 0 && <Box>--</Box>}
-                </Stack>
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </Stack>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 });
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/select-data-source.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/select-data-source.tsx
index b158e1ac7..e7ce487ee 100644
--- a/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/select-data-source.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/select-data-source.tsx
@@ -6,9 +6,17 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { listDataSources } from '~/api-caller';
 import { useEditDashboardContext } from '~/contexts';
+import { QueryModelInstance } from '~/dashboard-editor/model';
 import { DataSourceType } from '~/model';
 import { DBExplorerModal } from '../../db-explorer-modal';
 
+const DataSourceTypeNames: Record<string, string> = {
+  http: 'HTTP',
+  mysql: 'MySQL',
+  postgresql: 'PostgreSQL',
+  merico_metric_system: '指标系统',
+};
+
 type CustomOption = { label: string; type: DataSourceType } & ComboboxItem;
 const DataSourceLabel: SelectProps['renderOption'] = ({ option, ...others }) => {
   const { label, type } = option as CustomOption;
@@ -18,7 +26,10 @@ const DataSourceLabel: SelectProps['renderOption'] = ({ option, ...others }) =>
         className="transform-query-option"
         justify="flex-start"
         {...others}
-        sx={{ '&[data-selected="true"]': { '.mantine-Text-root': { color: 'white' }, svg: { stroke: 'white' } } }}
+        sx={{
+          flexGrow: 1,
+          '&[data-selected="true"]': { '.mantine-Text-root': { color: 'white' }, svg: { stroke: 'white' } },
+        }}
       >
         <IconVectorTriangle size={14} color="#228be6" />
         <Text size="sm" c="blue">
@@ -28,17 +39,17 @@ const DataSourceLabel: SelectProps['renderOption'] = ({ option, ...others }) =>
     );
   }
   return (
-    <Group justify="space-between" {...others}>
+    <Group justify="space-between" {...others} sx={{ flexGrow: 1 }}>
       <Text size="sm">{label}</Text>
-      <Text size="sm">{type}</Text>
+      <Text size="sm">{DataSourceTypeNames[type]}</Text>
     </Group>
   );
 };
-interface ISelectDataSource {
-  value: { type: DataSourceType; key: string };
-  onChange: (v: { type: DataSourceType; key: string }) => void;
-}
-export const SelectDataSource = observer(({ value, onChange }: ISelectDataSource) => {
+type Props = {
+  queryModel: QueryModelInstance;
+  size?: string;
+};
+export const SelectDataSource = observer(({ queryModel, size = 'sm' }: Props) => {
   const { t } = useTranslation();
   const model = useEditDashboardContext();
   const { data: dataSources = [], loading } = useRequest(
@@ -74,17 +85,19 @@ export const SelectDataSource = observer(({ value, onChange }: ISelectDataSource
     if (key === null) {
       return;
     }
-    onChange({
-      key,
-      type: dataSourceTypeMap[key],
-    });
+    queryModel.setKey(key);
+    queryModel.setType(dataSourceTypeMap[key]);
   };
 
   const dataSource = useMemo(() => {
-    return model.datasources.find(value);
-  }, [model, value]);
+    return model.datasources.find({
+      type: queryModel.type,
+      key: queryModel.key,
+    });
+  }, [model, queryModel.type, queryModel.key]);
   return (
     <Select
+      size={size}
       data={dataSourceOptions}
       label={
         <Group justify="space-between">
@@ -98,14 +111,14 @@ export const SelectDataSource = observer(({ value, onChange }: ISelectDataSource
       rightSection={
         dataSource ? (
           <Text size="xs" c="dimmed">
-            {dataSource.type}
+            {DataSourceTypeNames[dataSource.type] ?? dataSource.type}
           </Text>
         ) : undefined
       }
       rightSectionWidth={85}
       maxDropdownHeight={500}
       styles={{
-        root: { flex: 1 },
+        root: { flex: 1, minWidth: '300px' },
         label: { display: 'block' },
         section: {
           pointerEvents: 'none',
@@ -115,7 +128,7 @@ export const SelectDataSource = observer(({ value, onChange }: ISelectDataSource
         },
       }}
       disabled={loading}
-      value={value.key}
+      value={queryModel.key}
       onChange={handleChange}
     />
   );
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/view-query-vars/query-variables-guide.tsx b/dashboard/src/dashboard-editor/ui/settings/content/view-query-vars/query-variables-guide.tsx
index 7010e2156..617561820 100644
--- a/dashboard/src/dashboard-editor/ui/settings/content/view-query-vars/query-variables-guide.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/content/view-query-vars/query-variables-guide.tsx
@@ -33,16 +33,9 @@ export const QueryVariablesGuide = observer(function _QueryVariablesGuide({
   const { t } = useTranslation();
   const model = useEditDashboardContext();
   const content = useEditContentModelContext();
-  const contextInfo = model.context.current;
 
   const variablesString = (() => {
-    const ret: Record<string, $TSFixMe> = {
-      context: {
-        ...content.mock_context.current,
-        ...contextInfo,
-      },
-      filters: content.filters.previewValues,
-    };
+    const ret: Record<string, any> = model.queryVariables;
 
     if (showSQLSnippets) {
       ret.sql_snippets = content.sqlSnippets.record;
diff --git a/dashboard/src/dashboard-editor/ui/settings/navbar/index.tsx b/dashboard/src/dashboard-editor/ui/settings/navbar/index.tsx
index 4a0812f9f..0e71990cf 100644
--- a/dashboard/src/dashboard-editor/ui/settings/navbar/index.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/navbar/index.tsx
@@ -19,7 +19,9 @@ export const SettingsNavbar = observer(() => {
         },
       }}
     >
-      <AppShell.Section pt={9} pb={8} sx={{ borderBottom: '1px solid #eee' }}>
+      <AppShell.Section
+        sx={{ borderBottom: '1px solid #eee', padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-md)' }}
+      >
         <Text size="sm" ta="center" sx={{ userSelect: 'none', cursor: 'default' }}>
           {t('common.titles.settings')}
         </Text>
diff --git a/dashboard/src/i18n/en.ts b/dashboard/src/i18n/en.ts
index bce225b5d..45f3f2ab9 100644
--- a/dashboard/src/i18n/en.ts
+++ b/dashboard/src/i18n/en.ts
@@ -286,6 +286,7 @@ export const en = {
       info: 'Info',
       min: 'Min',
       max: 'Max',
+      invalid: 'Invalid',
       data_field: 'Data Field',
       name_data_field: 'Name Data Field',
       value_data_field: 'Value Data Field',
diff --git a/dashboard/src/i18n/zh.ts b/dashboard/src/i18n/zh.ts
index 072ad8351..4c6eaf17e 100644
--- a/dashboard/src/i18n/zh.ts
+++ b/dashboard/src/i18n/zh.ts
@@ -286,6 +286,7 @@ export const zh = {
       info: '信息',
       min: '最小值',
       max: '最大值',
+      invalid: '无效的',
       data_field: '数据字段',
       name_data_field: '名称字段',
       value_data_field: '值字段',
diff --git a/dashboard/src/model/meta-model/dashboard/content/query/query.ts b/dashboard/src/model/meta-model/dashboard/content/query/query.ts
index d02e30546..420df6d75 100644
--- a/dashboard/src/model/meta-model/dashboard/content/query/query.ts
+++ b/dashboard/src/model/meta-model/dashboard/content/query/query.ts
@@ -11,6 +11,7 @@ export const QueryMeta = types
       DataSourceType.MySQL,
       DataSourceType.HTTP,
       DataSourceType.Transform,
+      DataSourceType.MericoMetricSystem,
     ]),
     key: types.string,
     sql: types.string,
@@ -29,6 +30,10 @@ export const QueryMeta = types
       if (self.type === DataSourceType.HTTP) {
         return !!self.pre_process;
       }
+      if (self.type === DataSourceType.MericoMetricSystem) {
+        // TODO: MMS
+        return true;
+      }
       return !!self.sql;
     },
     get json() {
diff --git a/dashboard/src/model/meta-model/dashboard/content/query/types.ts b/dashboard/src/model/meta-model/dashboard/content/query/types.ts
index c331846ff..3ca793a30 100644
--- a/dashboard/src/model/meta-model/dashboard/content/query/types.ts
+++ b/dashboard/src/model/meta-model/dashboard/content/query/types.ts
@@ -3,4 +3,5 @@ export enum DataSourceType {
   MySQL = 'mysql',
   HTTP = 'http',
   Transform = 'transform',
+  MericoMetricSystem = 'merico_metric_system',
 }
diff --git a/dashboard/src/model/meta-model/datasources/datasource.ts b/dashboard/src/model/meta-model/datasources/datasource.ts
index 9e4e0bc2f..489fd66ff 100644
--- a/dashboard/src/model/meta-model/datasources/datasource.ts
+++ b/dashboard/src/model/meta-model/datasources/datasource.ts
@@ -4,7 +4,12 @@ import { DataSourceType } from '~/model';
 
 export const DataSourceMetaModel = types.model('DataSourceMetaModel', {
   id: types.string,
-  type: types.enumeration('DataSourceType', [DataSourceType.HTTP, DataSourceType.MySQL, DataSourceType.Postgresql]),
+  type: types.enumeration('DataSourceType', [
+    DataSourceType.HTTP,
+    DataSourceType.MySQL,
+    DataSourceType.Postgresql,
+    DataSourceType.MericoMetricSystem,
+  ]),
   key: types.string,
   config: types.frozen<TDataSourceConfig>(),
 });
diff --git a/dashboard/src/model/render-model/dashboard/content/queries/mute-query.ts b/dashboard/src/model/render-model/dashboard/content/queries/mute-query.ts
index 541ef5425..277cfe3a3 100644
--- a/dashboard/src/model/render-model/dashboard/content/queries/mute-query.ts
+++ b/dashboard/src/model/render-model/dashboard/content/queries/mute-query.ts
@@ -1,7 +1,7 @@
 import { ComboboxItem, ComboboxItemGroup } from '@mantine/core';
 import _ from 'lodash';
 import { getParent, getRoot, Instance, isAlive } from 'mobx-state-tree';
-import { DataSourceType, QueryMeta } from '~/model';
+import { DashboardFilterType, DataSourceType, QueryMeta } from '~/model';
 import { explainHTTPRequest } from '~/utils';
 import { explainSQL } from '~/utils';
 import { DependencyInfo, UsageRegs } from '~/utils';
@@ -15,14 +15,14 @@ export const MuteQueryModel = QueryMeta.views((self) => ({
   },
   get conditionOptions() {
     if (!isAlive(self)) {
-      return [];
+      return { optionGroups: [], validValues: new Set() };
     }
 
     const validValues: Set<string> = new Set();
     const { context } = this.contentModel.payloadForSQL;
 
-    const contextGroup: ComboboxItemGroup = {
-      group: 'Context',
+    const contextGroup: ComboboxItemGroup<ComboboxItem> = {
+      group: 'context.label',
       items: Object.keys(context).map((k) => {
         const value = `context.${k}`;
         validValues.add(value);
@@ -30,25 +30,53 @@ export const MuteQueryModel = QueryMeta.views((self) => ({
           label: k,
           value,
           description: undefined,
+          type: 'context',
         };
       }),
     };
 
-    const filterGroup: ComboboxItemGroup = {
-      group: 'Filters',
-      items: this.contentModel.filters.keyLabelOptions.map((o: ComboboxItem) => {
+    const filterGroup: ComboboxItemGroup<ComboboxItem> = {
+      group: 'filter.labels',
+      items: this.contentModel.filters.keyLabelOptions.map((o: ComboboxItem & { widget: DashboardFilterType }) => {
         const value = `filters.${o.value}`;
         validValues.add(value);
         return {
           label: o.label,
           value,
           description: o.value,
+          type: 'filter',
+          widget: o.widget,
         };
       }),
     };
 
+    const optionGroups: Array<ComboboxItemGroup<ComboboxItem>> = [contextGroup, filterGroup];
+    return { optionGroups, validValues };
+  },
+  getConditionOptionsWithInvalidValue(value: string | null) {
+    const { optionGroups, validValues } = this.conditionOptions;
+    if (!value || validValues.has(value)) {
+      return this.conditionOptions;
+    }
+
+    const invalidGroup: ComboboxItemGroup<ComboboxItem> = {
+      group: 'common.invalid',
+      items: [
+        {
+          label: value,
+          value,
+        },
+      ],
+    };
+    return {
+      optionGroups: [...optionGroups, invalidGroup],
+      validValues,
+    };
+  },
+  get conditionOptionsWithInvalidRunbys() {
+    const { optionGroups, validValues } = this.conditionOptions;
     const invalidGroup: ComboboxItemGroup = {
-      group: 'Invalid',
+      group: 'common.invalid',
       items: [],
     };
     self.run_by.forEach((c) => {
@@ -61,8 +89,10 @@ export const MuteQueryModel = QueryMeta.views((self) => ({
       });
     });
 
-    const ret: Array<ComboboxItemGroup | ComboboxItem> = [contextGroup, filterGroup, invalidGroup];
-    return ret;
+    return {
+      optionGroups: [...optionGroups, invalidGroup],
+      validValues,
+    };
   },
   get unmetRunByConditions() {
     // this computed has dependencies on reactive values outside the model,
@@ -112,6 +142,9 @@ export const MuteQueryModel = QueryMeta.views((self) => ({
   get typedAsHTTP() {
     return [DataSourceType.HTTP].includes(self.type);
   },
+  get isMericoMetricQuery() {
+    return self.type === DataSourceType.MericoMetricSystem;
+  },
   get isTransform() {
     return self.type === DataSourceType.Transform;
   },
diff --git a/dashboard/src/model/render-model/dashboard/content/queries/query.ts b/dashboard/src/model/render-model/dashboard/content/queries/query.ts
index 154f859e2..280562f1d 100644
--- a/dashboard/src/model/render-model/dashboard/content/queries/query.ts
+++ b/dashboard/src/model/render-model/dashboard/content/queries/query.ts
@@ -7,6 +7,8 @@ import { TAdditionalQueryInfo } from '~/api-caller/request';
 import { functionUtils, postProcessWithDataSource, postProcessWithQuery, preProcessWithDataSource } from '~/utils';
 import { MuteQueryModel } from './mute-query';
 import _ from 'lodash';
+import { faker } from '@faker-js/faker';
+import { AnyObject } from '~/types';
 
 enum QueryState {
   idle = 'idle',
@@ -20,7 +22,7 @@ export const QueryRenderModel = types
     MuteQueryModel,
     types.model({
       state: types.optional(types.enumeration(['idle', 'loading', 'error']), 'idle'),
-      data: types.optional(types.frozen<string[][] | number[][]>([]), []),
+      data: types.optional(types.frozen<string[][] | number[][] | AnyObject[]>([]), []),
       error: types.frozen(),
     }),
   )
@@ -164,6 +166,63 @@ export const QueryRenderModel = types
           }
         }
       }),
+      runMericoMetricQuery: flow(function* () {
+        if (!self.valid || !self.datasource) {
+          return;
+        }
+        self.controller?.abort();
+        if (!self.runByConditionsMet) {
+          return;
+        }
+
+        self.controller = new AbortController();
+        self.state = 'loading';
+        try {
+          // TODO: MMS
+          // const { type, key, post_process } = self.json;
+          // let config = JSON.parse(self.httpConfigString);
+          // config = preProcessWithDataSource(self.datasource, config);
+
+          // const response = yield* toGenerator(
+          //   queryByHTTP(
+          //     {
+          //       type,
+          //       key,
+          //       configString: JSON.stringify(config),
+          //       name: self.name,
+          //       additionals: self.additionalQueryInfo,
+          //     },
+          //     self.controller.signal,
+          //   ),
+          // );
+          // const result = postProcessWithDataSource(self.datasource, response);
+          // const data = postProcessWithQuery(post_process, result, self.contentModel.dashboardState);
+          const data = Array.from(new Array(100), () => {
+            return {
+              date: '2024-07-30',
+              accountId: faker.datatype.uuid(),
+              accountName: faker.name.fullName(),
+              accountXXX: faker.animal.type(),
+              value: faker.datatype.number(),
+            };
+          });
+          self.data = data;
+          self.state = 'idle';
+          self.error = null;
+        } catch (error) {
+          console.error(error);
+          if (!axios.isCancel(error)) {
+            self.data = [];
+            const fallback = get(error, 'message', 'unkown error');
+            self.error = get(error, 'response.data.detail.message', fallback) as unknown as QueryFailureError;
+            self.state = 'error';
+          } else {
+            console.debug(`🟡 Query[${self.name}] is cancelled`);
+            self.data = [];
+            self.state = 'idle';
+          }
+        }
+      }),
       runTransformation() {
         self.state = 'loading';
         try {
@@ -199,7 +258,13 @@ export const QueryRenderModel = types
         if (self.isTransform) {
           return self.runTransformation();
         }
-        return self.typedAsHTTP ? self.runHTTP() : self.runSQL();
+        if (self.typedAsHTTP) {
+          return self.runHTTP();
+        }
+        if (self.isMericoMetricQuery) {
+          return self.runMericoMetricQuery();
+        }
+        return self.runSQL();
       },
 
       beforeDestroy() {
@@ -227,6 +292,10 @@ export const QueryRenderModel = types
             if (self.typedAsHTTP) {
               return `${self.inUse}--${self.id}--${self.key}--${self.reQueryKey}--${self.datasource?.id}`;
             }
+            // TODO: MMS
+            if (self.isMericoMetricQuery) {
+              return `${self.inUse}--${self.id}--${self.key}--${self.reQueryKey}--${self.datasource?.id}`;
+            }
             // NOTE(leto): sql queries don't need datasource info
             const deps = [self.inUse, self.id, self.key, self.formattedSQL, self.pre_process, self.post_process];
             return deps.join('--');
diff --git a/package.json b/package.json
index 0bbe41446..d0f0ed69f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "13.43.13",
+  "version": "13.44.0",
   "private": true,
   "workspaces": [
     "api",
diff --git a/settings-form/package.json b/settings-form/package.json
index 853d6b528..0e191e9b7 100644
--- a/settings-form/package.json
+++ b/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "13.43.13",
+  "version": "13.44.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/settings-form/src/api-caller/datasource.typed.ts b/settings-form/src/api-caller/datasource.typed.ts
index 2643473d8..87fad0bb9 100644
--- a/settings-form/src/api-caller/datasource.typed.ts
+++ b/settings-form/src/api-caller/datasource.typed.ts
@@ -1,4 +1,4 @@
-export type DataSourceType = 'postgresql' | 'mysql' | 'http';
+export type DataSourceType = 'postgresql' | 'mysql' | 'http' | 'merico_metric_system';
 
 export interface IDataSource {
   id: string;
diff --git a/settings-form/src/datasource/components/data-source-icon.tsx b/settings-form/src/datasource/components/data-source-icon.tsx
index 4fa000ab8..c29e096bd 100644
--- a/settings-form/src/datasource/components/data-source-icon.tsx
+++ b/settings-form/src/datasource/components/data-source-icon.tsx
@@ -1,4 +1,4 @@
-import { IconBrandMysql, IconDatabase, IconNetwork } from '@tabler/icons-react';
+import { IconBrandMysql, IconDatabase, IconNetwork, IconTopologyRing3 } from '@tabler/icons-react';
 import { DataSourceType } from '../../api-caller/datasource.typed';
 import { ActionIcon, Group, Text } from '@mantine/core';
 
@@ -6,12 +6,14 @@ const names = {
   http: 'HTTP',
   mysql: 'MySQL',
   postgresql: 'PostgreSQL',
+  merico_metric_system: 'Merico Metric System',
 };
 
 const icons = {
   http: <IconNetwork />,
   mysql: <IconBrandMysql />,
   postgresql: <IconDatabase />,
+  merico_metric_system: <IconTopologyRing3 />,
 };
 
 interface IProps {
diff --git a/settings-form/src/datasource/data-source-list.tsx b/settings-form/src/datasource/data-source-list.tsx
index 98a7b10b3..5c6b8cd9c 100644
--- a/settings-form/src/datasource/data-source-list.tsx
+++ b/settings-form/src/datasource/data-source-list.tsx
@@ -47,9 +47,10 @@ export const DataSourceList = withEntry<Props>('DataSourceList', ({ styles = def
           <Table.Tbody>
             {data.map((dataSource) => {
               const { id, key, type, is_preset } = dataSource;
+              const isMericoMetricSystem = type === 'merico_metric_system';
               return (
                 <Table.Tr key={key}>
-                  <Table.Td width={200}>
+                  <Table.Td width={230}>
                     <DataSourceIcon type={type} />
                   </Table.Td>
                   <Table.Td>{key}</Table.Td>
@@ -57,7 +58,7 @@ export const DataSourceList = withEntry<Props>('DataSourceList', ({ styles = def
                     <Group justify="flex-start">
                       <EditDataSource dataSource={dataSource} onSuccess={refresh} styles={styles} />
                       <DeleteDataSource
-                        isProtected={is_preset}
+                        isProtected={is_preset || isMericoMetricSystem}
                         id={id}
                         name={key}
                         onSuccess={refresh}
diff --git a/website/package.json b/website/package.json
index 15a4a7f5d..f9021d3af 100644
--- a/website/package.json
+++ b/website/package.json
@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "13.43.13",
+  "version": "13.44.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"
diff --git a/website/src/utils/mantine-providers.tsx b/website/src/utils/mantine-providers.tsx
index 45e026a35..eeb2f77b6 100644
--- a/website/src/utils/mantine-providers.tsx
+++ b/website/src/utils/mantine-providers.tsx
@@ -5,6 +5,7 @@ import { ReactNode } from 'react';
 import '@mantine/code-highlight/styles.css';
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
+import '@mantine/notifications/styles.css';
 import '@mantine/tiptap/styles.css';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';