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

* gql to rest

* update snap

* fix api

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

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__/empty_state.test.tsx

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

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

@@ -6,29 +6,29 @@
 
 import React, { Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { docCountQuery } from '../../../queries';
 import { EmptyStateError } from './empty_state_error';
 import { EmptyStateLoading } from './empty_state_loading';
-import { StatesIndexStatus } from '../../../../common/graphql/types';
 import { DataMissing } from './data_missing';
-
-interface EmptyStateQueryResult {
-  statesIndexStatus?: StatesIndexStatus;
-}
+import { StatesIndexStatus } from '../../../../common/runtime_types';
 
 interface EmptyStateProps {
   children: JSX.Element[] | JSX.Element;
+  statesIndexStatus: StatesIndexStatus | null;
+  loading: boolean;
+  errors?: Error[];
 }
 
-type Props = UptimeGraphQLQueryProps<EmptyStateQueryResult> & EmptyStateProps;
-
-export const EmptyStateComponent = ({ children, data, errors }: Props) => {
-  if (errors) {
+export const EmptyStateComponent = ({
+  children,
+  statesIndexStatus,
+  loading,
+  errors,
+}: EmptyStateProps) => {
+  if (errors?.length) {
     return <EmptyStateError errors={errors} />;
   }
-  if (data && data.statesIndexStatus) {
-    const { indexExists, docCount } = data.statesIndexStatus;
+  if (!loading && statesIndexStatus) {
+    const { indexExists, docCount } = statesIndexStatus;
     if (!indexExists) {
       return (
         <DataMissing
@@ -37,7 +37,7 @@ export const EmptyStateComponent = ({ children, data, errors }: Props) => {
           })}
         />
       );
-    } else if (indexExists && docCount && docCount.count === 0) {
+    } else if (indexExists && docCount === 0) {
       return (
         <DataMissing
           headingMessage={i18n.translate('xpack.uptime.emptyState.noDataMessage', {
@@ -57,8 +57,3 @@ export const EmptyStateComponent = ({ children, data, errors }: Props) => {
   }
   return <EmptyStateLoading />;
 };
-
-export const EmptyState = withUptimeGraphQL<EmptyStateQueryResult, EmptyStateProps>(
-  EmptyStateComponent,
-  docCountQuery
-);

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

@@ -7,15 +7,14 @@
 import { EuiEmptyPrompt, EuiPanel, EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
-import { GraphQLError } from 'graphql';
 
 interface EmptyStateErrorProps {
-  errors: GraphQLError[];
+  errors: Error[];
 }
 
 export const EmptyStateError = ({ errors }: EmptyStateErrorProps) => {
   const unauthorized = errors.find(
-    (error: GraphQLError) => error.message && error.message.includes('unauthorized')
+    (error: Error) => error.message && error.message.includes('unauthorized')
   );
 
   return (
@@ -46,7 +45,7 @@ export const EmptyStateError = ({ errors }: EmptyStateErrorProps) => {
             body={
               <Fragment>
                 {!unauthorized &&
-                  errors.map((error: GraphQLError) => <p key={error.message}>{error.message}</p>)}
+                  errors.map((error: Error) => <p key={error.message}>{error.message}</p>)}
               </Fragment>
             }
           />

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

@@ -5,7 +5,6 @@
  */
 
 export { DonutChart } from './charts/donut_chart';
-export { EmptyState } from './empty_state';
 export { KueryBarComponent } from './kuery_bar/kuery_bar';
 export { MonitorCharts } from './monitor_charts';
 export { MonitorList } from './monitor_list';