[APM] Introduce custom dashboards tab in service overview

packages/kbn-check-mappings-update-cli/current_mappings.json

@@ -3131,6 +3131,22 @@
       }
     }
   },
+  "apm-custom-dashboards": {
+    "properties": {
+      "dashboardSavedObjectId": {
+        "type": "keyword"
+      },
+      "kuery": {
+        "type": "text"
+      },
+      "serviceEnvironmentFilterEnabled": {
+        "type": "boolean"
+      },
+      "serviceNameFilterEnabled": {
+        "type": "boolean"
+      }
+    }
+  },
   "enterprise_search_telemetry": {
     "dynamic": false,
     "properties": {}

packages/kbn-shared-svg/index.ts

@@ -8,5 +8,7 @@
 
 import noResultsIllustrationDark from './src/assets/no_results_dark.svg';
 import noResultsIllustrationLight from './src/assets/no_results_light.svg';
+import dashboardsLight from './src/assets/dashboards_light.svg';
+import dashboardsDark from './src/assets/dashboards_dark.svg';
 
-export { noResultsIllustrationDark, noResultsIllustrationLight };
+export { noResultsIllustrationDark, noResultsIllustrationLight, dashboardsLight, dashboardsDark };

src/core/server/integration_tests/saved_objects/migrations/group2/check_registered_types.test.ts

@@ -59,6 +59,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "action_task_params": "96e27e7f4e8273ffcd87060221e2b75e81912dd5",
         "alert": "dc710bc17dfc98a9a703d388569abccce5f8bf07",
         "api_key_pending_invalidation": "1399e87ca37b3d3a65d269c924eda70726cfe886",
+        "apm-custom-dashboards": "b67128f78160c288bd7efe25b2da6e2afd5e82fc",
         "apm-indices": "8a2d68d415a4b542b26b0d292034a28ffac6fed4",
         "apm-server-schema": "58a8c6468edae3d1dc520f0134f59cf3f4fd7eff",
         "apm-service-group": "66dfc1ddd40bad8f693c873bf6002ca30079a4ae",

src/core/server/integration_tests/saved_objects/migrations/group3/type_registrations.test.ts

@@ -15,6 +15,7 @@ const previouslyRegisteredTypes = [
   'action_task_params',
   'alert',
   'api_key_pending_invalidation',
+  'apm-custom-dashboards',
   'apm-indices',
   'apm-server-schema',
   'apm-service-group',

src/core/server/integration_tests/saved_objects/migrations/group5/dot_kibana_split.test.ts

@@ -181,6 +181,7 @@ describe('split .kibana index into multiple system indices', () => {
             "action_task_params",
             "alert",
             "api_key_pending_invalidation",
+            "apm-custom-dashboards",
             "apm-indices",
             "apm-server-schema",
             "apm-service-group",

x-pack/plugins/apm/common/custom_dashboards.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const APM_CUSTOM_DASHBOARDS_SAVED_OBJECT_TYPE = 'apm-custom-dashboards';
+
+export interface ApmCustomDashboard {
+  dashboardSavedObjectId: string;
+  serviceNameFilterEnabled: boolean;
+  serviceEnvironmentFilterEnabled: boolean;
+  kuery?: string;
+}
+
+export interface SavedApmCustomDashboard extends ApmCustomDashboard {
+  id: string;
+  updatedAt: number;
+}

x-pack/plugins/apm/public/components/app/metrics/static_dashboard/index.tsx

@@ -109,7 +109,7 @@ async function getCreationOptions(
   }
 }
 
-function getFilters(
+export function getFilters(
   serviceName: string,
   environment: string,
   dataView: DataView
@@ -139,7 +139,7 @@ function getFilters(
     } else {
       const environmentFilter = buildPhraseFilter(
         environmentField,
-        serviceName,
+        environment,
         dataView
       );
       filters.push(environmentFilter);

x-pack/plugins/apm/public/components/app/service_dashboards/actions/edit_dashboard.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useState } from 'react';
+import { SaveDashboardModal } from './save_dashboard_modal';
+import { MergedServiceDashboard } from '..';
+
+export function EditDashboard({
+  onRefresh,
+  currentDashboard,
+}: {
+  onRefresh: () => void;
+  currentDashboard: MergedServiceDashboard;
+}) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  return (
+    <>
+      <EuiButtonEmpty
+        color="text"
+        size="s"
+        iconType={'pencil'}
+        data-test-subj="apmEditServiceDashboardMenu"
+        onClick={() => setIsModalVisible(!isModalVisible)}
+      >
+        {i18n.translate('xpack.apm.serviceDashboards.editEmptyButtonLabel', {
+          defaultMessage: 'Edit dashboard link',
+        })}
+      </EuiButtonEmpty>
+
+      {isModalVisible && (
+        <SaveDashboardModal
+          onClose={() => setIsModalVisible(!isModalVisible)}
+          onRefresh={onRefresh}
+          currentDashboard={currentDashboard}
+        />
+      )}
+    </>
+  );
+}

x-pack/plugins/apm/public/components/app/service_dashboards/actions/goto_dashboard.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiButtonEmpty } from '@elastic/eui';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { ApmPluginStartDeps } from '../../../../plugin';
+import { SavedApmCustomDashboard } from '../../../../../common/custom_dashboards';
+
+export function GotoDashboard({
+  currentDashboard,
+}: {
+  currentDashboard: SavedApmCustomDashboard;
+}) {
+  const {
+    services: {
+      dashboard: { locator: dashboardLocator },
+    },
+  } = useKibana<ApmPluginStartDeps>();
+
+  const url = dashboardLocator?.getRedirectUrl({
+    dashboardId: currentDashboard?.dashboardSavedObjectId,
+  });
+  return (
+    <EuiButtonEmpty
+      data-test-subj="apmGotoDashboardGoToDashboardButton"
+      color="text"
+      size="s"
+      iconType={'visGauge'}
+      href={url}
+    >
+      {i18n.translate('xpack.apm.serviceDashboards.contextMenu.goToDashboard', {
+        defaultMessage: 'Go to dashboard',
+      })}
+    </EuiButtonEmpty>
+  );
+}

x-pack/plugins/apm/public/components/app/service_dashboards/actions/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { LinkDashboard } from './link_dashboard';
+import { GotoDashboard } from './goto_dashboard';
+import { EditDashboard } from './edit_dashboard';
+
+export { LinkDashboard, GotoDashboard, EditDashboard };

x-pack/plugins/apm/public/components/app/service_dashboards/actions/link_dashboard.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiButton, EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useState } from 'react';
+import { MergedServiceDashboard } from '..';
+import { SaveDashboardModal } from './save_dashboard_modal';
+
+export function LinkDashboard({
+  onRefresh,
+  emptyButton = false,
+  serviceDashboards,
+}: {
+  onRefresh: () => void;
+  emptyButton?: boolean;
+  serviceDashboards?: MergedServiceDashboard[];
+}) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  return (
+    <>
+      {emptyButton ? (
+        <EuiButtonEmpty
+          color="text"
+          size="s"
+          iconType={'plusInCircle'}
+          data-test-subj="apmLinkServiceDashboardMenu"
+          onClick={() => setIsModalVisible(true)}
+        >
+          {i18n.translate('xpack.apm.serviceDashboards.linkEmptyButtonLabel', {
+            defaultMessage: 'Link new dashboard',
+          })}
+        </EuiButtonEmpty>
+      ) : (
+        <EuiButton
+          data-test-subj="apmAddServiceDashboard"
+          onClick={() => setIsModalVisible(true)}
+        >
+          {i18n.translate('xpack.apm.serviceDashboards.linkButtonLabel', {
+            defaultMessage: 'Link dashboard',
+          })}
+        </EuiButton>
+      )}
+
+      {isModalVisible && (
+        <SaveDashboardModal
+          onClose={() => setIsModalVisible(false)}
+          onRefresh={onRefresh}
+          serviceDashboards={serviceDashboards}
+        />
+      )}
+    </>
+  );
+}