[7.8] [Uptime] Improve overview and details page responsiveness (elas…

…tic#65500) (elastic#66557)
kertal · May 14, 2020 · e71e784 · e71e784
1 parent 8890ac9
commit e71e784
Show file tree

Hide file tree

Showing 13 changed files with 345 additions and 265 deletions.
diff --git a/...public/components/monitor/location_map/__tests__/__snapshots__/location_map.test.tsx.snap b/...public/components/monitor/location_map/__tests__/__snapshots__/location_map.test.tsx.snap
diff --git a/...omponents/monitor/location_map/__tests__/__snapshots__/location_status_tags.test.tsx.snap b/...omponents/monitor/location_map/__tests__/__snapshots__/location_status_tags.test.tsx.snap
diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/location_map.tsx b/x-pack/plugins/uptime/public/components/monitor/location_map/location_map.tsx
@@ -30,7 +30,9 @@ const MapPanel = styled.div`
 
 const EuiFlexItemTags = styled(EuiFlexItem)`
   padding-top: 5px;
-  @media (max-width: 850px) {
+  @media (max-width: 1042px) {
+    flex-basis: 80% !important;
+    flex-grow: 0 !important;
     order: 1;
   }
 `;
@@ -75,7 +77,7 @@ export const LocationMap = ({ monitorLocations }: LocationMapProps) => {
 
   return (
     <EuiErrorBoundary>
-      <FlexGroup wrap={true} gutterSize="none">
+      <FlexGroup wrap={true} gutterSize="none" justifyContent="flexEnd">
         <EuiFlexItemTags>
           <LocationStatusTags locations={monitorLocations?.locations || []} />
         </EuiFlexItemTags>

diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/location_status_tags.tsx b/x-pack/plugins/uptime/public/components/monitor/location_map/location_status_tags.tsx
@@ -25,7 +25,7 @@ const TextStyle = styled.div`
 const BadgeItem = styled.div`
   margin-bottom: 5px;
   white-space: nowrap;
-  @media (max-width: 830px) {
+  @media (max-width: 1042px) {
     display: inline-block;
     margin-right: 16px;
   }

diff --git a/...nents/monitor/monitor_status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap b/...nents/monitor/monitor_status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap
diff --git a/...e/public/components/monitor/monitor_status_details/monitor_status_bar/ssl_certificate.tsx b/...e/public/components/monitor/monitor_status_details/monitor_status_bar/ssl_certificate.tsx
@@ -34,11 +34,11 @@ export const MonitorSSLCertificate = ({ tls }: Props) => {
     <>
       <EuiText>
         {i18n.translate('xpack.uptime.monitorStatusBar.sslCertificate.title', {
-          defaultMessage: 'Certificate',
+          defaultMessage: 'Certificate:',
         })}
       </EuiText>
       <EuiSpacer size="s" />
-      <EuiFlexGroup>
+      <EuiFlexGroup wrap>
         <EuiFlexItem grow={false}>
           <EuiText
             className="eui-displayInline"
@@ -87,7 +87,7 @@ export const MonitorSSLCertificate = ({ tls }: Props) => {
         </EuiFlexItem>
         <EuiFlexItem>
           <Link to={CERTIFICATES_ROUTE} className="eui-displayInline">
-            <EuiText>
+            <EuiText style={{ whiteSpace: 'nowrap' }}>
               {i18n.translate('xpack.uptime.monitorStatusBar.sslCertificate.overview', {
                 defaultMessage: 'Certificate overview',
               })}

diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details.tsx
@@ -18,8 +18,13 @@ interface MonitorStatusDetailsProps {
 }
 
 const WrapFlexItem = styled(EuiFlexItem)`
-  @media (max-width: 1150px) {
-    width: 100%;
+  &&& {
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+    @media (max-width: 1042px) {
+      flex-basis: 520px;
+    }
   }
 `;
 

diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
@@ -6,6 +6,7 @@
 
 import React, { useState } from 'react';
 import { EuiFilterGroup } from '@elastic/eui';
+import styled from 'styled-components';
 import { FilterPopoverProps, FilterPopover } from './filter_popover';
 import { OverviewFilters } from '../../../../common/runtime_types/overview_filters';
 import { filterLabels } from './translations';
@@ -16,6 +17,10 @@ interface PresentationalComponentProps {
   overviewFilters: OverviewFilters;
 }
 
+const Container = styled(EuiFilterGroup)`
+  margin-bottom: 10px;
+`;
+
 export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
   overviewFilters,
   loading,
@@ -79,10 +84,10 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
   ];
 
   return (
-    <EuiFilterGroup>
+    <Container>
       {filterPopoverProps.map(item => (
         <FilterPopover key={item.id} {...item} />
       ))}
-    </EuiFilterGroup>
+    </Container>
   );
 };
diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx
@@ -19,7 +19,7 @@ import {
 } from '../../../../../../../src/plugins/data/public';
 
 const Container = styled.div`
-  margin-bottom: 10px;
+  margin-bottom: 4px;
 `;
 
 interface State {