[Monitoring] Support for unlinked deployments

x-pack/plugins/monitoring/common/constants.js

@@ -150,3 +150,5 @@ export const DEBOUNCE_FAST_MS = 10; // roughly how long it takes to render a fra
  * Configuration key for setting the email address used for cluster alert notifications.
  */
 export const CLUSTER_ALERTS_ADDRESS_CONFIG_KEY = 'cluster_alerts.email_notifications.email_address';
+
+export const UNLINKED_DEPLOYMENT_CLUSTER_UUID = '__unlinked_deployment__';

x-pack/plugins/monitoring/public/components/cluster/listing/index.js

@@ -0,0 +1,7 @@
+/*
+ * 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 { Listing } from './listing';

x-pack/plugins/monitoring/public/directives/cluster/listing/index.js → x-pack/plugins/monitoring/public/components/cluster/listing/listing.js

@@ -3,32 +3,35 @@
  * 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, { Fragment } from 'react';
-import { render } from 'react-dom';
-import { capitalize, partial } from 'lodash';
+import React, { Fragment, Component } from 'react';
+import chrome from 'ui/chrome';
 import moment from 'moment';
 import numeral from '@elastic/numeral';
-import { uiModules } from 'ui/modules';
-import chrome from 'ui/chrome';
+import { capitalize, partial } from 'lodash';
 import {
   EuiHealth,
   EuiLink,
   EuiPage,
   EuiPageBody,
   EuiPageContent,
+  EuiCallOut,
+  EuiSpacer,
+  EuiIcon
 } from '@elastic/eui';
 import { toastNotifications } from 'ui/notify';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
 import { Tooltip } from 'plugins/monitoring/components/tooltip';
 import { AlertsIndicator } from 'plugins/monitoring/components/cluster/listing/alerts_indicator';
 import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { UNLINKED_DEPLOYMENT_CLUSTER_UUID } from '../../../../common/constants';
 
 const IsClusterSupported = ({ isSupported, children }) => {
   return isSupported ? children : '-';
 };
 
+const UNLINKED_DEPLOYMENT_STORAGE_KEY = 'viewedUnlinkedDeployments';
+
 /*
   * This checks if alerts feature is supported via monitoring cluster
   * license. If the alerts feature is not supported because the prod cluster
@@ -195,6 +198,17 @@ const getColumns = (
       sortable: true,
       render: (licenseType, cluster) => {
         const license = cluster.license;
+
+        if (!licenseType) {
+          return (
+            <div>
+              <div className="monTableCell__clusterCellLiscense">
+                N/A
+              </div>
+            </div>
+          );
+        }
+
         if (license) {
           const licenseExpiry = () => {
             if (license.expiry_date_in_millis < moment().valueOf()) {
@@ -342,72 +356,112 @@ const handleClickInvalidLicense = (scope, clusterName) => {
   });
 };
 
-const uiModule = uiModules.get('monitoring/directives', []);
-uiModule.directive('monitoringClusterListing', ($injector) => {
-  return {
-    restrict: 'E',
-    scope: {
-      clusters: '=',
-      sorting: '=',
-      filterText: '=',
-      paginationSettings: '=pagination',
-      onTableChange: '=',
-    },
-    link(scope, $el) {
-      const globalState = $injector.get('globalState');
-      const kbnUrl = $injector.get('kbnUrl');
-      const showLicenseExpiration = $injector.get('showLicenseExpiration');
+export class Listing extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      [UNLINKED_DEPLOYMENT_STORAGE_KEY]: false,
+    };
+  }
 
-      const _changeCluster = partial(changeCluster, scope, globalState, kbnUrl);
-      const _handleClickIncompatibleLicense = partial(handleClickIncompatibleLicense, scope);
-      const _handleClickInvalidLicense = partial(handleClickInvalidLicense, scope);
+  renderUnlinkedDeployment(changeCluster, storage) {
+    if (storage.get(UNLINKED_DEPLOYMENT_STORAGE_KEY)) {
+      return null;
+    }
 
-      const { sorting, pagination, onTableChange } = scope;
+    return (
+      <div>
+        <EuiCallOut
+          color="warning"
+          title={i18n.translate('xpack.monitoring.cluster.listing.unlinkedDeploymentCallOutTitle', {
+            defaultMessage: 'It looks like you have instances that aren\'t connected to an Elasticsearch cluster.'
+          })}
+          iconType="link"
+        >
+          <p>
+            <EuiLink
+              onClick={() => changeCluster(UNLINKED_DEPLOYMENT_CLUSTER_UUID)}
+              data-test-subj="unlinkedDeploymentLink"
+            >
+              <FormattedMessage
+                id="xpack.monitoring.cluster.listing.unlinkedDeploymentCallOutLink"
+                defaultMessage="View these instances."
+              />
+            </EuiLink>
+            &nbsp;
+            <FormattedMessage
+              id="xpack.monitoring.cluster.listing.unlinkedDeploymentCallOutText"
+              defaultMessage="Or, click Unlinked Cluster in the table below"
+            />
+          </p>
+          <p>
+            <EuiLink onClick={() => {
+              storage.set(UNLINKED_DEPLOYMENT_STORAGE_KEY, true);
+              this.setState({ [UNLINKED_DEPLOYMENT_STORAGE_KEY]: true });
+            }}
+            >
+              <EuiIcon type="cross"/>
+              &nbsp;
+              <FormattedMessage
+                id="xpack.monitoring.cluster.listing.unlinkedDeploymentCallOutDismiss"
+                defaultMessage="Dismiss"
+              />
+            </EuiLink>
+          </p>
+        </EuiCallOut>
+        <EuiSpacer/>
+      </div>
+    );
+  }
 
-      scope.$watch('clusters', (clusters = []) => {
-        const clusterTable = (
-          <I18nProvider>
-            <EuiPage>
-              <EuiPageBody>
-                <EuiPageContent>
-                  <EuiMonitoringTable
-                    className="clusterTable"
-                    rows={clusters}
-                    columns={getColumns(
-                      showLicenseExpiration,
-                      _changeCluster,
-                      _handleClickIncompatibleLicense,
-                      _handleClickInvalidLicense
-                    )}
-                    rowProps={item => {
-                      return {
-                        'data-test-subj': `clusterRow_${item.cluster_uuid}`
-                      };
-                    }}
-                    sorting={{
-                      ...sorting,
-                      sort: {
-                        ...sorting.sort,
-                        field: 'cluster_name'
-                      }
-                    }}
-                    pagination={pagination}
-                    search={{
-                      box: {
-                        incremental: true,
-                        placeholder: scope.filterText
-                      },
-                    }}
-                    onTableChange={onTableChange}
-                  />
-                </EuiPageContent>
-              </EuiPageBody>
-            </EuiPage>
-          </I18nProvider>
-        );
-        render(clusterTable, $el[0]);
-      });
+  render() {
+    const { angular, clusters, sorting, pagination, onTableChange } = this.props;
 
-    }
-  };
-});
+    const _changeCluster = partial(changeCluster, angular.scope, angular.globalState, angular.kbnUrl);
+    const _handleClickIncompatibleLicense = partial(handleClickIncompatibleLicense, angular.scope);
+    const _handleClickInvalidLicense = partial(handleClickInvalidLicense, angular.scope);
+    const hasUnlinkedDeployment = !!clusters.find(cluster => cluster.cluster_uuid === UNLINKED_DEPLOYMENT_CLUSTER_UUID);
+
+    return (
+      <I18nProvider>
+        <EuiPage>
+          <EuiPageBody>
+            <EuiPageContent>
+              {hasUnlinkedDeployment ? this.renderUnlinkedDeployment(_changeCluster, angular.storage) : null}
+              <EuiMonitoringTable
+                className="clusterTable"
+                rows={clusters}
+                columns={getColumns(
+                  angular.showLicenseExpiration,
+                  _changeCluster,
+                  _handleClickIncompatibleLicense,
+                  _handleClickInvalidLicense
+                )}
+                rowProps={item => {
+                  return {
+                    'data-test-subj': `clusterRow_${item.cluster_uuid}`
+                  };
+                }}
+                sorting={{
+                  ...sorting,
+                  sort: {
+                    ...sorting.sort,
+                    field: 'cluster_name'
+                  }
+                }}
+                pagination={pagination}
+                search={{
+                  box: {
+                    incremental: true,
+                    placeholder: angular.scope.filterText
+                  },
+                }}
+                onTableChange={onTableChange}
+              />
+            </EuiPageContent>
+          </EuiPageBody>
+        </EuiPage>
+      </I18nProvider>
+    );
+  }
+}

x-pack/plugins/monitoring/public/components/cluster/overview/index.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { ElasticsearchPanel } from './elasticsearch_panel';
 import { KibanaPanel } from './kibana_panel';
 import { LogstashPanel } from './logstash_panel';
@@ -13,23 +13,32 @@ import { BeatsPanel } from './beats_panel';
 
 import { EuiPage, EuiPageBody } from '@elastic/eui';
 import { ApmPanel } from './apm_panel';
+import { UNLINKED_DEPLOYMENT_CLUSTER_UUID } from '../../../../common/constants';
 
 export function Overview(props) {
+  const isFromUnlinkedDeployment = props.cluster.cluster_uuid === UNLINKED_DEPLOYMENT_CLUSTER_UUID;
+
   return (
     <EuiPage>
       <EuiPageBody>
         <AlertsPanel alerts={props.cluster.alerts} changeUrl={props.changeUrl} />
 
-        <ElasticsearchPanel
-          {...props.cluster.elasticsearch}
-          version={props.cluster.version}
-          ml={props.cluster.ml}
-          changeUrl={props.changeUrl}
-          license={props.cluster.license}
-          showLicenseExpiration={props.showLicenseExpiration}
-        />
-
-        <KibanaPanel {...props.cluster.kibana} changeUrl={props.changeUrl} />
+        { !isFromUnlinkedDeployment ?
+          (
+            <Fragment>
+              <ElasticsearchPanel
+                {...props.cluster.elasticsearch}
+                version={props.cluster.version}
+                ml={props.cluster.ml}
+                changeUrl={props.changeUrl}
+                license={props.cluster.license}
+                showLicenseExpiration={props.showLicenseExpiration}
+              />
+              <KibanaPanel {...props.cluster.kibana} changeUrl={props.changeUrl} />
+            </Fragment>
+          )
+          : null
+        }
 
         <LogstashPanel {...props.cluster.logstash} changeUrl={props.changeUrl} />
 

x-pack/plugins/monitoring/public/directives/all.js

@@ -7,7 +7,6 @@
 import './main';
 import './chart';
 import './sparkline';
-import './cluster/listing';
 import './elasticsearch/cluster_status';
 import './elasticsearch/index_summary';
 import './elasticsearch/node_summary';

x-pack/plugins/monitoring/public/services/clusters.js

@@ -7,6 +7,18 @@
 import { uiModules } from 'ui/modules';
 import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
 import { timefilter } from 'ui/timefilter';
+import { UNLINKED_DEPLOYMENT_CLUSTER_UUID } from '../../common/constants';
+
+function formatClusters(clusters) {
+  return clusters.map(formatCluster);
+}
+
+function formatCluster(cluster) {
+  if (cluster.cluster_uuid === UNLINKED_DEPLOYMENT_CLUSTER_UUID) {
+    cluster.cluster_name = 'Unlinked Cluster';
+  }
+  return cluster;
+}
 
 const uiModule = uiModules.get('monitoring/clusters');
 uiModule.service('monitoringClusters', ($injector) => {
@@ -30,9 +42,9 @@ uiModule.service('monitoringClusters', ($injector) => {
       .then(response => response.data)
       .then(data => {
         if (clusterUuid) {
-          return data[0]; // return single cluster
+          return formatCluster(data[0]); // return single cluster
         }
-        return data; // return set of clusters
+        return formatClusters(data); // return set of clusters
       })
       .catch(err => {
         const Private = $injector.get('Private');

x-pack/plugins/monitoring/public/views/cluster/listing/index.html

@@ -1,8 +1,3 @@
 <monitoring-main name="listing">
-  <monitoring-cluster-listing
-    pagination-settings="clusters.pagination"
-    sorting="clusters.sorting"
-    on-table-change="clusters.onTableChange"
-    clusters="clusters.data"
-  ></monitoring-cluster-listing>
+  <div id="monitoringClusterListingApp"></div>
 </monitoring-main>