[APM] Introduce custom dashboards tab in service overview

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

@@ -3075,6 +3075,28 @@
       }
     }
   },
+  "apm-service-dashboard": {
+    "properties": {
+      "dashboardSavedObjectId": {
+        "type": "keyword"
+      },
+      "dashboardTitle": {
+        "type": "text"
+      },
+      "kuery": {
+        "type": "text"
+      },
+      "useContextFilter": {
+        "type": "boolean"
+      },
+      "linkTo": {
+        "type": "keyword"
+      },
+      "serviceName": {
+        "type": "keyword"
+      }
+    }
+  },
   "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 };

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

@@ -0,0 +1,19 @@
+/*
+ * 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 ServiceDashboard {
+  dashboardSavedObjectId: string;
+  useContextFilter: boolean;
+  kuery?: string;
+}
+
+export interface SavedServiceDashboard extends ServiceDashboard {
+  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 { SavedServiceDashboard } from '../../../../../common/service_dashboards';
+import { SaveDashboardModal } from './save_dashboard_modal';
+
+export function EditDashboard({
+  onRefresh,
+  currentDashboard,
+}: {
+  onRefresh: () => void;
+  currentDashboard: SavedServiceDashboard;
+}) {
+  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 { SavedServiceDashboard } from '../../../../../common/service_dashboards';
+
+export function GotoDashboard({
+  currentDashboard,
+}: {
+  currentDashboard: SavedServiceDashboard;
+}) {
+  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 { SavedServiceDashboard } from '../../../../../common/service_dashboards';
+import { SaveDashboardModal } from './save_dashboard_modal';
+
+export function LinkDashboard({
+  onRefresh,
+  emptyButton = false,
+  serviceDashboards,
+}: {
+  onRefresh: () => void;
+  emptyButton?: boolean;
+  serviceDashboards?: SavedServiceDashboard[];
+}) {
+  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}
+        />
+      )}
+    </>
+  );
+}