From e0da2198db05dc535f417b4db616cc70611a6151 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Mon, 27 Jun 2022 10:28:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E8=A1=A8=E8=BE=BE=E5=BC=8F=E6=82=AC=E6=B5=AE=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/rightBox/panelBox.scss  |  3 ++
 .../components/common/rightBox/panelBox.vue   | 43 +++++++++++++++----
 .../src/components/page/dashboard/panel.vue   |  3 +-
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
index 6f8bf674e..ecffa92f6 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
@@ -225,6 +225,9 @@
   }
 }
 
+.query-variable-table{
+  
+}
 .multiTip{
   max-width:200px;
 }
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 0c96ef7d8..e00bb1062 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -97,18 +97,38 @@
                       <el-option label="Custom" value="custom"></el-option>
                     </el-select>
                   </el-form-item>
-                  <!-- Custom values -->
-                  <el-form-item v-if="item.type==='custom'" :label="$t('dashboard.panel.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
-                    <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
-                  </el-form-item>
                   <!-- Query expression -->
-                  <el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.queryExpression')" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
+                  <el-form-item v-if="item.type==='query'" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
+                    <div slot="label">
+                      <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
+                        <table class="query-variable-table" width="640" cellspacing="5">
+                          <thead>
+                            <th>{{$t('overall.name')}}</th>
+                            <th>{{$t('overall.remark')}}</th>
+                          </thead>
+                          <tbody>
+                            <tr v-for="item in queryVariableList" :key="item.name">
+                              <td width="200">{{item.name}}</td>
+                              <td>{{item.description}}</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                        <span slot="reference">
+                          {{$t('dashboard.panel.queryExpression')}}
+                          <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                        </span>
+                      </el-popover>
+                    </div>
                     <el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
                   </el-form-item>
                   <!-- Regex -->
                   <el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
                     <el-input v-model="item.regex" placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/" size="small"/>
                   </el-form-item>
+                  <!-- Custom values -->
+                  <el-form-item v-if="item.type==='custom'" :label="$t('dashboard.panel.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
+                    <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
+                  </el-form-item>
                   <!-- Multi-value -->
                   <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
                     <div slot="label">
@@ -371,7 +391,14 @@ export default {
       ],
       dateFormatStr: localStorage.getItem('nz-default-dateFormat')
         ? localStorage.getItem('nz-default-dateFormat')
-        : 'YYYY-MM-DD HH:ss:mm'
+        : 'YYYY-MM-DD HH:ss:mm',
+      queryVariableList: [
+        { name: 'label_names()', description: 'Returns a list of metric label names.' },
+        { name: 'label_values(label)', description: 'Returns a list of label values for the label in every metric.' },
+        { name: 'label_values(metric, label)', description: 'Returns a list of label values for the label in the specified metric.' },
+        { name: 'metrics(metric)', description: 'Returns a list of metrics matching the specified metric regex.' },
+        { name: 'query_result(query)', description: 'Returns a list of metric query result for the query.' }
+      ]
     }
   },
   created () {
@@ -418,7 +445,7 @@ export default {
     addVariable () {
       const temp = {
         show: true,
-        type: 'custom',
+        type: 'query',
         multi: false,
         allOption: false
       }
@@ -563,7 +590,7 @@ export default {
         if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
           const temp = [{
             show: true,
-            type: 'custom',
+            type: 'query',
             multi: false,
             allOption: false
           }]
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index b3ff2b0a5..9d7d23fe3 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -458,8 +458,7 @@ export default {
               repeat: 1
             }
           },
-          chartShare: 'none',
-          variables: []
+          chartShare: 'none'
         }
       }
       // this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))