[Stack monitoring] Remove getAngularInjector and duplicated angular components

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx

@@ -13,7 +13,7 @@ import { PageTemplate } from '../page_template';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 // @ts-ignore
-import { CcrShardReact } from '../../../components/elasticsearch/ccr_shard';
+import { CcrShard } from '../../../components/elasticsearch/ccr_shard';
 import { ComponentProps } from '../../route_init';
 import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
@@ -119,7 +119,7 @@ export const ElasticsearchCcrShardPage: React.FC<ComponentProps> = ({ clusters }
         render={({ flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
             {flyoutComponent}
-            <CcrShardReact {...data} alerts={alerts} />
+            <CcrShard {...data} alerts={alerts} />
             {bottomBarComponent}
           </SetupModeContext.Provider>
         )}

x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx

@@ -11,7 +11,7 @@ import { find } from 'lodash';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 // @ts-ignore
-import { IndexReact } from '../../../components/elasticsearch/index/index_react';
+import { Index } from '../../../components/elasticsearch/index/index';
 import { ComponentProps } from '../../route_init';
 import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
@@ -118,7 +118,7 @@ export const ElasticsearchIndexPage: React.FC<ComponentProps> = ({ clusters }) =
         render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
             {flyoutComponent}
-            <IndexReact
+            <Index
               setupMode={setupMode}
               labels={indexLabel}
               alerts={alerts}

x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx

@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 import { ItemTemplate } from './item_template';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
-import { NodeReact } from '../../../components/elasticsearch';
+import { Node } from '../../../components/elasticsearch';
 import { ComponentProps } from '../../route_init';
 import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
@@ -143,7 +143,7 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) =>
         render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
             {flyoutComponent}
-            <NodeReact
+            <Node
               alerts={alerts}
               labels={labels.node}
               nodeId={node}

x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx

@@ -11,7 +11,7 @@ import { ElasticsearchTemplate } from './elasticsearch_template';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 // @ts-ignore
-import { ElasticsearchOverviewReact } from '../../../components/elasticsearch';
+import { ElasticsearchOverview } from '../../../components/elasticsearch';
 import { ComponentProps } from '../../route_init';
 import { useCharts } from '../../hooks/use_charts';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
@@ -79,7 +79,7 @@ export const ElasticsearchOverviewPage: React.FC<ComponentProps> = ({ clusters }
     const shardActivityData = shardActivity && filterShardActivityData(shardActivity); // no filter on data = null
 
     return (
-      <ElasticsearchOverviewReact
+      <ElasticsearchOverview
         clusterStatus={clusterStatus}
         metrics={metrics}
         logs={logs}

x-pack/plugins/monitoring/public/components/chart/get_chart_options.js

@@ -10,17 +10,8 @@ import { merge } from 'lodash';
 import { CHART_LINE_COLOR, CHART_TEXT_COLOR } from '../../../common/constants';
 
 export async function getChartOptions(axisOptions) {
-  let timezone;
-  try {
-    const $injector = Legacy.shims.getAngularInjector();
-    timezone = $injector.get('config').get('dateFormat:tz');
-  } catch (error) {
-    if (error.message === 'Angular has been removed.') {
-      timezone = Legacy.shims.uiSettings?.get('dateFormat:tz');
-    } else {
-      throw error;
-    }
-  }
+  const timezone = Legacy.shims.uiSettings?.get('dateFormat:tz');
+
   const opts = {
     legend: {
       show: false,

x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.js

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { Fragment, PureComponent } from 'react';
-import { Legacy } from '../../../legacy_shims';
+import React, { Fragment } from 'react';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import {
   EuiPage,
   EuiPageBody,
@@ -28,9 +28,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { AlertsCallout } from '../../../alerts/callout';
 
-export class CcrShard extends PureComponent {
-  renderCharts() {
-    const { metrics } = this.props;
+export function CcrShard(props) {
+  const { services } = useKibana();
+  const timezone = services.uiSettings?.get('dateFormat:tz');
+  const { metrics, stat, timestamp, oldestStat, formattedLeader, alerts } = props;
+  const renderCharts = () => {
     const seriesToShow = [metrics.ccr_sync_lag_ops, metrics.ccr_sync_lag_time];
 
     const charts = seriesToShow.map((data, index) => (
@@ -42,10 +44,9 @@ export class CcrShard extends PureComponent {
     ));
 
     return <Fragment>{charts}</Fragment>;
-  }
+  };
 
-  renderErrors() {
-    const { stat } = this.props;
+  const renderErrors = () => {
     if (stat.read_exceptions && stat.read_exceptions.length > 0) {
       return (
         <Fragment>
@@ -91,13 +92,9 @@ export class CcrShard extends PureComponent {
       );
     }
     return null;
-  }
-
-  renderLatestStat() {
-    const { stat, timestamp } = this.props;
-    const injector = Legacy.shims.getAngularInjector();
-    const timezone = injector.get('config').get('dateFormat:tz');
+  };
 
+  const renderLatestStat = () => {
     return (
       <EuiAccordion
         id="ccrLatestStat"
@@ -122,31 +119,27 @@ export class CcrShard extends PureComponent {
         </Fragment>
       </EuiAccordion>
     );
-  }
-
-  render() {
-    const { stat, oldestStat, formattedLeader, alerts } = this.props;
+  };
 
-    return (
-      <EuiPage>
-        <EuiPageBody>
-          <EuiPanel>
-            <Status
-              stat={stat}
-              formattedLeader={formattedLeader}
-              oldestStat={oldestStat}
-              alerts={alerts}
-            />
-          </EuiPanel>
-          <EuiSpacer size="m" />
-          <AlertsCallout alerts={alerts} />
-          <EuiSpacer size="m" />
-          {this.renderErrors()}
-          <EuiFlexGroup wrap>{this.renderCharts()}</EuiFlexGroup>
-          <EuiHorizontalRule />
-          {this.renderLatestStat()}
-        </EuiPageBody>
-      </EuiPage>
-    );
-  }
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPanel>
+          <Status
+            stat={stat}
+            formattedLeader={formattedLeader}
+            oldestStat={oldestStat}
+            alerts={alerts}
+          />
+        </EuiPanel>
+        <EuiSpacer size="m" />
+        <AlertsCallout alerts={alerts} />
+        <EuiSpacer size="m" />
+        {renderErrors()}
+        <EuiFlexGroup wrap>{renderCharts()}</EuiFlexGroup>
+        <EuiHorizontalRule />
+        {renderLatestStat()}
+      </EuiPageBody>
+    </EuiPage>
+  );
 }