feat: 主机连接日志.

2023-12-27 12:31:18 +08:00
parent 459002f666
commit 6fdd29b3fe
18 changed files with 147 additions and 97 deletions
--- a/orion-ops-ui/src/api/asset/host-connect-log.ts
+++ b/orion-ops-ui/src/api/asset/host-connect-log.ts
@@ -12,8 +12,7 @@ export interface HostConnectLogQueryRequest extends Pagination {
  type?: string;
  token?: string;
  status?: string;
-  startTimeStart?: string;
-  startTimeEnd?: string;
+  startTimeRange?: string[];
 }

 /**
--- a/orion-ops-ui/src/api/user/operator-log.ts
+++ b/orion-ops-ui/src/api/user/operator-log.ts
@@ -11,8 +11,7 @@ export interface OperatorLogQueryRequest extends Pagination {
  type?: string;
  riskLevel?: string;
  result?: number;
-  startTimeStart?: string;
-  startTimeEnd?: string;
+  startTimeRange?: string[];
 }

 /**
--- a/orion-ops-ui/src/components/asset/host/host-selector.vue
+++ b/orion-ops-ui/src/components/asset/host/host-selector.vue
@@ -0,0 +1,65 @@
+<template>
+  <a-select v-model:model-value="value"
+            :options="optionData"
+            :loading="loading"
+            placeholder="请选择主机"
+            allow-clear />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { SelectOptionData } from '@arco-design/web-vue';
+  import { computed, onBeforeMount, ref } from 'vue';
+  import { useCacheStore } from '@/store';
+  import useLoading from '@/hooks/loading';
+
+  const props = defineProps({
+    modelValue: Number
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const { loading, setLoading } = useLoading();
+  const cacheStore = useCacheStore();
+
+  const value = computed<number>({
+    get() {
+      return props.modelValue as number;
+    },
+    set(e) {
+      if (e) {
+        emits('update:modelValue', e);
+      } else {
+        emits('update:modelValue', null);
+      }
+    }
+  });
+  const optionData = ref<Array<SelectOptionData>>([]);
+
+  // 初始化选项
+  onBeforeMount(async () => {
+    setLoading(true);
+    try {
+      const hosts = await cacheStore.loadHosts();
+      optionData.value = hosts.map(s => {
+        return {
+          label: `${s.name} - ${s.address}`,
+          value: s.id,
+        };
+      });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/orion-ops-ui/src/views/asset/grant/components/host-list.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/host-list.vue
@@ -15,11 +15,13 @@
    </template>
    <!-- 数据 -->
    <template #item="{ item }">
-      <a-list-item :title="`${item.name}(${item.code}) - ${item.address}`">
-        <icon-desktop class="host-list-icon" />
-        <span>{{ `${item.name}(${item.code}) - ` }}</span>
-        <span class="span-blue">{{ item.address }}</span>
-      </a-list-item>
+      <a-tooltip :content="`${item.name} - ${item.address}`">
+        <a-list-item>
+          <icon-desktop class="host-list-icon" />
+          <span>{{ `${item.name} - ` }}</span>
+          <span class="span-blue">{{ item.address }}</span>
+        </a-list-item>
+      </a-tooltip>
    </template>
  </a-list>
 </template>
--- a/orion-ops-ui/src/views/asset/host-connect-log/components/host-connect-log-table.vue
+++ b/orion-ops-ui/src/views/asset/host-connect-log/components/host-connect-log-table.vue
@@ -3,21 +3,21 @@
  <a-card class="general-card table-search-card">
    <a-query-header :model="formModel"
                    label-align="left"
+                    :itemOptions="{ 5: { span: 2 } }"
                    @submit="fetchTableData"
-                    @reset="reset"
+                    @reset="fetchTableData"
                    @keyup.enter="() => fetchTableData()">
-      <!-- 用户 -->
-      <a-form-item field="userId" label="用户" label-col-flex="50px">
+      <!-- 连接用户 -->
+      <a-form-item field="userId" label="连接用户" label-col-flex="50px">
        <user-selector v-model="formModel.userId"
                       placeholder="请选择用户"
                       allow-clear />
      </a-form-item>
-      <!-- 主机 -->
-      <a-form-item field="hostId" label="主机" label-col-flex="50px">
-        <a-input-number v-model="formModel.hostId"
-                        placeholder="FIXME 请输入主机"
-                        allow-clear
-                        hide-button />
+      <!-- 连接主机 -->
+      <a-form-item field="hostId" label="连接主机" label-col-flex="50px">
+        <host-selector v-model="formModel.hostId"
+                       placeholder="请选择主机"
+                       allow-clear />
      </a-form-item>
      <!-- 主机地址 -->
      <a-form-item field="hostAddress" label="主机地址" label-col-flex="50px">
@@ -35,12 +35,12 @@
        <a-input v-model="formModel.token" placeholder="请输入token" allow-clear />
      </a-form-item>
      <!-- 开始时间 -->
-      <a-form-item field="startTime" label="开始时间" label-col-flex="50px">
-        <a-range-picker v-model="timeRange"
+      <a-form-item field="startTimeRange" label="开始时间" label-col-flex="50px">
+        <a-range-picker v-model="formModel.startTimeRange"
+                        style="width: 100%"
                        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
                        show-time
-                        format="YYYY-MM-DD HH:mm:ss"
-                        @ok="timeRangePicked" />
+                        format="YYYY-MM-DD HH:mm:ss" />
      </a-form-item>
    </a-query-header>
  </a-card>
@@ -69,6 +69,14 @@
             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
             @page-size-change="(size) => fetchTableData(1, size)"
             :bordered="false">
+      <!-- 连接用户 -->
+      <template #username="{ record }">
+        {{ record.userId }} - {{ record.username }}
+      </template>
+      <!-- 连接主机 -->
+      <template #hostName="{ record }">
+        {{ record.hostId }} - {{ record.hostName }}
+      </template>
      <!-- 主机地址 -->
      <template #hostAddress="{ record }">
        <span class="copy-left" title="复制" @click="copy(record.hostAddress)">
@@ -104,6 +112,7 @@
  import { useDictStore } from '@/store';
  import useCopy from '@/hooks/copy';
  import UserSelector from '@/components/user/user/user-selector.vue';
+  import HostSelector from '@/components/asset/host/host-selector.vue';

  const emits = defineEmits(['openAdd', 'openUpdate']);

@@ -114,7 +123,6 @@
  const { toOptions, getDictValue } = useDictStore();
  const { copy } = useCopy();

-  const timeRange = ref<string[]>([]);
  const formModel = reactive<HostConnectLogQueryRequest>({
    userId: undefined,
    hostId: undefined,
@@ -122,16 +130,9 @@
    type: undefined,
    token: undefined,
    status: undefined,
-    startTimeStart: undefined,
-    startTimeEnd: undefined,
+    startTimeRange: undefined,
  });

-  // 选择时间
-  const timeRangePicked = (e: string[]) => {
-    formModel.startTimeStart = e[0];
-    formModel.startTimeEnd = e[1];
-  };
-
  // 加载数据
  const doFetchTableData = async (request: HostConnectLogQueryRequest) => {
    try {
@@ -152,14 +153,6 @@
    doFetchTableData({ page, limit, ...form });
  };

-  // 重置
-  const reset = () => {
-    timeRange.value = [];
-    formModel.startTimeStart = undefined;
-    formModel.startTimeEnd = undefined;
-    fetchTableData();
-  };
-
  onMounted(() => {
    fetchTableData();
  });
--- a/orion-ops-ui/src/views/asset/host-connect-log/types/table.columns.ts
+++ b/orion-ops-ui/src/views/asset/host-connect-log/types/table.columns.ts
@@ -10,19 +10,14 @@ const columns = [
    align: 'left',
    fixed: 'left',
  }, {
-    title: '用户id',
-    dataIndex: 'userId',
-    slotName: 'userId',
-    width: 110,
+    title: '连接用户',
+    dataIndex: 'username',
+    slotName: 'username',
    align: 'left',
+    ellipsis: true,
+    tooltip: true,
  }, {
-    title: '主机id',
-    dataIndex: 'hostId',
-    slotName: 'hostId',
-    width: 110,
-    align: 'left',
-  }, {
-    title: '主机名称',
+    title: '连接主机',
    dataIndex: 'hostName',
    slotName: 'hostName',
    align: 'left',
@@ -48,8 +43,7 @@ const columns = [
    dataIndex: 'status',
    slotName: 'status',
    align: 'left',
-    ellipsis: true,
-    tooltip: true,
+    width: 90,
  }, {
    title: '开始时间',
    dataIndex: 'startTime',
--- a/orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
@@ -94,8 +94,8 @@
  const renderLabel = (label: string) => {
    const last = label.lastIndexOf('-');
    const prefix = label.substring(0, last - 1);
-    const ip = label.substring(last + 2, label.length);
-    return `${prefix} - <span class="span-blue">${ip}</span>`;
+    const address = label.substring(last + 2, label.length);
+    return `${prefix} - <span class="span-blue">${address}</span>`;
  };

  // 查询组内数据
@@ -121,7 +121,7 @@
      data.value = hosts.map(s => {
        return {
          value: String(s.id),
-          label: `${s.name} (${s.code}) - ${s.address}`,
+          label: `${s.name} - ${s.address}`,
          disabled: false
        };
      });
--- a/orion-ops-ui/src/views/user/info/index.vue
+++ b/orion-ops-ui/src/views/user/info/index.vue
@@ -33,7 +33,7 @@
      <!-- 返回 -->
      <a-tab-pane key="back" v-if="userId">
        <template #title>
-          <icon-arrow-left style="font-size: 16px" />
+          <icon-left style="font-size: 16px; padding-top: 2px;" />
          返回
        </template>
      </a-tab-pane>
--- a/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
+++ b/orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
@@ -1,8 +1,9 @@
 <template>
  <a-query-header :model="formModel"
                  label-align="left"
+                  :itemOptions="{ [visibleUser ? 5 : 4]: { span: 2 } }"
                  @submit="submit"
-                  @reset="reset"
+                  @reset="submit"
                  @keyup.enter="submit">
    <!-- 操作用户 -->
    <a-form-item v-if="visibleUser"
@@ -47,12 +48,12 @@
                allow-clear />
    </a-form-item>
    <!-- 执行时间 -->
-    <a-form-item field="startTime" label="执行时间" label-col-flex="50px">
-      <a-range-picker v-model="timeRange"
+    <a-form-item field="startTimeRange" label="执行时间" label-col-flex="50px">
+      <a-range-picker v-model="formModel.startTimeRange"
+                      style="width: 100%"
                      :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
                      show-time
-                      format="YYYY-MM-DD HH:mm:ss"
-                      @ok="timeRangePicked" />
+                      format="YYYY-MM-DD HH:mm:ss" />
    </a-form-item>
  </a-query-header>
 </template>
@@ -84,23 +85,15 @@
  const { loading, setLoading } = useLoading();
  const { $state: dictState, toOptions } = useDictStore();

-  const timeRange = ref<string[]>([]);
  const typeOptions = ref<SelectOptionData[]>(toOptions(operatorLogTypeKey));
  const formModel = reactive<OperatorLogQueryRequest>({
    module: undefined,
    type: undefined,
    riskLevel: undefined,
    result: undefined,
-    startTimeStart: undefined,
-    startTimeEnd: undefined,
+    startTimeRange: undefined,
  });

-  // 选择时间
-  const timeRangePicked = (e: string[]) => {
-    formModel.startTimeStart = e[0];
-    formModel.startTimeEnd = e[1];
-  };
-
  // 选择类型
  const selectedModule = (module: string) => {
    if (!module) {
@@ -118,14 +111,6 @@
    }
  };

-  // 重置
-  const reset = () => {
-    timeRange.value = [];
-    formModel.startTimeStart = undefined;
-    formModel.startTimeEnd = undefined;
-    submit();
-  };
-
  // 切换页码
  const submit = () => {
    emits('submit', { ...formModel });