🔨 监控页面连接终端.

orion-visor-modules/orion-visor-module-monitor/orion-visor-module-monitor-service/src/main/java/org/dromara/visor/module/monitor/convert/MonitorHostConvert.java

@@ -22,6 +22,7 @@
  */
 package org.dromara.visor.module.monitor.convert;
 
+import org.dromara.visor.common.mapstruct.StringConversion;
 import org.dromara.visor.module.asset.entity.dto.host.HostDTO;
 import org.dromara.visor.module.asset.entity.dto.host.HostQueryDTO;
 import org.dromara.visor.module.monitor.entity.domain.MonitorHostDO;
@@ -40,7 +41,7 @@ import org.mapstruct.factory.Mappers;
  * @version 1.0.0
  * @since 2025-8-14 16:27
  */
-@Mapper
+@Mapper(uses = StringConversion.class)
 public interface MonitorHostConvert {
 
     MonitorHostConvert MAPPER = Mappers.getMapper(MonitorHostConvert.class);

orion-visor-modules/orion-visor-module-monitor/orion-visor-module-monitor-service/src/main/java/org/dromara/visor/module/monitor/entity/vo/MonitorHostVO.java

@@ -76,6 +76,9 @@ public class MonitorHostVO implements Serializable {
     @Schema(description = "主机地址")
     private String address;
 
+    @Schema(description = "主机类型")
+    private List<String> types;
+
     @Schema(description = "主机状态")
     private String status;
 

orion-visor-ui/src/api/monitor/monitor-host.ts

@@ -96,6 +96,7 @@ export interface MonitorHostQueryResponse extends TableData {
   code: string;
   address: string;
   status: string;
+  types: Array<string>;
   agentKey: string;
   agentVersion: string;
   latestVersion: string;

orion-visor-ui/src/views/asset/host-list/components/host-card-list.vue

@@ -230,7 +230,7 @@
               <a-button v-for="type in record.types"
                         :key="type"
                         size="mini"
-                        @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type} })">
+                        @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type }})">
                 {{ type }}
               </a-button>
             </a-space>

orion-visor-ui/src/views/asset/host-list/components/host-table.vue

@@ -275,7 +275,7 @@
                 <a-button v-for="type in record.types"
                           :key="type"
                           size="mini"
-                          @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type} })">
+                          @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type }})">
                   {{ type }}
                 </a-button>
               </a-space>

orion-visor-ui/src/views/monitor/monitor-detail/compoments/detail-header.vue

@@ -44,46 +44,70 @@
     <div class="header-right">
       <!-- 告警事件标签 -->
       <div v-if="activeKey === TabKeys.OVERVIEW" class="handle-wrapper">
+        <!-- 单协议连接 -->
+        <a-tag v-if="host.types?.length === 1"
+               v-permission="['terminal:terminal:access']"
+               class="pointer"
+               @click="openNewRoute({ name: 'terminal', query: { connect: host.id, type: host.types[0] } })">
+          连接终端
+        </a-tag>
+        <!-- 多协议连接 -->
+        <a-popover v-if="(host.types?.length || 0) > 1"
+                   :title="undefined"
+                   :content-style="{ padding: '8px' }">
+          <a-tag v-permission="['terminal:terminal:access']"
+                 class="pointer">
+            连接终端
+          </a-tag>
+          <template #content>
+            <a-space>
+              <a-button v-for="type in host.types"
+                        :key="type"
+                        size="mini"
+                        @click="openNewRoute({ name: 'terminal', query: { connect: host.id, type }})">
+                {{ type }}
+              </a-button>
+            </a-space>
+          </template>
+        </a-popover>
+        <!-- 更新时间 -->
         <a-tag v-if="overrideTimestamp">更新时间: {{ dateFormat(new Date(overrideTimestamp)) }}</a-tag>
       </div>
       <!-- 监控图表操作 -->
       <div v-else-if="activeKey === TabKeys.CHART" class="handle-wrapper">
