Merge pull request #277 from ikun-Lg/master

front：Optimizing style codes and adding necessary code for instance detail pages
apache · May 16, 2024 · 80b0053 · 80b0053
2 parents 83ca6e6 + 4bd78a8
commit 80b0053
Show file tree

Hide file tree

Showing 10 changed files with 241 additions and 190 deletions.
diff --git a/ui-vue3/src/App.vue b/ui-vue3/src/App.vue
@@ -68,15 +68,64 @@ const localeGlobal = reactive(i18n.global.locale)
 </template>
 
 <style lang="less">
-.ant-descriptions-item-content {
-  padding-left: 20px !important;
-}
-
 .__global_float_button_question {
   right: 24px;
 }
 
 #nprogress .bar {
   background: #000000 !important;
 }
+
+//If you want to show multiple cards, I think you maybe need this style to beautify
+._detail {
+  box-shadow: 8px 8px 4px rgba(162, 162, 162, 0.19);
+}
+
+//Display a sub-card in a card to display the data
+.description-item-card {
+  :deep(.ant-card-body) {
+    padding: 10px;
+  }
+  width: 80%;
+  margin-left: 20px;
+  border: 1px dashed rgba(162, 162, 162, 0.19);
+}
+
+//Display description fields or interactive text in a card
+.description-item-content {
+  &.no-card {
+    padding-left: 20px;
+  }
+  &.with-card:hover {
+    color: v-bind('PRIMARY_COLOR');
+  }
+}
+
+//The monitoring tab styles are highly uniform
+.__container_tabDemo3 {
+  .option {
+    padding-left: 16px;
+    .btn {
+      margin-right: 10px;
+    }
+  }
+  :deep(.spin) {
+    margin-top: 30px;
+  }
+  .__container_iframe_container {
+    z-index: 1;
+    position: relative;
+    width: calc(100vw - 332px);
+    height: calc(100vh - 200px);
+    clip-path: inset(20px 10px);
+
+    #grafanaIframe {
+      z-index: 0;
+      top: -112px;
+      position: absolute;
+      width: calc(100vw - 332px);
+      height: calc(100vh - 200px);
+    }
+  }
+}
 </style>
