PR feedback

elastic · Oct 14, 2021 · efe2100 · efe2100
1 parent 27635e6
commit efe2100
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/...gers_actions_ui/public/application/sections/alert_details/components/alert_instances.scss b/...gers_actions_ui/public/application/sections/alert_details/components/alert_instances.scss
@@ -13,12 +13,4 @@
 .ruleDurationWarningIcon {
   bottom: $euiSizeXS;
   position: relative;
-}
-
-.executionDurationChartTitleIcon {
-  margin-top: $euiSizeXS;
-}
-
-.ruleDurationStat {
-  margin-top: $euiSizeXS / 2;
 }
diff --git a/...ggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx b/...ggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx
@@ -23,6 +23,7 @@ import {
   EuiIconTip,
   EuiTitle,
 } from '@elastic/eui';
+import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { FormattedMessage } from '@kbn/i18n/react';
 // @ts-ignore
 import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/lib/services';
@@ -213,10 +214,11 @@ export function AlertInstances({
     <>
       <EuiHorizontalRule />
       <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={1}>
           <EuiPanel color="subdued" hasBorder={false}>
             <EuiStat
               data-test-subj={`ruleStatus-${alert.executionStatus.status}`}
+              titleSize="xs"
               title={
                 <EuiHealth
                   data-test-subj={`ruleStatus-${alert.executionStatus.status}`}
@@ -235,16 +237,17 @@ export function AlertInstances({
             />
           </EuiPanel>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={1}>
           <EuiPanel
             data-test-subj="avgExecutionDurationPanel"
             color={showDurationWarning ? 'warning' : 'subdued'}
             hasBorder={false}
           >
             <EuiStat
               data-test-subj="avgExecutionDurationStat"
+              titleSize="xs"
               title={
-                <EuiFlexGroup gutterSize="xs" className="ruleDurationStat">
+                <EuiFlexGroup gutterSize="xs">
                   {showDurationWarning && (
                     <EuiFlexItem grow={false}>
                       <EuiIconTip
@@ -276,11 +279,11 @@ export function AlertInstances({
             />
           </EuiPanel>
         </EuiFlexItem>
-        <EuiFlexItem grow={true}>
+        <EuiFlexItem grow={4}>
           <EuiPanel data-test-subj="executionDurationChartPanel" hasBorder={true}>
-            <EuiFlexGroup gutterSize="xs">
+            <EuiFlexGroup alignItems="center" gutterSize="xs">
               <EuiFlexItem grow={false}>
-                <EuiTitle size="s">
+                <EuiTitle size="xxs">
                   <h4>
                     <FormattedMessage
                       id="xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.recentDurationsTitle"
@@ -291,7 +294,6 @@ export function AlertInstances({
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiIconTip
-                  anchorClassName="executionDurationChartTitleIcon"
                   color="subdued"
                   type="questionInCircle"
                   content={i18n.translate(
@@ -316,7 +318,7 @@ export function AlertInstances({
                     theme={{
                       lineSeriesStyle: {
                         point: { visible: false },
-                        line: { stroke: '#DD0A73' },
+                        line: { stroke: lightEuiTheme.euiColorAccent },
                       },
                     }}
                   />