feat: 主机连接记录.

orion-ops-ui/src/api/asset/host-connect-log.ts

@@ -0,0 +1,45 @@
+import type { DataGrid, Pagination } from '@/types/global';
+import type { TableData } from '@arco-design/web-vue/es/table/interface';
+import axios from 'axios';
+
+/**
+ * 主机连接日志查询请求
+ */
+export interface HostConnectLogQueryRequest extends Pagination {
+  userId?: number;
+  hostId?: number;
+  hostAddress?: string;
+  type?: string;
+  token?: string;
+  status?: string;
+  startTimeStart?: string;
+  startTimeEnd?: string;
+}
+
+/**
+ * 主机连接日志查询响应
+ */
+export interface HostConnectLogQueryResponse extends TableData {
+  id: number;
+  userId: number;
+  hostId: number;
+  hostName: string;
+  hostAddress: string;
+  type: string;
+  token: string;
+  status: string;
+  startTime: number;
+  endTime: number;
+  extraInfo: string;
+  createTime: number;
+  updateTime: number;
+  creator: string;
+  updater: string;
+}
+
+/**
+ * 分页查询主机连接日志
+ */
+export function getHostConnectLogPage(request: HostConnectLogQueryRequest) {
+  return axios.post<DataGrid<HostConnectLogQueryResponse>>('/asset/host-connect-log/query', request);
+}

orion-ops-ui/src/assets/style/arco-extends.less

@@ -33,6 +33,9 @@
     &.pass {
       background-color: rgb(var(--green-6));
     }
+    &.error {
+      background-color: rgb(var(--red-6));
+    }
   }
 }
 

orion-ops-ui/src/router/routes/modules/asset.ts

@@ -22,6 +22,10 @@ const ASSET: AppRouteRecordRaw = {
       name: 'assetGrant',
       path: '/asset/grant',
       component: () => import('@/views/asset/grant/index.vue'),
+    }, {
+      name: 'assetHostConnectLog',
+      path: '/asset/host-connect-log',
+      component: () => import('@/views/asset/host-connect-log/index.vue'),
     },
   ],
 };

orion-ops-ui/src/store/modules/cache/index.ts

@@ -14,7 +14,7 @@ import { getMenuList } from '@/api/system/menu';
 import { getCurrentAuthorizedHostIdentity, getCurrentAuthorizedHostKey } from '@/api/asset/asset-authorized-data';
 
 export type CacheType = 'users' | 'menus' | 'roles'
-  | 'host' | 'hostGroups' | 'hostKeys' | 'hostIdentities'
+  | 'hosts' | 'hostGroups' | 'hostKeys' | 'hostIdentities'
   | 'dictKeys'
   | 'authorizedHostKeys' | 'authorizedHostIdentities'
   | string

orion-ops-ui/src/views/asset/host-connect-log/components/host-connect-log-table.vue

