feat:confagent下载弹出框

nezha-fronted/src/components/common/js/constants.js

@@ -87,7 +87,21 @@ export const promServer = {
   ]
 
 }
+export const promServer2 = {
+  theData: [
+    {
+      label: 'Global',
+      value: 1,
+      text: 'Global'
+    },
+    {
+      label: 'Per-datacenter',
+      value: 2,
+      text: 'Per-datacenter'
+    }
+  ]
 
+}
 export const asset = {
   pingData: [
     { value: 1, label: 'up' },

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

@@ -729,7 +729,14 @@ const en = {
       state: 'State',
       longitude: 'Longitude',
       latitude: 'Latitude',
-      lnglat: 'Coordinate'
+      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/page/config/dc.vue

@@ -15,6 +15,9 @@
                   id="dc-add" class="top-tool-btn margin-l-20">
             <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 :delete-objs="batchDeleteObjs" @before="delFlag=true" @after="getTableData" api="idc" v-has="'dc_delete'" id="dc-list-batch-delete"></delete-button>
           <button id="account-column-setting" class="top-tool-btn margin-l-10"
                   type="button" @click="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
@@ -131,6 +134,50 @@
       <traffic-setting-box @close="closeTrafficBox" :dc="dc" ref="trafficBox" v-if="rightBox.trafficSetting.show"></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>
@@ -254,7 +301,25 @@ export default {
       searchLabel: {}, // 搜索参数
       tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
       scrollbarWrap: null,
-      delFlag: false
+      delFlag: false,
+      showAgentDownload:false,
+      token:'',
+      ipAddr:'',
+      allDc:[],
+      loadFinish :false,
+      osTypes:[{
+          label:"Centos",
+          name:"centos",
+        },
+        {
+          label:"Ubuntu",
+          name:"ubuntu"
+        }],
+      agentParam:{
+        osType:"Centos",
+        dc:"",
+        type:1,
+      }
     }
   },
   computed: {
@@ -266,6 +331,38 @@ 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'
@@ -370,7 +467,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete('idc?ids=' + u.id).then(response => {
+        this.$delete('dc?ids=' + u.id).then(response => {
           if (response.code === 200) {
             this.delFlag = true
             this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -383,7 +480,7 @@ export default {
       })
     },
     statusChange (idc) {
-      this.$put('idc', idc).then(response => {
+      this.$put('dc', idc).then(response => {
         if (response.code === 200) {
           this.rightBox.show = false
           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -417,7 +514,7 @@ export default {
     },
     getUserData () {
       return new Promise(resolve => {
-        this.$get('sys/user/list', { pageSize: -1, pageNo: 1 }).then(response => {
+        this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
           if (response.code === 200) {
             this.userData = response.data.list
           }
@@ -536,8 +633,9 @@ export default {
     this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
       ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
       : this.tableTitle
-    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    // this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
     this.getTableData()
+    this.getAllDc();
   }
 }
 </script>
@@ -545,4 +643,41 @@ 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>