refactor(ui): beautify the UI of Pod Logs, YAML tab, Summary Card (#660)

## What type of PR is this? /kind refactor ## What this PR does / why we need it: This PR enhances the pod logs UI and connection status by improving the connection status feedback, adding hover tooltips with connection details, and applying modern styling to the status indicator. Additionally, it adds translations for connection status tooltips in all supported languages and standardizes the LogAggregator naming. Screenshot: ![image](https://github.com/user-attachments/assets/6c7fd334-58fa-4224-b733-e9bb4c151d84) ![image](https://github.com/user-attachments/assets/ce6f7eb6-09aa-40cb-8e90-ba3930d45c29) ![image](https://github.com/user-attachments/assets/4b5fa5c7-fa4e-41ca-9ffc-0c038c6d48c3) ## Which issue(s) this PR fixes: Fixes #
KusionStack · Dec 9, 2024 · a53b82c · a53b82c
1 parent 73e859e
commit a53b82c
Show file tree

Hide file tree

Showing 12 changed files with 522 additions and 122 deletions.
diff --git a/ui/src/components/tabs/style.module.less b/ui/src/components/tabs/style.module.less
@@ -1,20 +1,57 @@
 .tab_container {
   display: flex;
   align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 12px;
 
   .item {
+    position: relative;
+
     .normal {
-      padding: 10px 0;
+      position: relative;
+      padding: 12px 4px;
       margin-right: 32px;
       font-weight: 400;
-      color: rgb(0 0 0 / 65%);
+      color: rgba(0, 0, 0, 0.65);
       cursor: pointer;
-      border-bottom: 2px solid transparent;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: #2f54eb;
+        transform: scaleX(0);
+        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+
+      &:hover {
+        color: #2f54eb;
+
+        &::after {
+          transform: scaleX(0.3);
+        }
+      }
     }
 
     .active {
       color: #2f54eb;
-      border-bottom: 2px solid #2f54eb;
+      font-weight: 500;
+
+      &::after {
+        transform: scaleX(1);
+      }
+
+      &:hover::after {
+        transform: scaleX(1);
+      }
+    }
+
+    &:last-child .normal {
+      margin-right: 0;
     }
   }
 }
diff --git a/ui/src/components/yaml/index.tsx b/ui/src/components/yaml/index.tsx
@@ -3,6 +3,7 @@ import type { LegacyRef } from 'react'
 import { Button, message } from 'antd'
 import { Resizable } from 're-resizable'
 import { useTranslation } from 'react-i18next'
+import { CopyOutlined } from '@ant-design/icons'
 import hljs from 'highlight.js'
 import yaml from 'js-yaml'
 import 'highlight.js/styles/lightfair.css'
@@ -54,6 +55,18 @@ const Yaml = (props: IProps) => {
           const newModuleHeight = moduleHeight + d.height
           setModuleHeight(newModuleHeight)
         }}
+        handleStyles={{
+          bottom: {
+            bottom: 0,
+            height: '6px',
+            cursor: 'row-resize',
+            background: 'transparent',
+            transition: 'background 0.3s ease',
+          },
+        }}
+        handleClasses={{
+          bottom: styles.resizeHandle,
+        }}
       >
         <div className={styles.yaml_content} style={{ height: props?.height }}>
           <div className={styles.copy}>
