perf: pretty graph

Author: hai-tian

ui/src/components/topologyMap/index.tsx

@@ -432,40 +432,65 @@ const TopologyMap = forwardRef((props: IProps, drawRef) => {
           })
         }
 
-
-
-
-        const statusShape = group.addShape('circle', {
+        const statusShape1 = group.addShape('circle', {
           attrs: {
-            x: 190,
-            y: 10,
+            zIndex: -3,
+            x: 185,
+            y: 15,
             fill: statusColorMap?.[(cfg?.nodeData as any)?.status],
             r: 4,
-            opacity: 0.8,
+            opacity: 0.6,
           },
-          name: 'status-circle',
+          name: 'status-circle1',
         })
-
-        statusShape.animate({
-          x: 190,
-          y: 10,
-          r: 5,
-          opacity: 0.5,
+        const statusShape2 = group.addShape('circle', {
+          attrs: {
+            zIndex: -2,
+            x: 185,
+            y: 15,
+            fill: statusColorMap?.[(cfg?.nodeData as any)?.status],
+            r: 4,
+            opacity: 0.6,
+          },
+          name: 'status-circle2',
+        })
+        const statusShape3 = group.addShape('circle', {
+          attrs: {
+            zIndex: -1,
+            x: 185,
+            y: 15,
+            fill: statusColorMap?.[(cfg?.nodeData as any)?.status],
+            r: 4,
+            opacity: 0.6,
+          },
+          name: 'status-circle3',
+        })
+        group.sort(); // Sort according to the zIndex
+        statusShape1.animate({
+          r: 10,
+          opacity: 0.1,
         }, {
-          duration: 1000,
+          duration: 3000,
           easing: 'easeCubic',
           delay: 0,
           repeat: true,
         },)
-        statusShape.animate({
-          x: 190,
-          y: 10,
-          r: 4,
-          opacity: 0.3,
+        statusShape2.animate({
+          r: 10,
+          opacity: 0.1,
         }, {
-          duration: 1000,
+          duration: 3000,
           easing: 'easeCubic',
-          delay: 0,
+          delay: 1000,
+          repeat: true,
+        },)
+        statusShape3.animate({
+          r: 10,
+          opacity: 0.1,
+        }, {
+          duration: 3000,
+          easing: 'easeCubic',
+          delay: 2000,
           repeat: true,
         },)
 

ui/src/pages/projects/components/runs/previewDetail/index.tsx

@@ -31,6 +31,10 @@ const PreviewDetail = ({ open, currentRecord, handleClose }) => {
     }
   }, [ansi_up, currentRecord?.logs, logRef]);
 
+  const dotStyle = {
+    background: changeSteps?.[selectedResource]?.action === 'Undefined' ? '#ff4d4f' : changeSteps?.[selectedResource]?.action === 'UnChanged' ? "rgba(0,0,0,0.25)" : '#faad14'
+  }
+
   return (
     <Drawer
       title={'Preview Detail'}
@@ -64,14 +68,25 @@ const PreviewDetail = ({ open, currentRecord, handleClose }) => {
                     })
                   }
                 </Select>
-                <div className={styles.status}>
-                  <div className={styles.pulse}>
-                    <Badge style={{ marginLeft: 10 }} status={
-                      changeSteps?.[selectedResource]?.action === 'Undefined' ? 'error' : changeSteps?.[selectedResource]?.action === 'UnChanged' ? "default" : 'warning'
-                    } />
+                {
+                  selectedResource && <div className={styles.status}>
+                    <div className={styles.animate_wave}>
+                      <div
+                        style={dotStyle}
+                        className={`${styles.animate_circle} ${styles.animate_inner}`}>
+                      </div>
+                      <div
+                        style={dotStyle}
+                        className={`${styles.animate_circle} ${styles.animate_middle}`}>
+                      </div>
+                      <div
+                        style={dotStyle}
+                        className={`${styles.animate_circle} ${styles.animate_outer}`}>
+                      </div>
+                    </div>
+                    {changeSteps?.[selectedResource]?.action}
                   </div>
-                  {changeSteps?.[selectedResource]?.action}
-                </div>
+                }
               </div>
               <CodeDiffView oldContent={changeSteps?.[selectedResource]?.from ? JSON.stringify(changeSteps?.[selectedResource]?.from, null, 2) : ''} newContent={changeSteps?.[selectedResource]?.to ? JSON.stringify(changeSteps?.[selectedResource]?.to, null, 2) : ''} />
             </>

ui/src/pages/projects/components/runs/previewDetail/styles.module.less

@@ -7,25 +7,68 @@
     display: flex;
     align-items: center;
     margin-bottom: 10px;
+    margin-left: 10px;
 
-    .pulse {
-      margin-right: 7px;
-      animation: fade-animation 1.5s infinite;
+    .animate_wave {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 10px;
+    }
+
+    .animate_circle {
+      position: absolute;
+      border-radius: 50%;
+    }
+
+    .animate_inner {
+      width: 6px;
+      height: 6px;
+      z-index: 3;
+    }
+
+    .animate_middle {
+      width: 8px;
+      height: 8px;
+      opacity: 0.6;
+      z-index: 2;
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    .animate_outer {
+      width: 10px;
+      height: 10px;
+      opacity: 0.1;
+      z-index: 1;
+      animation: pulse 2s ease-in-out infinite;
     }
   }
 }
 
-
-@keyframes fade-animation {
+@keyframes pulse {
   0% {
-    opacity: 0;
+    transform: scale(1);
   }
 
   50% {
-    opacity: 1;
+    transform: scale(1.8);
   }
 
   100% {
-    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+
+@keyframes flash {
+  0% {
+    opacity: .6;
+    transform: scale(.8)
+  }
+
+  to {
+    opacity: 0.1;
+    transform: scale(2.4)
   }
 }