From 56ef09812af39bc12b7f714b573e3373c5cdf65a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Fri, 7 Feb 2020 08:02:17 +0000
Subject: [PATCH] [APM] Show missing permissions message to the user on the
 Services overview (#56374)

* creating permission page

* pr comments

* creating permission page

* fixing pr comments

* removing breadcrumb and adding static label to dismiss the permission page
---
 .../components/app/Permission/index.tsx       | 140 ++++++++++++++++++
 .../shared/Links/ElasticDocsLink.tsx          |   8 +-
 .../apm/public/new-platform/plugin.tsx        |  13 +-
 .../apm/server/lib/security/getPermissions.ts |  32 ++++
 .../apm/server/routes/create_apm_api.ts       |   6 +-
 .../plugins/apm/server/routes/security.ts     |  17 +++
 6 files changed, 208 insertions(+), 8 deletions(-)
 create mode 100644 x-pack/legacy/plugins/apm/public/components/app/Permission/index.tsx
 create mode 100644 x-pack/legacy/plugins/apm/server/lib/security/getPermissions.ts
 create mode 100644 x-pack/legacy/plugins/apm/server/routes/security.ts

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Permission/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Permission/index.tsx
new file mode 100644
index 0000000000000..177002e7e49bb
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/ElasticDocsLink.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Links/ElasticDocsLink.tsx
index efae8982c2235..d97a2331e457b 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Links/ElasticDocsLink.tsx
+++ b/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>
+  );
 }
diff --git a/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx b/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx
index 26e0f25cbb666..50f20ac017c5d 100644
--- a/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx
+++ b/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>
   );
 };
diff --git a/x-pack/legacy/plugins/apm/server/lib/security/getPermissions.ts b/x-pack/legacy/plugins/apm/server/lib/security/getPermissions.ts
new file mode 100644
index 0000000000000..ed2a1f64e7f84
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/x-pack/legacy/plugins/apm/server/routes/create_apm_api.ts b/x-pack/legacy/plugins/apm/server/routes/create_apm_api.ts
index cf27d20c24360..3ac9629f59edf 100644
--- a/x-pack/legacy/plugins/apm/server/routes/create_apm_api.ts
+++ b/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;
 };
diff --git a/x-pack/legacy/plugins/apm/server/routes/security.ts b/x-pack/legacy/plugins/apm/server/routes/security.ts
new file mode 100644
index 0000000000000..5f803fb438e31
--- /dev/null
+++ b/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);
+  }
+}));