-        <a-space>
+        <!-- 表格时间区间 -->
-          <!-- 表格时间区间 -->
+        <a-select v-model="chartRange"
-          <a-select v-model="chartRange"
+                  style="width: 138px;"
-                    style="width: 138px;"
+                  :options="toOptions(ChartRangeKey)">
-                    :options="toOptions(ChartRangeKey)"
+          <template #prefix>
-                    @change="(s: any) => changeChartRange(s)">
+            区间
-            <template #prefix>
+          </template>
-              区间
+        </a-select>
-            </template>
+        <!-- 表格窗口 -->
-          </a-select>
+        <a-select v-model="chartWindow"
-          <!-- 表格窗口 -->
+                  style="width: 138px;"
-          <a-select v-model="chartWindow"
+                  :options="chartWindowOptions">
-                    style="width: 138px;"
+          <template #prefix>
-                    :options="chartWindowOptions">
+            窗口
-            <template #prefix>
+          </template>
-              窗口
+        </a-select>
-            </template>
+        <!-- 刷新 -->
-          </a-select>
+        <a-button class="fs16"
-          <!-- 刷新 -->
+                  title="刷新"
-          <a-button class="fs16"
+                  @click="reloadChart">
-                    title="刷新"
+          <template #icon>
-                    @click="reloadChart">
+            <icon-refresh />
-            <template #icon>
+          </template>
-              <icon-refresh />
+        </a-button>
-            </template>
+        <!-- 切换视图 -->
-          </a-button>
+        <a-button class="fs16"
-          <!-- 切换视图 -->
+                  title="切换视图"
-          <a-button class="fs16"
+                  @click="chartCompose = !chartCompose">
-                    title="切换视图"
+          <template #icon>
-                    @click="chartCompose = !chartCompose">
+            <icon-menu v-if="chartCompose" />
-            <template #icon>
+            <icon-apps v-else />
-              <icon-menu v-if="chartCompose" />
+          </template>
-              <icon-apps v-else />
+        </a-button>
-            </template>
-          </a-button>
-        </a-space>
       </div>
     </div>
   </div>
@@ -102,6 +126,7 @@
   import { copy } from '@/hooks/copy';
   import { useDictStore } from '@/store';
   import { dateFormat } from '@/utils';
+  import { openNewRoute } from '@/router';
   import { TabKeys, ChartRangeKey } from '../types/const';
   import { OnlineStatusKey } from '@/views/monitor/monitor-host/types/const';
   import { parseWindowUnit, WindowUnitFormatter } from '@/utils/metrics';
@@ -209,6 +234,7 @@
 
     .handle-wrapper {
       display: flex;
+      gap: 8px;
     }
   }
 

orion-visor-ui/src/views/monitor/monitor-host/components/monitor-host-card-list.vue

@@ -270,43 +270,62 @@
             <!-- 修改 -->
             <a-doption v-if="record.agentInstallStatus === AgentInstallStatus.INSTALLED"
                        v-permission="['monitor:monitor-host:update']"
-                       type="text"
-                       size="mini"
                        @click="emits('openUpdate', record)">
               <span class="more-doption normal">修改配置</span>
             </a-doption>
             <!-- 复制 Key -->
-            <a-doption type="text"
+            <a-doption @click="copy(record.agentKey)">
-                       size="mini"
-                       @click="copy(record.agentKey)">
               <span class="more-doption normal">复制 Key</span>
             </a-doption>
             <!-- 安装探针 -->
             <a-doption v-permission="['asset:host:install-agent']"
                        :disabled="record.installLog?.status === AgentLogStatus.WAIT || record.installLog?.status === AgentLogStatus.RUNNING"
-                       type="text"
-                       size="mini"
                        @click="installAgent([record.hostId])">
               <span class="more-doption normal">安装探针</span>
             </a-doption>
             <!-- 安装成功 -->
             <a-doption v-if="record.installLog?.id && record.installLog?.status !== AgentLogStatus.SUCCESS"
                        v-permission="['asset:host:install-agent']"
-                       type="text"
-                       size="mini"
                        @click="setInstallSuccess(record.installLog)">
               <span class="more-doption normal">安装成功</span>
             </a-doption>
             <!-- 告警开关 -->
             <a-doption v-if="record.id"
                        v-permission="['monitor:monitor-host:update', 'monitor:monitor-host:update-switch']"
-                       type="text"
-                       size="mini"
                        @click="toggleAlarmSwitch(record)">
               <span class="more-doption normal">
                 {{ toggleDictValue(AlarmSwitchKey, record.alarmSwitch, 'label') + '告警' }}
               </span>
             </a-doption>
