feat(ui): support adaptive homepage (#405)

## What type of PR is this? /kind feature ## What this PR does / why we need it: Support adaptive homepage. ![image](https://github.com/KusionStack/karpor/assets/9360247/b9bced00-d824-432a-bff1-dce09fa27c3b) ![image](https://github.com/KusionStack/karpor/assets/9360247/f2e949b6-72de-438c-8cd3-dab5c8e0cef2) ![image](https://github.com/KusionStack/karpor/assets/9360247/c6a910c4-f375-4b0c-a49b-bfd2b7ffd71f) Co-authored-by: hai-tian <[email protected]>
KusionStack · May 6, 2024 · 08ae58a · 08ae58a
1 parent f942585
commit 08ae58a
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 251 deletions.
diff --git a/ui/src/components/sqlSearch/index.tsx b/ui/src/components/sqlSearch/index.tsx
@@ -299,7 +299,7 @@ const SqlSearch = ({ sqlEditorValue, handleSearch }: SqlSearchIProps) => {
                       labelSpan.style.textOverflow = 'ellipsis'
                       labelSpan.style.whiteSpace = 'nowrap'
                       labelSpan.style.padding = '0 10px'
-                      labelSpan.style.fontSize = '16px'
+                      labelSpan.style.fontSize = '14px'
                       const btn = document.createElement('span')
                       btn.innerText = '✕'
                       btn.className = 'delete-btn'
@@ -429,86 +429,90 @@ const SqlSearch = ({ sqlEditorValue, handleSearch }: SqlSearchIProps) => {
     <div className={styles.karpor_editor_container}>
       <div className={styles.karpor_editor}>
         <div className={styles.karpor_editor_prefix}>{searchSqlPrefix}</div>
-        <div
-          style={{ width: '100%', flex: 1 }}
-          ref={editorRef}
-          className={css`
-            .cm-editor .cm-scroller {
-              padding-left: 10px;
-              box-sizing: border-box;
-              background: #fff;
-              border: none;
-            }
-            .cm-editor .cm-content {
-              border-right: none;
-              border-left: none;
-              height: 40px;
-              width: 800px;
-              line-height: 40px;
-              font-size: 16px;
-              padding: 0;
-              overflow-x: auto;
-              white-space: pre;
-              background-color: #fff !important;
-              border: none;
-            }
-            .cm-editor .cm-content:focus {
-              outline: none !important;
-            }
-            .cm-line {
-              height: 40px !important;
-              padding: 0;
-              overflow-x: auto;
-              white-space: pre;
-              border: none;
-            }
-            .CodeMirror-focused {
-              outline: none !important;
-            }
-            .cm-editor.cm-focused {
-              outline: none !important;
-            }
-            .cm-keyword {
-              color: blue !important;
-            }
-            .cm-tooltip-autocomplete .cm-completion {
-              background-color: #f5f5f5 !important;
-            }
-            .cm-tooltip-autocomplete .cm-completionLabel {
-              padding: 10px !important;
-              font-size: 18px !important;
-            }
-            .cm-tooltip.cm-tooltip-autocomplete {
-              border-radius: 6px !important;
-              border: none;
-              padding: 10px !important;
-            }
-            .cm-tooltip.cm-tooltip-autocomplete > ul {
-              height: auto !important;
-              max-height: 500px !important;
-              overflow-y: auto !important;
-            }
-            .cm-tooltip.cm-tooltip-autocomplete > ul > li {
-              background-color: #f3f3f3 !important;
-              margin: 5px 0 !important;
-              padding: 10px 0 !important;
-              border-radius: 6px !important;
-              width: auto !important;
-            }
+        <div className={styles.karpor_editor_content}>
+          <div
+            style={{ width: '100%', flex: 1 }}
+            ref={editorRef}
+            className={css`
+              .cm-editor .cm-scroller {
+                padding-left: 10px;
+                box-sizing: border-box;
+                background: #fff;
+                border: none;
+              }
+              .cm-editor .cm-content {
+                border-right: none;
+                border-left: none;
+                height: 40px;
+                width: 800px;
+                line-height: 40px;
+                font-size: 14px;
+                padding: 0;
+                overflow-x: auto;
+                white-space: pre;
+                background-color: #fff !important;
+                border: none;
+              }
+              .cm-editor .cm-content:focus {
+                outline: none !important;
+              }
+              .cm-line {
+                height: 40px !important;
+                padding: 0;
+                overflow-x: auto;
+                white-space: pre;
+                border: none;
+              }
+              .CodeMirror-focused {
+                outline: none !important;
+              }
+              .cm-editor.cm-focused {
+                outline: none !important;
+              }
+              .cm-keyword {
+                color: blue !important;
+              }
+              .cm-tooltip-autocomplete .cm-completion {
+                background-color: #f5f5f5 !important;
+              }
+              .cm-tooltip-autocomplete .cm-completionLabel {
+                padding: 10px !important;
+                font-size: 18px !important;
+              }
+              .cm-tooltip.cm-tooltip-autocomplete {
+                border-radius: 6px !important;
+                border: none;
+                padding: 10px !important;
+              }
+              .cm-tooltip.cm-tooltip-autocomplete > ul {
+                height: auto !important;
+                max-height: 500px !important;
+                overflow-y: auto !important;
+              }
+              .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+                background-color: #f3f3f3 !important;
+                margin: 5px 0 !important;
+                padding: 10px 0 !important;
+                border-radius: 6px !important;
+                width: auto !important;
+              }
 
-            .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected='true'],
-            .cm-tooltip.cm-tooltip-autocomplete > ul > li:hover {
-              background-color: #97a9f5 !important;
-              color: white !important;
-            }
-          `}
-        />
-        <div className={styles.karpor_editor_divider}>
-          <Divider type="vertical" />
-        </div>
-        <div className={styles.karpor_editor_btn_container}>
-          <div onClick={handleClick} className={styles.karpor_editor_btn}>
-            <img src={arrowRight} />
+              .cm-tooltip.cm-tooltip-autocomplete
+                > ul
+                > li[aria-selected='true'],
+              .cm-tooltip.cm-tooltip-autocomplete > ul > li:hover {
+                background-color: #97a9f5 !important;
+                color: white !important;
+              }
+            `}
+          />
+          <div className={styles.karpor_editor_divider}>
+            <Divider type="vertical" />
+          </div>
+          <div className={styles.karpor_editor_btn_container}>
+            <div onClick={handleClick} className={styles.karpor_editor_btn}>
+              <img src={arrowRight} />
+            </div>
           </div>
         </div>
       </div>

diff --git a/ui/src/components/sqlSearch/styles.module.less b/ui/src/components/sqlSearch/styles.module.less
@@ -9,47 +9,55 @@
     align-items: center;
 
     .karpor_editor_prefix {
+      width: 165px;
       height: 40px;
       padding-left: 10px;
       margin-right: 10px;
-      font-size: 16px;
+      font-size: 14px;
       line-height: 40px;
       color: #999;
       text-align: center;
       background: #f1f1f1;
       border-radius: 40px 0 0 40px;
+      box-sizing: border-box;
     }
 
-    .karpor_editor_divider {
+    .karpor_editor_content {
       display: flex;
-      height: 40px;
-      background: #fff;
       align-items: center;
-    }
+      flex: 1;
 
-    .karpor_editor_btn_container {
-      display: flex;
-      height: 40px;
-      padding-right: 10px;
-      background: #fff;
-      align-items: center;
-      border-radius: 0 40px 40px 0;
+      .karpor_editor_divider {
+        display: flex;
+        height: 40px;
+        background: #fff;
+        align-items: center;
+      }
 
-      .karpor_editor_btn {
+      .karpor_editor_btn_container {
         display: flex;
-        height: 28px;
-        padding: 0 15px;
-        color: #fff;
-        text-align: center;
-        cursor: pointer;
-        background: #2f54eb;
-        border-radius: 40px;
-        justify-content: center;
+        height: 40px;
+        padding-right: 10px;
+        background: #fff;
         align-items: center;
+        border-radius: 0 40px 40px 0;
+
+        .karpor_editor_btn {
+          display: flex;
+          height: 28px;
+          padding: 0 15px;
+          color: #fff;
+          text-align: center;
+          cursor: pointer;
+          background: #2f54eb;
+          border-radius: 40px;
+          justify-content: center;
+          align-items: center;
 
-        img {
-          width: 20px;
-          height: 16px;
+          img {
+            width: 20px;
+            height: 14px;
+          }
         }
       }
     }

diff --git a/ui/src/pages/insight/index.tsx b/ui/src/pages/insight/index.tsx
@@ -12,6 +12,7 @@ import queryString from 'query-string'
 import { useLocation, useNavigate } from 'react-router-dom'
 import Loading from '@/components/loading'
 import {
+  filterKeywordsOfArray,
   hasDuplicatesOfObjectArray,
   isEmptyObject,
   truncationPageData,
@@ -33,28 +34,6 @@ const defalutPageParams = {
   total: 0,
 }
 
-export function filterKeywordsOfArray(list, keywords) {
-  const result = []
-  if (keywords?.length === 1) {
-    list?.forEach((item: any) => {
-      if (item?.title?.toLowerCase()?.includes(keywords?.[0])) {
-        result.push(item)
-      }
-    })
-  } else {
-    list?.forEach((item: any) => {
-      if (
-        keywords?.every((innerValue: string) =>
-          item?.title?.toLowerCase()?.includes(innerValue),
-        )
-      ) {
-        result.push(item)
-      }
-    })
-  }
-  return result
-}
-
 const Insight = () => {
   const { t } = useTranslation()
   const location = useLocation()
@@ -181,7 +160,7 @@ const Insight = () => {
     let tmp = allResourcesData?.groups
     if (keyword) {
       const keywords = keyword?.toLowerCase()?.trim()?.split(' ')
-      tmp = filterKeywordsOfArray(allResourcesData?.groups, keywords)
+      tmp = filterKeywordsOfArray(allResourcesData?.groups, keywords, 'title')
     }
     const pageList = truncationPageData({
       list: tmp,

diff --git a/ui/src/pages/insightDetail/components/exceptionDrawer/index.tsx b/ui/src/pages/insightDetail/components/exceptionDrawer/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Collapse, Drawer, Empty, Input, Pagination, Tag } from 'antd'
 import { CaretRightOutlined, SearchOutlined } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
-import { truncationPageData } from '@/utils/tools'
+import { filterKeywordsOfArray, truncationPageData } from '@/utils/tools'
 import { DEFALUT_PAGE_SIZE_10, SEVERITY_MAP } from '@/utils/constants'
 import ExceptionStat from '../exceptionStat'
 import MultiTag from '../multiTag'
@@ -16,28 +16,6 @@ type IProps = {
   open: boolean
 }
 
-export function filterKeywordsOfArray(list, keywords) {
-  const result = []
-  if (keywords?.length === 1) {
-    list?.forEach((item: any) => {
-      if (item?.issue?.title?.toLowerCase()?.includes(keywords?.[0])) {
-        result.push(item)
-      }
-    })
-  } else {
-    list?.forEach((item: any) => {
-      if (
-        keywords?.every((innerValue: string) =>
-          item?.issue?.title?.toLowerCase()?.includes(innerValue),
-        )
-      ) {
-        result.push(item)
-      }
-    })
-  }
-  return result
-}
-
 const ExceptionDrawer = ({ open, onClose, exceptionList }: IProps) => {
   const [pageParams, setPageParams] = useState({
     pageNo: 1,
@@ -59,7 +37,11 @@ const ExceptionDrawer = ({ open, onClose, exceptionList }: IProps) => {
           )
     if (searchValue) {
       const keywords = searchValue?.toLowerCase().trim()?.split(' ')
-      tmp = filterKeywordsOfArray(exceptionList?.issueGroups, keywords)
+      tmp = filterKeywordsOfArray(
+        exceptionList?.issueGroups,
+        keywords,
+        'issue.title',
+      )
     }
     const pageList = truncationPageData({
       list: tmp,