From f1a98c64d20fc7dbebfffebb275ad3d4a0fcd530 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Tue, 26 May 2020 17:13:45 +0200
Subject: [PATCH] [7.x] [Uptime] Improve responsiveness details page (#67034)
 (#67313)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../monitor_duration/monitor_duration.tsx     |  2 +-
 .../__snapshots__/monitor_list.test.tsx.snap  | 50 +++++++++++++------
 .../monitor_list/monitor_list_header.tsx      | 20 +++++++-
 3 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
index af1c8dbdc49e38..7ecf87fb405d02 100644
--- a/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
@@ -33,7 +33,7 @@ export const MonitorDurationComponent = ({
 }: DurationChartProps) => {
   return (
     <EuiPanel paddingSize="m">
-      <EuiFlexGroup>
+      <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="xs">
             <h4>
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
index 51f113db558445..5298979be18b70 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
@@ -533,35 +533,55 @@ exports[`MonitorList component renders loading state 1`] = `
 `;
 
 exports[`MonitorList component renders the monitor list 1`] = `
-.c2 {
+.c3 {
   padding-left: 17px;
 }
 
-.c4 {
+.c5 {
   padding-top: 12px;
 }
 
-.c0 {
+.c1 {
   margin-left: auto;
 }
 
-.c3 {
+.c4 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 @media (max-width:574px) {
-  .c1 {
+  .c2 {
     min-width: 230px;
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c0.c0 > :first-child {
+    -webkit-flex-basis: 40% !important;
+    -ms-flex-preferred-size: 40% !important;
+    flex-basis: 40% !important;
+  }
+
+  .c0.c0 > :nth-child(2) {
+    -webkit-order: 3;
+    -ms-flex-order: 3;
+    order: 3;
+  }
+
+  .c0.c0 > :nth-child(3) {
+    -webkit-flex-basis: 60% !important;
+    -ms-flex-preferred-size: 60% !important;
+    flex-basis: 60% !important;
+  }
+}
+
 <div
   class="euiPanel euiPanel--paddingMedium"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive c0"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -649,7 +669,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
       class="euiFlexItem"
     >
       <h5
-        class="euiTitle euiTitle--xsmall c0"
+        class="euiTitle euiTitle--xsmall c1"
       >
         <a
           data-test-subj="uptimeCertificatesLink"
@@ -803,7 +823,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                 class="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
+                  class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c2"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrow1"
@@ -830,7 +850,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                       </div>
                     </div>
                     <span
-                      class="c2"
+                      class="c3"
                     >
                       <span
                         class="euiToolTipAnchor"
@@ -895,7 +915,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                 class="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <button
-                  class="euiLink euiLink--text c3"
+                  class="euiLink euiLink--text c4"
                   type="button"
                 >
                    
@@ -980,7 +1000,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                 class="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
+                  class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c2"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrow1"
@@ -1007,7 +1027,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                       </div>
                     </div>
                     <span
-                      class="c2"
+                      class="c3"
                     >
                       <span
                         class="euiToolTipAnchor"
@@ -1072,7 +1092,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                 class="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <button
-                  class="euiLink euiLink--text c3"
+                  class="euiLink euiLink--text c4"
                   type="button"
                 >
                    
@@ -1195,7 +1215,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
         >
           <button
             aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
-            class="euiButtonIcon euiButtonIcon--text c4"
+            class="euiButtonIcon euiButtonIcon--text c5"
             data-test-subj="xpack.uptime.monitorList.prevButton"
             disabled=""
             type="button"
@@ -1212,7 +1232,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
         >
           <button
             aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
-            class="euiButtonIcon euiButtonIcon--text c4"
+            class="euiButtonIcon euiButtonIcon--text c5"
             data-test-subj="xpack.uptime.monitorList.nextButton"
             disabled=""
             type="button"
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
index 2c5677e32e325d..c37cf6a158e461 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
@@ -16,9 +16,25 @@ const TitleStyle = styled(EuiTitle)`
   margin-left: auto;
 `;
 
+const FlexGroupContainer = styled(EuiFlexGroup)`
+  && {
+    @media only screen and (max-width: 768px) {
+      > :first-child {
+        flex-basis: 40% !important;
+      }
+      > :nth-child(2) {
+        order: 3;
+      }
+      > :nth-child(3) {
+        flex-basis: 60% !important;
+      }
+    }
+  }
+`;
+
 export const MonitorListHeader: React.FC = () => {
   return (
-    <EuiFlexGroup alignItems="center">
+    <FlexGroupContainer alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiTitle size="xs">
           <h5>
@@ -44,6 +60,6 @@ export const MonitorListHeader: React.FC = () => {
           </h5>
         </TitleStyle>
       </EuiFlexItem>
-    </EuiFlexGroup>
+    </FlexGroupContainer>
   );
 };