Feat(#536): Graphically display Component and Trait relationships and…

… status Signed-off-by: weiy730 <[email protected]>
kubevela · Oct 13, 2022 · efcb2df · efcb2df
1 parent c1a63a8
commit efcb2df
Show file tree

Hide file tree

Showing 26 changed files with 812 additions and 654 deletions.
diff --git a/src/components/TreeGraph/index.less b/src/components/TreeGraph/index.less
@@ -3,7 +3,20 @@
 .graph-tree {
   position: relative;
   overflow: auto;
-
+  .graph-edge-line-traits {
+    position: absolute;
+    z-index: -1;
+    border-top: 1px dashed #666;
+    transition: all 0.2s linear;
+  }
+  .graph-edge-line-traits:after {
+    position: absolute;
+    top: -10px;
+    color: #a3a3a3;
+    font-size: 10px;
+    transform: rotate(180deg);
+    content: '\25BA';
+  }
   .graph-node {
     position: absolute;
     display: flex;
@@ -59,14 +72,38 @@
         color: #666;
       }
     }
+    .trait {
+      height: 24px;
+      line-height: 24px;
+    }
+    .label-dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 5px;
+      background: #2DC86D;
+      display: inline-block;
+      position: absolute;
+      bottom: 7px;
+      left: -9px;
+    }
     .additional {
       position: absolute;
       right: 8px;
-      bottom: -12px;
+      bottom: -14px;
       display: block;
     }
+    .healthy {
+      position: absolute;
+      left: 52px;
+      bottom: 0;
+      color: #2DC86D;
+    }
+    .label-traits {
+      bottom: 10px;
+      position: absolute;
+      right: 12px;
+    }
   }
-
   .graph-node-app {
     padding-left: 5em;
     .name {