[APM] Correlations style polish in prep for release (#92514)

- Removed the icon from the "View correlations" button - Moved the tabs to the FlyoutHeader - Removed unneeded spacers in the content - Reduced the filtering by callout and button - Made the introduction text color `subdued` to make it less noisy - Reduced ImpactBar size and extended width so the bar itself is `100` - Changed the selected term visualization color to `euiColorVis2` because the `euiColorAccent` is not great for visualizations. - Changed the latency distribution visualization color to `euiColorVis1` to make it consistent with the Transactions visualization colors in the other charts.
elastic · Feb 24, 2021 · b131630 · b131630
1 parent a3f7b1d
commit b131630
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 23 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/correlations/correlations_table.tsx b/x-pack/plugins/apm/public/components/app/correlations/correlations_table.tsx
@@ -63,14 +63,14 @@ export function CorrelationsTable<T extends SignificantTerm>({
   const history = useHistory();
   const columns: Array<EuiBasicTableColumn<T>> = [
     {
-      width: '100px',
+      width: '116px',
       field: 'impact',
       name: i18n.translate(
         'xpack.apm.correlations.correlationsTable.impactLabel',
         { defaultMessage: 'Impact' }
       ),
       render: (_: any, term: T) => {
-        return <ImpactBar value={term.impact * 100} />;
+        return <ImpactBar size="m" value={term.impact * 100} />;
       },
     },
     {

diff --git a/x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx
@@ -103,7 +103,7 @@ export function ErrorCorrelations({ onClose }: Props) {
     <>
       <EuiFlexGroup direction="column">
         <EuiFlexItem>
-          <EuiText size="s">
+          <EuiText size="s" color="subdued">
             <p>
               {i18n.translate('xpack.apm.correlations.error.description', {
                 defaultMessage:

diff --git a/x-pack/plugins/apm/public/components/app/correlations/index.tsx b/x-pack/plugins/apm/public/components/app/correlations/index.tsx
@@ -66,7 +66,6 @@ export function Correlations() {
         onClick={() => {
           setIsFlyoutVisible(true);
         }}
-        iconType="visTagCloud"
       >
         {i18n.translate('xpack.apm.correlations.buttonLabel', {
           defaultMessage: 'View correlations',
@@ -100,12 +99,25 @@ export function Correlations() {
                   />
                 </h2>
               </EuiTitle>
+              <EuiTabs style={{ marginBottom: '-25px' }}>
+                {tabs.map(({ key, label }) => (
+                  <EuiTab
+                    key={key}
+                    isSelected={key === currentTab}
+                    onClick={() => {
+                      setCurrentTab(key);
+                    }}
+                  >
+                    {label}
+                  </EuiTab>
+                ))}
+              </EuiTabs>
             </EuiFlyoutHeader>
             <EuiFlyoutBody>
               <CorrelationsMetricsLicenseCheck>
                 {urlParams.kuery ? (
                   <>
-                    <EuiCallOut size="m">
+                    <EuiCallOut size="s">
                       <span>
                         {i18n.translate(
                           'xpack.apm.correlations.filteringByLabel',
@@ -116,7 +128,7 @@ export function Correlations() {
                       <EuiLink
                         href={createHref(history, { query: { kuery: '' } })}
                       >
-                        <EuiButtonEmpty iconType="cross">
+                        <EuiButtonEmpty size="xs" iconType="cross">
                           {i18n.translate(
                             'xpack.apm.correlations.clearFiltersLabel',
                             { defaultMessage: 'Clear' }
@@ -128,21 +140,6 @@ export function Correlations() {
                   </>
                 ) : null}
 
-                <EuiSpacer />
-                <EuiTabs>
-                  {tabs.map(({ key, label }) => (
-                    <EuiTab
-                      key={key}
-                      isSelected={key === currentTab}
-                      onClick={() => {
-                        setCurrentTab(key);
-                      }}
-                    >
-                      {label}
-                    </EuiTab>
-                  ))}
-                </EuiTabs>
-                <EuiSpacer />
                 <TabContent onClose={() => setIsFlyoutVisible(false)} />
               </CorrelationsMetricsLicenseCheck>
             </EuiFlyoutBody>

diff --git a/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx
@@ -110,7 +110,7 @@ export function LatencyCorrelations({ onClose }: Props) {
     <>
       <EuiFlexGroup direction="column">
         <EuiFlexItem>
-          <EuiText size="s">
+          <EuiText size="s" color="subdued">
             <p>
               {i18n.translate('xpack.apm.correlations.latency.description', {
                 defaultMessage:
@@ -250,6 +250,7 @@ function LatencyDistributionChart({
           yScaleType={ScaleType.Linear}
           xAccessor={'x'}
           yAccessors={['y']}
+          color={theme.eui.euiColorVis1}
           data={data?.overall?.distribution || []}
           minBarHeight={5}
           tickFormat={(d) => `${roundFloat(d)}%`}
@@ -271,7 +272,7 @@ function LatencyDistributionChart({
             yScaleType={ScaleType.Linear}
             xAccessor={'x'}
             yAccessors={['y']}
-            color={theme.eui.euiColorAccent}
+            color={theme.eui.euiColorVis2}
             data={getSelectedDistribution(data, selectedSignificantTerm)}
             minBarHeight={5}
             tickFormat={(d) => `${roundFloat(d)}%`}