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>