🤯 Added ES index delete option in the UI

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">

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>
   );
 };
 

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>