diff --git a/ui-vue3/src/api/mock/mockInstance.ts b/ui-vue3/src/api/mock/mockInstance.ts
@@ -61,47 +61,36 @@ Mock.mock('/mock/instance/detail', 'get', () => {
     code: 200,
     message: 'success',
     data: {
-      deployState: {
-        label: 'pariatur do nulla',
-        value: 'ut',
-        level: 'ullamco veniam laboris ex',
-        tip: '246.179.217.170'
+      deployState: 'Running',
+      registerStates: 'Unregisted',
+      ip: '45.7.37.227',
+      rpcPort: '20880',
+      appName: 'shop-user',
+      workloadName: 'shop-user-prod(deployment)',
+      labels: {
+        app: 'shop-user',
+        version: 'v1',
+        region: 'beijing'
       },
-      registerStates: [
-        {
-          label: 'magna Duis non',
-          value: 'laboris',
-          level: 'et dolore pariatur ipsum adipisicing',
-          tip: '204.174.144.51'
-        }
-      ],
-      dubboPort: 35,
-      ip: '15.1.144.52',
-      appName: '式团划',
-      workload: 'in labore enim',
-      labels: [null],
-      createTime: '2000-11-12 05:59:48',
-      startTime: '1986-03-29 11:48:17',
-      registerTime: '2000-01-26 19:09:48',
-      registerCluster: 'qui commodo dolore',
-      deployCluster: 'dolore laborum',
-      node: 'aliquip',
-      image: 'http://dummyimage.com/400x400',
+      createTime: '2023/12/19 22:09:34',
+      readyTime: '2023/12/19  22:12:34',
+      registerTime: '2023/12/19   22:16:56',
+      registerClusters: ['sz-ali-zk-f8otyo4r', 'hz-ali-zk-oqgiq9gq'],
+      deployCluster: 'tx-shanghai-1',
+      node: 'hz-ali-30.33.0.1',
+      image: 'apache/org.apahce.dubbo.samples.shop-user:v1',
       probes: {
         startupProbe: {
-          type: 'pariatur in quis',
-          port: 92,
-          open: false
+          type: 'http',
+          port: 22222
         },
         readinessProbe: {
-          type: 'aute',
-          port: 52,
-          open: false
+          type: 'http',
+          port: 22222
         },
         livenessPronbe: {
-          type: 'reprehenderit aute nostrud',
-          port: 66,
-          open: false
+          type: 'http',
+          port: 22222
         }
       }
     }

diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
@@ -21,6 +21,7 @@ import LayoutTab from '../layout/tab/layout_tab.vue'
 import _ from 'lodash'
 import AppTabHeaderSlot from '@/views/resources/applications/slots/AppTabHeaderSlot.vue'
 import ServiceTabHeaderSlot from '@/views/resources/services/slots/ServiceTabHeaderSlot.vue'
+import InstanceTabHeaderSlot from '@/views/resources/instances/slots/InstanceTabHeaderSlot.vue'
 
 export declare type RouteRecordType = RouteRecordRaw & {
   key?: string
@@ -145,7 +146,10 @@ export const routes: Readonly<RouteRecordType[]> = [
             component: LayoutTab,
             redirect: 'all',
             meta: {
-              tab_parent: true
+              tab_parent: true,
+              slots: {
+                header: InstanceTabHeaderSlot
+              }
             },
             children: [
               {
@@ -159,7 +163,7 @@ export const routes: Readonly<RouteRecordType[]> = [
               {
                 path: '/detail/:pathId',
                 name: 'instanceDomain.details',
-                component: () => import('../views/resources/instances/tabs/details.vue'),
+                component: () => import('../views/resources/instances/tabs/detail.vue'),
                 meta: {
                   tab: true,
                   icon: 'tabler:list-details'

diff --git a/ui-vue3/src/views/resources/applications/tabs/detail.vue b/ui-vue3/src/views/resources/applications/tabs/detail.vue
@@ -146,24 +146,5 @@ function copyIt(v: string) {
 </script>
 <style lang="less" scoped>
 .__container_app_detail {
-  ._detail {
-    box-shadow: 8px 8px 4px rgba(162, 162, 162, 0.19);
-  }
-  .description-item-content {
-    &.no-card {
-      padding-left: 20px;
-    }
-    &.with-card:hover {
-      color: v-bind('PRIMARY_COLOR');
-    }
-  }
-  .description-item-card {
-    :deep(.ant-card-body) {
-      padding: 10px;
-    }
-    width: 80%;
-    margin-left: 20px;
-    border: 1px dashed rgba(162, 162, 162, 0.19);
-  }
 }
 </style>
diff --git a/ui-vue3/src/views/resources/applications/tabs/monitor.vue b/ui-vue3/src/views/resources/applications/tabs/monitor.vue
@@ -50,31 +50,4 @@ function newPageForGrafana() {
   window.open(grafanaUrl.value, '_blank')
 }
 </script>
-<style lang="less" scoped>
-.__container_tabDemo3 {
-  .option {
-    padding-left: 16px;
-    .btn {
-      margin-right: 10px;
-    }
-  }
-  :deep(.spin) {
-    margin-top: 30px;
-  }
-  .__container_iframe_container {
-    z-index: 1;
-    position: relative;
-    width: calc(100vw - 332px);
-    height: calc(100vh - 200px);
-    clip-path: inset(20px 10px);
-
-    #grafanaIframe {
-      z-index: 0;
-      top: -112px;
-      position: absolute;
-      width: calc(100vw - 332px);
-      height: calc(100vh - 200px);
-    }
-  }
-}
-</style>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/instances/slots/InstanceTabHeaderSlot.vue b/ui-vue3/src/views/resources/instances/slots/InstanceTabHeaderSlot.vue
@@ -0,0 +1,40 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<template>
+  <!--      example like blow-->
+  <div class="__container_AppTabHeaderSlot">
+    <a-row>
+      <a-col :span="12">
+        <span class="header-desc">{{ $t('instanceDomain.name') }}: {{ route.params?.pathId }}</span>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+<style lang="less" scoped>
+.__container_AppTabHeaderSlot {
+  .header-desc {
+    line-height: 30px;
+    vertical-align: center;
+  }
+}
+</style>