feat(yaml): add refresh button & refresh when switch the tab

ui/src/components/yaml/index.tsx

@@ -9,6 +9,7 @@ import {
   PoweroffOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
+  ReloadOutlined,
 } from '@ant-design/icons'
 import hljs from 'highlight.js'
 import yaml from 'js-yaml'
@@ -37,6 +38,7 @@ type InterpretStatus =
 type IProps = {
   data: any
   height?: string | number
+  onRefresh?: () => void
 }
 
 const Yaml = (props: IProps) => {
@@ -47,7 +49,7 @@ const Yaml = (props: IProps) => {
   const interpretEndRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
   const observerRef = useRef<MutationObserver | null>(null)
-  const { data } = props
+  const { data, onRefresh } = props
   const [moduleHeight, setModuleHeight] = useState<number>(500)
   const [interpretStatus, setInterpretStatus] =
     useState<InterpretStatus>('idle')
@@ -57,6 +59,10 @@ const Yaml = (props: IProps) => {
   const { aiOptions } = useSelector((state: any) => state.globalSlice)
   const isAIEnabled = aiOptions?.AIModel && aiOptions?.AIAuthToken
 
+  useEffect(() => {
+    onRefresh?.()
+  }, [])
+
   useEffect(() => {
     const yamlStatusJson = yaml2json(data)
     if (yamlRef.current && yamlStatusJson?.data) {
@@ -297,6 +303,15 @@ const Yaml = (props: IProps) => {
                           />
                         </Tooltip>
                       )}
+                      {!handle.active && onRefresh && (
+                        <Tooltip title={t('YAML.Refresh')}>
+                          <Button
+                            type="text"
+                            onClick={onRefresh}
+                            icon={<ReloadOutlined />}
+                          />
+                        </Tooltip>
+                      )}
                       {!handle.active && (
                         <Button
                           type="primary"

ui/src/locales/en.json

@@ -157,7 +157,8 @@
     "InterpretConnectionError": "Interpretation connection error",
     "FailedToStartInterpret": "Failed to start interpretation",
     "FailedToInterpret": "Failed to interpret",
-    "TabName": "YAML"
+    "TabName": "YAML",
+    "Refresh": "Refresh"
   },
   "Yesterday": "Yesterday",
   "Collapse": "Collapse",

ui/src/pages/insightDetail/cluster/index.tsx

@@ -318,7 +318,7 @@ const ClusterDetail = () => {
       }
     }
     if (currentTab === 'YAML') {
-      return <Yaml data={yamlData || ''} />
+      return <Yaml data={yamlData || ''} onRefresh={getClusterDetail} />
     }
     if (currentTab === 'K8s') {
       return (