+            <!-- 连接终端 单协议连接 -->
+            <a-doption v-if="record.types?.length === 1"
+                       v-permission="['terminal:terminal:access']"
+                       @click="openNewRoute({ name: 'terminal', query: { connect: record.hostId, type: record.types[0] } })">
+                <span class="more-doption normal">
+                  连接终端
+                </span>
+            </a-doption>
+            <!-- 连接终端 多协议连接 -->
+            <a-popover v-if="(record.types?.length || 0) > 1"
+                       :title="undefined"
+                       position="left"
+                       :content-style="{ padding: '8px' }">
+              <a-doption v-permission="['terminal:terminal:access']">
+                  <span class="more-doption normal">
+                    连接终端
+                  </span>
+              </a-doption>
+              <template #content>
+                <a-space direction="vertical">
+                  <a-button v-for="type in record.types"
+                            :key="type"
+                            size="mini"
+                            @click="openNewRoute({ name: 'terminal', query: { connect: record.hostId, type }})">
+                    {{ type }}
+                  </a-button>
+                </a-space>
+              </template>
+            </a-popover>
           </template>
         </a-dropdown>
       </a-space>
@@ -333,6 +352,7 @@
   import { AgentInstallStatus, tagColor } from '@/views/asset/host-list/types/const';
   import { copy } from '@/hooks/copy';
   import { getFileSize } from '@/utils/file';
+  import { openNewRoute } from '@/router';
   import { getPercentProgressColor } from '@/utils/charts';
   import useMonitorHostList from '../types/use-monitor-host-list';
   import MonitorCell from './monitor-cell.vue';

orion-visor-ui/src/views/monitor/monitor-host/components/monitor-host-table.vue

@@ -322,43 +322,62 @@
               <!-- 修改 -->
               <a-doption v-if="record.agentInstallStatus === AgentInstallStatus.INSTALLED"
                          v-permission="['monitor:monitor-host:update']"
-                         type="text"
-                         size="mini"
                          @click="emits('openUpdate', record)">
                 <span class="more-doption normal">修改配置</span>
               </a-doption>
               <!-- 复制 Key -->
-              <a-doption type="text"
+              <a-doption @click="copy(record.agentKey)">
-                         size="mini"
-                         @click="copy(record.agentKey)">
                 <span class="more-doption normal">复制 Key</span>
               </a-doption>
               <!-- 安装探针 -->
               <a-doption v-permission="['asset:host:install-agent']"
                          :disabled="record.installLog?.status === AgentLogStatus.WAIT || record.installLog?.status === AgentLogStatus.RUNNING"
-                         type="text"
-                         size="mini"
                          @click="installAgent([record.hostId])">
                 <span class="more-doption normal">安装探针</span>
               </a-doption>
               <!-- 安装成功 -->
               <a-doption v-if="record.installLog?.id && record.installLog?.status !== AgentLogStatus.SUCCESS"
                          v-permission="['asset:host:install-agent']"
-                         type="text"
-                         size="mini"
                          @click="setInstallSuccess(record.installLog)">
                 <span class="more-doption normal">安装成功</span>
               </a-doption>
               <!-- 告警开关 -->
               <a-doption v-if="record.id"
                          v-permission="['monitor:monitor-host:update', 'monitor:monitor-host:update-switch']"
-                         type="text"
-                         size="mini"
                          @click="toggleAlarmSwitch(record)">
                 <span class="more-doption normal">
                   {{ toggleDictValue(AlarmSwitchKey, record.alarmSwitch, 'label') + '告警' }}
                 </span>
               </a-doption>
+              <!-- 连接终端 单协议连接 -->
+              <a-doption v-if="record.types?.length === 1"
+                         v-permission="['terminal:terminal:access']"
+                         @click="openNewRoute({ name: 'terminal', query: { connect: record.hostId, type: record.types[0] } })">
+                <span class="more-doption normal">
+                  连接终端
+                </span>
+              </a-doption>
+              <!-- 连接终端 多协议连接 -->
+              <a-popover v-if="(record.types?.length || 0) > 1"
+                         :title="undefined"
+                         position="left"
+                         :content-style="{ padding: '8px' }">
+                <a-doption v-permission="['terminal:terminal:access']">
+                  <span class="more-doption normal">
+                    连接终端
+                  </span>
+                </a-doption>
+                <template #content>
+                  <a-space direction="vertical">
+                    <a-button v-for="type in record.types"
+                              :key="type"
+                              size="mini"
+                              @click="openNewRoute({ name: 'terminal', query: { connect: record.hostId, type }})">
+                      {{ type }}
+                    </a-button>
+                  </a-space>
+                </template>
+              </a-popover>
             </template>
           </a-dropdown>
         </div>
@@ -386,6 +405,7 @@
   import { copy } from '@/hooks/copy';
   import { getPercentProgressColor } from '@/utils/charts';
   import { getFileSize } from '@/utils/file';
+  import { openNewRoute } from '@/router';
   import { dateFormat, dataColor } from '@/utils';
   import { Message, Modal } from '@arco-design/web-vue';
   import useMonitorHostList from '../types/use-monitor-host-list';