[Remove discover] Implement embeddable dashboard on server management cluster module

plugins/main/public/components/common/loading-spinner/loading-spinner.tsx

@@ -1,17 +1,38 @@
 import './loading-spinner.scss';
 import React from 'react';
-import { EuiTitle, EuiPanel, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiTitle,
+  EuiPanel,
+  EuiEmptyPrompt,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 
-export function LoadingSpinner() {
+interface LoadingSpinner {
+  message?: React.ReactNode;
+}
+
+export function LoadingSpinner({ message }: LoadingSpinner) {
   return (
-    <EuiPanel hasBorder={false} hasShadow={false} color="transparent" className="discoverNoResults">
+    <EuiPanel
+      hasBorder={false}
+      hasShadow={false}
+      color='transparent'
+      className='discoverNoResults'
+    >
       <EuiEmptyPrompt
-        icon={<EuiLoadingSpinner data-test-subj="loadingSpinner" size="xl" />}
+        icon={<EuiLoadingSpinner data-test-subj='loadingSpinner' size='xl' />}
         title={
-          <EuiTitle size="s" data-test-subj="loadingSpinnerText">
+          <EuiTitle size='s' data-test-subj='loadingSpinnerText'>
             <h2>
-              <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
+              {message ? (
+                message
+              ) : (
+                <FormattedMessage
+                  id='discover.searchingTitle'
+                  defaultMessage='Searching'
+                />
+              )}
             </h2>
           </EuiTitle>
         }

plugins/main/public/components/index.js

@@ -15,8 +15,6 @@ import { WzVisualize } from './visualize/wz-visualize';
 import { WzMenuWrapper } from '../components/wz-menu/wz-menu-wrapper';
 import { WzAgentSelectorWrapper } from '../components/wz-agent-selector/wz-agent-selector-wrapper';
 import { WzBlankScreen } from '../components/wz-blank-screen/wz-blank-screen';
-import { ClusterDisabled } from '../components/management/cluster/cluster-disabled';
-import { ClusterTimelions } from '../components/management/cluster/cluster-timelions';
 import { KibanaVisWrapper } from '../components/management/cluster/cluster-visualization';
 import { ToastNotificationsModal } from '../components/notifications/modal';
 import { getAngularModule } from '../kibana-services';
@@ -29,8 +27,6 @@ app.value('WzVisualize', WzVisualize);
 app.value('WzMenuWrapper', WzMenuWrapper);
 app.value('WzAgentSelectorWrapper', WzAgentSelectorWrapper);
 app.value('WzBlankScreen', WzBlankScreen);
-app.value('ClusterDisabled', ClusterDisabled);
-app.value('ClusterTimelions', ClusterTimelions);
 app.value('KibanaVisualization', KibanaVisWrapper);
 app.value('ToastNotificationsModal', ToastNotificationsModal);
 app.value('WzUpdatesNotification', WzUpdatesNotification);

plugins/main/public/components/management/cluster/cluster-disabled.js

@@ -2,47 +2,54 @@ import React, { Component, Fragment } from 'react';
 import { EuiLink, EuiEmptyPrompt } from '@elastic/eui';
 import { withErrorBoundary } from '../../common/hocs';
 import { webDocumentationLink } from '../../../../common/services/web_documentation';
-export const ClusterDisabled = withErrorBoundary (class ClusterDisabled extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+export const ClusterDisabled = withErrorBoundary(
+  class ClusterDisabled extends Component {
+    constructor(props) {
+      super(props);
+      this.state = {};
+    }
 
-  render() {
-    return (
-      <EuiEmptyPrompt
-        iconType="iInCircle"
-        title={
-          <h2>
-            {!this.props.enabled
-              ? 'The cluster is disabled'
-              : !this.props.running
-              ? 'The cluster is not running'
-              : ''}
-          </h2>
-        }
-        body={
-          <Fragment>
-            {!this.props.enabled && (
-              <p>
-                Visit the documentation on{' '}
-                <EuiLink
-                  href={webDocumentationLink('user-manual/configuring-cluster/index.html')}
-                  external
-                  target='_blank'
-                  rel='noopener noreferrer'
-                >
-                  this link
-                </EuiLink>{' '}
-                to learn about how to enable it.
-              </p>
-            )}
-            {!this.props.running && (
-              <p>The cluster is enabled but it is not running.</p>
-            )}
-          </Fragment>
-        }
-      />
-    );
-  }
-})
+    render() {
+      return (
+        <EuiEmptyPrompt
+          iconType='iInCircle'
+          title={
+            <h2>
+              {this.props.error
+                ? this.props.error.title
+                : !this.props.enabled
+                ? 'The cluster is disabled'
+                : !this.props.running
+                ? 'The cluster is not running'
+                : ''}
+            </h2>
+          }
+          body={
+            <Fragment>
+              {this.props.error ? (
+                this.props.error.message
+              ) : !this.props.enabled ? (
+                <p>
+                  Visit the documentation on{' '}
+                  <EuiLink
+                    href={webDocumentationLink(
+                      'user-manual/configuring-cluster/index.html',
+                    )}
+                    external
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    this link
+                  </EuiLink>{' '}
+                  to learn about how to enable it.
+                </p>
+              ) : !this.props.running ? (
+                <p>The cluster is enabled but it is not running.</p>
+              ) : null}
+            </Fragment>
+          }
+        />
+      );
+    }
+  },
+);

plugins/main/public/components/management/cluster/components/configuration_cards.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import {
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiCard,
+  EuiDescriptionList,
+  EuiSpacer,
+  EuiToolTip,
+  EuiFlexGroup,
+  EuiTitle,
+} from '@elastic/eui';
+import { ViewMode } from '../../../../../../../src/plugins/embeddable/public';
+import { getPlugins } from '../../../../kibana-services';
+import { DiscoverNoResults } from '../../../common/no-results/no-results';
+import { getDashboardConfigurationPanels } from '../dashboard/dashboard_configuration_panels';
+import '../dashboard/cluster_dashboard.scss';
+import { tFilter } from '../../../common/data-source';
+
+interface ConfigurationCardsProps {
+  goBack: () => void;
+  configuration: any;
+  searchBarProps: any;
+  results: any;
+  indexPatternId?: string;
+  filters: tFilter[];
+}
+
+const plugins = getPlugins();
+
+const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
+
+export const ConfigurationCards = ({
+  goBack,
+  configuration,
+  searchBarProps,
+  results,
+  indexPatternId,
+  filters,
+}: ConfigurationCardsProps) => {
+  const configurationItemsList = [
+    {
+      title: 'Disabled',
+      description: String(configuration?.disabled),
+    },
+    {
+      title: 'Hidden',
+      description: String(configuration?.hidden),
+    },
+    {
+      title: 'Name',
+      description: configuration?.name,
+    },
+    {
+      title: 'Node name',
+      description: configuration?.node_name,
+    },
+    {
+      title: 'Node type',
+      description: configuration?.node_type,
+    },
+    {
+      title: 'Bind address',
+      description: configuration?.bind_addr,
+    },
+    {
+      title: 'IP',
+      description: configuration?.nodes[0] || '-',
+    },
+    {
+      title: 'Port',
+      description: configuration?.port,
+    },
+  ];
+
+  return (
+    <EuiFlexGroup direction='column' gutterSize='s'>
+      <EuiFlexItem>
+        <EuiFlexGroup responsive={false} alignItems='center' gutterSize='s'>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip content='Go back' position='bottom'>
+              <EuiButtonIcon
+                color='primary'
+                size='m'
+                display='empty'
+                iconType='arrowLeft'
+                aria-label='Back'
+                onClick={goBack}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h2>Overview</h2>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFlexGroup responsive alignItems='flexStart' gutterSize='s'>
+          <EuiFlexItem
+            grow={false}
+            style={{
+              minWidth: '500px',
+              overflow: 'hidden',
+              height: '100%',
+            }}
+          >
+            {results?.hits?.total > 0 ? (
+              <DashboardByRenderer
+                input={{
+                  viewMode: ViewMode.VIEW,
+                  panels: getDashboardConfigurationPanels(indexPatternId),
+                  isFullScreenMode: false,
+                  filters: filters,
+                  useMargins: true,
+                  id: 'ct-dashboard-configuration-tab',
+                  timeRange: {
+                    from: searchBarProps.dateRangeFrom,
+                    to: searchBarProps.dateRangeTo,
+                  },
+                  title: 'Cluster configuration dashboard',
+                  description: 'Dashboard of the Cluster configuration',
+                  query: searchBarProps.query,
+                  refreshConfig: {
+                    pause: false,
+                    value: 15,
+                  },
+                  hidePanelTitles: false,
+                }}
+              />
+            ) : (
+              <DiscoverNoResults
+                message='There are no results for selected time range. Try another
+            one.'
+              />
+            )}
+          </EuiFlexItem>
+          <EuiFlexItem style={{ padding: '8px 0 0 0', height: '364px' }}>
+            <EuiCard
+              textAlign='left'
+              title={
+                <EuiTitle size='s'>
+                  <h2>Configuration</h2>
+                </EuiTitle>
+              }
+            >
+              <EuiSpacer size='m' />
+              <EuiDescriptionList
+                type='column'
+                compressed={true}
+                align='left'
+                listItems={configurationItemsList.map(item => ({
+                  title: (
+                    <span style={{ fontWeight: 400, fontSize: '1rem' }}>
+                      {item.title}
+                    </span>
+                  ),
+                  description: item.description,
+                }))}
+                titleProps={{
+                  className: 'cluster-descriptionList-title',
+                }}
+                descriptionProps={{
+                  className: 'color-grey cluster-descriptionList-description',
+                }}
+              />
+            </EuiCard>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};