Merge branch 'master' into dev/drilldowns/url-drilldown-helpers

Author: kibanamachine

src/plugins/timelion/public/app.js

@@ -44,6 +44,7 @@ import { initSavedObjectSaveAsCheckBoxDirective } from './directives/saved_objec
 import { initSavedObjectFinderDirective } from './directives/saved_object_finder';
 import { initTimelionTabsDirective } from './components/timelionhelp_tabs_directive';
 import { initTimelionTDeprecationDirective } from './components/timelion_deprecation_directive';
+import { initTimelionTopNavDirective } from './components/timelion_top_nav_directive';
 import { initInputFocusDirective } from './directives/input_focus';
 import { Chart } from './directives/chart/chart';
 import { TimelionInterval } from './directives/timelion_interval/timelion_interval';
@@ -86,6 +87,7 @@ export function initTimelionApp(app, deps) {
   initInputFocusDirective(app);
   initTimelionTabsDirective(app, deps);
   initTimelionTDeprecationDirective(app, deps);
+  initTimelionTopNavDirective(app, deps);
   initSavedObjectFinderDirective(app, savedSheetLoader, deps.core.uiSettings);
   initSavedObjectSaveAsCheckBoxDirective(app);
   initCellsDirective(app);

src/plugins/timelion/public/application.ts

@@ -36,11 +36,7 @@ import {
 import { getTimeChart } from './panels/timechart/timechart';
 import { Panel } from './panels/panel';
 
-import {
-  configureAppAngularModule,
-  createTopNavDirective,
-  createTopNavHelper,
-} from '../../kibana_legacy/public';
+import { configureAppAngularModule } from '../../kibana_legacy/public';
 import { TimelionPluginStartDependencies } from './plugin';
 import { DataPublicPluginStart } from '../../data/public';
 // @ts-ignore
@@ -120,11 +116,9 @@ function mountTimelionApp(appBasePath: string, element: HTMLElement, deps: Rende
 function createLocalAngularModule(deps: RenderDeps) {
   createLocalI18nModule();
   createLocalIconModule();
-  createLocalTopNavModule(deps.plugins.navigation);
 
   const dashboardAngularModule = angular.module(moduleName, [
     ...thirdPartyAngularDependencies,
-    'app/timelion/TopNav',
     'app/timelion/I18n',
     'app/timelion/icon',
   ]);
@@ -137,13 +131,6 @@ function createLocalIconModule() {
     .directive('icon', (reactDirective) => reactDirective(EuiIcon));
 }
 
-function createLocalTopNavModule(navigation: TimelionPluginStartDependencies['navigation']) {
-  angular
-    .module('app/timelion/TopNav', ['react'])
-    .directive('kbnTopNav', createTopNavDirective)
-    .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui));
-}
-
 function createLocalI18nModule() {
   angular
     .module('app/timelion/I18n', [])

src/plugins/timelion/public/components/timelion_top_nav_directive.js

@@ -0,0 +1,58 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+
+export function initTimelionTopNavDirective(app, deps) {
+  app.directive('timelionTopNav', function (reactDirective) {
+    return reactDirective(
+      (props) => {
+        const { TopNavMenu } = deps.plugins.navigation.ui;
+        return (
+          <deps.core.i18n.Context>
+            <TopNavMenu
+              appName="timelion"
+              showTopNavMenu
+              config={props.topNavMenu}
+              setMenuMountPoint={deps.mountParams.setHeaderActionMenu}
+              onQuerySubmit={props.onTimeUpdate}
+              screenTitle="timelion"
+              showDatePicker
+              showFilterBar={false}
+              showQueryInput={false}
+              showSaveQuery={false}
+              showSearchBar
+              useDefaultBehaviors
+            />
+          </deps.core.i18n.Context>
+        );
+      },
+      [
+        ['topNavMenu', { watchDepth: 'reference' }],
+        ['onTimeUpdate', { watchDepth: 'reference' }],
+      ],
+      {
+        restrict: 'E',
+        scope: {
+          topNavMenu: '=',
+          onTimeUpdate: '=',
+        },
+      }
+    );
+  });
+}

src/plugins/timelion/public/index.html

@@ -11,21 +11,7 @@
     </span>
   </span>
   <!-- Local nav. -->
-  <kbn-top-nav 
-    app-name="'timelion'"
-    config="topNavMenu"
-    show-search-bar="true"
-    show-search-bar-inline="true"
-    show-filter-bar="false"
-    show-query-input="false"
-    date-range-from="model.timeRange.from"
-    date-range-to="model.timeRange.to"
-    is-refresh-paused="model.refreshInterval.pause"
-    refresh-interval="model.refreshInterval.value"
-    on-refresh-change="onRefreshChange"
-    on-query-submit="onTimeUpdate">
-  </kbn-top-nav>
-
+  <timelion-top-nav top-nav-menu="topNavMenu" on-time-update="onTimeUpdate"></timelion-top-nav>
 
   <div class="timApp__menus">
     <timelion-deprecation></timelion-deprecation>

x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx

@@ -14,7 +14,7 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { getAPMHref } from '../../shared/Links/apm/APMLink';
 import { APMQueryParams } from '../../shared/Links/url_helpers';
 import { CytoscapeContext } from './Cytoscape';
-import { getAnimationOptions, getNodeHeight } from './cytoscapeOptions';
+import { getAnimationOptions, getNodeHeight } from './cytoscape_options';
 
 const ControlsContainer = styled('div')`
   left: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};

x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

@@ -17,7 +17,7 @@ import React, {
   useState,
 } from 'react';
 import { useTheme } from '../../../hooks/useTheme';
-import { getCytoscapeOptions } from './cytoscapeOptions';
+import { getCytoscapeOptions } from './cytoscape_options';
 import { useCytoscapeEventHandlers } from './use_cytoscape_event_handlers';
 
 cytoscape.use(dagre);

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/AnomalyDetection.tsx

@@ -22,7 +22,7 @@ import { useTheme } from '../../../../hooks/useTheme';
 import { fontSize, px } from '../../../../style/variables';
 import { asInteger, asDuration } from '../../../../../common/utils/formatters';
 import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
-import { popoverWidth } from '../cytoscapeOptions';
+import { popoverWidth } from '../cytoscape_options';
 import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';
 import {
   getSeverity,

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx

@@ -15,7 +15,7 @@ import React, { MouseEvent } from 'react';
 import { Buttons } from './Buttons';
 import { Info } from './Info';
 import { ServiceStatsFetcher } from './ServiceStatsFetcher';
-import { popoverWidth } from '../cytoscapeOptions';
+import { popoverWidth } from '../cytoscape_options';
 
 interface ContentsProps {
   isService: boolean;

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx

@@ -18,7 +18,7 @@ import cytoscape from 'cytoscape';
 import { useTheme } from '../../../../hooks/useTheme';
 import { SERVICE_NAME } from '../../../../../common/elasticsearch_fieldnames';
 import { CytoscapeContext } from '../Cytoscape';
-import { getAnimationOptions } from '../cytoscapeOptions';
+import { getAnimationOptions } from '../cytoscape_options';
 import { Contents } from './Contents';
 
 interface PopoverProps {

x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts renamed to x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts

@@ -5,17 +5,18 @@
  */
 import cytoscape from 'cytoscape';
 import { CSSProperties } from 'react';
-import {
-  getServiceHealthStatusColor,
-  ServiceHealthStatus,
-} from '../../../../common/service_health_status';
+import { EuiTheme } from '../../../../../observability/public';
+import { ServiceAnomalyStats } from '../../../../common/anomaly_detection';
 import {
   SERVICE_NAME,
   SPAN_DESTINATION_SERVICE_RESOURCE,
 } from '../../../../common/elasticsearch_fieldnames';
-import { EuiTheme } from '../../../../../observability/public';
+import {
+  getServiceHealthStatusColor,
+  ServiceHealthStatus,
+} from '../../../../common/service_health_status';
+import { FETCH_STATUS } from '../../../hooks/useFetcher';
 import { defaultIcon, iconForNode } from './icons';
-import { ServiceAnomalyStats } from '../../../../common/anomaly_detection';
 
 export const popoverWidth = 280;
 
@@ -104,6 +105,11 @@ function isService(el: cytoscape.NodeSingular) {
 const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
   const lineColor = theme.eui.euiColorMediumShade;
   return [
+    {
+      selector: 'core',
+      // @ts-expect-error DefinitelyTyped does not recognize 'active-bg-opacity'
+      style: { 'active-bg-opacity': 0 },
+    },
     {
       selector: 'node',
       style: {
@@ -226,7 +232,10 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
 
 // The CSS styles for the div containing the cytoscape element. Makes a
 // background grid of dots.
-export const getCytoscapeDivStyle = (theme: EuiTheme): CSSProperties => ({
+export const getCytoscapeDivStyle = (
+  theme: EuiTheme,
+  status: FETCH_STATUS
+): CSSProperties => ({
   background: `linear-gradient(
   90deg,
   ${theme.eui.euiPageBackgroundColor}
@@ -242,6 +251,7 @@ linear-gradient(
 center,
 ${theme.eui.euiColorLightShade}`,
   backgroundSize: `${theme.eui.euiSizeL} ${theme.eui.euiSizeL}`,
+  cursor: `${status === FETCH_STATUS.LOADING ? 'wait' : 'grab'}`,
   margin: `-${theme.eui.gutterTypes.gutterLarge}`,
   marginTop: 0,
 });