From 89ca89752c721ea66c883cd2b4b0d93695366ba0 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Mon, 4 Apr 2022 22:57:02 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=AF=20Added=20ES=20index=20delete=20op?=
 =?UTF-8?q?tion=20in=20the=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/fileops.actions.tsx        |  8 +++++
 src/client/assets/scss/App.scss               | 12 +++----
 src/client/components/Library/Library.tsx     |  2 +-
 .../components/Library/LibraryContainer.tsx   | 31 +++++++++++++++++--
 .../SystemSettings/SystemSettingsForm.tsx     |  6 ++++
 src/client/reducers/fileops.reducer.ts        | 11 ++++++-
 6 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx
index 382e58e..0fb39ac 100644
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -29,6 +29,7 @@ import {
   FILEOPS_STATE_RESET,
   LS_IMPORT_CALL_IN_PROGRESS,
   LS_TOGGLE_IMPORT_QUEUE,
+  SS_SEARCH_FAILED,
 } from "../constants/action-types";
 import { success } from "react-notification-system-redux";
 import { isNil, map } from "lodash";
@@ -288,6 +289,13 @@ export const searchIssue = (query, options) => async (dispatch) => {
     method: "POST",
     data: { ...query, ...options },
   });
+
+  if (response.data.code === 404) {
+    dispatch({
+      type: SS_SEARCH_FAILED,
+      data: response.data,
+    });
+  }
   dispatch({
     type: SS_SEARCH_RESULTS_FETCHED,
     data: response.data.body,
diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 2cec7d7..48f39f6 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -69,7 +69,7 @@ pre {
 .volumes-container {
   .stack {
     display: inline-block;
-    border-radius: 0.3rem;
+    border-radius: 0.5rem;
     box-shadow:
     /* The top layer shadow */ 0 -1px 1px rgba(0, 0, 0, 0.15),
       /* The second layer */ 0 -10px 0 -5px #eee,
@@ -78,8 +78,8 @@ pre {
       /* The third layer shadow */ 0 -20px 1px -9px rgba(0, 0, 0, 0.15);
     img {
       height: auto;
-      border-top-left-radius: 0.3rem;
-      border-top-right-radius: 0.3rem;
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
@@ -160,8 +160,8 @@ pre {
     figure {
       display: flex;
       img {
-        border-top-left-radius: 0.3rem;
-        border-top-right-radius: 0.3rem;
+        border-top-left-radius: 0.4rem;
+        border-top-right-radius: 0.4rem;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
       }
@@ -171,7 +171,7 @@ pre {
     figure {
       display: flex;
       img {
-        border-radius: 0.3rem;
+        border-radius: 0.4rem;
       }
     }
   }
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 0138a98..1eabe1d 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -25,6 +25,7 @@ interface IComicBookLibraryProps {
 export const Library = (data: IComicBookLibraryProps): ReactElement => {
   const { searchResults } = data.data;
 
+  console.log(searchResults);
   // programatically navigate to comic detail
   const navigate = useNavigate();
   const navigateToComicDetail = (row) => {
@@ -183,7 +184,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
       ),
     );
   }, []);
-
   return (
     <section className="container">
       <div className="section">
diff --git a/src/client/components/Library/LibraryContainer.tsx b/src/client/components/Library/LibraryContainer.tsx
index bc21846..dd41de2 100644
--- a/src/client/components/Library/LibraryContainer.tsx
+++ b/src/client/components/Library/LibraryContainer.tsx
@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash";
+import { isEmpty, isUndefined } from "lodash";
 import React, { ReactElement, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
@@ -25,11 +25,38 @@ const LibraryContainer = () => {
   const searchResults = useSelector(
     (state: RootState) => state.fileOps.librarySearchResults,
   );
+  const searchError = useSelector(
+    (state: RootState) => state.fileOps.librarySearchError,
+  );
+
+  console.log(searchError);
 
   return !isEmpty(searchResults) ? (
     <Library data={{ searchResults }} />
   ) : (
-    "No data found."
+    <div className="container">
+      <section className="section is-small">
+        <div className="columns">
+          <div className="column is-two-thirds">
+            <article className="message is-link">
+              <div className="message-body">
+                No comics were found in the library, Elasticsearch reports no
+                indices. Try importing a few comics into the library and come
+                back.
+              </div>
+            </article>
+            <pre>
+              {!isUndefined(searchError.data) &&
+                JSON.stringify(
+                  searchError.data.meta.body.error.root_cause,
+                  null,
+                  4,
+                )}
+            </pre>
+          </div>
+        </div>
+      </section>
+    </div>
   );
 };
 
diff --git a/src/client/components/SystemSettings/SystemSettingsForm.tsx b/src/client/components/SystemSettings/SystemSettingsForm.tsx
index f14586e..c668845 100644
--- a/src/client/components/SystemSettings/SystemSettingsForm.tsx
+++ b/src/client/components/SystemSettings/SystemSettingsForm.tsx
@@ -23,6 +23,9 @@ export const SystemSettingsForm = (settingsObject): ReactElement => {
         <article className="message is-danger">
           <div className="message-body is-size-6 is-family-secondary">
             Flushing and resetting will clear out:
+            <p>
+              <small>(This action is irreversible)</small>
+            </p>
             <ol>
               <li>The mongo collection that holds library metadata</li>
 
@@ -31,6 +34,9 @@ export const SystemSettingsForm = (settingsObject): ReactElement => {
                 <code>covers</code>, <code>temporary</code> and
                 <code>expanded</code> subfolders.
               </li>
+              <li>
+                Your <code>Elasticsearch indices</code>
+              </li>
             </ol>
           </div>
         </article>
diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts
index 22ae9d5..06b03ad 100644
--- a/src/client/reducers/fileops.reducer.ts
+++ b/src/client/reducers/fileops.reducer.ts
@@ -23,6 +23,7 @@ import {
   SS_SEARCH_IN_PROGRESS,
   FILEOPS_STATE_RESET,
   LS_IMPORT_CALL_IN_PROGRESS,
+  SS_SEARCH_FAILED,
 } from "../constants/action-types";
 const initialState = {
   IMSCallInProgress: false,
@@ -41,6 +42,7 @@ const initialState = {
   wantedComics: [],
   librarySearchResultCount: 0,
   libraryQueueResults: [],
+  librarySearchError: {},
 };
 
 function fileOpsReducer(state = initialState, action) {
@@ -181,13 +183,20 @@ function fileOpsReducer(state = initialState, action) {
     }
 
     case SS_SEARCH_RESULTS_FETCHED: {
-      console.log(action.data);
       return {
         ...state,
         librarySearchResults: action.data,
         SSCallInProgress: false,
       };
     }
+    case SS_SEARCH_FAILED: {
+      console.log(action.data);
+      return {
+        ...state,
+        librarySearchError: action.data,
+        SSCallInProgress: false,
+      };
+    }
 
     case FILEOPS_STATE_RESET: {
       return {