feat: update ad ui

Chen-Fan · Jun 24, 2024 · c0f9bae · c0f9bae
1 parent d4b661c
commit c0f9bae
Show file tree

Hide file tree

Showing 17 changed files with 316 additions and 46 deletions.
diff --git a/cmdb-ui/public/iconfont/demo_index.html b/cmdb-ui/public/iconfont/demo_index.html
@@ -54,6 +54,24 @@ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" targ
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
 
+            <li class="dib">
+              <span class="icon iconfont">&#xe962;</span>
+                <div class="name">cmdb-enterprise_edition</div>
+                <div class="code-name">&amp;#xe962;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xe961;</span>
+                <div class="name">ops-KVM</div>
+                <div class="code-name">&amp;#xe961;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xe960;</span>
+                <div class="name">cmdb-vcenter</div>
+                <div class="code-name">&amp;#xe960;</div>
+              </li>
+
             <li class="dib">
               <span class="icon iconfont">&#xe95f;</span>
                 <div class="name">cmdb-manual_warehousing</div>
@@ -5178,9 +5196,9 @@ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</co
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1718872392430') format('woff2'),
-       url('iconfont.woff?t=1718872392430') format('woff'),
-       url('iconfont.ttf?t=1718872392430') format('truetype');
+  src: url('iconfont.woff2?t=1719208046306') format('woff2'),
+       url('iconfont.woff?t=1719208046306') format('woff'),
+       url('iconfont.ttf?t=1719208046306') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -5206,6 +5224,33 @@ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面
       <div class="content font-class">
         <ul class="icon_lists dib-box">
 
+          <li class="dib">
+            <span class="icon iconfont cmdb-enterprise_edition"></span>
+            <div class="name">
+              cmdb-enterprise_edition
+            </div>
+            <div class="code-name">.cmdb-enterprise_edition
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont ops-KVM"></span>
+            <div class="name">
+              ops-KVM
+            </div>
+            <div class="code-name">.ops-KVM
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont cmdb-vcenter"></span>
+            <div class="name">
+              cmdb-vcenter
+            </div>
+            <div class="code-name">.cmdb-vcenter
+            </div>
+          </li>
+
           <li class="dib">
             <span class="icon iconfont cmdb-manual_warehousing"></span>
             <div class="name">
@@ -12892,6 +12937,30 @@ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h
       <div class="content symbol">
           <ul class="icon_lists dib-box">
 
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#cmdb-enterprise_edition"></use>
+                </svg>
+                <div class="name">cmdb-enterprise_edition</div>
+                <div class="code-name">#cmdb-enterprise_edition</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#ops-KVM"></use>
+                </svg>
+                <div class="name">ops-KVM</div>
+                <div class="code-name">#ops-KVM</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#cmdb-vcenter"></use>
+                </svg>
+                <div class="name">cmdb-vcenter</div>
+                <div class="code-name">#cmdb-vcenter</div>
+            </li>
+
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#cmdb-manual_warehousing"></use>

diff --git a/cmdb-ui/public/iconfont/iconfont.css b/cmdb-ui/public/iconfont/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3857903 */
-  src: url('iconfont.woff2?t=1718872392430') format('woff2'),
-       url('iconfont.woff?t=1718872392430') format('woff'),
-       url('iconfont.ttf?t=1718872392430') format('truetype');
+  src: url('iconfont.woff2?t=1719208046306') format('woff2'),
+       url('iconfont.woff?t=1719208046306') format('woff'),
+       url('iconfont.ttf?t=1719208046306') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cmdb-enterprise_edition:before {
+  content: "\e962";
+}
+
+.ops-KVM:before {
+  content: "\e961";
+}
+
+.cmdb-vcenter:before {
+  content: "\e960";
+}
+
 .cmdb-manual_warehousing:before {
   content: "\e95f";
 }

