集群管理,应用中心离线安装更新

hanbaoshan

2020-10-10 f98f5deaaa6c5a9cf4023e2d2dd1c445980e5a8f

集群管理,应用中心离线安装更新

 src/api/app.ts

@@ -32,10 +32,10 @@
});

//安装应用
export const installApp = (data:any) => request({
  url: '/data/api-v/app/install',
  method: 'post',
  data
export const installApp = (query:any) => request({
  url: '/data/api-v/sdk/sdkDownload',
  method: 'get',
  params: query
});
//卸载应用
export const removeApp = (data:any)=> request({

 src/components/serfDiagram/index.vue

@@ -1,7 +1,5 @@
<template lang='pug'>
  .net
    .arrow_box(:style="toolTipStyle")
      p {{toolTipAddr}}
    d3-network(
       ref='net'
      :net-nodes="nodes"
@@ -145,7 +143,8 @@
      // }
      // this.selectNodesLinks()
      // this.$set(this.nodes, node.index, node)

      console.log(event,node)
      debugger
      if (event.timeStamp - this.movement < 200) {
        this.$emit("selected-node", event, this.members[node.id]);
      }

 src/pages/ai/index/App.vue

@@ -347,6 +347,52 @@
        </div>

      </div>

    </div>

    <el-dialog

      title="安装包信息"

      :visible.sync="installDialogVisible"

      width="40%"

      :close-on-click-modal="false"

    >

      <div class="installInfo">

        <template v-if="installAppPackage != null">

          <div>

            <div>

              <span>安装包名称：</span>

              <span>{{installAppPackage.productName}}</span>

            </div>

            <div>

              <span>安装版本：</span>

              <span>{{installAppPackage.version}}</span>

            </div>

            <div>

              <span>更新内容：</span>

              <span>{{installAppPackage.installContent}}</span>

            </div>

          </div>

        </template>

        <template v-if="installSdkPackage != null">

          <div>

            <div>

              <span>安装包名称：</span>

              <span>{{installSdkPackage.productName}}</span>

            </div>

            <div>

              <span>安装版本：</span>

              <span>{{installSdkPackage.version}}</span>

            </div>

            <div>

              <span>更新内容：</span>

              <span>{{installSdkPackage.installContent}}</span>

            </div>

          </div>

        </template>

        <p>确定安装？</p>

      </div>

      <div slot="footer" class="dialog-footer">

        <el-button @click="installDialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="offlineInstall">安 装</el-button>

      </div>

    </el-dialog>

  </div>

</template>

<script>

@@ -367,7 +413,8 @@
  findByType,

  getTagList,

  downloadSdk,

  installSdk

  installSdk,

  getInstallInfo

} from "./api";

import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";



@@ -466,6 +513,10 @@
      sceneSdks: [],

      sceneRuleList: "",

      isInstall: false,

      installDialogVisible: false,

      installPackage: {},

      installAppPackage: null,

      installSdkPackage: null,

      installPercentage: 0,

      unActivedSDKList: [],

      unActivedAppList: [],

@@ -483,7 +534,8 @@
      // unloadLoading: false,

      // installLoading: false,

      installedApps: [],

      storeApps: []

      storeApps: [],

      installFile: {}

    }

  },

  watch: {

@@ -523,10 +575,38 @@
    this.VideoManageData.init();

  },

  methods: {

    offlineInstall () {

      this.installDialogVisible = false;

      this.isInstall = true;

      //安装

      installSdk(this.installFile).then(res => {

        debugger

        if (res.success) {

          this.isInstall = false;

          this.$message({

            type: 'success',

            message: '安装成功,将跳转至我的算法中查看'

          });

          setTimeout(() => {

            this.findAllSdk();

            this.getAllApps();

            this.activeName = 'myAlgorithm';

          }, 3000)

        }



      }).catch(e => {

        console.log(e)

        this.isInstall = false;

        this.$message({

          type: 'error',

          message: e.data

        });

      })

    },

    downloadApp (app) {

      app.installLoading = true;

      let _this = this;

      installApp(app).then(res => {

      installApp({ path: app.id }).then(res => {

        if (res && res.success) {

          setTimeout(() => {

            app.installLoading = false;

@@ -669,6 +749,79 @@
      this.patchFile = { ...file };

      this.fileAdded = true;

      const h = this.$createElement;

      //上传完成获取安装信息

      let _this = this;

      getInstallInfo(file).then(res => {

        _this.installFile = file;

        if (res.success) {

          _this.installDialogVisible = true;

          debugger

          if (res.data.apps.length > 0) {

            _this.installAppPackage = {

              appId: res.data.apps[0].appId,

              version: res.data.apps[0].version,

              productName: res.data.productName,

              installContent: res.data.apps[0].installContent

            }

          }

          if (res.data.sdks.length > 0) {

            _this.installSdkPackage = {

              appId: res.data.sdks[0].sdkId,

              version: res.data.sdks[0].version,

              productName: res.data.productName,

              installContent: res.data.sdks[0].installContent

            }

          }



          // this.$confirm('', '算法信息', {

          //   message: `<div class="installInfo">

          //           <div><span>算法名称：</span><span>${file.filename}</span></div>

          //           <div><span>安装版本：</span><span></span></div>

          //           <div><span>更新内容：</span><span></span></div>

          //           <p>确定安装此算法？</p>

          //         </div>`,

          //   confirmButtonText: '安装',

          //   cancelButtonText: '取消',

          //   dangerouslyUseHTMLString: true,

          //   type: ''

          // }).then(() => {

          //   this.isInstall = true;

          //   //安装

          //   installSdk(file).then(res => {

          //     debugger

          //     if (res.success) {

          //       this.isInstall = false;

          //       //this.$refs['progressBar'].style.width = 100%

          //       //this.installPercentage = 100%

          //       this.$message({

          //         type: 'success',

          //         message: '安装成功,将跳转至我的算法中查看'

          //       });

          //       setTimeout(() => {

          //         this.findAllSdk();

          //         this.activeName = 'myAlgorithm';

          //       }, 3000)

          //     }



          //   }).catch(e => {

          //     console.log(e)

          //     this.isInstall = false;

          //     this.$message({

          //       type: 'error',

          //       message: e.data

          //     });

          //   })

          // }).catch(() => {

          //   console.log('取消安装');



          // })

        }

      }).catch(e => {

        this.$message({

          type: 'error',

          message: e.data

        });

      })

      // this.$msgbox({

      //     title: '算法信息',

      //     message: h('div', null, [

@@ -699,39 +852,7 @@
      //     });

      //   });



      this.$confirm('', '算法信息', {

        message: `<div class="installInfo">

                    <div><span>算法名称：</span><span>${file.filename}</span></div>

                    <div><span>安装版本：</span><span></span></div>

                    <div><span>更新内容：</span><span></span></div>

                    <p>确定安装此算法？</p>

                  </div>`,

        confirmButtonText: '安装',

        cancelButtonText: '取消',

        dangerouslyUseHTMLString: true,

        type: ''

      }).then(() => {

        this.isInstall = true;

        //安装

        installSdk(file).then(res => {

          if (res.success) {



            this.isInstall = false;

            //this.$refs['progressBar'].style.width = 100%

            //this.installPercentage = 100%

            this.$message({

              type: 'success',

              message: '安装成功,将跳转至我的算法中查看'

            });

            setTimeout(() => {

              this.findAllSdk();

              this.activeName = 'myAlgorithm';

            }, 3000)

          }

        });

      }).catch(() => {

        console.log('取消安装')

      })



    },



@@ -1451,10 +1572,9 @@
.installInfo {

  text-indent: 2em;

  font-size: 14px;

  color: #777;

  line-height: 26px;

  p {

    text-align: center;

    color: #666;

  }

}

.src-title {


 src/pages/ai/index/api.ts

@@ -126,7 +126,7 @@
    data: query

  })

}



//安装算法

export const downloadSdk = (query: any) => {

  return request({

    url: '/data/api-v/sdk/sdkDownload',

@@ -134,7 +134,14 @@
    params: query

  })

}



//上传完成获取安装信息

export const getInstallInfo = (data: any) => {

  return request({

    url: '/data/api-v/sdk/showInstallInfo',

    method: 'post',

    params: data

  })

}

//安装已上传的算法接口

export const installSdk = (file: any) => {

  return request({


 src/pages/settings/components/ClusterManagement.vue

@@ -4,7 +4,7 @@
      <div class="ui-top-title">视频分析集群管理</div>
    </div>
    <el-row>
      <el-col :span="12">
      <el-col :span="12" >
        <el-tabs v-model="activeName" id="e-alaycluster" v-if="!isHasColony">
          <el-tab-pane label="创建集群" name="1" :disabled="isHasColony">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
@@ -22,18 +22,23 @@

              <!-- <el-form-item label="虚拟IP" prop="virtualip">
                <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
              </el-form-item> -->
              </el-form-item>-->
              <el-form-item style="width:500px">
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          

          <!-- 加入已有集群 -->
          <el-tab-pane label="加入已有集群" name="3" :disabled="isHasColony">
          <el-tab-pane label="加入已有集群" name="2" :disabled="isHasColony">
            <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm">
              <el-form-item label="IP地址" style="width:440px">
                <el-input v-model="joinForm.clusterip" placeholder="请输入集群内任意IP地址" size="small">
                <el-input
                  v-model="joinForm.clusterip"
                  placeholder="请输入集群内任意IP地址"
                  size="small"
                  autocomplete="new-password"
                >
                  <el-button
                    type="text"
                    slot="suffix"
@@ -54,6 +59,7 @@
                  placeholder="请输入集群密码"
                  show-password
                  size="small"
                  autocomplete="new-password"
                ></el-input>
              </el-form-item>
              <el-form-item style="width:440px">
@@ -82,7 +88,7 @@

            <!-- <el-form-item label="虚拟IP" prop="virtualip">
              <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
            </el-form-item> -->
            </el-form-item>-->
            <el-form-item style="width:440px;text-align: right;">
              <el-button size="small" type="danger" @click="leave">退出集群</el-button>
              <el-button
@@ -95,7 +101,7 @@
          </el-form>
        </div>
      </el-col>
      <el-col :span="14" style="height: 100%;" v-if="members.length !== 0">
      <el-col :span="10" style="height: 100%;" v-if="members.length !== 0">
        <serfDiagram
          ref="diagram"
          :members="members"
@@ -134,7 +140,12 @@
          <el-tab-pane label="加入已有集群" name="s-second">
            <el-form label-width="80px">
              <el-form-item label="IP地址" style="text-align: left;">
                <el-input v-model="clusterip2" placeholder="请输入集群内任意IP地址" size="small">
                <el-input
                  v-model="clusterip2"
                  placeholder="请输入集群内任意IP地址"
                  size="small"
                  autocomplete="off"
                >
                  <el-button
                    type="text"
                    slot="suffix"
@@ -188,7 +199,7 @@
    serfDiagram,
    ipInput
  },
  data() {
  data () {
    const checkPwd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
@@ -285,16 +296,16 @@
  },
  watch: {},
  methods: {
    cleanValue() {
    cleanValue () {
      this.members = [];
    },
    sHandleClick(tab, event) {
    sHandleClick (tab, event) {
      console.log(tab, event);
    },
    submitForm(formName) {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          //alert("submit!");
          let json = {
            clusterId: this.clusterid,
            clusterName: this.ruleForm.clustername,
@@ -310,7 +321,7 @@
        }
      });
    },
    saveForm(formName) {
    saveForm (formName) {
      debugger
      this.$refs[formName].validate(valid => {
        if (valid) {
@@ -319,7 +330,7 @@
            enable: this.vrIpForm.enable,
            serve_port: this.vrIpForm.serve_port,
            virtual_ip: this.vrIpForm.virtual_ip,
            

          };
          setVrrp(json).then(() => {
            this.getVrrpInfo();
@@ -330,7 +341,7 @@
        }
      });
    },
    join(formName) {
    join (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (Object.keys(this.currentCluster).length === 0) {
@@ -358,7 +369,7 @@
        }
      });
    },
    async createColony(json) {
    async createColony (json) {
      let res = await createColony(json);
      console.log(res, "创建集群");
      this.$notify({
@@ -367,15 +378,16 @@
        type: res.success ? "success" : "error"
      });
    },
    async randomPwd() {
    async randomPwd () {
      let res = await randomPwd();
      if (res && res.success) {
        this.ruleForm.clusterpwd = res.data;
      }
    },
    async searchColony() {
    async searchColony () {
      this.$refs["joinForm"].validate(valid => {
        if (valid) {
          this.members = [];
          let json = {
            password: this.joinForm.clusterpwd,
            ip: this.joinForm.clusterip
@@ -398,7 +410,7 @@
        }
      });
    },
    async search(json) {
    async search (json) {
      let res = await search(json);
      if (res && res.success) {
        console.log(res, "搜索集群");
@@ -410,7 +422,7 @@
        this.stopSearch();
      }, 10 * 1000);
    },
    async getSearchNodes() {
    async getSearchNodes () {
      let res = await getSearchNodes();
      if (res && res.success) {
        let list = res.data.map(i => {
@@ -434,12 +446,12 @@
        });
      }
    },
    setSchedule() {
    setSchedule () {
      this.scheduleId = window.setInterval(() => {
        this.getSearchNodes();
      }, 1000);
    },
    async stopSearch() {
    async stopSearch () {
      if (!this.loading) {
        return true;
      }
@@ -464,7 +476,7 @@
        // },2000)
      })
    },
    async findCluster() {
    async findCluster () {
      let res = await findCluster();
      if (res && res.success) {
        if (res.data && res.data.clusterId) {
@@ -494,17 +506,17 @@
        }
      }
    },
    getVrrpInfo(){
      getVrrp().then(res=>{
        if(res.success){
    getVrrpInfo () {
      getVrrp().then(res => {
        if (res.success) {
          this.vrIpForm.virtual_ip = res.data.virtual_ip;
          this.vrIpForm.enable = res.data.enable;
        }
      }).catch(e=>{
      }).catch(e => {
        console.log(e)
      })
    },
    async updateClusterName() {
    async updateClusterName () {
      let res = await updateClusterName({
        clusterName: this.mangeForm.colonyName
      });
@@ -514,7 +526,7 @@
        type: res.success ? "success" : "error"
      });
    },
    async joinCluster(json) {
    async joinCluster (json) {
      let res = await joinCluster(json);
      if (res.success) {
        this.members = []
@@ -525,7 +537,7 @@
        type: res.success ? "success" : "error"
      });
    },
    leave() {
    leave () {
      this.$confirm(`确定退出集群吗?`, {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
@@ -546,9 +558,10 @@
          this.members = [];
        }
      }).catch(() => { });
      

    },
    joinNode(event, node) {
    joinNode (event, node) {
      debugger
      this.currentCluster.cluster_id = node.cluster_id;
      if (this.activeName === "3") {
        this.manageForm.clustername = node.clusterName;
@@ -592,7 +605,7 @@
        });
      }
    },
    generatePassword() {
    generatePassword () {
      var chars =
        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      var uuid = [];
@@ -603,15 +616,15 @@

      this.ruleForm.clusterpwd = uuid.join("");
    },
    onIpBlur(ip) {
    onIpBlur (ip) {
      this.vrIpForm.virtual_ip = ip;
    }
  },
  mounted() {
  mounted () {
    this.findCluster();
    this.getVrrpInfo();
  },
  created() { }
  created () { }
};
</script>
<style lang="scss">