= 0 ? styles.yaml_content_streamingIndicatorFixed : ''}`}
+ >
+
+
+
+
+ )}
)}
diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
index 47d2b6ab..47676b2c 100644
--- a/ui/src/components/yaml/styles.module.less
+++ b/ui/src/components/yaml/styles.module.less
@@ -204,7 +204,6 @@
}
}
-
.yaml_content_diagnosisPanel {
box-sizing: border-box;
width: 400px;
@@ -332,7 +331,6 @@
box-sizing: border-box;
border-radius: 0 0 12px 12px;
-
&::-webkit-scrollbar {
width: 8px;
height: 8px;
@@ -366,34 +364,7 @@
box-sizing: border-box;
word-wrap: break-word;
- .yaml_content_streamingIndicator {
- display: flex;
- align-items: center;
- gap: 4px;
-
- .dot {
- width: 6px;
- height: 6px;
- background-color: #4447c3;
- border-radius: 50%;
- opacity: 0.3;
- animation: dotPulse 1.4s infinite;
-
- &:nth-child(2) {
- animation-delay: 0.2s;
- }
-
- &:nth-child(3) {
- animation-delay: 0.4s;
- }
- }
- }
- .yaml_content_streamingIndicatorFixed {
- position: fixed;
- bottom: 16px;
- left: 16px;
- }
.yaml_content_diagnosisLoading {
height: 100%;
@@ -624,10 +595,38 @@
}
}
- }
+ .yaml_content_streamingIndicator {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 16px;
- }
+ .dot {
+ width: 6px;
+ height: 6px;
+ background-color: #4447c3;
+ border-radius: 50%;
+ opacity: 0.3;
+ animation: dotPulse 1.4s infinite;
+
+ &:nth-child(2) {
+ animation-delay: 0.2s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.4s;
+ }
+ }
+ }
+ .yaml_content_streamingIndicatorFixed {
+ position: sticky;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+ }
+ }
}
.resizeHandle {
diff --git a/ui/src/locales/de.json b/ui/src/locales/de.json
index 311bc937..a3fb2dc0 100644
--- a/ui/src/locales/de.json
+++ b/ui/src/locales/de.json
@@ -196,5 +196,30 @@
}
},
"Enabled": "Aktiviert",
- "Disabled": "Deaktiviert"
+ "Disabled": "Deaktiviert",
+ "ExceptionList": {
+ "NoIssues": "Keine Probleme gefunden",
+ "NoIssuesFound": "Keine Probleme gefunden",
+ "InterpretConnectionError": "Diagnoseverbindung fehlgeschlagen",
+ "FailedToDiagnoseLogs": "Protokolldiagnose fehlgeschlagen",
+ "Diagnose": "KI-Diagnose",
+ "InterpretResult": "KI-Diagnoseergebnis",
+ "StopInterpret": "Diagnose stoppen",
+ "InterpretInProgress": "Analyse läuft...",
+ "InterpretFailed": "Diagnose fehlgeschlagen",
+ "TryAgainLater": "Bitte versuchen Sie es später erneut",
+ "Rescan": "Erneut scannen",
+ "Collapse": "Einklappen",
+ "Expand": "Ausklappen",
+ "CheckAllIssues": "Alle Probleme prüfen",
+ "ViewIssueDetail": "Problemdetails anzeigen",
+ "Occur": "Tritt auf",
+ "Times": "mal",
+ "CollectedFrom": "Gesammelt von",
+ "Tool": "Werkzeug",
+ "Description": "Beschreibung",
+ "High": "Hoch",
+ "Medium": "Mittel",
+ "Low": "Niedrig"
+ }
}
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index c5eb8fbe..2aed243c 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -200,5 +200,30 @@
}
},
"Enabled": "Enabled",
- "Disabled": "Disabled"
+ "Disabled": "Disabled",
+ "ExceptionList": {
+ "NoIssues": "No Issues Found",
+ "NoIssuesFound": "No Issues Found",
+ "InterpretConnectionError": "Interpret connection failed",
+ "FailedToInterpretLogs": "Failed to interpret logs",
+ "Interpret": "AI Interpret",
+ "InterpretResult": "AI Interpret Result",
+ "StopInterpret": "Stop Interpret",
+ "InterpretInProgress": "Analyzing...",
+ "InterpretFailed": "Interpret Failed",
+ "TryAgainLater": "Please try again later",
+ "Rescan": "Re-scan",
+ "Collapse": "Collapse",
+ "Expand": "Expand",
+ "CheckAllIssues": "Check All Issues",
+ "ViewIssueDetail": "View Issue Detail",
+ "Occur": "Occurs",
+ "Times": "times",
+ "CollectedFrom": "Collected from",
+ "Tool": "Tool",
+ "Description": "Description",
+ "High": "High",
+ "Medium": "Medium",
+ "Low": "Low"
+ }
}
diff --git a/ui/src/locales/pt.json b/ui/src/locales/pt.json
index 9b8be3c4..f8e5524d 100644
--- a/ui/src/locales/pt.json
+++ b/ui/src/locales/pt.json
@@ -198,5 +198,30 @@
}
},
"Enabled": "Ativado",
- "Disabled": "Desativado"
+ "Disabled": "Desativado",
+ "ExceptionList": {
+ "NoIssues": "Nenhum problema encontrado",
+ "NoIssuesFound": "Nenhum problema encontrado",
+ "InterpretConnectionError": "Falha na conexão do diagnóstico",
+ "FailedToDiagnoseLogs": "Falha no diagnóstico dos logs",
+ "Diagnose": "Diagnóstico IA",
+ "InterpretResult": "Resultado do Diagnóstico IA",
+ "StopInterpret": "Parar Diagnóstico",
+ "InterpretInProgress": "Analisando...",
+ "InterpretFailed": "Falha no diagnóstico",
+ "TryAgainLater": "Por favor, tente novamente mais tarde",
+ "Rescan": "Reescanear",
+ "Collapse": "Recolher",
+ "Expand": "Expandir",
+ "CheckAllIssues": "Verificar Todos os Problemas",
+ "ViewIssueDetail": "Ver Detalhes do Problema",
+ "Occur": "Ocorre",
+ "Times": "vezes",
+ "CollectedFrom": "Coletado de",
+ "Tool": "Ferramenta",
+ "Description": "Descrição",
+ "High": "Alto",
+ "Medium": "Médio",
+ "Low": "Baixo"
+ }
}
diff --git a/ui/src/locales/zh.json b/ui/src/locales/zh.json
index 56aaafef..7cada4ba 100644
--- a/ui/src/locales/zh.json
+++ b/ui/src/locales/zh.json
@@ -200,5 +200,30 @@
"DefaultTag": "默认标签",
"FailedToParsePodDetails": "解析 Pod 详情失败",
"Enabled": "已启用",
- "Disabled": "未启用"
+ "Disabled": "未启用",
+ "ExceptionList": {
+ "NoIssues": "未发现问题",
+ "NoIssuesFound": "未发现问题",
+ "InterpretConnectionError": "诊断连接失败",
+ "FailedToInterpretLogs": "日志解读失败",
+ "Interpret": "AI 解读",
+ "InterpretResult": "AI 解读结果",
+ "StopInterpret": "停止诊断",
+ "InterpretInProgress": "分析中...",
+ "InterpretFailed": "诊断失败",
+ "TryAgainLater": "请稍后重试",
+ "Rescan": "重新扫描",
+ "Collapse": "收起",
+ "Expand": "展开",
+ "CheckAllIssues": "查看所有问题",
+ "ViewIssueDetail": "查看问题详情",
+ "Occur": "出现",
+ "Times": "次",
+ "CollectedFrom": "收集自",
+ "Tool": "工具",
+ "Description": "描述",
+ "High": "高",
+ "Medium": "中",
+ "Low": "低"
+ }
}
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
index f0692610..5b36cb01 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
+++ b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
@@ -425,19 +425,19 @@ const EventAggregator: React.FC= 0 ? styles.events_content_streamingIndicatorFixed : ''}`}
- >
-
-
-
-
- )}
)}
+ {diagnosisStatus === 'streaming' && diagnosis && (
+ = 0 ? styles.events_content_streamingIndicatorFixed : ''}`}
+ >
+
+
+
+
+ )}
)
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
index 6d48767c..1c16b9c8 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
+++ b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
@@ -247,7 +247,18 @@
flex-direction: column;
backdrop-filter: blur(8px);
z-index: 10;
- background-image: radial-gradient(ellipse 489px 674px at 6px 0px, #fcf8ff 0%, #ebd7ff 100%), radial-gradient(ellipse 587px 672px at 433px 513px, #dae4ffa1 0%, #e1d2e704 100%), radial-gradient(ellipse 346px 396px at 15px 506px, #dae4ffa3 0%, #e1d2e704 100%), radial-gradient(ellipse 583px 668px at 436px 8px, #f8f5ff 0%, #f3e7f904 100%);
+ background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
+ #fcf8ff 0%,
+ #ebd7ff 100%),
+ radial-gradient(ellipse 587px 672px at 433px 513px,
+ #dae4ffa1 0%,
+ #e1d2e704 100%),
+ radial-gradient(ellipse 346px 396px at 15px 506px,
+ #dae4ffa3 0%,
+ #e1d2e704 100%),
+ radial-gradient(ellipse 583px 668px at 436px 8px,
+ #f8f5ff 0%,
+ #f3e7f904 100%);
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
.events_content_diagnosisHeader {
@@ -448,34 +459,6 @@
}
}
- .events_content_streamingIndicator {
- display: flex;
- align-items: center;
- gap: 4px;
-
- .dot {
- width: 6px;
- height: 6px;
- background-color: #4447c3;
- border-radius: 50%;
- opacity: 0.3;
- animation: dotPulse 1.4s infinite;
-
- &:nth-child(2) {
- animation-delay: 0.2s;
- }
-
- &:nth-child(3) {
- animation-delay: 0.4s;
- }
- }
- }
-
- .events_content_streamingIndicatorFixed {
- position: fixed;
- bottom: 16px;
- left: 16px;
- }
.events_content_diagnosisLoading {
display: flex;
@@ -646,13 +629,41 @@
}
}
- }
+ .events_content_streamingIndicator {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 16px;
+
+ .dot {
+ width: 6px;
+ height: 6px;
+ background-color: #4447c3;
+ border-radius: 50%;
+ opacity: 0.3;
+ animation: dotPulse 1.4s infinite;
+
+ &:nth-child(2) {
+ animation-delay: 0.2s;
+ }
+ &:nth-child(3) {
+ animation-delay: 0.4s;
+ }
+ }
+ }
+
+ .events_content_streamingIndicatorFixed {
+ position: sticky;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+ }
}
}
}
-
.tag {
display: inline-flex;
align-items: center;
diff --git a/ui/src/pages/insightDetail/components/exceptionList/index.tsx b/ui/src/pages/insightDetail/components/exceptionList/index.tsx
index c282699c..ae4beef8 100644
--- a/ui/src/pages/insightDetail/components/exceptionList/index.tsx
+++ b/ui/src/pages/insightDetail/components/exceptionList/index.tsx
@@ -1,12 +1,23 @@
-import React, { useEffect, useState } from 'react'
-import { Button, Empty, Tag } from 'antd'
+import React, { useEffect, useState, useCallback, useRef } from 'react'
+import { Button, Empty, Tag, Space, Tooltip, Alert, Spin } from 'antd'
import { useTranslation } from 'react-i18next'
-import { ArrowRightOutlined, UpOutlined, DownOutlined } from '@ant-design/icons'
+import {
+ ArrowRightOutlined,
+ UpOutlined,
+ DownOutlined,
+ PoweroffOutlined,
+ CloseOutlined,
+} from '@ant-design/icons'
import Loading from '@/components/loading'
import { SEVERITY_MAP } from '@/utils/constants'
import ExceptionStat from '../exceptionStat'
-
+import { useSelector } from 'react-redux'
+import axios from 'axios'
+import { debounce } from 'lodash'
+import Markdown from 'react-markdown'
+import aiSummarySvg from '@/assets/ai-summary.svg'
import styles from './style.module.less'
+import classNames from 'classnames'
type IProps = {
exceptionList: any
@@ -28,9 +39,24 @@ const ExceptionList = ({
const [selectedEventId, setSelectedEventId] = useState
-
-
-
+
+
+
+
+ {isStreaming && (
+
+ }
+ onClick={() => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort()
+ setInterpretStatus('complete')
+ setStreaming(false)
+ }
+ }}
+ />
+
+ )}
+ }
+ onClick={() => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort()
+ }
+ setInterpretStatus('idle')
+ setInterpret('')
+ setStreaming(false)
+ }}
+ />
+
-
+ 
+
+ {t('ExceptionList.InterpretResult')}
+
-
-
- {isShowList ? (
-
- {t('Collapse')}
-
- {isShowList && (
-
+
+ {interpretStatus === 'loading' ||
+ (interpretStatus === 'streaming' && !interpret) ? (
+ {interpret}
+
+
)}
+ {interpretStatus === 'streaming' && interpret && (
+
+
+ ) : interpretStatus === 'error' ? (
+ {t('ExceptionList.InterpretInProgress')}
+= 0 ? styles.streaming_indicatorFixed : ''}`}
+ >
+
+
+
+
+ )}
- {auditLoading ? (
-
-
+
+
+
+
+
+ {isAIEnabled && (
+
+
+ )}
+
+
+ {isShowList ? (
+
+ {t('ExceptionList.Collapse')}
+
- ) : top5List && top5List?.length > 0 ? (
- <>
- {top5List?.map(item => {
- const uniqueKey = `${item?.issue?.title}_${item?.issue?.message}_${item?.issue?.scanner}_${item?.issue?.severity}`
- return (
- setSelectedEventId(uniqueKey)}
- onMouseOut={() => setSelectedEventId(undefined)}
- onClick={() => onItemClick(item)}
- >
- {selectedEventId === uniqueKey && (
-
- {t('ViewIssueDetail')}
-
- )}
-
-
- = ({
) : diagnosisStatus === ('streaming' as DiagnosisStatus) ? (
{diagnosis}
-
)}
diff --git a/ui/src/pages/insightDetail/components/podLogs/styles.module.less b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
index db4d0b19..98312110 100644
--- a/ui/src/pages/insightDetail/components/podLogs/styles.module.less
+++ b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
@@ -176,8 +176,6 @@
cursor: not-allowed;
}
-
-
&:not(:disabled) {
&:hover {
background: rgba(114, 46, 209, 0.08);
@@ -233,7 +231,7 @@
right: 15px;
top: 15px;
color: #222;
- background: rgba(255, 255, 255, .9);
+ background: rgba(255, 255, 255, 0.9);
&:hover {
background: #fff;
@@ -415,7 +413,6 @@
}
}
-
button {
color: rgba(230, 230, 250, 0.85);
transition: all 0.3s ease;
@@ -479,34 +476,7 @@
box-sizing: border-box;
word-wrap: break-word;
- .streamingIndicator {
- display: flex;
- align-items: center;
- gap: 4px;
-
- .dot {
- width: 6px;
- height: 6px;
- background-color: #4447c3;
- border-radius: 50%;
- opacity: 0.3;
- animation: dotPulse 1.4s infinite;
-
- &:nth-child(2) {
- animation-delay: 0.2s;
- }
-
- &:nth-child(3) {
- animation-delay: 0.4s;
- }
- }
- }
- .streamingIndicatorFixed {
- position: fixed;
- bottom: 16px;
- left: 16px;
- }
.diagnosisLoading,
.diagnosisError {
@@ -738,6 +708,37 @@
}
}
}
+
+ .streamingIndicator {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 16px;
+
+ .dot {
+ width: 6px;
+ height: 6px;
+ background-color: #4447c3;
+ border-radius: 50%;
+ opacity: 0.3;
+ animation: dotPulse 1.4s infinite;
+
+ &:nth-child(2) {
+ animation-delay: 0.2s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.4s;
+ }
+ }
+ }
+
+ .streamingIndicatorFixed {
+ position: sticky;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
}
}
}
-
- {t(SEVERITY_MAP?.[item?.issue?.severity]?.text)}
-
-
-
-
)
}
diff --git a/ui/src/pages/insightDetail/components/exceptionList/style.module.less b/ui/src/pages/insightDetail/components/exceptionList/style.module.less
index 68d584c1..f5965333 100644
--- a/ui/src/pages/insightDetail/components/exceptionList/style.module.less
+++ b/ui/src/pages/insightDetail/components/exceptionList/style.module.less
@@ -1,196 +1,760 @@
-.exception {
- width: 100%;
- padding: 24px;
- background: #fff;
- border-radius: 8px;
- box-sizing: border-box;
-
- .header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 10px;
+.exceptionContainer {
+ display: flex;
+ gap: 16px;
+
+ .exception {
+ flex: 1;
+ padding: 24px;
+ background: #fff;
+ border-radius: 8px;
+ box-sizing: border-box;
- .header_left {
+ .header {
display: flex;
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
- color: rgb(0 0 0 / 65%);
+ justify-content: space-between;
align-items: center;
+ margin-bottom: 10px;
- .title {
+ .header_left {
display: flex;
- margin-right: 20px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 22px;
+ color: rgb(0 0 0 / 65%);
align-items: center;
+
+ .title {
+ display: flex;
+ margin-right: 20px;
+ align-items: center;
+ }
+
+ .num {
+ padding: 2px 10px;
+ margin-left: 5px;
+ font-size: 12px;
+ background-color: rgb(0 0 0 / 3%);
+ border-radius: 10px;
+ transform: scale(0.8);
+ }
+ }
+
+ .header_right {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .header_right_action {
+ margin-left: 10px;
+ color: #646566;
+ cursor: pointer;
+ }
+
+ &_ai_button {
+ height: 28px;
+ width: 28px;
+ padding: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+
+ .magic_wand {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ background: linear-gradient(135deg, #722ed1 0%, #1890ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ transform: rotate(-15deg);
+ transition: all 0.3s ease;
+ filter: drop-shadow(0 0 2px rgba(114, 46, 209, 0.3));
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg, #722ed1 0%, #1890ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ opacity: 0.5;
+ filter: blur(4px);
+ transform: scale(1.2);
+ z-index: -1;
+ }
+ }
+
+ &:not(:disabled) {
+ &:hover {
+ background: rgba(114, 46, 209, 0.08);
+
+ .magic_wand {
+ transform: rotate(0deg) scale(1.2);
+ filter: drop-shadow(0 0 4px rgba(114, 46, 209, 0.5));
+
+ &::before {
+ opacity: 0.8;
+ transform: scale(1.4);
+ filter: blur(6px);
+ }
+ }
+ }
+
+ &:active {
+ background: rgba(114, 46, 209, 0.12);
+
+ .magic_wand {
+ transform: rotate(-25deg) scale(0.95);
+ filter: drop-shadow(0 0 2px rgba(114, 46, 209, 0.3));
+
+ &::before {
+ opacity: 0.3;
+ transform: scale(1.1);
+ filter: blur(3px);
+ }
+ }
+ }
+ }
+
+ &[disabled] {
+ color: rgba(0, 0, 0, 0.25);
+ background: transparent;
+ cursor: not-allowed;
+ }
+
+ &.ant-btn-loading .magic_wand {
+ opacity: 0;
+ }
+ }
+ }
+ }
+
+ .body {
+ .loading_box {
+ display: flex;
+ align-items: center;
+ }
+
+ .item {
+ box-sizing: border-box;
+ position: relative;
+ padding: 10px 8px;
+ font-size: 14px;
+ font-weight: 400;
+ color: rgb(0 10 26 / 45%);
+ cursor: pointer;
+ border-bottom: 1px solid #f7f7f7;
+
+ .itme_tip {
+ position: absolute;
+ top: -55px;
+ right: 200px;
+ padding: 0 10px;
+ height: 38px;
+ font-size: 14px;
+ line-height: 38px;
+ color: #fff;
+ text-align: center;
+ background-color: #000;
+ border-radius: 8px;
+ box-shadow:
+ 0 3px 6px -4px rgb(0 0 0 / 12%),
+ 0 6px 16px 0 rgb(0 0 0 / 8%),
+ 0 9px 28px 8px rgb(0 0 0 / 5%);
+
+ &::before {
+ position: absolute;
+ bottom: 0;
+ left: 30px;
+ width: 0;
+ height: 0;
+ margin-bottom: -15px;
+ border: 10px solid transparent;
+ border-radius: 8px;
+ content: '';
+ border-top-color: #000;
+ }
+
+ &::after {
+ position: absolute;
+ bottom: 0;
+ left: 30px;
+ width: 0;
+ height: 0;
+ margin-bottom: -15px;
+ border: 10px solid transparent;
+ border-radius: 8px;
+ content: '';
+ border-top-color: #000;
+ }
+ }
+
+ .itme_content {
+ display: flex;
+
+ .left {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ .title {
+ margin-right: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ color: rgb(0 10 26 / 89%);
+ }
+ }
+
+ .right {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+
+ .right_top {
+ display: flex;
+ align-items: center;
+
+ .date,
+ .times,
+ .tool {
+ margin: 0 8px;
+ font-size: 14px;
+ font-weight: 400;
+ color: rgb(0 10 26 / 89%);
+ }
+ }
+
+ .right_bottom {
+ display: flex;
+ width: 100%;
+ font-size: 12px;
+ box-sizing: border-box;
+ align-items: center;
+
+ .label {
+ font-weight: 400;
+ line-height: 24px;
+ color: rgb(0 10 26 / 45%);
+ }
+
+ .value {
+ width: 0;
+ overflow: hidden;
+ font-weight: 400;
+ color: rgb(0 10 26 / 89%);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1;
+ }
+ }
+ }
+ }
}
- .num {
- padding: 2px 10px;
- margin-left: 5px;
- font-size: 12px;
- background-color: rgb(0 0 0 / 3%);
- border-radius: 10px;
- transform: scale(0.8);
+ .item:hover {
+ box-sizing: border-box;
+ box-shadow:
+ 0 1px 2px -2px rgb(0 0 0 / 16%),
+ 0 3px 6px 0 rgb(0 0 0 / 12%),
+ 0 5px 12px 4px rgb(0 0 0 / 9%);
+ border-radius: 8px;
+ }
+
+ .content_empty {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
}
- .header_right {
+ .content_wrapper {
display: flex;
- align-items: center;
+ gap: 24px;
+ }
- .header_right_action {
- margin-left: 10px;
- color: #646566;
+ .list_container {
+ width: 100%;
+ transition: width 0.3s ease;
+ }
+
+ .footer {
+ margin-top: 16px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #2f54eb;
+
+ .btn {
cursor: pointer;
}
}
}
- .body {
- .loading_box {
+ .interpret_panel {
+ width: 400px;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
+ #fcf8ff 0%,
+ #ebd7ff 100%),
+ radial-gradient(ellipse 587px 672px at 433px 513px,
+ #dae4ffa1 0%,
+ #e1d2e704 100%),
+ radial-gradient(ellipse 346px 396px at 15px 506px,
+ #dae4ffa3 0%,
+ #e1d2e704 100%),
+ radial-gradient(ellipse 583px 668px at 436px 8px,
+ #f8f5ff 0%,
+ #f3e7f904 100%);
+
+ .interpret_header {
+ padding: 12px;
+ border-bottom: 1px solid rgba(147, 112, 219, 0.2);
display: flex;
+ justify-content: space-between;
align-items: center;
- }
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ font-size: 16px;
+ font-weight: 500;
+ color: #000;
+ backdrop-filter: blur(4px);
- .item {
- position: relative;
- padding: 10px 8px;
- font-size: 14px;
- font-weight: 400;
- color: rgb(0 10 26 / 45%);
- cursor: pointer;
- border-bottom: 1px solid #f7f7f7;
-
- .itme_tip {
- position: absolute;
- top: -55px;
- right: 200px;
- width: 100px;
- height: 38px;
- font-size: 14px;
- line-height: 38px;
- color: #fff;
- text-align: center;
- background-color: #000;
- border-radius: 8px;
- box-shadow:
- 0 3px 6px -4px rgb(0 0 0 / 12%),
- 0 6px 16px 0 rgb(0 0 0 / 8%),
- 0 9px 28px 8px rgb(0 0 0 / 5%);
+ .interpret_title {
+ font-weight: 500;
+ color: #000;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .interpret_icon {
+ width: 18px;
+ height: 18px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+
+ .interpret_header_stopButton {
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ margin-right: 8px;
+ position: relative;
+ overflow: hidden;
&::before {
+ content: '';
position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
bottom: 0;
- left: 30px;
- width: 0;
- height: 0;
- margin-bottom: -15px;
- border: 10px solid transparent;
- border-radius: 8px;
- content: '';
- border-top-color: #000;
+ background: rgba(255, 77, 79, 0);
+ transition: background 0.3s ease;
+ z-index: 0;
}
- &::after {
- position: absolute;
- bottom: 0;
- left: 30px;
- width: 0;
- height: 0;
- margin-bottom: -15px;
- border: 10px solid transparent;
- border-radius: 8px;
- content: '';
- border-top-color: #000;
+ :global(.anticon) {
+ font-size: 16px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ z-index: 1;
+ }
+
+ &:hover {
+ color: #ff4d4f;
+ transform: scale(1.05);
+
+ &::before {
+ background: rgba(255, 77, 79, 0.15);
+ }
+
+ :global(.anticon) {
+ transform: rotate(180deg) scale(1.1);
+ }
+ }
+
+ &:active {
+ transform: scale(0.95);
+
+ &::before {
+ background: rgba(255, 77, 79, 0.25);
+ }
}
}
- .itme_content {
+ button {
+ transition: all 0.3s ease;
+ border-radius: 6px;
+ width: 28px;
+ height: 28px;
display: flex;
+ align-items: center;
+ justify-content: center;
- .left {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ &:hover {
+ color: #fff;
+ background: rgba(147, 112, 219, 0.2);
+ transform: scale(1.05);
+ }
- .title {
- margin-right: 8px;
- font-size: 14px;
- font-weight: 500;
- color: rgb(0 10 26 / 89%);
- }
+ &:active {
+ transform: scale(0.95);
}
+ }
+
+ .interpret_close {
+ cursor: pointer;
+ color: #999;
+ transition: all 0.3s ease;
+ padding: 4px;
+ border-radius: 4px;
- .right {
+ &:hover {
+ color: #000;
+ background: rgba(0, 0, 0, 0.06);
+ }
+ }
+ }
+
+ .interpret_body {
+ position: relative;
+ overflow-y: auto;
+ height: 100%;
+ box-sizing: border-box;
+ border-radius: 0 0 12px 12px;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: rgba(147, 112, 219, 0.05);
+ border-radius: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(147, 112, 219, 0.2);
+ border-radius: 4px;
+ border: 2px solid transparent;
+ background-clip: padding-box;
+
+ &:hover {
+ background: rgba(147, 112, 219, 0.3);
+ border: 2px solid transparent;
+ background-clip: padding-box;
+ }
+ }
+
+ .interpret_content {
+ color: #000;
+ border-radius: 0 0 12px 12px;
+ padding: 20px 16px;
+ font-size: 14px;
+ line-height: 1.6;
+ box-sizing: border-box;
+ word-wrap: break-word;
+
+ .interpret_loading {
display: flex;
flex-direction: column;
- flex: 1;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ gap: 16px;
+ text-align: center;
+ color: rgba(230, 230, 250, 0.85);
- .right_top {
- display: flex;
- align-items: center;
+ :global(.ant-spin) {
+ .ant-spin-dot-item {
+ background-color: #9370db;
+ }
+ }
+
+ p {
+ font-size: 14px;
+ margin-top: 16px;
+ color: rgba(230, 230, 250, 0.85);
+ }
+ }
+
+ .interpret_error {
+ margin: 16px;
+ border-radius: 6px;
+ }
+
+ h1,
+ h2,
+ h3 {
+ color: #000;
+ margin-bottom: 16px;
+ font-weight: 600;
+ letter-spacing: -0.01em;
+ }
+
+ h1 {
+ font-size: 20px;
+ }
+
+ h2 {
+ font-size: 18px;
+ margin-top: 24px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+ }
+
+ h3 {
+ font-size: 16px;
+ margin-top: 20px;
+ }
+
+ p {
+ margin-bottom: 16px;
+ line-height: 1.7;
+ }
+
+ ul,
+ ol {
+ padding-left: 24px;
+ margin-bottom: 16px;
+ }
+
+ li {
+ margin-bottom: 8px;
+ }
+
+ code {
+ background: rgba(147, 112, 219, 0.1);
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+ font-size: 13px;
+ }
+
+ pre {
+ background: #000;
+ padding: 16px;
+ border-radius: 8px;
+ margin-bottom: 16px;
+ overflow-x: auto;
+ border: 1px solid rgba(147, 112, 219, 0.1);
+
+ code {
+ background: none;
+ padding: 0;
+ color: #fff;
+ }
+ }
+
+ :global {
+ .markdown-body {
+ color: #d4d4d4;
+ background: transparent;
+ padding: 16px;
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: rgba(230, 230, 250, 0.95);
+ border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+ margin-top: 24px;
+ margin-bottom: 16px;
+ font-weight: 600;
+ line-height: 1.25;
+ }
+
+ h1 {
+ font-size: 24px;
+ }
- .date,
- .times,
- .tool {
- margin: 0 8px;
+ h2 {
+ font-size: 20px;
+ }
+
+ h3 {
+ font-size: 18px;
+ }
+
+ h4 {
+ font-size: 16px;
+ }
+
+ h5 {
font-size: 14px;
- font-weight: 400;
- color: rgb(0 10 26 / 89%);
}
- }
- .right_bottom {
- display: flex;
- width: 100%;
- font-size: 12px;
- box-sizing: border-box;
- align-items: center;
+ h6 {
+ font-size: 13px;
+ }
+
+ pre {
+ background: rgba(0, 0, 0, 0.4);
+ border: 1px solid rgba(147, 112, 219, 0.5);
+ border-radius: 6px;
+ padding: 12px;
+ margin: 12px 0;
+ overflow-x: auto;
+
+ code {
+ background: transparent;
+ padding: 0;
+ color: #f0e6ff;
+ }
+ }
- .label {
- font-weight: 400;
- line-height: 24px;
- color: rgb(0 10 26 / 45%);
+ code {
+ background: rgba(147, 112, 219, 0.2);
+ padding: 2px 6px;
+ border-radius: 4px;
+ color: #f0e6ff;
+ font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
- .value {
- width: 0;
+ ul,
+ ol {
+ padding-left: 24px;
+ margin: 8px 0;
+
+ li {
+ margin: 4px 0;
+ }
+ }
+
+ blockquote {
+ color: rgba(230, 230, 250, 0.85);
+ border-left: 4px solid rgba(147, 112, 219, 0.4);
+ background: rgba(147, 112, 219, 0.1);
+ margin: 16px 0;
+ padding: 12px 16px;
+ border-radius: 0 8px 8px 0;
+ }
+
+ a {
+ color: #9370db;
+ text-decoration: none;
+ transition: all 0.2s ease;
+ border-bottom: 1px solid transparent;
+
+ &:hover {
+ color: lighten(#9370db, 10%);
+ border-bottom-color: currentColor;
+ }
+ }
+
+ table {
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
+ margin: 16px 0;
+ border-radius: 8px;
+ border: 1px solid rgba(147, 112, 219, 0.2);
overflow: hidden;
- font-weight: 400;
- color: rgb(0 10 26 / 89%);
- text-overflow: ellipsis;
- white-space: nowrap;
- flex: 1;
+
+ th,
+ td {
+ border: 1px solid rgba(147, 112, 219, 0.2);
+ padding: 12px;
+ }
+
+ th {
+ background: rgba(147, 112, 219, 0.1);
+ font-weight: 600;
+ text-align: left;
+ }
+
+ tr {
+ background-color: transparent;
+ transition: background-color 0.2s ease;
+
+ &:nth-child(2n) {
+ background-color: rgba(147, 112, 219, 0.05);
+ }
+
+ &:hover {
+ background-color: rgba(147, 112, 219, 0.1);
+ }
+ }
+ }
+
+ hr {
+ border: none;
+ height: 1px;
+ background: linear-gradient(to right,
+ rgba(147, 112, 219, 0.1),
+ rgba(147, 112, 219, 0.4),
+ rgba(147, 112, 219, 0.1));
+ margin: 24px 0;
}
}
}
}
- }
- .item:hover {
- box-shadow:
- 0 1px 2px -2px rgb(0 0 0 / 16%),
- 0 3px 6px 0 rgb(0 0 0 / 12%),
- 0 5px 12px 4px rgb(0 0 0 / 9%);
- border-radius: 8px;
- }
+ .streaming_indicator {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 16px;
- .content_empty {
- display: flex;
- justify-content: center;
- align-items: center;
+ .dot {
+ width: 6px;
+ height: 6px;
+ background-color: #4447c3;
+ border-radius: 50%;
+ opacity: 0.3;
+ animation: dotPulse 1.4s infinite;
+
+ &:nth-child(2) {
+ animation-delay: 0.2s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.4s;
+ }
+ }
+ }
+
+ .streaming_indicatorFixed {
+ position: sticky;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
}
}
+}
- .footer {
- margin-top: 16px;
- font-size: 14px;
- font-weight: 500;
- color: #2f54eb;
+@keyframes dotPulse {
+ 0% {
+ opacity: 0.3;
+ }
- .btn {
- cursor: pointer;
- }
+ 50% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0.3;
}
}
diff --git a/ui/src/pages/insightDetail/components/podLogs/index.tsx b/ui/src/pages/insightDetail/components/podLogs/index.tsx
index ce5c45e7..670ee890 100644
--- a/ui/src/pages/insightDetail/components/podLogs/index.tsx
+++ b/ui/src/pages/insightDetail/components/podLogs/index.tsx
@@ -848,13 +848,6 @@ const PodLogs: React.FC
-
+ {isShowList && (
+
-
- {item?.issue?.title}
-
-
- {t('Occur')}
-
- {item?.resourceGroups?.length}
-
- {t('Times')}
-
- |
- {t('CollectedFrom')}
-
-
-
+
+ {auditLoading ? (
+
+ {renderInterpretWindow()}
+
+ ) : top5List && top5List?.length > 0 ? (
+
+
+ )}
+
+ {top5List?.map(item => {
+ const uniqueKey = `${item?.issue?.title}_${item?.issue?.message}_${item?.issue?.scanner}_${item?.issue?.severity}`
+ return (
+
- )}
+ ) : (
+ setSelectedEventId(uniqueKey)}
+ onMouseOut={() => setSelectedEventId(undefined)}
+ onClick={() => onItemClick(item)}
+ >
+ {selectedEventId === uniqueKey && (
+
-
+ {t('ExceptionList.ViewIssueDetail')}
-
-
-
- ) : (
-
- {t('Description')}:
+ )}
+
+
+ )
+ })}
+
+
-
+
+ {t(
+ `ExceptionList.${SEVERITY_MAP?.[item?.issue?.severity]?.text}`,
+ )}
+
-
- {item?.issue?.message}
+
+
+
+
+
+ {item?.issue?.title}
+
+
+ {t('ExceptionList.Occur')}
+
+ {item?.resourceGroups?.length}
+
+ {t('ExceptionList.Times')}
+
+ |
+ {t('ExceptionList.CollectedFrom')}
+
+
+
+
+
+ {t('ExceptionList.Description')}:
+
+
+ {item?.issue?.message}
+
+
+
+ {t('ExceptionList.CheckAllIssues')}
+
- )
- })}
-
-
- {t('CheckAllIssues')}
-
-
- )}
-
+
+ )}
+ = 0 ? styles.streamingIndicatorFixed : ''}`}
- >
-
-
-
-
= ({
{diagnosis}
)}
+ {diagnosisStatus === ('streaming' as DiagnosisStatus) &&
+ diagnosis && (
+ = 0 ? styles.streamingIndicatorFixed : ''}`}
+ >
+
+
+
+
+ )}