@@ -63,6 +76,7 @@ const Yaml = (props: IProps) => {
                 size="small"
                 onClick={copy}
                 disabled={!data}
+                icon={<CopyOutlined />}
               >
                 {t('Copy')}
               </Button>

diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
@@ -2,28 +2,231 @@
   height: 100%;
   overflow-y: auto;
   border-radius: 8px;
+  position: relative;
+  background: #1e1e1e;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-1px);
+
+    .copy {
+      opacity: 1;
+      transform: scale(1.02);
+    }
+  }
 
   .copy {
     position: absolute;
-    top: 20px;
-    right: 20px;
+    top: 16px;
+    right: 24px;
+    z-index: 10;
+    opacity: 0.95;
+    transform: translateY(0);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      background: linear-gradient(45deg, #7cdce7, #7ec699);
+      border-radius: 6px;
+      z-index: -1;
+      opacity: 0;
+      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    :global {
+      .ant-btn {
+        background: rgba(30, 30, 30, 0.95);
+        color: #7cdce7;
+        border: 1px solid rgba(124, 220, 231, 0.3);
+        height: 28px;
+        padding: 10px;
+        font-weight: 500;
+        font-family: 'JetBrains Mono', monospace;
+        letter-spacing: 0.5px;
+        backdrop-filter: blur(4px);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 0 2px rgba(20, 20, 20, 0.3);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        .anticon {
+          font-size: 14px;
+          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        &:hover {
+          color: #fff;
+          border-color: rgba(124, 220, 231, 0.4);
+          transform: translateY(-1px);
+          box-shadow: 0 0 3px rgba(20, 20, 20, 0.4);
+          background: rgba(35, 35, 35, 0.95);
+
+          .anticon {
+            transform: scale(1.1);
+          }
+        }
+
+        &:active {
+          transform: translateY(0);
+          box-shadow: 0 0 1px rgba(20, 20, 20, 0.3);
+          background: rgba(28, 28, 28, 0.95);
+        }
+      }
+    }
+
+    &:hover {
+      &::before {
+        opacity: 0.1;
+      }
+    }
   }
+
   .yaml_container {
     height: 100%;
-    background-color: #000;
+
     .yaml_box {
       width: 100%;
-      padding: 1.5rem 2rem;
+      height: 100%;
+      padding: 16px 20px;
       overflow-y: auto;
-      font:
-        1.1em Inconsolata,
+      font-family: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas,
         monospace;
-      color: #fff;
+      font-size: 13px;
+      line-height: 1.6;
+      color: #e0e0e0;
       word-break: break-all;
       white-space: pre-wrap;
-      background-color: #000;
+      background-color: #1e1e1e;
       border-radius: 8px;
       box-sizing: border-box;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+
+      :global {
+        .hljs {
+          background: transparent;
+          padding: 0;
+          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+          &-attr {
+            color: #7cdce7;
+            transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+            &:hover {
+              color: lighten(#7cdce7, 10%);
+            }
+          }
+
+          &-string {
+            color: #7ec699;
+            transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+            &:hover {
+              color: lighten(#7ec699, 10%);
+            }
+          }
+
+          &-number {
+            color: #f08d49;
+            transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+            &:hover {
+              color: lighten(#f08d49, 10%);
+            }
+          }
+
+          &-boolean {
+            color: #cc99cd;
+            transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+            &:hover {
+              color: lighten(#cc99cd, 10%);
+            }
+          }
+
+          &-null {
+            color: #cc99cd;
+            transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+            &:hover {
+              color: lighten(#cc99cd, 10%);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.resizeHandle {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: row-resize;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scaleX(0.6);
+    width: 60px;
+    height: 2px;
+    background: rgba(47, 84, 235, 0.1);
+    border-radius: 1px;
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover {
+    background: rgba(47, 84, 235, 0.08);
+
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, -50%) scaleX(1);
+      background: rgba(47, 84, 235, 0.3);
+    }
+  }
+
+  &:active {
+    background: rgba(47, 84, 235, 0.15);
+
+    &::after {
+      opacity: 1;
+      background: rgba(47, 84, 235, 0.4);
+      transform: translate(-50%, -50%) scaleX(1.2);
+      box-shadow: 0 0 10px rgba(47, 84, 235, 0.3);
     }
   }
 }
diff --git a/ui/src/locales/de.json b/ui/src/locales/de.json
@@ -28,6 +28,8 @@
   "CheckAllIssues": "Alle Fehler prüfen",
   "ResourceTopology": "Ressourcen Topologie",
   "LogAggregator": "Log",
+  "LogAggregator.ConnectedTip": "Erfolgreich mit Container {{container}} verbunden",
+  "LogAggregator.DisconnectedTip": "Verbindung verloren. Versuche erneut zu verbinden...",
   "EventAggregator": "Ereignis",
   "EventAggregator.Type": "Ereignistyp",
   "EventAggregator.Normal": "Normal",
@@ -142,5 +144,6 @@
   "Connected": "Verbunden",
   "Disconnected": "Getrennt",
   "FailedToParsePodDetails": "Pod-Details konnten nicht analysiert werden",
-  "SelectContainer": "Container auswählen"
+  "SelectContainer": "Container auswählen",
+  "CopiedToClipboard": "In die Zwischenablage kopiert"
 }
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
@@ -26,8 +26,10 @@
   "LowRisk": "Low",
   "Rescan": "Re-scan",
   "CheckAllIssues": "Check All Issues",
-  "ResourceTopology": "Resource Topology",
+  "ResourceTopology": "Topology",
   "LogAggregator": "Log",
+  "LogAggregator.ConnectedTip": "Successfully connected to container {{container}}",
+  "LogAggregator.DisconnectedTip": "Connection lost. Trying to reconnect...",
   "EventAggregator": "Event",
   "EventAggregator.Type": "Event Type",
   "EventAggregator.Normal": "Normal",
@@ -142,5 +144,6 @@
   "ClearLogs": "Clear logs",
   "Connected": "Connected",
   "Disconnected": "Disconnected",
-  "FailedToParsePodDetails": "Failed to parse pod details"
+  "FailedToParsePodDetails": "Failed to parse pod details",
+  "CopiedToClipboard": "Copied to clipboard"
 }
diff --git a/ui/src/locales/pt.json b/ui/src/locales/pt.json
@@ -28,6 +28,8 @@
   "CheckAllIssues": "Verificar Todos os Problemas",
   "ResourceTopology": "Topologia de Recursos",
   "LogAggregator": "Log",
+  "LogAggregator.ConnectedTip": "Conectado com sucesso ao contêiner {{container}}",
+  "LogAggregator.DisconnectedTip": "Conexão perdida. Tentando reconectar...",
   "EventAggregator": "Evento",
   "EventAggregator.Type": "Tipo de Evento",
   "EventAggregator.Normal": "Normal",
@@ -142,5 +144,6 @@
   "Connected": "Conectado",
   "Disconnected": "Desconectado",
   "FailedToParsePodDetails": "Falha ao analisar detalhes do Pod",
-  "SelectContainer": "Selecionar Container"
+  "SelectContainer": "Selecionar container",
+  "CopiedToClipboard": "Copiado para a área de transferência"
 }