From eec06d1e966d327dbd5c893224dfc5a826ea6b41 Mon Sep 17 00:00:00 2001
From: Tristan Cacqueray <tdecacqu@redhat.com>
Date: Fri, 22 Dec 2023 20:49:30 +0000
Subject: [PATCH] web: display crawler errors

---
 CHANGELOG.md                  |  2 ++
 web/src/App.res               | 39 +++++++++++++++++++++++++++++++++++
 web/src/components/Search.res | 14 +++++++++++++
 web/src/components/Store.res  |  4 ++++
 4 files changed, 59 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7ae6a128..14c1c55d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@ All notable changes to this project will be documented in this file.
 - [crawler] Proxy can be configured with `HTTP_PROXY` and `HTTPS_PROXY` environment. To proxy http requests between crawlers and the api, use the `API_PROXY` environment.
 - [crawler] A new `groups` sub-field in all Author fields (`on_author` and `author`) for `Change` and `Events`.
   Groups memberships are reflected from the config file to the database.
+- [crawler] Processing errors are no longer fatal and they are now stored in the index.
+- [web] A red bell is added to the UI when crawler errors exists for the given query to display the missing data.
 
 ### Changed
 
diff --git a/web/src/App.res b/web/src/App.res
index 0f730dca5..11822d9e1 100644
--- a/web/src/App.res
+++ b/web/src/App.res
@@ -290,6 +290,34 @@ module About = {
   }
 }
 
+module Errors = {
+  module CrawlerError = {
+    @react.component
+    let make = (~err: CrawlerTypes.crawler_error) => {
+      let entity: option<string> = err.entity->Belt.Option.flatMap(Js.Json.stringifyAny)
+      <div>
+        <Change.RelativeDate title="Created " date={err.created_at->getDate} />
+        <div> {("entity: " ++ entity->Belt.Option.getWithDefault(""))->str} </div>
+        <div> {("message: " ++ err.message)->str} </div>
+        <div> {("body: " ++ err.body)->str} </div>
+        <br />
+      </div>
+    }
+  }
+
+  @react.component
+  let make = (~store: Store.t) => {
+    let (state, _) = store
+    <TextContent>
+      <h4> {"Crawler Errors"->str} </h4>
+      <p>
+        {"The following errors happened when updating the index. This is likely causing some data to be missing."->str}
+      </p>
+      {state.errors->Belt.List.map(e => <CrawlerError err=e />)->Belt.List.toArray->React.array}
+    </TextContent>
+  }
+}
+
 module App = {
   @react.component
   let make = (~about: ConfigTypes.about) => {
@@ -350,6 +378,16 @@ module App = {
                   <Patternfly.Icons.InfoAlt />
                 </div>
               </PageHeaderToolsItem>
+              {state.errors->Belt.List.head->Belt.Option.isNone
+                ? React.null
+                : <PageHeaderToolsItem>
+                    <div
+                      onClick={_ => ("/" ++ state.index ++ "/errors")->RescriptReactRouter.push}
+                      style={ReactDOM.Style.make(~cursor="pointer", ~paddingLeft="5px", ())}>
+                      <Patternfly.Icons.Bell color="red" size=#MD />
+                    </div>
+                  </PageHeaderToolsItem>}
+
               // <PageHeaderToolsItem>
               //   <div
               //     onClick={showSettings}
@@ -391,6 +429,7 @@ module App = {
               | list{_, "search_author"} => <AuthorSearch store />
               | list{_, "metrics"} => <Metrics store />
               | list{_, "metric", name} => <Metric store name />
+              | list{_, "errors"} => <Errors store />
               | _ => <p> {"Not found"->str} </p>
               }}
             </PageSection>
diff --git a/web/src/components/Search.res b/web/src/components/Search.res
index b14cb4855..5e29d2ed7 100644
--- a/web/src/components/Search.res
+++ b/web/src/components/Search.res
@@ -399,6 +399,20 @@ module Top = {
       None
     }, [state.query])
 
+    // Update crawler error
+    let handleErrors = (resp: WebApi.axiosResponse<CrawlerTypes.errors_response>) =>
+      switch resp.data {
+      | CrawlerTypes.Success(errors_list) =>
+        SetErrors(errors_list.errors)->dispatch->Js.Promise.resolve
+      | CrawlerTypes.Error(err) => Js.Console.error(err)->Js.Promise.resolve
+      }
+
+    React.useEffect1(() => {
+      ({index: state.index, query: state.query}->WebApi.Crawler.errors
+        |> Js.Promise.then_(handleErrors))->ignore
+      None
+    }, [state.query])
+
     // Dispatch the value upstream
     let handleCheck = (newValue, res: WebApi.axiosResponse<SearchTypes.check_response>) => {
       switch res.data {
diff --git a/web/src/components/Store.res b/web/src/components/Store.res
index 87afbe388..606a5f81e 100644
--- a/web/src/components/Store.res
+++ b/web/src/components/Store.res
@@ -66,6 +66,7 @@ module Store = {
     about: ConfigTypes.about,
     dexie: Dexie.Database.t,
     toasts: list<string>,
+    errors: list<CrawlerTypes.crawler_error>,
   }
   type action =
     | ChangeIndex(string)
@@ -74,6 +75,7 @@ module Store = {
     | SetLimit(int)
     | SetOrder(option<SearchTypes.order>)
     | SetAuthorScopedTab(authorScopedTab)
+    | SetErrors(list<CrawlerTypes.crawler_error>)
     | FetchFields(fieldsRespR)
     | FetchSuggestions(suggestionsR)
     | FetchProjects(projectsR)
@@ -121,6 +123,7 @@ module Store = {
     changes_pies_panel: false,
     dexie: MonoIndexedDB.mkDexie(),
     toasts: list{},
+    errors: list{},
   }
 
   let reducer = (state: t, action: action) =>
@@ -151,6 +154,7 @@ module Store = {
         Prelude.setLocationSearch("l", limit->string_of_int)->ignore
         {...state, limit: limit}
       }
+    | SetErrors(errors) => {...state, errors: errors}
     | FetchFields(res) => {...state, fields: res->RemoteData.fmap(resp => resp.fields)}
     | FetchSuggestions(res) => {...state, suggestions: res}
     | FetchProjects(res) => {...state, projects: res}