diff --git a/cmdb-ui/public/iconfont/iconfont.js b/cmdb-ui/public/iconfont/iconfont.js
diff --git a/cmdb-ui/public/iconfont/iconfont.json b/cmdb-ui/public/iconfont/iconfont.json
@@ -5,6 +5,27 @@
   "css_prefix_text": "",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "40834860",
+      "name": "cmdb-enterprise_edition",
+      "font_class": "cmdb-enterprise_edition",
+      "unicode": "e962",
+      "unicode_decimal": 59746
+    },
+    {
+      "icon_id": "40832458",
+      "name": "ops-KVM",
+      "font_class": "ops-KVM",
+      "unicode": "e961",
+      "unicode_decimal": 59745
+    },
+    {
+      "icon_id": "40822644",
+      "name": "cmdb-vcenter",
+      "font_class": "cmdb-vcenter",
+      "unicode": "e960",
+      "unicode_decimal": 59744
+    },
     {
       "icon_id": "40795271",
       "name": "cmdb-manual_warehousing",

diff --git a/cmdb-ui/public/iconfont/iconfont.ttf b/cmdb-ui/public/iconfont/iconfont.ttf
diff --git a/cmdb-ui/public/iconfont/iconfont.woff b/cmdb-ui/public/iconfont/iconfont.woff
diff --git a/cmdb-ui/public/iconfont/iconfont.woff2 b/cmdb-ui/public/iconfont/iconfont.woff2
diff --git a/cmdb-ui/src/modules/cmdb/api/discovery.js b/cmdb-ui/src/modules/cmdb/api/discovery.js
@@ -45,9 +45,9 @@ export function getHttpAttributes(name, params) {
     })
 }
 
