Merge pull request #2778 from weili520/gateway_search_highlight

fix: highlight the matched keywords in the query result of gateway logs
kubesphere · Dec 8, 2021 · a0e2bf4 · a0e2bf4
2 parents 48ef4c6 + 36d5ee8
commit a0e2bf4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/pages/clusters/containers/Gateway/Detail/GatewayLog/index.jsx b/src/pages/clusters/containers/Gateway/Detail/GatewayLog/index.jsx
@@ -190,15 +190,15 @@ export default class GatewayLog extends React.Component {
         .map(({ value }) => value)
 
       const markedResult = this.markMemoizee(queryResult, querys, handler)
-
+      const result = markedResult.map(log =>
+        isString(log)
+          ? log
+          : `<span class="${styles.hightLightMatch}">${log.hightLighted}</span>`
+      )
       return (
         <span
           dangerouslySetInnerHTML={{
-            __html: markedResult.map(log =>
-              isString(log)
-                ? log
-                : `<span class="${styles.hightLightMatch}">${log.hightLighted}</span>`
-            ),
+            __html: result.join(''),
           }}
         />
       )

diff --git a/src/pages/clusters/containers/Gateway/Detail/GatewayLog/index.scss b/src/pages/clusters/containers/Gateway/Detail/GatewayLog/index.scss
@@ -232,3 +232,7 @@
   cursor: pointer;
   font-weight: $font-bold;
 }
+
+.hightLightMatch {
+  background: $yellow-color02;
+}