[Monitoring] Design/UI improvements (#76946)

* UI tweaks * Add more page titles * Respect pagination settings * Update snapshot * Fix loc issues * Update node listing * Fix tests * Update icon * Update jobs label * More label changes * Fix tests * Fix tests * PR feedback * Improve responsive design here * PR feedback * Fix tests * Fix test and i18n * Remove unused translations * Fix tests * Tweaks
elastic · Sep 23, 2020 · c07a512 · c07a512
1 parent d3fc2ff
commit c07a512
Show file tree

Hide file tree

Showing 63 changed files with 792 additions and 462 deletions.
diff --git a/x-pack/plugins/monitoring/public/angular/app_modules.ts b/x-pack/plugins/monitoring/public/angular/app_modules.ts
@@ -41,10 +41,6 @@ import { licenseProvider } from '../services/license';
 // @ts-ignore
 import { titleProvider } from '../services/title';
 // @ts-ignore
-import { monitoringBeatsBeatProvider } from '../directives/beats/beat';
-// @ts-ignore
-import { monitoringBeatsOverviewProvider } from '../directives/beats/overview';
-// @ts-ignore
 import { monitoringMlListingProvider } from '../directives/elasticsearch/ml_job_listing';
 // @ts-ignore
 import { monitoringMainProvider } from '../directives/main';
@@ -153,8 +149,6 @@ function createMonitoringAppServices() {
 function createMonitoringAppDirectives() {
   angular
     .module('monitoring/directives', [])
-    .directive('monitoringBeatsBeat', monitoringBeatsBeatProvider)
-    .directive('monitoringBeatsOverview', monitoringBeatsOverviewProvider)
     .directive('monitoringMlListing', monitoringMlListingProvider)
     .directive('monitoringMain', monitoringMainProvider);
 }

diff --git a/x-pack/plugins/monitoring/public/components/apm/instance/instance.js b/x-pack/plugins/monitoring/public/components/apm/instance/instance.js
@@ -42,9 +42,7 @@ export function ApmServerInstance({ summary, metrics, ...props }) {
 
   const charts = seriesToShow.map((data, index) => (
     <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
-      <EuiPanel>
-        <MonitoringTimeseriesContainer series={data} {...props} />
-      </EuiPanel>
+      <MonitoringTimeseriesContainer series={data} {...props} />
     </EuiFlexItem>
   ));
 
@@ -55,15 +53,15 @@ export function ApmServerInstance({ summary, metrics, ...props }) {
           <h1>
             <FormattedMessage
               id="xpack.monitoring.apm.instance.heading"
-              defaultMessage="APM Instance"
+              defaultMessage="APM server instance"
             />
           </h1>
         </EuiScreenReaderOnly>
+        <EuiPanel>
+          <Status stats={summary} />
+        </EuiPanel>
+        <EuiSpacer size="m" />
         <EuiPageContent>
-          <EuiPanel>
-            <Status stats={summary} />
-          </EuiPanel>
-          <EuiSpacer size="m" />
           <EuiFlexGroup wrap>{charts}</EuiFlexGroup>
         </EuiPageContent>
       </EuiPageBody>

diff --git a/x-pack/plugins/monitoring/public/components/apm/instances/instances.js b/x-pack/plugins/monitoring/public/components/apm/instances/instances.js
@@ -156,11 +156,11 @@ export function ApmServerInstances({ apms, setupMode }) {
             />
           </h1>
         </EuiScreenReaderOnly>
+        <EuiPanel>
+          <Status stats={data.stats} />
+        </EuiPanel>
+        <EuiSpacer size="m" />
         <EuiPageContent>
-          <EuiPanel>
-            <Status stats={data.stats} />
-          </EuiPanel>
-          <EuiSpacer size="m" />
           {setupModeCallout}
           <EuiMonitoringTable
             className="apmInstancesTable"

diff --git a/x-pack/plugins/monitoring/public/components/apm/overview/index.js b/x-pack/plugins/monitoring/public/components/apm/overview/index.js
@@ -38,9 +38,7 @@ export function ApmOverview({ stats, metrics, ...props }) {
 
   const charts = seriesToShow.map((data, index) => (
     <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
-      <EuiPanel>
-        <MonitoringTimeseriesContainer series={data} {...props} />
-      </EuiPanel>
+      <MonitoringTimeseriesContainer series={data} {...props} />
     </EuiFlexItem>
   ));
 
@@ -51,15 +49,15 @@ export function ApmOverview({ stats, metrics, ...props }) {
           <h1>
             <FormattedMessage
               id="xpack.monitoring.apm.overview.heading"
-              defaultMessage="APM Overview"
+              defaultMessage="APM server overview"
             />
           </h1>
         </EuiScreenReaderOnly>
+        <EuiPanel>
+          <Status stats={stats} />
+        </EuiPanel>
+        <EuiSpacer size="m" />
         <EuiPageContent>
-          <EuiPanel>
-            <Status stats={stats} />
-          </EuiPanel>
-          <EuiSpacer size="s" />
           <EuiFlexGroup wrap>{charts}</EuiFlexGroup>
         </EuiPageContent>
       </EuiPageBody>

diff --git a/x-pack/plugins/monitoring/public/components/beats/beat/beat.js b/x-pack/plugins/monitoring/public/components/beats/beat/beat.js
@@ -135,6 +135,9 @@ export function Beat({ summary, metrics, ...props }) {
       <EuiPageBody>
         <EuiPanel>
           <SummaryStatus metrics={summarytStatsTop} data-test-subj="beatSummaryStatus01" />
+        </EuiPanel>
+        <EuiSpacer size="m" />
+        <EuiPanel>
           <SummaryStatus metrics={summarytStatsBot} data-test-subj="beatSummaryStatus02" />
         </EuiPanel>
         <EuiSpacer size="m" />

diff --git a/x-pack/plugins/monitoring/public/components/beats/listing/listing.js b/x-pack/plugins/monitoring/public/components/beats/listing/listing.js
@@ -13,6 +13,7 @@ import {
   EuiSpacer,
   EuiLink,
   EuiScreenReaderOnly,
+  EuiPanel,
 } from '@elastic/eui';
 import { Stats } from '../../beats';
 import { formatMetric } from '../../../lib/format_number';
@@ -153,9 +154,11 @@ export class Listing extends PureComponent {
               />
             </h1>
           </EuiScreenReaderOnly>
-          <EuiPageContent>
+          <EuiPanel>
             <Stats stats={stats} />
-            <EuiSpacer size="m" />
+          </EuiPanel>
+          <EuiSpacer size="m" />
+          <EuiPageContent>
             {setupModeCallOut}
             <EuiMonitoringTable
               className="beatsTable"