Handle >100 search results

frontend/src/views/LogView.vue

@@ -54,7 +54,7 @@ async function getSection(start: number) {
 }
 
 function getNextSection() {
-  query.value = ""
+  query.value = ''
   resetSearch()
   getSection(end.value).then((data) => {
     content.value = content.value + data.content
@@ -69,7 +69,7 @@ function getNextSection() {
 }
 
 function getPreviousSection() {
-  query.value = ""
+  query.value = ''
   resetSearch()
   if (start.value) {
     getSection(start.value - size).then((data) => {
@@ -97,18 +97,20 @@ async function getNthByte(n) {
   totalSize.value = data.total
 }
 
-async function search() {
+async function search(startOffset) {
   const params = new URLSearchParams()
   params.append('query', query.value)
+  params.append('start', startOffset)
   const response = await fetch(`/api/log/${route.params.name}/search/?${params}`)
   return await response.json()
 }
 
-function searchAndHighlight() {
-  search().then((data) => {
+function searchAndHighlight(startOffset = 0) {
+  search(startOffset).then((data) => {
     searched.value = true
     searchResults.matches = data.matches
     searchResults.count = data.matches.length > 99 ? '99+' : data.matches.length.toString()
+    searchResults.current = -1
     moveSearchResult(1)
   })
 }
@@ -140,23 +142,22 @@ function findError() {
 getNextSection()
 
 function convertBytes(bytes) {
-  const suffixes = ["bytes", "KiB", "MiB", "GiB"];
+  const suffixes = ['bytes', 'KiB', 'MiB', 'GiB']
   for (let suffix of suffixes) {
-    if (bytes < 1024)
-    return `${bytes.toFixed(2).replace(/\.?0*$/,'')} ${suffix}`
-    bytes /= 1024;
+    if (bytes < 1024) return `${bytes.toFixed(2).replace(/\.?0*$/, '')} ${suffix}`
+    bytes /= 1024
   }
-  return `${bytes.toFixed(2).replace(/\.?0*$/,'')} TiB`
+  return `${bytes.toFixed(2).replace(/\.?0*$/, '')} TiB`
 }
 
 const dataSkipped = computed(() => convertBytes(start.value))
 const dataLeft = computed(() => convertBytes(totalSize.value - end.value))
 
 const highlighter = await createHighlighterCore({
-    langs: [bash],
-    themes: [catppuccinLatte],
-    engine: createJavaScriptRegexEngine(),
-});
+  langs: [bash],
+  themes: [catppuccinLatte],
+  engine: createJavaScriptRegexEngine(),
+})
 
 // Add ellipsis to start or end if there is more content available
 const displayedContent = computed(() => {
@@ -182,9 +183,8 @@ const displayedContent = computed(() => {
     lang: 'bash',
     theme: 'catppuccin-latte',
     decorations,
-    })
+  })
 }, '')
-
 </script>
 
 <script></script>
@@ -202,6 +202,13 @@ const displayedContent = computed(() => {
           Previous
         </button>
         <button
+          v-if="searchResults.current === 98 && searchResults.matches.length === 100"
+          @click="searchAndHighlight(searchResults.matches[99])"
+        >
+          Search More
+        </button>
+        <button
+          v-else
           :disabled="searchResults.current >= searchResults.matches.length - 1"
           @click="moveSearchResult(1)"
           type="button"