Fleet agent details design review (#84939)

* small design fixs for integrations list * use tooltip for upgrade available * remove enrollment token info * remove border-bottom from last table row * Fix type issue Co-authored-by: Nicolas Chaulet <nicolas.chaulet@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Dec 4, 2020 · 1c072c7 · 1c072c7
1 parent bdbcb16
commit 1c072c7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/...ections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx b/...ections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
@@ -10,9 +10,11 @@ import {
   EuiLink,
   EuiAccordion,
   EuiTitle,
+  EuiToolTip,
   EuiPanel,
   EuiButtonIcon,
   EuiBasicTable,
+  EuiBasicTableProps,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
@@ -25,8 +27,15 @@ const StyledEuiAccordion = styled(EuiAccordion)`
   .ingest-integration-title-button {
     padding: ${(props) => props.theme.eui.paddingSizes.m}
       ${(props) => props.theme.eui.paddingSizes.m};
+  }
+
+  &.euiAccordion-isOpen .ingest-integration-title-button {
     border-bottom: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
   }
+
+  .euiTableRow:last-child .euiTableRowCell {
+    border-bottom: none;
+  }
 `;
 
 const CollapsablePanel: React.FC<{ id: string; title: React.ReactNode }> = ({
@@ -35,7 +44,7 @@ const CollapsablePanel: React.FC<{ id: string; title: React.ReactNode }> = ({
   children,
 }) => {
   return (
-    <EuiPanel paddingSize="none">
+    <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
       <StyledEuiAccordion
         id={id}
         arrowDisplay="right"
@@ -59,7 +68,7 @@ export const AgentDetailsIntegration: React.FunctionComponent<{
     return packagePolicy.inputs.filter((input) => input.enabled);
   }, [packagePolicy.inputs]);
 
-  const columns = [
+  const columns: EuiBasicTableProps<PackagePolicyInput>['columns'] = [
     {
       field: 'type',
       width: '100%',
@@ -71,24 +80,28 @@ export const AgentDetailsIntegration: React.FunctionComponent<{
       },
     },
     {
+      align: 'right',
       name: i18n.translate('xpack.fleet.agentDetailsIntegrations.actionsLabel', {
         defaultMessage: 'Actions',
       }),
       field: 'type',
       width: 'auto',
       render: (inputType: string) => {
         return (
-          <EuiButtonIcon
-            href={getHref('fleet_agent_details', {
-              agentId: agent.id,
-              tabId: 'logs',
-              logQuery: getLogsQueryByInputType(inputType),
-            })}
-            iconType="editorAlignLeft"
-            title={i18n.translate('xpack.fleet.agentDetailsIntegrations.viewLogsButton', {
+          <EuiToolTip
+            content={i18n.translate('xpack.fleet.agentDetailsIntegrations.viewLogsButton', {
               defaultMessage: 'View logs',
             })}
-          />
+          >
+            <EuiButtonIcon
+              href={getHref('fleet_agent_details', {
+                agentId: agent.id,
+                tabId: 'logs',
+                logQuery: getLogsQueryByInputType(inputType),
+              })}
+              iconType="editorAlignLeft"
+            />
+          </EuiToolTip>
         );
       },
     },
@@ -142,7 +155,7 @@ export const AgentDetailsIntegrationsSection: React.FunctionComponent<{
   }
 
   return (
-    <EuiFlexGroup direction="column">
+    <EuiFlexGroup direction="column" gutterSize="m">
       {(agentPolicy.package_policies as PackagePolicy[]).map((packagePolicy) => {
         return (
           <EuiFlexItem grow={false} key={packagePolicy.id}>

diff --git a/...et/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx b/...et/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
@@ -11,10 +11,10 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
+  EuiIcon,
+  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EuiText } from '@elastic/eui';
-import { EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Agent, AgentPolicy } from '../../../../../types';
 import { useKibanaVersion, useLink } from '../../../../../hooks';
@@ -66,27 +66,21 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
                   </EuiFlexItem>
                   {isAgentUpgradeable(agent, kibanaVersion) ? (
                     <EuiFlexItem grow={false}>
-                      <EuiText color="subdued" size="s" className="eui-textNoWrap">
-                        <EuiIcon size="m" type="alert" color="warning" />
-                        &nbsp;
-                        <FormattedMessage
-                          id="xpack.fleet.agentList.agentUpgradeLabel"
-                          defaultMessage="Upgrade available"
-                        />
-                      </EuiText>
+                      <EuiToolTip
+                        position="right"
+                        content={i18n.translate('xpack.fleet.agentList.agentUpgradeLabel', {
+                          defaultMessage: 'Upgrade available',
+                        })}
+                      >
+                        <EuiIcon type="alert" color="warning" />
+                      </EuiToolTip>
                     </EuiFlexItem>
                   ) : null}
                 </EuiFlexGroup>
               ) : (
                 '-'
               ),
           },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.enrollmentTokenLabel', {
-              defaultMessage: 'Enrollment token',
-            }),
-            description: '-', // Fixme when we have the enrollment tokenhttps://github.com/elastic/kibana/issues/61269
-          },
           {
             title: i18n.translate('xpack.fleet.agentDetails.integrationsLabel', {
               defaultMessage: 'Integrations',