manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 主机列表视图.

Browse Source
This commit is contained in:
lijiahang
2023-12-15 16:35:11 +08:00
parent 0cd8b3ae02
commit 59c8a7fd2f
14 changed files with 270 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/AuthorizedHostWrapperVO.java
View File

@@ -33,7 +33,4 @@ public class AuthorizedHostWrapperVO {
@Schema(description = "分组树节点映射 'groupId':hostIdList")
private Map<String, Set<Long>> treeNodes;
// TODO 我的收藏
// TODO 最近连接
}

3
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/HostVO.java
View File

@@ -52,6 +52,9 @@ public class HostVO implements Serializable {
@Schema(description = "修改人")
private String updater;
@Schema(description = "是否收藏")
private Boolean favorite;
@Schema(description = "tags")
private List<TagDTO> tags;

70
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/AssetAuthorizedDataServiceImpl.java
View File

@@ -12,18 +12,20 @@ import com.orion.ops.module.asset.service.AssetAuthorizedDataService;
import com.orion.ops.module.asset.service.HostIdentityService;
import com.orion.ops.module.asset.service.HostKeyService;
import com.orion.ops.module.asset.service.HostService;
import com.orion.ops.module.infra.api.DataGroupApi;
import com.orion.ops.module.infra.api.DataGroupRelApi;
import com.orion.ops.module.infra.api.DataPermissionApi;
import com.orion.ops.module.infra.api.SystemUserApi;
import com.orion.ops.module.infra.api.*;
import com.orion.ops.module.infra.entity.dto.data.DataGroupDTO;
import com.orion.ops.module.infra.entity.dto.tag.TagDTO;
import com.orion.ops.module.infra.enums.DataGroupTypeEnum;
import com.orion.ops.module.infra.enums.DataPermissionTypeEnum;
import com.orion.ops.module.infra.enums.FavoriteTypeEnum;
import com.orion.ops.module.infra.enums.TagTypeEnum;
import lombok.SneakyThrows;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.*;
import java.util.concurrent.Future;
import java.util.function.Function;
import java.util.stream.Collectors;
@@ -59,6 +61,12 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
@Resource
private HostIdentityService hostIdentityService;
@Resource
private FavoriteApi favoriteApi;
@Resource
private TagRelApi tagRelApi;
@Override
public List<Long> getAuthorizedDataRelId(DataPermissionTypeEnum type, AssetAuthorizedDataQueryRequest request) {
Long userId = request.getUserId();
@@ -77,7 +85,7 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
public AuthorizedHostWrapperVO getUserAuthorizedHostGroup(Long userId) {
if (systemUserApi.isAdminUser(userId)) {
// 管理员查询所有
return this.buildUserAuthorizedHostGroup(null);
return this.buildUserAuthorizedHostGroup(userId, null);
} else {
// 其他用户 查询授权的数据
List<Long> authorizedIdList = dataPermissionApi.getUserAuthorizedRelIdList(DataPermissionTypeEnum.HOST_GROUP, userId);
@@ -88,7 +96,7 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
.hostList(Lists.empty())
.build();
}
return this.buildUserAuthorizedHostGroup(authorizedIdList);
return this.buildUserAuthorizedHostGroup(userId, authorizedIdList);
}
}
@@ -139,14 +147,16 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
/**
* 构建授权的主机分组树
*
* @param userId userId
* @param authorizedGroupIdList authorizedGroupIdList
* @return tree
*/
private AuthorizedHostWrapperVO buildUserAuthorizedHostGroup(List<Long> authorizedGroupIdList) {
@SneakyThrows
private AuthorizedHostWrapperVO buildUserAuthorizedHostGroup(Long userId, List<Long> authorizedGroupIdList) {
final boolean allData = Lists.isEmpty(authorizedGroupIdList);
AuthorizedHostWrapperVO wrapper = new AuthorizedHostWrapperVO();
// TODO async get 最近连接
// TODO async get 我的收藏
// 查询我的收藏
Future<List<Long>> favoriteResult = favoriteApi.getFavoriteRelIdListAsync(FavoriteTypeEnum.HOST, userId);
// 查询分组
List<DataGroupDTO> dataGroup = dataGroupApi.getDataGroupList(DataGroupTypeEnum.HOST);
// 查询分组引用
@@ -161,12 +171,17 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
// 设置主机分组树
wrapper.setGroupTree(this.getAuthorizedHostGroupTree(dataGroup));
// 设置主机分组下的主机
wrapper.setTreeNodes(this.getAuthorizedHostGroupNodes(allData, dataGroup, dataGroupRel, authorizedGroupIdList));
wrapper.setTreeNodes(this.getAuthorizedHostGroupNodes(allData,
dataGroup,
dataGroupRel,
authorizedGroupIdList));
// 设置已授权的所有主机
wrapper.setHostList(this.getAuthorizedHostList(allData, dataGroup, dataGroupRel, authorizedGroupIdList));
// TODO set 最近连接
// TODO set 我的收藏
wrapper.setHostList(this.getAuthorizedHostList(allData,
dataGroup,
dataGroupRel,
authorizedGroupIdList));
// 设置主机拓展信息
this.getAuthorizedHostExtra(wrapper.getHostList(), favoriteResult.get());
return wrapper;
}
@@ -223,6 +238,7 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
List<Long> authorizedGroupIdList) {
// 查询主机列表
List<HostVO> hosts = hostService.getHostListByCache();
// 全部数据直接返回
if (allData) {
return hosts;
@@ -232,6 +248,7 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
// 仅设置已授权的数据
return dataGroup.stream()
.map(DataGroupDTO::getId)
// 因为可能父菜单没有授权 这里需要判断分组权限
.filter(authorizedGroupIdList::contains)
.map(dataGroupRel::get)
.filter(Lists::isNoneEmpty)
@@ -241,4 +258,29 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
.collect(Collectors.toList());
}
/**
* 设置授权主机的额外参数
*
* @param hosts hosts
* @param favorite favorite
*/
private void getAuthorizedHostExtra(List<HostVO> hosts,
List<Long> favorite) {
if (Lists.isEmpty(hosts)) {
return;
}
// 设置收藏结果
if (!Lists.isEmpty(favorite)) {
hosts.forEach(s -> s.setFavorite(favorite.contains(s.getId())));
}
List<Long> hostIdList = hosts.stream()
.map(HostVO::getId)
.collect(Collectors.toList());
// 查询 tag 信息
List<List<TagDTO>> tags = tagRelApi.getRelTags(TagTypeEnum.HOST, hostIdList);
for (int i = 0; i < hosts.size(); i++) {
hosts.get(i).setTags(tags.get(i));
}
}
}

10
orion-ops-module-infra/orion-ops-module-infra-provider/src/main/java/com/orion/ops/module/infra/api/FavoriteApi.java
View File

@@ -3,6 +3,7 @@ package com.orion.ops.module.infra.api;
import com.orion.ops.module.infra.enums.FavoriteTypeEnum;
import java.util.List;
import java.util.concurrent.Future;
/**
* 收藏 对外服务类
@@ -22,6 +23,15 @@ public interface FavoriteApi {
*/
List<Long> getFavoriteRelIdList(FavoriteTypeEnum type, Long userId);
/**
* 异步查询用户收藏
*
* @param type type
* @param userId userId
* @return relIdList
*/
Future<List<Long>> getFavoriteRelIdListAsync(FavoriteTypeEnum type, java.lang.Long userId);
/**
* 通过 relId 删除收藏
*

10
orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/api/impl/FavoriteApiImpl.java
View File

@@ -11,6 +11,8 @@ import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
import java.util.concurrent.CompletableFuture;
import java.util.concurrent.Future;
/**
* 收藏 对外服务实现类
@@ -38,6 +40,14 @@ public class FavoriteApiImpl implements FavoriteApi {
return favoriteService.getFavoriteRelIdList(request);
}
@Override
@Async("asyncExecutor")
public Future<List<Long>> getFavoriteRelIdListAsync(FavoriteTypeEnum type, Long userId) {
Valid.allNotNull(type, userId);
// 查询
return CompletableFuture.completedFuture(this.getFavoriteRelIdList(type, userId));
}
@Override
public void deleteByRelId(FavoriteTypeEnum type, Long relId) {
Valid.allNotNull(type, relId);

21
orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/FavoriteServiceImpl.java
View File

@@ -46,16 +46,24 @@ public class FavoriteServiceImpl implements FavoriteService {
public Long addFavorite(FavoriteOperatorRequest request) {
String type = Valid.valid(FavoriteTypeEnum::of, request.getType()).name();
Long userId = SecurityUtils.getLoginUserId();
// 检查是否存在
FavoriteDO check = favoriteDAO.of()
.createWrapper()
.eq(FavoriteDO::getUserId, userId)
.eq(FavoriteDO::getType, request.getType())
.eq(FavoriteDO::getRelId, request.getRelId())
.then()
.getOne();
if (check != null) {
return check.getId();
}
// 转换
FavoriteDO record = FavoriteConvert.MAPPER.to(request);
record.setUserId(userId);
// 插入
int effect = favoriteDAO.insert(record);
// 设置缓存
String key = FavoriteCacheKeyDefine.FAVORITE.format(type, userId);
RedisLists.push(key, request.getRelId(), String::valueOf);
// 设置过期时间
RedisLists.setExpire(key, FavoriteCacheKeyDefine.FAVORITE);
// 删除缓存
RedisLists.delete(FavoriteCacheKeyDefine.FAVORITE.format(type, userId));
return record.getId();
}
@@ -67,8 +75,7 @@ public class FavoriteServiceImpl implements FavoriteService {
// 删除库
int effect = favoriteDAO.deleteFavorite(type, userId, relId);
// 删除缓存
String key = FavoriteCacheKeyDefine.FAVORITE.format(type, userId);
redisTemplate.opsForList().remove(key, 1, relId.toString());
RedisLists.delete(FavoriteCacheKeyDefine.FAVORITE.format(type, userId));
return effect;
}

2
orion-ops-ui/src/api/asset/host.ts
View File

@@ -29,7 +29,6 @@ export interface HostQueryRequest extends Pagination {
name?: string;
code?: string;
address?: string;
favorite?: boolean;
tags?: Array<number>;
queryTag?: boolean;
}
@@ -46,7 +45,6 @@ export interface HostQueryResponse extends TableData {
updateTime: number;
creator: string;
updater: string;
// FIXME 删除
favorite: boolean;
tags: Array<{ id: number, name: string }>;
groupIdList: Array<number>;

22
orion-ops-ui/src/assets/style/global.less
View File

@@ -94,6 +94,10 @@ body {
border-color: rgb(var(--gray-2));
}
.disabled {
pointer-events: none;
}
.usn {
user-select: none;
}
@@ -106,16 +110,28 @@ body {
cursor: pointer;
}
.m0 {
margin: 0;
}
.mx0 {
margin: 0 0;
margin-left: 0;
margin-right: 0;
}
.my0 {
margin-top: 0;
margin-bottom: 0;
}
.mx2 {
margin: 0 2px;
margin-left: 2px;
margin-right: 2px;
}
.mx4 {
margin: 0 4px;
margin-left: 4px;
margin-right: 4px;
}
.ml4 {

11
orion-ops-ui/src/hooks/favorite.ts
View File

@@ -1,30 +1,29 @@
import type { FavoriteType } from '@/api/meta/favorite';
import { Message } from '@arco-design/web-vue';
import { addFavorite, cancelFavorite } from '@/api/meta/favorite';
import { ref } from 'vue';
export default function useFavorite(type: FavoriteType) {
const loading = ref(false);
const toggle = async (record: any, id: number, cancelField = 'favorite') => {
const request = { relId: id, type };
Message.clear();
const loading = Message.loading(record[cancelField] ? '取消中' : '收藏中');
try {
loading.value = true;
if (record[cancelField]) {
// 取消收藏
await cancelFavorite(request);
record[cancelField] = false;
Message.success('已取消');
} else {
// 添加收藏
await addFavorite(request);
record[cancelField] = true;
Message.success('已收藏');
}
} catch (e) {
} finally {
loading.close();
loading.value = false;
}
};
return {
loading,
toggle
};
}

1
orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
View File

@@ -199,7 +199,6 @@
name: undefined,
code: undefined,
address: undefined,
favorite: undefined,
tags: undefined,
queryTag: true
});

60
orion-ops-ui/src/views/asset/host-list/components/host-table.vue
View File

@@ -49,18 +49,6 @@
<!-- 右侧操作 -->
<div class="table-right-bar-handle">
<a-space>
<!-- 仅看收藏 fixme 去掉 -->
<a-checkbox v-if="false" v-model="formModel.favorite" @change="fetchTableData()">
<template #checkbox="{ checked }">
<a-tag :checked="checked"
class="only-favorite"
size="large"
color="arcoblue"
checkable>
仅看收藏
</a-tag>
</template>
</a-checkbox>
<!-- 主机分组 -->
<a-button type="primary"
v-permission="['asset:host-group:update']"
@@ -162,19 +150,6 @@
删除
</a-button>
</a-popconfirm>
<!-- 收藏 -->
<span v-if="record.favorite"
title="取消收藏"
class="host-favorite host-favorite-choice"
@click="() => toggleFavorite(record, record.id)">
<icon-star-fill />
</span>
<span v-else
title="收藏"
class="host-favorite host-favorite-un-choice"
@click="() => toggleFavorite(record, record.id)">
<icon-star />
</span>
</div>
</template>
</a-table>
@@ -197,7 +172,6 @@
import { tagColor } from '../types/const';
import { usePagination } from '@/types/table';
import useCopy from '@/hooks/copy';
import useFavorite from '@/hooks/favorite';
import { dataColor } from '@/utils';
import TagMultiSelector from '@/components/meta/tag/tag-multi-selector.vue';
import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
@@ -208,7 +182,6 @@
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup']);
const { copy } = useCopy();
const { toggle: toggleFavorite } = useFavorite('HOST');
const pagination = usePagination();
@@ -217,7 +190,6 @@
name: undefined,
code: undefined,
address: undefined,
favorite: undefined,
tags: undefined,
queryTag: true
});
@@ -284,37 +256,5 @@
.row-handle-wrapper {
display: flex;
align-items: center;
.host-favorite {
cursor: pointer;
line-height: 19px;
font-size: 19px;
margin: 0 4px;
}
.host-favorite-choice {
color: rgb(var(--yellow-6));
:hover {
transition: .2s;
color: rgba(232, 203, 12, .9);
}
}
.host-favorite-un-choice {
color: rgb(var(--gray-6));
:hover {
transition: .2s;
color: rgb(var(--yellow-6));
}
}
}
.only-favorite {
user-select: none;
color: rgb(var(--arcoblue-5));
background: rgb(var(--gray-2));
}
</style>

31
orion-ops-ui/src/views/host-ops/terminal/components/new-connection/host-list-view.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="list-view-container">
<!-- 主机列表 -->
<host-list :hosts="hosts" />
</div>
</template>
<script lang="ts">
export default {
name: 'hostListView'
};
</script>
<script lang="ts" setup>
import type { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data';
import HostList from './host-list.vue';
const props = defineProps<{
hosts: AuthorizedHostQueryResponse
}>();
</script>
<style lang="less" scoped>
.list-view-container {
max-height: 100%;
width: 100%;
overflow: auto;
position: relative;
}
</style>

137
orion-ops-ui/src/views/host-ops/terminal/components/new-connection/host-list.vue
View File

@@ -1,5 +1,6 @@
<template>
<a-list size="large"
<a-list ref="listRel"
size="large"
max-height="100%"
:hoverable="true"
:data="hosts.hostList">
@@ -14,7 +15,7 @@
</template>
<!-- 数据 -->
<template #item="{ item }">
<a-list-item class="host-item-wrapper">
<a-list-item class="host-item-wrapper" @click="openTerminal(item)">
<div class="host-item">
<!-- 左侧图标-名称 -->
<div class="flex-center host-item-left">
@@ -46,24 +47,65 @@
</span>
</a-tooltip>
</div>
<!-- flex-center 右侧tag-操作 -->
<!-- 右侧tag-操作 -->
<div class="flex-center host-item-right">
<div v-if="item.code === 'main'">
<a-tag v-for="i in 5"
class="host-item-text"
:style="{
width: `calc(${100/5}% - ${i !== 5 ? '8px' : '0px'})`,
maxWidth: `calc(${100/5}% - ${i !== 5 ? '8px' : '0px'})`,
marginRight: `${i !== 5 ? '8px' : '0'}`,
}"
color="arcoblue">
<template v-for="j in i*5">
{{ j }}
</template>
</a-tag>
<!-- tags -->
<div class="host-item-right-tags">
<template v-if="item.tags?.length">
<a-tag v-for="(tag, i) in item.tags"
class="host-item-text"
:key="tag.id"
:style="{
maxWidth: `calc(${100 / item.tags.length}% - ${i !== item.tags.length - 1 ? '8px' : '0px'})`,
marginRight: `${i !== item.tags.length - 1 ? '8px' : '0'}`,
}"
:color="dataColor(tag.name, tagColor)">
{{ tag.name }}
</a-tag>
</template>
</div>
<div v-else>
<!-- 操作 -->
<div class="host-item-right-actions">
<!-- 连接主机 -->
<a-tooltip position="top"
:mini="true"
:popup-container="listRel?.$el?.parent"
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="连接主机">
<div class="terminal-sidebar-icon-wrapper">
<div class="terminal-sidebar-icon" @click.stop="openTerminal(item)">
<icon-thunderbolt />
</div>
</div>
</a-tooltip>
<!-- 连接设置 -->
<a-tooltip position="top"
:mini="true"
:popup-container="listRel?.$el?.parent"
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="连接设置">
<div class="terminal-sidebar-icon-wrapper">
<div class="terminal-sidebar-icon" @click.stop="openSetting(item)">
<icon-settings />
</div>
</div>
</a-tooltip>
<!-- 收藏 -->
<a-tooltip position="top"
:mini="true"
:popup-container="listRel?.$el?.parent"
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="收藏">
<div class="terminal-sidebar-icon-wrapper">
<div class="terminal-sidebar-icon" @click.stop="setFavorite(item)">
<icon-star-fill class="favorite" v-if="item.favorite" />
<icon-star v-else />
</div>
</div>
</a-tooltip>
</div>
</div>
</div>
@@ -80,11 +122,37 @@
<script lang="ts" setup>
import { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data';
import useFavorite from '@/hooks/favorite';
import { ref } from 'vue';
import { dataColor } from '@/utils';
import { tagColor } from '@/views/asset/host-list/types/const';
const props = defineProps<{
hosts: AuthorizedHostQueryResponse
}>();
const { toggle: toggleFavorite, loading: favoriteLoading } = useFavorite('HOST');
const listRel = ref();
// 打开终端
const openTerminal = (item: any) => {
console.log('ter', item);
};
// 打开配置
const openSetting = (item: any) => {
console.log('set', item);
};
// 设置收藏
const setFavorite = async (item: any) => {
if (favoriteLoading.value) {
return;
}
await toggleFavorite(item, item.id);
};
</script>
<style lang="less" scoped>
@@ -160,13 +228,44 @@
width: 25%;
&-address {
max-width: calc(100% - 8px);
max-width: 100%;
}
}
.host-item-right {
width: 40%;
height: 100%;
flex-direction: column;
justify-content: center;
position: relative;
&-tags {
// 必须设置 最外层用的是 min-width
position: absolute;
width: 100%;
}
&-actions {
position: absolute;
display: none;
width: 100%;
justify-content: flex-end;
}
}
&:hover {
.host-item-right-tags {
display: none;
}
.host-item-right-actions {
display: flex;
}
}
}
.favorite {
color: rgb(var(--yellow-6));
}
</style>

5
orion-ops-ui/src/views/host-ops/terminal/components/new-connection/new-connection-view.vue
View File

@@ -48,6 +48,8 @@
<host-group-view v-if="NewConnectionType.GROUP === newConnectionType"
:hosts="hosts" />
<!-- 列表视图 -->
<host-list-view v-if="NewConnectionType.LIST === newConnectionType"
:hosts="hosts" />
<!-- 我的收藏 -->
@@ -72,8 +74,9 @@
import { onBeforeMount, ref } from 'vue';
import { NewConnectionType, NewConnectionTypeKey } from '../../types/terminal.const';
import useLoading from '@/hooks/loading';
import HostGroupView from './host-group-view.vue';
import { useDictStore } from '@/store';
import HostGroupView from './host-group-view.vue';
import HostListView from './host-list-view.vue';
const { loading, setLoading } = useLoading();
const { toOptions } = useDictStore();