From 4f224106d9870ff438ebe5b142c5a2b641f45107 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 4 Mar 2021 16:11:11 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9Etermail=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/cli/console.vue  |   3 +-
 .../components/common/bottomBox/bottomBox.vue |   6 +-
 .../bottomBox/tabs/terminalLogMonitorTab.vue  | 343 ++++++++++++++++++
 .../components/common/project/topologyL5.vue  |   4 +-
 .../components/page/config/terminallog.vue    |  20 +-
 5 files changed, 367 insertions(+), 9 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue

diff --git a/nezha-fronted/src/components/cli/console.vue b/nezha-fronted/src/components/cli/console.vue
index bee884e55..c6fbbf33e 100644
--- a/nezha-fronted/src/components/cli/console.vue
+++ b/nezha-fronted/src/components/cli/console.vue
@@ -276,7 +276,8 @@ export default {
       //关闭
       this.terminalSocket.onclose = () =>{
         //报错sorry的，还没来得及看信息就关闭
-        this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
+        // this.$emit("closeConsole",this.terminal.name);//
+        this.term.setOption('disableStdin',true);
       };
 
 
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index d7b9ace0b..b46f87067 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -34,6 +34,8 @@
       <terminal-log-cmd-tab :from="from" :obj="obj" @changeTab="changeTab" ref="reminalLogCMDTab" v-if="from == $CONSTANTS.fromRoute.terminalLog && targetTab == 'cmd'"></terminal-log-cmd-tab>
       <terminal-log-record-tab :from="from" :obj="obj" @changeTab="changeTab" ref="reminalLogRecordTab" v-if="from == $CONSTANTS.fromRoute.terminalLog && targetTab == 'record'"></terminal-log-record-tab>
 
+      <terminal-log-monitor-tab @exit="closeSubList" :from="from" :obj="obj" @changeTab="changeTab" ref="reminalLogRecordTab" v-if="from == $CONSTANTS.fromRoute.terminalLog && targetTab == 'monitor'"></terminal-log-monitor-tab>
+
     </div>
   </div>
 </template>
@@ -45,6 +47,7 @@
   import endpointTab from "./tabs/endpointTab";
   import panelTab from "./tabs/panelTab";
   import terminalLogRecordTab from "./tabs/terminalLogRecordTab";
+  import terminalLogMonitorTab from "./tabs/terminalLogMonitorTab";
   import terminalLogCMDTab from "./tabs/terminalLogCMDTab";
 
   export default {
@@ -56,7 +59,8 @@
       'endpoint-tab': endpointTab,
       'panel-tab': panelTab,
       terminalLogRecordTab,
-      'terminal-log-cmd-tab': terminalLogCMDTab
+      'terminal-log-cmd-tab': terminalLogCMDTab,
+      terminalLogMonitorTab
     },
     props: {
       isFullScreen: false, //是否全屏
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
new file mode 100644
index 000000000..75abf0c3e
--- /dev/null
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
@@ -0,0 +1,343 @@
+<template>
+  <div class="replay-tab" ref="replayTab">
+    <div class="sub-top-tools">
+      <div class="sub-list-tabs">
+        <div class="sub-list-tab-title">ID：{{obj.id}}</div>
+        <div class="sub-list-tab sub-list-tab-active">{{$t("config.terminallog.monitor.monitor")}}</div>
+      </div>
+    </div>
+    <div class="replay-container">
+      <div class="replay-operate">
+        <div>
+          <button :title="$t('config.terminallog.record.pause')" @click="shutdown" class="nz-btn nz-btn-style-light nz-btn-size-large" id="terminal-kill" v-show="isPlaying"><i class="nz-icon nz-icon-ZD"></i></button>
+        </div>
+      </div>
+      <div class="record-console" ref="recordConsole">
+        <div :id="obj.uuid" class="record-terminal"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Terminal from '../../js/Xterm';
+  import bus from "../../../../libs/bus";
+
+  export default {
+    name: "terminalLogReplayTab",
+    components: {
+      Terminal
+    },
+    props: {
+      obj: Object, //关联的实体对象
+    },
+    data() {
+      return {
+        filter: {
+          size: 1,
+          uuid: ""
+        },
+        terminal: null,
+        term: null,
+        terminalSocket: null,
+        recordData: [],
+        isNeedStop: false, // 是否需要停止
+        playedCount: 0, // 当前已经播放完的数量
+        isPlaying: true, // 是否正在播放
+        isFinish: false, //是否已结束
+        isDragging: false, //是否正在拖动进度条
+        draggingOriginalX: 0, //开始拖拽时鼠标的x
+        draggingOriginalProgress: 0, //开始拖拽时的进度
+        recordTick: 50, // 输出间隔时间ms，默认50
+        playerTimer: null, // 定时器
+        playerCurrentTime: 0, // 当前时间进度
+        speedTable: [ // 快进倍速选项
+          {speed: 1, name: '×1'},
+          {speed: 2, name: '×2'},
+          {speed: 4, name: '×4'},
+          {speed: 8, name: '×8'},
+          {speed: 16, name: '×16'}
+        ],
+        speedOffset: 0, // 快进倍数index
+        progress: 0, // 进度条进度
+        needSkip: true, // 是否跳过无操作时间，为true时表示需要，即不跳过无操作时间
+        timeUsed: 0,
+        successBackContent:'Connecting to',
+        failBackContent:'Sorry',
+        connectFailContent:'Connection failed',
+        welcomeBackContent:'Welcome',
+        psdCont:'password: ',
+      }
+    },
+    methods: {
+      //创建连接
+      create(){
+        let that = this;
+        if (this.terminal) {
+          this.terminal.reset(parseInt(this.$refs.recordConsole.offsetWidth/11), parseInt(this.$refs.recordConsole.offsetHeight/18));
+        } else {
+          this.terminal = new Terminal({
+            rows: parseInt(this.$refs.recordConsole.offsetHeight/18),
+            cols: parseInt(this.$refs.recordConsole.offsetWidth/11),
+            cursorStyle:'block', // 光标样式  null | 'block' | 'underline' | 'bar'
+            //bellStyle:'sound',
+            disableStdin:true,//是否应禁用输入
+          });
+          this.terminal.open(document.getElementById(this.obj.uuid));
+
+          let token = sessionStorage.getItem('nz-token');
+          let baseUrl = this.$axios.defaults.baseURL;
+          if (baseUrl.startsWith("/")) {
+            baseUrl = "ws://" + window.location.host + baseUrl;
+          } else {
+            baseUrl = baseUrl.replace("http://", "ws://").replace("https://", "ws://");
+          }
+          ///monitor
+          let url = baseUrl+"/terminal/monitor.ws?"+"&token="+token+"&uuid="+this.obj.uuid;
+          console.info(url);
+          if(this.terminalSocket){//如果存在之前的链接 先断开 再链接新的
+            this.terminalSocket.close();
+          }
+          this.terminalSocket = new WebSocket(url);
+//连接成功
+          this.terminalSocket.onopen = () =>{
+          };
+          //登录后，你输入的内容从后台服务返回
+          this.terminal.on("data", function(data) {
+            console.log(data,'data')
+            /*
+            let code = data.charCodeAt(0);
+            if(code==13){
+            }else {
+              //that.term.write(data);
+            }*/
+          });
+          //返回
+          this.terminalSocket.onmessage = function(evt) {
+            console.log(evt,'evt')
+            let backContent = evt.data;
+            /*
+            if(that.inputSecret){//当前为密码输入状态
+            }
+            if(backContent.length>1){
+              let pwdInput = backContent.endsWith(that.psdCont);
+              if(pwdInput){//输入密码
+                that.inputSecret = true;
+              }
+            }*/
+
+            let welComIndex = backContent.indexOf(that.welcomeBackContent);
+            if(welComIndex>-1){//无服务器信息（只与nezha进行了连接）
+              const connectResult = {
+                title:'',
+                color:1,
+              };
+              that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
+            }else {
+              let successContentIndex = backContent.indexOf(that.successBackContent);
+              if(successContentIndex>-1 ){
+                //that.conFinish = true;
+                let startIndex = successContentIndex+that.successBackContent.length+1;
+                backContent = backContent.substring(startIndex);
+                let endIndex = backContent.indexOf('\r\n');
+                let title = backContent.substring(0,endIndex);
+                const connectResult = {
+                  title:title,
+                  color:2,
+                };
+                that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
+              }else {//失败
+                let failContentIndex = backContent.indexOf(that.failBackContent);
+                let connectFailIndex = backContent.indexOf(that.connectFailContent);
+                if(failContentIndex>-1 ){
+                  //that.conFinish = true;
+                  const connectResult = {
+                    title:'',
+                    color:3,
+                  };
+                  that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
+                }else if(connectFailIndex>-1){
+                  let startIndex = successContentIndex+that.successBackContent.length+1;
+                  backContent = backContent.substring(startIndex);
+                  let endIndex = backContent.indexOf('\r\n');
+                  let title = backContent.substring(0,endIndex);
+                  const connectResult = {
+                    title:'',
+                    color:3,
+                  };
+                  that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
+                }
+              }
+            }
+          };
+          //关闭
+          this.terminalSocket.onclose = () =>{
+            //报错sorry的，还没来得及看信息就关闭
+            // this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
+          };
+
+
+          //错误
+          this.terminalSocket.onerror = (e) =>{};
+          //选中 复制
+          this.terminal.on("selection", function() {});
+          this.terminal.attachCustomKeyEventHandler(function(ev) {  });
+
+          this.terminal.attach(this.terminalSocket);
+          this.terminal._initialized = true;
+          this.terminal.fit();//自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
+          // this.$nextTick(()=>{// 解决进入全屏和退出全屏是底部隐藏
+          //   this.setFontSize(this.fontSize);
+          // })
+        }
+      },
+
+      //关闭连接
+      closeSocket(){
+        if(this.terminalSocket){
+          this.terminalSocket.close();
+        }
+        if(this.terminal) {
+          this.terminal.destroy();
+        }
+      },
+      // 切换tab
+      changeTab(tab) {
+        this.$emit('changeTab', tab);
+      },
+
+      getRecordData() {
+        return new Promise(resolve => {
+          this.$get("/terminal/record", this.filter).then(res => {
+            if (res.code === 200) {
+              this.recordData = res.data.list;
+              this.timeUsed = res.data.endTime;
+            }
+            resolve();
+          });
+        });
+      },
+
+      consoleResize() {
+        this.terminal && this.terminal.resize(parseInt(this.$refs.recordConsole.offsetWidth/11), parseInt(this.$refs.recordConsole.offsetHeight/18));
+        this.$nextTick(() => {
+          this.terminal && this.terminal.fit();
+        });
+      },
+      shutdown(){
+        this.$put("/terminal/kill", {uuid: this.obj.uuid}).then(res => {
+          if (res.code === 200) {
+            this.$message.success(this.$t("config.terminallog.success"));
+            this.$emit('exit')
+          } else {
+            this.$message.error(this.$t("config.terminallog.killErrorTip"));
+          }
+        });
+      },
+    },
+    watch: {
+      // 入口，监听terminal session的变化，开始功能
+      obj: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          if (n.uuid) {
+            this.recordData = [];
+            this.filter.uuid = n.uuid;
+            this.playerCurrentTime = 0;
+            if (this.playerTimer) {
+              clearTimeout(this.playerTimer);
+            }
+            setTimeout(() => {this.create();}, 200);
+          }
+        }
+      },
+      progress(n) {
+        let progressController = document.getElementById("progressController");
+        progressController.style.left = `${n}%`;
+      }
+    },
+    computed: {
+      parseCurrentTime() {
+        let currentTime = parseInt(this.playerCurrentTime/1000);
+        let totalTime = parseInt(this.timeUsed/1000);
+        if (currentTime > totalTime) {
+          currentTime = totalTime;
+        }
+        return `${currentTime} / ${totalTime}`;
+      }
+    },
+    created() {
+      window.addEventListener('resize', bus.debounce(this.consoleResize, 1000));
+    },
+    mounted(){
+
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', bus.debounce);
+      this.closeSocket();
+      this.terminal.off("selection");
+      this.terminal.off("data")
+    },
+  }
+</script>
+
+<style lang="scss">
+  .replay-tab {
+    height: 100%;
+  }
+  .replay-container {
+    height: calc(100% - 40px);
+  }
+  .record-console {
+    padding: 10px 4px 10px 10px;
+    background-color: black;
+    height: calc(100% - 80px);
+  }
+  .terminal-replay-progress {
+    height: 20px;
+    padding: 3px 0;
+    position: relative;
+    width: 500px;
+  }
+  #terminal-kill{
+    margin-bottom: 5px;
+  }
+  .terminal-replay-progress-bar {
+    top: 50%;
+    transform: translateY(-50%);
+
+    .el-progress-bar__inner {
+      transition: unset;
+      user-select: none;
+    }
+  }
+  .replay-operate {
+    .nz-btn {
+      margin-right: 8px;
+
+      .nz-icon {
+        font-size: 14px;
+      }
+    }
+  }
+  .operate-skip {
+    margin: 0 12px !important;
+  }
+  .time-box {
+    border: none;
+    border-radius: 16px;
+  }
+  .progress-controller {
+    position: absolute;
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    background-color: #409eef;
+    top: 50%;
+    transform: translate(-7px, -50%);
+  }
+  .progress-controller:hover {
+    background-color: #207ecf;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index d2056bc5a..3b5601fa2 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -375,7 +375,7 @@
       </div>
 
     </el-dialog>
-    <div class="right-bottom-zoom">
+    <div class="right-bottom-zoom" v-if="!fromOverView&&!editTopologyFlag&&!fromPrev">
       <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
       <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
     </div>
@@ -1477,7 +1477,7 @@
             case 'space':
             case 'scale':
             case 'translate':
-                  this.getNodesArr();
+              this.getNodesArr();
               // if(!this.timer2){
               //   this.timer2=setTimeout(()=>{
               //     this.getNodesArr();
diff --git a/nezha-fronted/src/components/page/config/terminallog.vue b/nezha-fronted/src/components/page/config/terminallog.vue
index 1bc108b89..78d925e51 100644
--- a/nezha-fronted/src/components/page/config/terminallog.vue
+++ b/nezha-fronted/src/components/page/config/terminallog.vue
@@ -64,7 +64,7 @@
               <template v-if="scope.row.status == 0">
                 <span :id="'terminalLog-shutdown-'+scope.row.id" @click="shutdown(scope.row)" class="content-right-option" title="Kill"><i class="nz-icon nz-icon-ZD"></i></span>
                 &nbsp;
-                <span :id="'terminalLog-monitor-'+scope.row.id" :title="$t('config.terminallog.monitoring')" @click="monitor(scope.row)" class="content-right-option"><i class="nz-icon nz-icon-JC"></i></span>
+                <span :id="'terminalLog-monitor-'+scope.row.id" :title="$t('config.terminallog.monitor.monitor')" @click="monitor(scope.row)" class="content-right-option"><i class="nz-icon nz-icon-JC"></i></span>
               </template>
               <template v-else>
                 <span :id="'terminalLog-replay-'+scope.row.id" :title="$t('config.terminallog.record.record')" @click="showRecord(scope.row)" class="content-right-option"><i class="nz-icon nz-icon-replay2"></i></span>
@@ -92,7 +92,7 @@
 
     <!-- 底部上滑框 -->
     <transition name="el-zoom-in-bottom">
-      <bottom-box :detail="bottomBox.terminalLog" :is-full-screen="bottomBox.isFullScreen" :obj="bottomBox.terminalLog" :sub-resize-show="bottomBox.subResizeShow" :target-tab.sync="bottomBox.targetTab" @closeSubList="bottomBox.showSubList = false" @exitFullScreen="exitFullScreen"
+      <bottom-box :detail="bottomBox.terminalLog" :is-full-screen="bottomBox.isFullScreen" :obj="bottomBox.terminalLog" :sub-resize-show="bottomBox.subResizeShow" :target-tab.sync="bottomBox.targetTab" @closeSubList="closeSubList" @exitFullScreen="exitFullScreen"
                   @fullScreen="fullScreen" @listResize="listResize" from="terminal" v-if="bottomBox.showSubList" ></bottom-box>
     </transition>
   </div>
@@ -295,18 +295,22 @@
         this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record));
         this.bottomBox.showSubList = true;
       },
+      monitor(record) {
+        this.bottomBox.targetTab = 'monitor';
+        this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record));
+        this.bottomBox.showSubList = true;
+        console.log(record);
+      },
       shutdown(record) {
         this.$put("/terminal/kill", {uuid: record.uuid}).then(res => {
           if (res.code === 200) {
             this.$message.success(this.$t("config.terminallog.success"));
+            this.bottomBox.showSubList = false;
             this.getTableData();
           } else {
             this.$message.error(this.$t("config.terminallog.killErrorTip"));
           }
         });
-      },
-      monitor(record) {
-        
       },
       // 全屏
       fullScreen() {
@@ -365,6 +369,12 @@
         }
         this.getTableData();
       },
+      closeSubList(){
+        this.bottomBox.showSubList = false;
+        if( this.bottomBox.targetTab == 'monitor'){
+          this.getTableData();
+        }
+      },
       // 数据排序
       tableDataSort(item){
         let orderBy='';