Web-console: add lookups tile to home view (#8124)

* add lookups-tile

* add uninitailized state

* remove error:

web-console/src/views/home-view/__snapshots__/home-view.spec.tsx.snap

@@ -131,5 +131,26 @@ exports[`home view matches snapshot 1`] = `
       </p>
     </Blueprint3.Card>
   </a>
+  <a
+    href="#lookups"
+  >
+    <Blueprint3.Card
+      className="status-card"
+      elevation={0}
+      interactive={true}
+    >
+      <Component>
+        <Blueprint3.Icon
+          color="#bfccd5"
+          icon="properties"
+        />
+         
+        Lookups
+      </Component>
+      <p>
+        Loading...
+      </p>
+    </Blueprint3.Card>
+  </a>
 </div>
 `;

web-console/src/views/home-view/home-view.tsx

@@ -60,6 +60,11 @@ export interface HomeViewState {
   suspendedSupervisorCount: number;
   supervisorCountError: string | null;
 
+  lookupsCountLoading: boolean;
+  lookupsCount: number;
+  lookupsCountError: string | null;
+  lookupsUninitialized: boolean;
+
   taskCountLoading: boolean;
   runningTaskCount: number;
   pendingTaskCount: number;
@@ -86,6 +91,7 @@ export class HomeView extends React.PureComponent<HomeViewProps, HomeViewState>
   private supervisorQueryManager: QueryManager<null, any>;
   private taskQueryManager: QueryManager<boolean, any>;
   private serverQueryManager: QueryManager<boolean, any>;
+  private lookupsQueryManager: QueryManager<null, any>;
 
   constructor(props: HomeViewProps, context: any) {
     super(props, context);
@@ -108,6 +114,11 @@ export class HomeView extends React.PureComponent<HomeViewProps, HomeViewState>
       suspendedSupervisorCount: 0,
       supervisorCountError: null,
 
+      lookupsCountLoading: false,
+      lookupsCount: 0,
+      lookupsCountError: null,
+      lookupsUninitialized: false,
+
       taskCountLoading: false,
       runningTaskCount: 0,
       pendingTaskCount: 0,
@@ -293,6 +304,25 @@ GROUP BY 1`,
         });
       },
     });
+
+    this.lookupsQueryManager = new QueryManager({
+      processQuery: async () => {
+        const resp = await axios.get('/druid/coordinator/v1/lookups/status');
+        const data = resp.data;
+        const lookupsCount = Object.keys(data.__default).length;
+        return {
+          lookupsCount,
+        };
+      },
+      onStateChange: ({ result, loading, error }) => {
+        this.setState({
+          lookupsCount: result ? result.lookupsCount : 0,
+          lookupsCountLoading: loading,
+          lookupsCountError: error,
+          lookupsUninitialized: error === 'Request failed with status code 404',
+        });
+      },
+    });
   }
 
   componentDidMount(): void {
@@ -304,6 +334,7 @@ GROUP BY 1`,
     this.supervisorQueryManager.runQuery(null);
     this.taskQueryManager.runQuery(noSqlMode);
     this.serverQueryManager.runQuery(noSqlMode);
+    this.lookupsQueryManager.runQuery(null);
   }
 
   componentWillUnmount(): void {
@@ -448,6 +479,22 @@ GROUP BY 1`,
           ),
           error: state.serverCountError,
         })}
+        {this.renderCard({
+          href: '#lookups',
+          icon: IconNames.PROPERTIES,
+          title: 'Lookups',
+          loading: state.lookupsCountLoading,
+          content: (
+            <>
+              <p>
+                {!state.lookupsUninitialized
+                  ? pluralIfNeeded(state.lookupsCount, 'lookup')
+                  : 'Lookups uninitialized'}
+              </p>
+            </>
+          ),
+          error: !state.lookupsUninitialized ? state.lookupsCountError : null,
+        })}
       </div>
     );
   }