feat:完善agent download

nezha-fronted/src/components/common/language/cn.js

@@ -487,7 +487,8 @@ const cn = {
     noImportFile: '没有可导入的文件',
     noAccess: '无访问权限',
     confirmDuplicate: '确认复制吗？',
-    confirmCancel: '您所做的修改将不会被保存？'
+    confirmCancel: '您所做的修改将不会被保存？',
+    copySuccess: '复制成功'
   },
   asset: {
     asset: '资产',
@@ -705,7 +706,14 @@ const cn = {
       editProm: '修改Prometheus服务',
       type: '类别',
       checkTime: '检查时间',
-      dataCenter: '数据中心'
+      dataCenter: '数据中心',
+      agent: {
+        title: '下载Agent',
+        download: '下载',
+        osType: 'OS 类型',
+        autoScript: '自动安装脚本',
+        type: 'Agent类型'
+      }
     },
     terminallog: {
       terminallog: '终端日志',

nezha-fronted/src/components/common/language/en.js

@@ -490,7 +490,8 @@ const en = {
     noImportFile: 'No import file found',
     noAccess: 'No access',
     confirmDuplicate: 'Are you sure to duplicate this chart?',
-    confirmCancel: 'Changes you made are not saved?'
+    confirmCancel: 'Changes you made are not saved?',
+    copySuccess: 'Copy success'
   },
   asset: {
     asset: 'Asset',
@@ -709,7 +710,14 @@ const en = {
       editProm: 'Edit prometheus server', // "修改Prometheus Server"
       type: 'Type', // "类别"
       checkTime: 'Check time',
-      dataCenter: 'Data center'
+      dataCenter: 'Data center',
+      agent: {
+        title: 'Download agent',
+        download: 'Download',
+        osType: 'OS type',
+        autoScript: 'Auto install script',
+        type: 'Agent type'
+      }
     },
     dc: {
       dc: 'Data center',
@@ -736,13 +744,6 @@ const en = {
       longitude: 'Longitude',
       latitude: 'Latitude',
       lnglat: 'Coordinate',
-      agent:{
-        title:"Download agent",
-        download:"Download",
-        osType:"OS type",
-        autoScript:"Auto install script",
-        type:"Agent type"
-      }
     },
     model: {
       model: 'Asset model',

nezha-fronted/src/components/common/mixin/table.js

@@ -28,7 +28,7 @@ export default {
       scrollbarWrap: null,
       delFlag: false,
 
-      operationWidth: "165" // 操作列宽
+      operationWidth: '165' // 操作列宽
     }
   },
   methods: {

nezha-fronted/src/components/common/rightBox/promServerBox.vue

@@ -39,15 +39,25 @@
         </el-form-item>
         <!--type-->
         <el-form-item :label="$t('config.promServer.type')" prop="type">
-          <el-cascader
+<!--          <el-cascader-->
-            id="prom-box-input-type"
+<!--            id="prom-box-input-type"-->
-            style="width: 100%"
+<!--            style="width: 100%"-->
-            v-model="editPromServer.type"
+<!--            v-model="editPromServer.type"-->
-            placeholder=""
+<!--            placeholder=""-->
-            size="small"
+<!--            size="small"-->
-            :options="$CONSTANTS.promServer.theData"
+<!--            :options="$CONSTANTS.promServer.theData"-->
-            :props="{ multiple: false, checkStrictly: false ,emitPath:false}"
+<!--            :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
-            clearable></el-cascader>
+<!--            clearable></el-cascader>-->
+          <el-select  placeholder="" v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" popper-class="config-dropdown" value-key="value" size="small">
+            <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in $CONSTANTS.promServer2.theData">
+              <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Token" prop="token">
+          <el-input class="right-box-row-with-btn" type="text" placeholder="" v-model="editPromServer.token" size="small" id="prom-box-input-token">
+            <i slot="suffix" class="nz-icon nz-icon-refresh" @click="refreshToken"></i>
+          </el-input>
         </el-form-item>
       </el-form>
     </div>
@@ -96,6 +106,19 @@ export default {
     }
   },
   methods: {
+    refreshToken: function () {
+      if(!this.editPromServer.token||this.editPromServer.token == ''){
+        this.$message.error("The token is empty")
+        return;
+      }
+      this.$post('agent/token/refresh' , this.editPromServer).then(response=>{
+        if(response.code == 200){
+          this.editPromServer.token = response.data.token;
+        }else{
+          this.$message.error(response.msg)
+        }
+      })
+    },
     /* 关闭弹框 */
     esc (refresh) {
       this.$emit('close', refresh)

nezha-fronted/src/components/page/config/dc.vue

@@ -135,50 +135,7 @@
       <traffic-setting-box v-if="rightBox.trafficSetting.show" ref="trafficBox" :dc="object" @close="closeTrafficBox"></traffic-setting-box>
     </transition>
     <span v-if="dcDataRefresh" style="display: none"></span>
-    <el-dialog :visible.sync="showAgentDownload" width="620px" append-to-body class="nz-dialog agent-dialog" @close="closeDialog" :title="$t('config.dc.agent.title')">
-      <div class="agent-box" v-if="showAgentDownload">
-        <el-form size="small" v-model="agentParam" class="right-box-form  right-box-form-left" label-position = "top" label-width="120px" style="width: 100%">
-          <div class="right-box-sub-title">{{$t('config.dc.agent.download')}}</div>
-          <div style="margin-bottom: 20px;width: 100%"></div>
-          <el-form-item :label="$t('config.dc.agent.osType')" prop="osType" class="half-form-item">
-            <el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.osType">
-              <el-option :key="item.name" :label="item.label" :value="item.name" v-for="item in osTypes">
-                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <div class="right-box-sub-title">{{$t('config.dc.agent.autoScript')}}</div>
-          <div style="margin-bottom: 20px;width: 100%"></div>
 
-          <el-form-item :label="$t('config.dc.agent.dc')" prop="dc" class="half-form-item">
-            <el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.dc">
-              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in allDc">
-                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t('config.dc.agent.type')" prop="type" class="half-form-item">
-            <el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.type">
-              <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in $CONSTANTS.promServer2.theData">
-                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-form>
-        <div class="download-url" v-if="loadFinish">
-          <el-scrollbar class="el-scrollbar-small" style="width: calc(100% - 40px); height: 100%;">
-            <pre><code id="download-url-curl">curl -o- -H "Authorization:{{token}}" http://{{ipAddr}}/agent/{{agentParam.dc}}/{{agentParam.type}}/install.sh | bash</code></pre>
-          </el-scrollbar>
-          <span @click="copyUrl('download-url-curl')" class="url-copy"><i class="nz-icon nz-icon-override"></i></span>
-        </div>
-        <div class="download-url" v-if="loadFinish">
-          <el-scrollbar class="el-scrollbar-small" style="width: calc(100% - 40px);height: 100%;">
-            <pre><code id="download-url-wget">wget -qO- --header="Authorization:{{token}}" http://{{ipAddr}}/agent/{{agentParam.dc}}/{{agentParam.type}}/install.sh | bash</code></pre>
-          </el-scrollbar>
-          <span @click="copyUrl('download-url-wget')" class="url-copy"><i class="nz-icon nz-icon-override"></i></span>
-        </div>
-      </div>
-    </el-dialog>
   </div>
 </template>
 <script>
@@ -272,24 +229,6 @@ export default {
       },
       tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
       delFlag: false,
-      showAgentDownload:false,
-      token:'',
-      ipAddr:'',
-      allDc:[],
-      loadFinish :false,
-      osTypes:[{
-          label:"Centos",
-          name:"centos",
-        },
-        {
-          label:"Ubuntu",
-          name:"ubuntu"
-        }],
-      agentParam:{
-        osType:"Centos",
-        dc:"",
-        type:1,
-      },
       userData: []
     }
   },
@@ -302,38 +241,6 @@ export default {
     }
   },
   methods: {
-    toDownloadAgent:function(){
-      this.showAgentDownload = true;
-      this.token = sessionStorage.getItem('nz-token');
-      let reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
-      this.ipAddr = reg.exec(window.location.href)[0];
-    },
-    closeDialog:function(){
-      this.showAgentDownload = false;
-    },
-    getAllDc:function(){
-      this.$get('idc?pageSize=-1', ).then(response => {
-        console.log('load dc data....')
-        this.tools.loading = false
-        if (response.code === 200) {
-          this.allDc  = response.data.list
-          console.log(this.allDc)
-          this.loadFinish = true;
-          this.agentParam.dc = this.allDc[0].id;
-        }
-      })
-    },
-    copyUrl:function(id){
-      let text = document.querySelector("#"+id).innerText;
-      const input = document.createElement('input');
-      document.body.appendChild(input);
-      input.setAttribute('value', text);
-      input.select();
-      if (document.execCommand('copy')) {
-        document.execCommand('copy');
-      }
-      document.body.removeChild(input);
-    },
     assetStatClassName (param) {
       if (param.column.label == this.$t('config.dc.assets')) {
         return 'asset-state'
@@ -443,41 +350,4 @@ export default {
   /deep/ td .nz-icon-gear:before{
     color: #606266;
   }
-  .agent-dialog .agent-box{
-    padding:10px;
-  }
-
-  .agent-box >.right-box-form>.el-form-item.half-form-item{
-    width: 220px;
-  }
-  .agent-box >.right-box-form>.el-form-item.half-form-item:nth-child(odd){
-    width: 220px;
-  }
-
-  .agent-box .download-url{
-    height: 40px;
-    position: relative;
-  }
-  .agent-box .download-url .url-copy{
-    position: absolute;
-    right: 10px;
-    top: 5px;
-  }
-  .agent-box .download-url .url-copy i{
-    font-size: 20px;
-  }
-  .agent-box .download-url pre code {
-    border: 1px solid #ddd;
-    border-radius: 0;
-    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-    line-height: 40px;
-    padding: 5px;
-    white-space: nowrap;
-    background-color: #F6F8FA;;
-    color: #333;
-  }
-
-  .agent-box .download-url code {
-    color: #333;
-  }
 </style>

nezha-fronted/src/components/page/config/promServer.vue

@@ -13,6 +13,9 @@
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
+        <button :title="$t('overall.createDatacenter')" @click="toDownloadAgent" type="button" id="load-agent" class="top-tool-btn margin-l-20">
+          <i class="nz-icon-download nz-icon"></i>
+        </button>
         <delete-button id="promserver-list-batch-delete" v-has="'prom_delete'" :delete-objs="batchDeleteObjs" api="agent" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot:default="slotProps">
@@ -92,6 +95,53 @@
     <transition name="right-box">
       <prom-server-box v-if="rightBox.show" :prom-server="object" @close="closeRightBox"></prom-server-box>
     </transition>
+    <el-dialog :visible.sync="showAgentDownload" width="620px" append-to-body class="nz-dialog agent-dialog" @close="closeDialog" :title="$t('config.promServer.agent.title')">
+      <div class="agent-box" v-if="showAgentDownload">
+        <el-form size="small" v-model="agentParam" class="right-box-form  right-box-form-left" label-position = "top" label-width="120px" style="width: 100%">
+          <div class="right-box-sub-title">{{$t('config.promServer.agent.download')}}</div>
+          <div style="margin-bottom: 20px;width: 100%"></div>
+          <el-form-item :label="$t('config.promServer.agent.osType')" prop="osType" class="half-form-item">
+            <el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.osType">
+              <el-option :key="item.name" :label="item.label" :value="item.name" v-for="item in osTypes">
+                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item   class="half-form-item">
+            <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="downloadAgent">{{$t('config.promServer.agent.download')}}</button>
+          </el-form-item>
+          <div class="right-box-sub-title">{{$t('config.promServer.agent.autoScript')}}</div>
+          <div style="margin-bottom: 20px;width: 100%"></div>
+
+          <el-form-item :label="$t('config.dc.dc')" prop="dc" class="half-form-item">
+            <el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.dc">
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in allDc">
+                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('config.promServer.agent.type')" prop="type" class="half-form-item">
+            <el-select class="right-box-row-with-btn" placeholder="" v-model="agentParam.type">
+              <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in $CONSTANTS.promServer2.theData">
+                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div class="download-url" v-if="loadFinish">
+          <el-scrollbar class="el-scrollbar-small" style="width: calc(100% - 40px); height: 100%;">
+            <pre><code id="download-url-curl">curl -o- -H "Authorization:{{token}}" http://{{ipAddr}}/agent/{{agentParam.dc}}/{{agentParam.type}}/install.sh | bash</code></pre>
+          </el-scrollbar>
+          <span @click="copyUrl('download-url-curl')" class="url-copy"><i class="nz-icon nz-icon-override"></i></span>
+        </div>
+        <div class="download-url" v-if="loadFinish">
+          <el-scrollbar class="el-scrollbar-small" style="width: calc(100% - 40px);height: 100%;">
+            <pre><code id="download-url-wget">wget -qO- --header="Authorization:{{token}}" http://{{ipAddr}}/agent/{{agentParam.dc}}/{{agentParam.type}}/install.sh | bash</code></pre>
+          </el-scrollbar>
+          <span @click="copyUrl('download-url-wget')" class="url-copy"><i class="nz-icon nz-icon-override"></i></span>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 
 </template>
@@ -101,6 +151,7 @@ import promServerBox from '@/components/common/rightBox/promServerBox'
 import { promServer } from '@/components/common/js/constants'
 import nzDataList from '@/components/common/table/nzDataList'
 import tableMixin from '@/components/common/mixin/table'
+import axios from 'axios'
 export default {
   name: 'promServer',
   components: {
@@ -186,10 +237,83 @@ export default {
           disabled: false
         }]
       },
-      promServerType: null
+      promServerType: null,
+      showAgentDownload: false,
+      token: '',
+      ipAddr: '',
+      allDc: [],
+      loadFinish: false,
+      osTypes: [{
+        label: 'Centos',
+        name: 'centos'
+      },
+      {
+        label: 'Ubuntu',
+        name: 'ubuntu'
+      }],
+      agentParam: {
+        osType: 'centos',
+        dc: '',
+        type: 1
+      }
     }
   },
   methods: {
+    toDownloadAgent: function () {
+      this.showAgentDownload = true
+      this.token = sessionStorage.getItem('nz-token')
+      const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
+      this.ipAddr = reg.exec(window.location.href)[0]
+    },
+    closeDialog: function () {
+      this.showAgentDownload = false
+    },
+    getAllDc: function () {
+      this.$get('idc?pageSize=-1').then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.allDc = response.data.list
+          this.loadFinish = true
+          this.agentParam.dc = this.allDc[0].id
+        }
+      })
+    },
+    copyUrl: function (id) {
+      const text = document.querySelector('#' + id).innerText
+      const input = document.createElement('input')
+      document.body.appendChild(input)
+      input.setAttribute('value', text)
+      input.select()
+      if (document.execCommand('copy')) {
+        document.execCommand('copy')
+      }
+      document.body.removeChild(input)
+      this.$message({ duration: 1000, type: 'success', message: this.$t('tip.copySuccess') })
+    },
+    downloadAgent: function () {
+      axios.get('agent/download?os=' + this.agentParam.osType, { responseType: 'blob' }).then(data => {
+        let fileName = 'confagent'
+        const disposition = data.headers['content-disposition']
+        if (disposition) {
+          fileName = disposition.split(';')[1].split('filename=')[1]
+        }
+        // 由于ie不支持download属性，故需要做兼容判断
+        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
+          // ie独有的msSaveBlob属性，data.data为Blob文件流
+          window.navigator.msSaveBlob(data.data, fileName)
+        } else {
+          // 以下流程即为文章开始的下载流程
+          const url = window.URL.createObjectURL(data.data)
+          const link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.download = fileName
+          document.body.appendChild(link)
+          link.click()
+          window.URL.revokeObjectURL(link.href)
+        }
+      })
+    },
     getTableData () {
       if (!this.hasButton('prom_view')) {
         this.$message.error(this.$t('tip.noAccess'))
@@ -248,6 +372,46 @@ export default {
     Promise.all([this.getDcData()]).then(response => {
       this.getTableData()
     })
+    this.getAllDc()
   }
 }
 </script>
+<style scoped>
+  .agent-dialog .agent-box{
+    padding:10px;
+  }
+
+  .agent-box >.right-box-form>.el-form-item.half-form-item{
+    width: 220px;
+  }
+  .agent-box >.right-box-form>.el-form-item.half-form-item:nth-child(odd){
+    width: 220px;
+  }
+
+  .agent-box .download-url{
+    height: 40px;
+    position: relative;
+  }
+  .agent-box .download-url .url-copy{
+    position: absolute;
+    right: 10px;
+    top: 5px;
+  }
+  .agent-box .download-url .url-copy i{
+    font-size: 20px;
+  }
+  .agent-box .download-url pre code {
+    border: 1px solid #ddd;
+    border-radius: 0;
+    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+    line-height: 40px;
+    padding: 5px;
+    white-space: nowrap;
+    background-color: #F6F8FA;;
+    color: #333;
+  }
+
+  .agent-box .download-url code {
+    color: #333;
+  }
+</style>

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -247,7 +247,6 @@
             </el-cascader>
           </el-form-item>
 
-
           <el-form-item :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url" v-if="isUrl">
             <el-input maxlength="1024" show-word-limit size="small" type="textarea" v-model="editChart.param.url" id="chart-box-url"></el-input>
           </el-form-item>
@@ -270,7 +269,6 @@
             <el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
           </el-form-item>
 
-
           <!--<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
             <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
           </el-form-item>-->

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -583,7 +583,7 @@ export default {
         panel: '',
         sync: 0,
         groupId: '',
-        remark: '',
+        remark: ''
       }
       this.expressions.forEach((exp) => {
         chart.elements.push({ expression: exp, legend: '', type: 'expert', id: '' })