NEZ-2358 feat ：teminal sftp 二级页面开发

2022-11-07 09:31:36 +08:00
parent ed35625e9e
commit 97c56b4de9
8 changed files with 279 additions and 26 deletions
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -27,8 +27,9 @@
        <endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab" :targetTab.sync="targetTab"></endpoint-tab>

        <!--terminal-log的记录和回放-->
-        <terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.cmd" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-cmd-tab>
-        <terminal-log-record-tab v-if="from === fromRoute.terminalLog && targetTab === 'recordTab'" ref="reminalLogRecordTab" :from="from" :obj="obj" :tabs="tabs.terminalLog.record" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-record-tab>
+        <terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-cmd-tab>
+        <terminal-log-sftp-tab v-if="from === fromRoute.terminalLog && targetTab === 'sftpTab' && obj.protocol == 'SSH'" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-sftp-tab>
+        <terminal-log-record-tab v-if="from === fromRoute.terminalLog && targetTab === 'recordTab'" ref="reminalLogRecordTab" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-record-tab>
        <terminal-log-monitor-tab v-if="from === fromRoute.terminalLog && targetTab === 'monitorTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.monitor" @changeTab="changeTab" @exit="closeSubList" :targetTab.sync="targetTab"></terminal-log-monitor-tab>

        <asset-tab v-if="from === fromRoute.dc && targetTab === 'asset'" :tabs="tabs.dc.asset" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList" :targetTab.sync="targetTab"></asset-tab>
@@ -93,6 +94,7 @@ import endpointTab from './tabs/endpointTab'
 import endpointTabNew from './tabs/endpointTabNew'
 import panelTabNew from './tabs/panelTabNew'
 import terminalLogRecordTab from './tabs/terminalLogRecordTab'
+import terminalLogSftpTab from './tabs/terminalLogSftpTab'
 import terminalLogMonitorTab from './tabs/terminalLogMonitorTab'
 import terminalLogCMDTab from './tabs/terminalLogCMDTab'
 import operationLogTab from './tabs/operationLogTab'
