[Uptime] Index Status API to Rest (#59657)

* gql to rest

* update snap

* fix api

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: shahzad31

x-pack/legacy/plugins/uptime/common/constants/index.ts

@@ -12,3 +12,4 @@ export * from './capabilities';
 export { PLUGIN } from './plugin';
 export { QUERY, STATES } from './query';
 export * from './ui';
+export * from './rest_api';

x-pack/legacy/plugins/uptime/common/constants/rest_api.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export enum REST_API_URLS {
+  INDEX_STATUS = '/api/uptime/index_status',
+}

x-pack/legacy/plugins/uptime/common/graphql/types.ts

@@ -21,8 +21,6 @@ export interface Query {
 
   /** Fetches the current state of Uptime monitors for the given parameters. */
   getMonitorStates?: MonitorSummaryResult | null;
-  /** Fetches details about the uptime index. */
-  getStatesIndexStatus: StatesIndexStatus;
 }
 
 export interface PingResults {
@@ -392,7 +390,7 @@ export interface MonitorSummaryResult {
   /** The objects representing the state of a series of heartbeat monitors. */
   summaries?: MonitorSummary[] | null;
   /** The number of summaries. */
-  totalSummaryCount: DocCount;
+  totalSummaryCount: number;
 }
 /** Represents the current state and associated data for an Uptime monitor. */
 export interface MonitorSummary {
@@ -525,13 +523,7 @@ export interface SummaryHistogramPoint {
   /** The number of _down_ documents. */
   down: number;
 }
-/** Represents the current status of the uptime index. */
-export interface StatesIndexStatus {
-  /** Flag denoting whether the index exists. */
-  indexExists: boolean;
-  /** The number of documents in the index. */
-  docCount?: DocCount | null;
-}
+
 
 export interface AllPingsQueryArgs {
   /** Optional: the direction to sort by. Accepts 'asc' and 'desc'. Defaults to 'desc'. */

x-pack/legacy/plugins/uptime/common/runtime_types/common.ts

@@ -22,6 +22,12 @@ export const SummaryType = t.partial({
   geo: CheckGeoType,
 });
 
+export const StatesIndexStatusType = t.type({
+  indexExists: t.boolean,
+  docCount: t.number,
+});
+
 export type Summary = t.TypeOf<typeof SummaryType>;
 export type CheckGeo = t.TypeOf<typeof CheckGeoType>;
 export type Location = t.TypeOf<typeof LocationType>;
+export type StatesIndexStatus = t.TypeOf<typeof StatesIndexStatusType>;

x-pack/legacy/plugins/uptime/public/components/connected/empty_state/empty_state.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { indexStatusAction } from '../../../state/actions';
+import { indexStatusSelector } from '../../../state/selectors';
+import { EmptyStateComponent } from '../../functional/empty_state/empty_state';
+
+export const EmptyState: React.FC = ({ children }) => {
+  const { data, loading, errors } = useSelector(indexStatusSelector);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(indexStatusAction.get());
+  }, [dispatch]);
+
+  return (
+    <EmptyStateComponent
+      statesIndexStatus={data}
+      loading={loading}
+      errors={errors}
+      children={children as React.ReactElement}
+    />
+  );
+};

x-pack/legacy/plugins/uptime/public/components/connected/index.ts

@@ -13,3 +13,4 @@ export { MonitorStatusBar } from './monitor/status_bar_container';
 export { MonitorListDrawer } from './monitor/list_drawer_container';
 export { MonitorListActionsPopover } from './monitor/drawer_popover_container';
 export { DurationChart } from './charts/monitor_duration';
+export { EmptyState } from './empty_state/empty_state';

x-pack/legacy/plugins/uptime/public/components/connected/kuerybar/kuery_bar_container.tsx

@@ -10,7 +10,7 @@ import { selectIndexPattern } from '../../../state/selectors';
 import { getIndexPattern } from '../../../state/actions';
 import { KueryBarComponent } from '../../functional';
 
-const mapStateToProps = (state: AppState) => ({ indexPattern: selectIndexPattern(state) });
+const mapStateToProps = (state: AppState) => ({ ...selectIndexPattern(state) });
 
 const mapDispatchToProps = (dispatch: any) => ({
   loadIndexPattern: () => {

x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.tsx

@@ -18,6 +18,6 @@ const mapDispatchToProps = (dispatch: any): DispatchProps => ({
   setEsKueryFilters: (esFilters: string) => dispatch(setEsKueryString(esFilters)),
 });
 
-const mapStateToProps = (state: AppState) => ({ indexPattern: selectIndexPattern(state) });
+const mapStateToProps = (state: AppState) => ({ ...selectIndexPattern(state) });
 
 export const OverviewPage = connect(mapStateToProps, mapDispatchToProps)(OverviewPageComponent);

x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap

@@ -8,23 +8,21 @@ import React from 'react';
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { EmptyStateComponent } from '../empty_state';
 import { GraphQLError } from 'graphql';
-import { StatesIndexStatus } from '../../../../../common/graphql/types';
+import { StatesIndexStatus } from '../../../../../common/runtime_types';
 
 describe('EmptyState component', () => {
   let statesIndexStatus: StatesIndexStatus;
 
   beforeEach(() => {
     statesIndexStatus = {
       indexExists: true,
-      docCount: {
-        count: 1,
-      },
+      docCount: 1,
     };
   });
 
   it('renders child components when count is truthy', () => {
     const component = shallowWithIntl(
-      <EmptyStateComponent data={{ statesIndexStatus }} loading={false}>
+      <EmptyStateComponent statesIndexStatus={statesIndexStatus} loading={false}>
         <div>Foo</div>
         <div>Bar</div>
         <div>Baz</div>
@@ -33,9 +31,9 @@ describe('EmptyState component', () => {
     expect(component).toMatchSnapshot();
   });
 
-  it(`doesn't render child components when count is falsey`, () => {
+  it(`doesn't render child components when count is falsy`, () => {
     const component = mountWithIntl(
-      <EmptyStateComponent data={undefined} loading={false}>
+      <EmptyStateComponent statesIndexStatus={null} loading={false}>
         <div>Shouldn&apos;t be rendered</div>
       </EmptyStateComponent>
     );
@@ -57,7 +55,7 @@ describe('EmptyState component', () => {
       },
     ];
     const component = mountWithIntl(
-      <EmptyStateComponent data={undefined} errors={errors} loading={false}>
+      <EmptyStateComponent statesIndexStatus={null} errors={errors} loading={false}>
         <div>Shouldn&apos;t appear...</div>
       </EmptyStateComponent>
     );
@@ -66,7 +64,7 @@ describe('EmptyState component', () => {
 
   it('renders loading state if no errors or doc count', () => {
     const component = mountWithIntl(
-      <EmptyStateComponent loading={true}>
+      <EmptyStateComponent loading={true} statesIndexStatus={null}>
         <div>Should appear even while loading...</div>
       </EmptyStateComponent>
     );
@@ -75,13 +73,11 @@ describe('EmptyState component', () => {
 
   it('does not render empty state with appropriate base path and no docs', () => {
     statesIndexStatus = {
-      docCount: {
-        count: 0,
-      },
+      docCount: 0,
       indexExists: true,
     };
     const component = mountWithIntl(
-      <EmptyStateComponent data={{ statesIndexStatus }} loading={false}>
+      <EmptyStateComponent statesIndexStatus={statesIndexStatus} loading={false}>
         <div>If this is in the snapshot the test should fail</div>
       </EmptyStateComponent>
     );
@@ -91,7 +87,7 @@ describe('EmptyState component', () => {
   it('notifies when index does not exist', () => {
     statesIndexStatus.indexExists = false;
     const component = mountWithIntl(
-      <EmptyStateComponent data={{ statesIndexStatus }} loading={false}>
+      <EmptyStateComponent statesIndexStatus={statesIndexStatus} loading={false}>
         <div>This text should not render</div>
       </EmptyStateComponent>
     );