-export function getSnmpAttributes(name) {
+export function getSnmpAttributes(type, name) {
   return axios({
-    url: `/v0.1/adr/snmp/${name}/attributes`,
+    url: `/v0.1/adr/${type}/${name}/attributes`,
     method: 'GET',
   })
 }

diff --git a/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/httpADCategory.vue b/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/httpADCategory.vue
@@ -3,19 +3,25 @@
     <div class="http-ad-category-preview" v-if="currentCate">
       <div class="category-side">
         <div
-          v-for="category in categories"
+          v-for="(category, categoryIndex) in categories"
           :key="category.category"
           class="category-side-item"
         >
           <div class="category-side-title">{{ category.category }}</div>
           <div class="category-side-children">
             <div
-              v-for="item in category.items"
+              v-for="(item, itemIndex) in category.items"
               :key="item"
               :class="['category-side-children-item', item === currentCate ? 'category-side-children-item_active' : '']"
               @click="clickCategory(item)"
             >
               {{ item }}
+              <span
+                class="category-side-children-item-corporate"
+                v-if="ruleType === 'private_cloud' || (ruleType === 'http' && (categoryIndex !== 0 || itemIndex !== 0))"
+              >
+                企
+              </span>
             </div>
           </div>
         </div>
@@ -35,19 +41,25 @@
       />
       <div class="category-main">
         <div
-          v-for="category in filterCategories"
+          v-for="(category, categoryIndex) in filterCategories"
           :key="category.category"
           class="category-item"
         >
           <div class="category-title">{{ category.category }}</div>
           <div class="category-children">
             <div
-              v-for="item in category.items"
+              v-for="(item, itemIndex) in category.items"
               :key="item"
               :class="['category-children-item', item === currentCate ? 'category-children-item_active' : '']"
               @click="clickCategory(item)"
             >
               {{ item }}
+              <div
+                class="corporate-flag"
+                v-if="ruleType === 'private_cloud' || (ruleType === 'http' && (categoryIndex !== 0 || itemIndex !== 0))"
+              >
+                <span class="corporate-flag-text">企</span>
+              </div>
             </div>
           </div>
         </div>
@@ -81,6 +93,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    ruleType: {
+      type: String,
+      default: 'http',
+    },
   },
   data() {
     return {
@@ -150,6 +166,11 @@ export default {
           font-weight: 400;
 
           cursor: pointer;
+          position: relative;
+
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
 
           &:hover {
             background-color: @layout-sidebar-selected-color;
@@ -160,6 +181,20 @@ export default {
             background-color: @layout-sidebar-selected-color;
             color: @layout-header-font-selected-color;
           }
+
+          &-corporate {
+            flex-shrink: 0;
+            width: 18px;
+            height: 18px;
+            background-color: #E1EFFF;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+
+            color: #2F54EB;
+            font-size: 12px;
+          }
         }
       }
     }
@@ -201,6 +236,7 @@ export default {
           font-weight: 400;
 
           cursor: pointer;
+          position: relative;
 
           &:hover {
             background-color: @layout-sidebar-selected-color;
@@ -219,5 +255,29 @@ export default {
   .corporate-tip {
     margin-top: 20px;
   }
+
+  .corporate-flag {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+
+    width: 38px;
+    height: 28px;
+    border-left: 38px solid transparent;
+    border-top: 28px solid @primary-color_4;
+
+    &-text {
+      width: 37px;
+      position: absolute;
+      top: -28px;
+      right: 3px;
+      text-align: right;
+
+      color: @primary-color;
+      font-size: 10px;
+      font-weight: 400;
+    }
+  }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue b/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="http-snmp-ad">
     <HttpADCategory
-      v-if="!isEdit && ruleType === 'http'"
+      v-if="!isEdit && isCloud"
       :categories="categories"
       :currentCate="currentCate"
       :tableData="tableData"
+      :ruleType="ruleType"
       @clickCategory="setCurrentCate"
     />
     <template v-else>
-      <a-select v-if="ruleType === 'http'" :style="{ marginBottom: '10px' }" v-model="currentCate">
+      <a-select v-if="isCloud" :style="{ marginBottom: '10px' }" v-model="currentCate">
         <a-select-option v-for="cate in categoriesSelect" :key="cate" :value="cate">{{ cate }}</a-select-option>
       </a-select>
       <AttrMapTable
@@ -89,8 +90,13 @@ export default {
         腾讯云: { name: 'tencentcloud' },
         华为云: { name: 'huaweicloud' },
         AWS: { name: 'aws' },
+        VCenter: { name: 'vcenter' },
+        KVM: { name: 'kvm' },
       }
     },
+    isCloud() {
+      return ['http', 'private_cloud'].includes(this.ruleType)
+    }
   },
   watch: {
     currentCate: {
@@ -113,16 +119,17 @@ export default {
         this.currentCate = ''
         this.$nextTick(() => {
           const { ruleType, ruleName } = newVal
-          if (['snmp'].includes(ruleType) && ruleName) {
-            getSnmpAttributes(ruleName).then((res) => {
+          if (['snmp', 'components'].includes(ruleType) && ruleName) {
+            getSnmpAttributes(ruleType, ruleName).then((res) => {
               if (this.isEdit) {
                 this.formatTableData(res)
               } else {
                 this.tableData = res
               }
             })
           }
-          if (ruleType === 'http' && ruleName) {
+
+          if (this.isCloud && ruleName) {
             getHttpCategories(this.httpMap[`${this.ruleName}`].name).then((res) => {
               this.categories = res
               const categoriesSelect = []

diff --git a/cmdb-ui/src/modules/cmdb/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -480,6 +480,8 @@ const cmdb_en = {
         snmp: 'Network Devices',
         http: 'Public Clouds',
         plugin: 'Plugin',
+        component: 'Databases & Middleware',
+        privateCloud: 'Private Clouds',
         rule: 'AutoDiscovery Rules',
         timeout: 'Timeout error',
         mode: 'Mode',

diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -479,7 +479,8 @@ const cmdb_zh = {
         agent: '服务器',
         snmp: '网络设备',
         http: '公有云',
-        plugin: '插件',
+        component: '数据库 & 中间件',
+        privateCloud: '私有云',
         rule: '自动发现规则',
         timeout: '超时错误',
         mode: '模式',