[APM] Show missing permissions message to the user on the Services ov…

…erview (elastic#56374)

* creating permission page

* pr comments

* creating permission page

* fixing pr comments

* removing breadcrumb and adding static label to dismiss the permission page

x-pack/legacy/plugins/apm/public/components/app/Permission/index.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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.
+ */
+
+import {
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPanel,
+  EuiTitle
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { FETCH_STATUS, useFetcher } from '../../../hooks/useFetcher';
+import { fontSize, pct, px, units } from '../../../style/variables';
+import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
+import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink';
+
+export const Permission: React.FC = ({ children }) => {
+  const [isPermissionPageEnabled, setIsPermissionsPageEnabled] = useState(true);
+
+  const { data, status } = useFetcher(callApmApi => {
+    return callApmApi({
+      pathname: '/api/apm/security/permissions'
+    });
+  }, []);
+
+  // Return null until receive the reponse of the api.
+  if (status === FETCH_STATUS.LOADING || status === FETCH_STATUS.PENDING) {
+    return null;
+  }
+  // When the user doesn't have the appropriate permissions and they
+  // did not use the escape hatch, show the missing permissions page
+  if (data?.hasPermission === false && isPermissionPageEnabled) {
+    return (
+      <PermissionPage
+        onEscapeHatchClick={() => setIsPermissionsPageEnabled(false)}
+      />
+    );
+  }
+
+  return <>{children}</>;
+};
+
+const CentralizedContainer = styled.div`
+  height: ${pct(100)};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const EscapeHatch = styled.div`
+  width: ${pct(100)};
+  margin-top: ${px(units.plus)};
+  justify-content: center;
+  display: flex;
+`;
+
+interface Props {
+  onEscapeHatchClick: () => void;
+}
+
+const PermissionPage = ({ onEscapeHatchClick }: Props) => {
+  return (
+    <div style={{ height: pct(95) }}>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="l">
+            <h1>
+              {i18n.translate('xpack.apm.permission.apm', {
+                defaultMessage: 'APM'
+              })}
+            </h1>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <SetupInstructionsLink />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <CentralizedContainer>
+        <div>
+          <EuiPanel paddingSize="none">
+            <EuiEmptyPrompt
+              iconType="apmApp"
+              iconColor={''}
+              title={
+                <h2>
+                  {i18n.translate('xpack.apm.permission.title', {
+                    defaultMessage: 'Missing permissions to access APM'
+                  })}
+                </h2>
+              }
+              body={
+                <p>
+                  {i18n.translate('xpack.apm.permission.description', {
+                    defaultMessage:
+                      "We've detected your current role in Kibana does not grant you access to the APM data. Please check with your Kibana administrator to get the proper privileges granted in order to start using APM."
+                  })}
+                </p>
+              }
+              actions={
+                <>
+                  <ElasticDocsLink
+                    section="/apm/server"
+                    path="/feature-roles.html"
+                  >
+                    {(href: string) => (
+                      <EuiButton color="primary" fill href={href}>
+                        {i18n.translate('xpack.apm.permission.learnMore', {
+                          defaultMessage: 'Learn more about APM permissions'
+                        })}
+                      </EuiButton>
+                    )}
+                  </ElasticDocsLink>
+
+                  <EscapeHatch>
+                    <EuiLink
+                      color="subdued"
+                      onClick={onEscapeHatchClick}
+                      style={{ fontSize }}
+                    >
+                      {i18n.translate('xpack.apm.permission.dismissWarning', {
+                        defaultMessage: 'Dismiss warning'
+                      })}
+                    </EuiLink>
+                  </EscapeHatch>
+                </>
+              }
+            />
+          </EuiPanel>
+        </div>
+      </CentralizedContainer>
+    </div>
+  );
+};

x-pack/legacy/plugins/apm/public/components/shared/Links/ElasticDocsLink.tsx

@@ -16,8 +16,12 @@ interface Props extends EuiLinkAnchorProps {
   path: string;
 }
 
-export function ElasticDocsLink({ section, path, ...rest }: Props) {
+export function ElasticDocsLink({ section, path, children, ...rest }: Props) {
   const { version } = useApmPluginContext().packageInfo;
   const href = `https://www.elastic.co/guide/en${section}/${version}${path}`;
-  return <EuiLink href={href} {...rest} />;
+  return (
+    <EuiLink href={href} {...rest}>
+      {typeof children === 'function' ? children(href) : children}
+    </EuiLink>
+  );
 }

x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx

@@ -36,6 +36,7 @@ import { getConfigFromInjectedMetadata } from './getConfigFromInjectedMetadata';
 import { setHelpExtension } from './setHelpExtension';
 import { toggleAppLinkInNav } from './toggleAppLinkInNav';
 import { setReadonlyBadge } from './updateBadge';
+import { Permission } from '../components/app/Permission';
 
 export const REACT_APP_ROOT_ID = 'react-apm-root';
 
@@ -50,11 +51,13 @@ const App = () => {
     <MainContainer data-test-subj="apmMainContainer" role="main">
       <UpdateBreadcrumbs routes={routes} />
       <Route component={ScrollToTopOnPathChange} />
-      <Switch>
-        {routes.map((route, i) => (
-          <Route key={i} {...route} />
-        ))}
-      </Switch>
+      <Permission>
+        <Switch>
+          {routes.map((route, i) => (
+            <Route key={i} {...route} />
+          ))}
+        </Switch>
+      </Permission>
     </MainContainer>
   );
 };

x-pack/legacy/plugins/apm/server/lib/security/getPermissions.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+import { Setup } from '../helpers/setup_request';
+
+export async function getPermissions(setup: Setup) {
+  const { client, indices } = setup;
+
+  const params = {
+    index: Object.values(indices),
+    body: {
+      size: 0,
+      query: {
+        match_all: {}
+      }
+    }
+  };
+
+  try {
+    await client.search(params);
+    return { hasPermission: true };
+  } catch (e) {
+    // If 403, it means the user doesnt have permission.
+    if (e.status === 403) {
+      return { hasPermission: false };
+    }
+    // if any other error happens, throw it.
+    throw e;
+  }
+}

x-pack/legacy/plugins/apm/server/routes/create_apm_api.ts

@@ -59,6 +59,7 @@ import {
 } from './ui_filters';
 import { createApi } from './create_api';
 import { serviceMapRoute, serviceMapServiceNodeRoute } from './service_map';
+import { permissionsRoute } from './security';
 
 const createApmApi = () => {
   const api = createApi()
@@ -124,7 +125,10 @@ const createApmApi = () => {
 
     // Service map
     .add(serviceMapRoute)
-    .add(serviceMapServiceNodeRoute);
+    .add(serviceMapServiceNodeRoute)
+
+    // security
+    .add(permissionsRoute);
 
   return api;
 };

x-pack/legacy/plugins/apm/server/routes/security.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+import { createRoute } from './create_route';
+import { setupRequest } from '../lib/helpers/setup_request';
+import { getPermissions } from '../lib/security/getPermissions';
+
+export const permissionsRoute = createRoute(() => ({
+  path: '/api/apm/security/permissions',
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+    return getPermissions(setup);
+  }
+}));