@@ -119,6 +121,7 @@ export default {
    alertMessageTab,
    endpointTab,
    terminalLogRecordTab,
+    terminalLogSftpTab,
    terminalLogMonitorTab,
    operationLogTab,
    terminalLogTab,
@@ -160,15 +163,15 @@ export default {
        terminalLog: {
          monitor: [
            { prop: 'monitorTab', name: this.$t('config.terminallog.monitor.monitor'), active: true }
-          ],
-          cmd: [
-            { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: true },
-            { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: false }
-          ],
-          record: [
-            { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: false },
-            { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: true }
          ]
+        //   // cmd: [
+        //   //   { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: true },
+        //   //   { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: false }
+        //   // ],
+        //   // record: [
+        //   //   { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: false },
+        //   //   { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: true }
+        //   // ]
        },
        user: {
          operationLog: [
@@ -261,6 +264,17 @@ export default {
    }
  },
  computed: {
+    hasTerminalLogTabs () {
+      const hasSftp = this.obj && this.obj.protocol == 'SSH'
+      const tabs = [
+        { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd') },
+        { prop: 'recordTab', name: this.$t('config.terminallog.record.record') }
+      ]
+      if (hasSftp) {
+        tabs.splice(1, 0, { prop: 'sftpTab', name: 'SFTP ' })
+      }
+      return tabs
+    },
    hasLogConfig () {
      const config = this.obj.configs.find(c => c.type === 'logs')
      return config && config.enable === 1
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogCMDTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogCMDTab.vue
@@ -93,7 +93,8 @@ export default {
      records: [ // 加载更多时有多个record，否则只有一个

      ],
-      tableId: 'terminaLogCMDTab'
+      tableId: 'terminaLogCMDTab',
+      detailType: 'list'
    }
  },
  methods: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
@@ -78,7 +78,8 @@ export default {
      speedOffset: 0, // 快进倍数index
      progress: 0, // 进度条进度
      needSkip: true, // 是否跳过无操作时间，为true时表示需要，即不跳过无操作时间
-      timeUsed: 0
+      timeUsed: 0,
+      detailType: 'list'
    }
  },
  methods: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogSftpTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogSftpTab.vue
@@ -0,0 +1,109 @@
+<template>
+  <nz-bottom-data-list
+    :showTitle='showTitle'
+    :obj='obj'
+    :tableId="tableId"
+    id="sftpBottomTab"
+    :api="url"
+    :custom-table-title.sync="tools.customTableTitle"
+    :layout="['elementSet']"
+    :tabs="tabs"
+    :targetTab="targetTab"
+    :showPagination="false"
+    @changeTab="changeTab"
+    :title="'Session ID'"
+  >
+    <template v-slot:title><span :title="obj.uuid.substring(0, 8).toUpperCase()">{{obj.uuid.substring(0, 8).toUpperCase()}}</span></template>
+    <template v-slot>
+      <terminalLogSftpTable
+        ref="dataTable"
+        :orderByFa="'id'"
+        v-my-loading="tools.loading"
+        :loading="tools.loading"
+        :api="url"
+        :custom-table-title="tools.customTableTitle"
+        :height="subTableHeight"
+        :table-data="tableData"
+        :terminaLogTab="true"
+        @del="del"
+        @edit="edit"
+        @tableDataSort="tableDataSort"
+        @reload="getTableData"
+        @selectionChange="selectionChange"></terminalLogSftpTable>
+    </template>
+  </nz-bottom-data-list>
+</template>
+
+<script>
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import terminalLogSftpTable from '@/components/common/table/settings/terminalLogSftpTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+
+export default {
+  name: 'sftpBottomTab',
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
+  components: {
+    nzBottomDataList,
+    terminalLogSftpTable
+  },
+  props: {
+    obj: Object,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      url: '/mock/terminal/sftp/log/',
+      tableId: 'sftpTable', // 需要分页的table的id，用于记录每页数量
+      detailType: 'list',
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: []
+      },
+      searchLabel: {},
+      tableData: [],
+      orderBy: { order: 'ascending', prop: 'id' }
+    }
+  },
+  methods: {
+    async getTableData () {
+      this.$set(this.searchLabel, 'uuid', this.obj.uuid)
+      this.tools.loading = true
+      this.$get(this.url, this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          // this.tableData = response.data.list
+          this.tableData = this.filterShowData(response.data.list, this.orderBy)
+          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    // 数据排序
+    tableDataSort (item) {
+      this.orderBy = item
+      this.filterShowData(this.tableData, item)
+    },
+    filterShowData (source, ord) {
+      let orderBy = null
+      orderBy = ord
+      if (orderBy.order === 'ascending') {
+        source = source.sort(this.$tableSet.asce(orderBy.prop))
+      }
+      if (orderBy.order === 'descending') {
+        source = source.sort(this.$tableSet.desc(orderBy.prop))
+      }
+      return source
+    }
+
+  }
+}
+</script>
--- a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
@@ -10,8 +10,9 @@
      <endpoint-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab" :targetTab="targetTab"></endpoint-tab>

      <!--terminal-log的记录和回放-->
-      <terminal-log-cmd-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.cmd" @changeTab="changeTab" :targetTab="targetTab"></terminal-log-cmd-tab>
-      <terminal-log-record-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'recordTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.record" @changeTab="changeTab" :targetTab="targetTab"></terminal-log-record-tab>
+      <terminal-log-cmd-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab="targetTab"></terminal-log-cmd-tab>
+      <terminal-log-sftp-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'sftpTab' && obj.protocol == 'SSH'" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-sftp-tab>
+      <terminal-log-record-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'recordTab'" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab="targetTab"></terminal-log-record-tab>
      <terminal-log-monitor-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'monitorTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.monitor" @changeTab="changeTab" @exit="closeSubList" :targetTab="targetTab"></terminal-log-monitor-tab>

      <asset-tab :showTitle="false" v-if="from === fromRoute.dc && targetTab === 'asset'" :tabs="tabs.dc.asset" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList" :targetTab="targetTab"></asset-tab>
@@ -62,6 +63,7 @@ import endpointTab from '@/components/common/bottomBox/tabs/endpointTab'
 import endpointTabNew from '@/components/common/bottomBox/tabs/endpointTabNew'
 import panelTabNew from '@/components/common/bottomBox/tabs/panelTabNew'
 import terminalLogRecordTab from '@/components/common/bottomBox/tabs/terminalLogRecordTab'
+import terminalLogSftpTab from '@/components/common/bottomBox/tabs/terminalLogSftpTab'
 import terminalLogMonitorTab from '@/components/common/bottomBox/tabs/terminalLogMonitorTab'
 import terminalLogCMDTab from '@/components/common/bottomBox/tabs/terminalLogCMDTab'
 import operationLogTab from '@/components/common/bottomBox/tabs/operationLogTab'
@@ -83,6 +85,7 @@ export default {
    alertMessageTab,
    endpointTab,
    terminalLogRecordTab,
+    terminalLogSftpTab,
    terminalLogMonitorTab,
    operationLogTab,
    terminalLogTab,
@@ -133,15 +136,15 @@ export default {
        terminalLog: {
          monitor: [
            { prop: 'monitorTab', name: this.$t('config.terminallog.monitor.monitor'), active: true }
-          ],
-          cmd: [
-            { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: true },
-            { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: false }
-          ],
-          record: [
-            { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: false },
-            { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: true }
          ]
+          // cmd: [
+          //   { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: true },
+          //   { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: false }
+          // ],
+          // record: [
+          //   { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: false },
+          //   { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: true }
+          // ]
        },
        user: {
          operationLog: [
@@ -213,6 +216,17 @@ export default {
    }
  },
  computed: {
+    hasTerminalLogTabs () {
+      const hasSftp = this.obj && this.obj.protocol == 'SSH'
+      const tabs = [
+        { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd') },
+        { prop: 'recordTab', name: this.$t('config.terminallog.record.record') }
+      ]
+      if (hasSftp) {
+        tabs.splice(1, 0, { prop: 'sftpTab', name: 'SFTP ' })
+      }
+      return tabs
+    },
    hasLogConfig () {
      const config = this.obj.configs.find(c => c.type === 'logs')
      return config && config.enable === 1
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -1323,10 +1323,12 @@ export default {
    }
    let localStorageTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
    localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : tableTitle
+    if (tableTitle) {
      this.tools.customTableTitle = tableTitle.map((item, index) => { // 修复切换中英文的问题
        item.show = localStorageTableTitle[index].show
        return item
      })
+    }
    if (localStorageTableTitle && (localStorageTableTitle.length > tableTitle.length)) {
      const arr = localStorageTableTitle.splice(tableTitle.length, localStorageTableTitle.length)
      arr.forEach(item => {
--- a/nezha-fronted/src/components/common/mixin/routerPathParams.js
+++ b/nezha-fronted/src/components/common/mixin/routerPathParams.js
@@ -68,6 +68,7 @@ export default {
              configs: this.$refs[detailType].bottomBox.object.configs ? this.$refs[detailType].bottomBox.object.configs.map(item => { return { type: item.type, enable: item.enable } }) : '',
              childrenNum: this.$refs[detailType].bottomBox.object.childrenNum || '',
              clientState: this.$refs[detailType].bottomBox.object.clientState || '',
+              protocol: this.$refs[detailType].bottomBox.object.protocol || '',
              model: {
                tsgAppliance: this.$refs[detailType].bottomBox.object.model ? this.$refs[detailType].bottomBox.object.model.tsgAppliance : ''
              }
@@ -80,6 +81,7 @@ export default {
                configs: this.$refs[detailType].detailViewRightObj.configs ? this.$refs[detailType].detailViewRightObj.configs.map(item => { return { type: item.type, enable: item.enable } }) : '',
                childrenNum: this.$refs[detailType].detailViewRightObj.childrenNum || '',
                clientState: this.$refs[detailType].detailViewRightObj.clientState || '',
+                protocol: this.$refs[detailType].detailViewRightObj.protocol || '',
                model: {
                  tsgAppliance: this.$refs[detailType].detailViewRightObj.model ? this.$refs[detailType].detailViewRightObj.model.tsgAppliance : ''
                }
@@ -96,6 +98,7 @@ export default {
            configs: this.bottomBox.object.configs ? this.bottomBox.object.configs.map(item => { return { type: item.type, enable: item.enable } }) : '',
            childrenNum: this.bottomBox.object.childrenNum || '',
            clientState: this.bottomBox.object.clientState || '',
+            protocol: this.bottomBox.object.protocol || '',
            model: {
              tsgAppliance: this.bottomBox.object.model ? this.bottomBox.object.model.tsgAppliance : ''
            }
@@ -109,6 +112,7 @@ export default {
            configs: this.detailViewRightObj.configs ? this.detailViewRightObj.configs.map(item => { return { type: item.type, enable: item.enable } }) : '',
            childrenNum: this.detailViewRightObj.childrenNum || '',
            clientState: this.detailViewRightObj.clientState || '',
+            protocol: this.detailViewRightObj.protocol || '',
            model: {
              tsgAppliance: this.detailViewRightObj.model ? this.detailViewRightObj.model.tsgAppliance : ''
            }
--- a/nezha-fronted/src/components/common/table/settings/terminalLogSftpTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/terminalLogSftpTable.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-table
+    id="terminalLogSftpTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    tooltip-effect="light"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+    @row-dblclick="(row)=>{queryMessage(row)}"
+  >
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :show-overflow-tooltip="item.prop === 'description'"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'id'">
+          {{scope.row[item.prop] ? scope.row[item.prop] : '-'}}
+        </template>
+        <template v-else-if="item.prop === 'ts'">
+           {{scope.row[item.prop] ? momentTz(scope.row[item.prop]) : '-'}}
+        </template>
+        <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
+        <template v-else>-</template>
+      </template>
+    </el-table-column>
+    <template slot="empty">
+      <div  v-if="!loading"  class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'terminalLogSftpTable',
+  mixins: [table],
+  props: {
+    loading: Boolean
+  },
+  components: {},
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 120,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          width: 150,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          width: 150,
+          show: true,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.time'),
+          prop: 'ts',
+          show: true,
+          width: 150,
+          sortable: 'custom'
+        }
+      ]
+    }
+  },
+  methods: {
+    // 数据排序
+    tableDataSort (item) {
+      const orderBy = { order: item.order, prop: item.prop }
+      this.$emit('tableDataSort', orderBy)
+    }
+
+  }
+}
+</script>
+<style>
+</style>