style: update

src/components/SelectSingle.vue

@@ -85,7 +85,7 @@ limitations under the License. -->
   .bar-select {
     position: relative;
     justify-content: space-between;
-    border: 1px solid #ddd;
+    border: 1px solid var(--el-border-color);
     background: $theme-background;
     border-radius: 3px;
     color: $font-color;
@@ -97,8 +97,8 @@ limitations under the License. -->
       border-radius: 3px;
       margin: 3px;
       color: $active-color;
-      background-color: #fafafa;
-      border: 1px solid #e8e8e8;
+      background-color: var(--theme-background);
+      border: 1px solid var(--el-color-primary);
       text-align: center;
     }
   }
@@ -139,7 +139,7 @@ limitations under the License. -->
     left: 0;
     background-color: $theme-background;
     box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
-    border: 1px solid #ddd;
+    border: 1px solid var(--el-border-color);
     width: 100%;
     border-radius: 0 0 3px 3px;
     border-right-width: 1px !important;
@@ -169,7 +169,7 @@ limitations under the License. -->
     }
 
     &:hover {
-      background-color: #f5f5f5;
+      background-color: var(--layout-background);
     }
   }
 </style>

src/styles/theme.scss

@@ -68,7 +68,7 @@ html {
   --sw-time-axis-text: #4d4d4d;
   --sw-drawer-header: #72767b;
   --sw-marketplace-border: #dedfe0;
-  --sw-grid-item-active: #79bbff;
+  --sw-grid-item-active: #d4d7de;
 }
 
 html.dark {

src/views/dashboard/panel/Tool.vue

@@ -42,11 +42,11 @@ limitations under the License. -->
             :isRemote="['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)"
           />
           <span
-            class="ml-10 cp hierarchy-btn"
+            class="ml-5 cp hierarchy-btn"
             v-if="dashboardStore.entity === 'ServiceInstance'"
             @click="showHierarchy = true"
           >
-            <Icon size="middle" iconName="hierarchy_topology" />
+            <Icon size="small" iconName="hierarchy_topology" />
           </span>
         </div>
         <div class="selectors-item" v-if="key === 5 || key === 6">
@@ -722,10 +722,9 @@ limitations under the License. -->
 
   .hierarchy-btn {
     display: inline-block;
-    width: 24px;
-    height: 24px;
+    padding: 0 2px 2px;
     border: 1px solid #666;
-    border-radius: 5px;
+    border-radius: 4px;
     text-align: center;
     color: #aaa;
   }

src/views/dashboard/related/topology/components/Graph.vue

@@ -13,7 +13,7 @@ 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>
-  <svg class="hierarchy-services-svg" :width="width" :height="height" @click="svgEvent">
+  <svg class="hierarchy-services-svg" :width="width" :height="height" @click="svgEvent" v-if="nodes.length">
     <g class="hierarchy-services-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
       <g
         class="topo-node"
@@ -69,6 +69,7 @@ limitations under the License. -->
       </g>
     </g>
   </svg>
+  <div v-else class="hierarchy-services"> No Data</div>
 </template>
 <script lang="ts" setup>
   import type { PropType } from "vue";
@@ -181,7 +182,8 @@ limitations under the License. -->
   );
 </script>
 <style lang="scss" scoped>
-  .hierarchy-services-topo {
+  .hierarchy-services-topo,
+  hierarchy-services {
     .node-text {
       fill: var(--sw-topology-color);
       font-size: 12px;
@@ -216,4 +218,11 @@ limitations under the License. -->
   .el-loading-spinner {
     top: 30%;
   }
+
+  .hierarchy-services {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+  }
 </style>