@@ -0,0 +1,171 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <a-query-header :model="formModel"
+                    label-align="left"
+                    @submit="fetchTableData"
+                    @reset="reset"
+                    @keyup.enter="() => fetchTableData()">
+      <!-- 用户 -->
+      <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>
+      <!-- 主机地址 -->
+      <a-form-item field="hostAddress" label="主机地址" label-col-flex="50px">
+        <a-input v-model="formModel.hostAddress" placeholder="请输入主机地址" allow-clear />
+      </a-form-item>
+      <!-- 状态 -->
+      <a-form-item field="status" label="状态" label-col-flex="50px">
+        <a-select v-model="formModel.status"
+                  placeholder="请选择状态"
+                  :options="toOptions(connectStatusKey)"
+                  allow-clear />
+      </a-form-item>
+      <!-- token -->
+      <a-form-item field="token" label="token" label-col-flex="50px">
+        <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"
+                        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+                        show-time
+                        format="YYYY-MM-DD HH:mm:ss"
+                        @ok="timeRangePicked" />
+      </a-form-item>
+    </a-query-header>
+  </a-card>
+  <!-- 表格 -->
+  <a-card class="general-card table-card">
+    <template #title>
+      <!-- 左侧操作 -->
+      <div class="table-left-bar-handle">
+        <!-- 标题 -->
+        <div class="table-title">
+          主机连接日志 - 用户
+        </div>
+      </div>
+      <!-- 右侧操作 -->
+      <div class="table-right-bar-handle" />
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             class="table-wrapper-8"
+             ref="tableRef"
+             label-align="left"
+             :loading="loading"
+             :columns="columns"
+             :data="tableRenderData"
+             :pagination="pagination"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(1, size)"
+             :bordered="false">
+      <!-- 主机地址 -->
+      <template #hostAddress="{ record }">
+        <span class="copy-left" title="复制" @click="copy(record.hostAddress)">
+          <icon-copy />
+        </span>
+        <span>{{ record.hostAddress }}</span>
+      </template>
+      <!-- 状态 -->
+      <template #status="{ record }">
+        <span class="circle" :style="{
+           background: getDictValue(connectStatusKey, record.status, 'color')
+         }" />
+        {{ getDictValue(connectStatusKey, record.status) }}
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'asset-host-connect-log-table'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { HostConnectLogQueryRequest, HostConnectLogQueryResponse } from '@/api/asset/host-connect-log';
+  import { reactive, ref, onMounted } from 'vue';
+  import { getHostConnectLogPage } from '@/api/asset/host-connect-log';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { connectStatusKey } from '../types/const';
+  import { usePagination } from '@/types/table';
+  import { useDictStore } from '@/store';
+  import useCopy from '@/hooks/copy';
+  import UserSelector from '@/components/user/user/user-selector.vue';
+
+  const emits = defineEmits(['openAdd', 'openUpdate']);
+
+  const tableRenderData = ref<HostConnectLogQueryResponse[]>([]);
+
+  const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
+  const { copy } = useCopy();
+
+  const timeRange = ref<string[]>([]);
+  const formModel = reactive<HostConnectLogQueryRequest>({
+    userId: undefined,
+    hostId: undefined,
+    hostAddress: undefined,
+    type: undefined,
+    token: undefined,
+    status: undefined,
+    startTimeStart: undefined,
+    startTimeEnd: undefined,
+  });
+
+  // 选择时间
+  const timeRangePicked = (e: string[]) => {
+    formModel.startTimeStart = e[0];
+    formModel.startTimeEnd = e[1];
+  };
+
+  // 加载数据
+  const doFetchTableData = async (request: HostConnectLogQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getHostConnectLogPage(request);
+      tableRenderData.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+
+  // 重置
+  const reset = () => {
+    timeRange.value = [];
+    formModel.startTimeStart = undefined;
+    formModel.startTimeEnd = undefined;
+    fetchTableData();
+  };
+
+  onMounted(() => {
+    fetchTableData();
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/asset/host-connect-log/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 列表-表格 -->
+    <host-connect-log-table />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'assetHostConnectLog'
+  };
+</script>
+
+<script lang="ts" setup>
+  import HostConnectLogTable from './components/host-connect-log-table.vue';
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
+  import { useCacheStore, useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
+
+  const render = ref(false);
+  const table = ref();
+  const modal = ref();
+
+  // 加载字典配置
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
+  // 重置缓存
+  onUnmounted(() => {
+    const cacheStore = useCacheStore();
+    cacheStore.reset('users', 'hosts');
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/asset/host-connect-log/types/const.ts

@@ -0,0 +1,5 @@
+// 主机连接状态 字典项
+export const connectStatusKey = 'hostConnectStatus';
+
+// 加载的字典值
+export const dictKeys = [connectStatusKey];

orion-ops-ui/src/views/asset/host-connect-log/types/table.columns.ts

@@ -0,0 +1,74 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { dateFormat } from '@/utils';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 70,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '用户id',
+    dataIndex: 'userId',
+    slotName: 'userId',
+    width: 110,
+    align: 'left',
+  }, {
+    title: '主机id',
+    dataIndex: 'hostId',
+    slotName: 'hostId',
+    width: 110,
+    align: 'left',
+  }, {
+    title: '主机名称',
+    dataIndex: 'hostName',
+    slotName: 'hostName',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '主机地址',
+    dataIndex: 'hostAddress',
+    slotName: 'hostAddress',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: 'token',
+    dataIndex: 'token',
+    slotName: 'token',
+    align: 'left',
+    width: 180,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '开始时间',
+    dataIndex: 'startTime',
+    slotName: 'startTime',
+    align: 'left',
+    width: 180,
+    render: ({ record }) => {
+      return record.startTime && dateFormat(new Date(record.startTime));
+    },
+  }, {
+    title: '结束时间',
+    dataIndex: 'endTime',
+    slotName: 'endTime',
+    align: 'left',
+    width: 180,
+    render: ({ record }) => {
+      return record.endTime && dateFormat(new Date(record.endTime));
+    },
+  },
+] as TableColumnData[];
+
+export default columns;

orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue

@@ -63,7 +63,6 @@
       data.forEach(s => {
         config.value[s.type] = s;
       });
-      console.log(config.value);
     } catch ({ message }) {
       Message.error(`配置加载失败 ${message}`);
       setVisible(false);