Merge pull request #332 from devtron-labs/feat/improve-log-search

feat: incremental search in logs

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.22",
+    "version": "4.0.1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -83,18 +83,18 @@
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
+        "react-keybind": "^0.9.4",
         "react-mde": "^11.5.0",
         "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
-        "react-keybind": "^0.9.4",
         "rxjs": "^7.8.1",
         "yaml": "^2.4.1"
     },
     "dependencies": {
         "@types/react-dates": "^21.8.6",
         "ansi_up": "^5.2.1",
-        "dayjs": "^1.11.12",
+        "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
         "jsonpath-plus": "^9.0.0",
         "react-dates": "^21.8.0",

package.json

@@ -54,14 +54,6 @@ function useCodeEditorContext() {
     return context
 }
 
-/**
- * TODO: can be removed with this new merge into react-monaco-editor :)
- * see: https://github.com/react-monaco-editor/react-monaco-editor/pull/955
- * */
-const _onChange = {
-    onChange: null,
-}
-
 const INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT = 100
 
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(
@@ -107,6 +99,12 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         const [contentHeight, setContentHeight] = useState(
             adjustEditorHeightToContent ? INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT : height,
         )
+        /**
+         * TODO: can be removed with this new merge into react-monaco-editor :)
+         * see: https://github.com/react-monaco-editor/react-monaco-editor/pull/955
+         * */
+        const onChangeRef = useRef(onChange)
+        onChangeRef.current = onChange
         monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
             base: 'vs-dark',
             inherit: true,
@@ -257,14 +255,9 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             editorRef.current.layout()
         }, [width, windowHeight])
 
-        /**
-         * NOTE: Please see @_onChange variable
-         */
-        _onChange.onChange = onChange
-
         const setCode = (value: string) => {
             dispatch({ type: 'setCode', value })
-            _onChange.onChange?.(value)
+            onChangeRef.current?.(value)
         }
 
         useEffect(() => {

src/Assets/Icon/ic-caret-left-small.svg

@@ -639,12 +639,6 @@ export interface VulnerabilityType {
     url?: string
 }
 
-export interface ScanVulnerabilitiesTableProps {
-    vulnerabilities: VulnerabilityType[]
-    hidePolicy?: boolean
-    shouldStick?: boolean
-}
-
 export interface MaterialInfo {
     revision: string
     modifiedTime: string | Date

src/Assets/Icon/ic-close.svg

@@ -1,7 +1,8 @@
 import DOMPurify from 'dompurify'
 import { getTimeDifference } from '@Shared/Helpers'
+import { RefCallback } from 'react'
 import { LogStageAccordionProps } from './types'
-import { getStageStatusIcon } from './utils'
+import { getLogSearchIndex, getStageStatusIcon } from './utils'
 import { ReactComponent as ICCaretDown } from '../../../Assets/Icon/ic-caret-down.svg'
 
 const LogsItemContainer = ({ children }: { children: React.ReactNode }) => (
@@ -20,6 +21,7 @@ const LogStageAccordion = ({
     stageIndex,
     isLoading,
     fullScreenView,
+    searchIndex,
 }: LogStageAccordionProps) => {
     const handleAccordionToggle = () => {
         if (isOpen) {
@@ -37,6 +39,24 @@ const LogStageAccordion = ({
         return timeDifference
     }
 
+    const scrollIntoView: RefCallback<HTMLSpanElement> = (node) => {
+        if (!node) {
+            return
+        }
+
+        if (node.dataset.containsMatch === 'true' && node.dataset.triggered !== 'true') {
+            // eslint-disable-next-line no-param-reassign
+            node.dataset.triggered = 'true'
+            // TODO: this will additionally scroll the top most scrollbar. Need to check into that
+            node.scrollIntoView({ block: 'center', behavior: 'smooth' })
+        }
+
+        if (node.dataset.containsMatch === 'false') {
+            // eslint-disable-next-line no-param-reassign
+            node.dataset.triggered = 'false'
+        }
+    }
+
     return (
         <div className="flexbox-col dc__gap-8">
             <button
@@ -64,23 +84,32 @@ const LogStageAccordion = ({
 
             {isOpen && (
                 <div className="flexbox-col dc__gap-4">
-                    {logs.map((log: string, logsIndex: number) => (
-                        <LogsItemContainer
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`logs-${stage}-${startTime}-${logsIndex}`}
-                        >
-                            <span className="cn-4 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14">
-                                {logsIndex + 1}
-                            </span>
-                            <p
-                                className="mono fs-14 mb-0-imp cn-0 dc__word-break lh-20"
-                                // eslint-disable-next-line react/no-danger
-                                dangerouslySetInnerHTML={{
-                                    __html: DOMPurify.sanitize(log),
-                                }}
-                            />
-                        </LogsItemContainer>
-                    ))}
+                    {logs.map((log: string, logsIndex: number) => {
+                        const doesLineContainSearchMatch =
+                            getLogSearchIndex({ stageIndex, lineNumberInsideStage: logsIndex }) === searchIndex
+
+                        return (
+                            <LogsItemContainer
+                                // eslint-disable-next-line react/no-array-index-key
+                                key={`logs-${stage}-${startTime}-${logsIndex}`}
+                            >
+                                <span
+                                    ref={scrollIntoView}
+                                    className="cn-4 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14"
+                                    data-contains-match={doesLineContainSearchMatch}
+                                >
+                                    {logsIndex + 1}
+                                </span>
+                                <p
+                                    className="mono fs-14 mb-0-imp cn-0 dc__word-break lh-20"
+                                    // eslint-disable-next-line react/no-danger
+                                    dangerouslySetInnerHTML={{
+                                        __html: DOMPurify.sanitize(log),
+                                    }}
+                                />
+                            </LogsItemContainer>
+                        )
+                    })}
 
                     {isLoading && (
                         <LogsItemContainer>