From b2d2d3fc5b6469be0bb697caf68f247854d1e7bf Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Wed, 13 Nov 2019 02:25:08 +0100
Subject: [PATCH] [Uptime] Donut chart loader position centered vertically 
 (#50219)

* added height for snapshot como

* added constant for height
---
 .../public/components/functional/snapshot.tsx | 21 +++++++++++++------
 .../components/functional/status_panel.tsx    |  6 ++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
index 8d89e53a41a45d5..ddc6df14c2adee6 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
@@ -21,16 +21,22 @@ interface SnapshotQueryResult {
   snapshot?: SnapshotType;
 }
 
+interface SnapshotProps {
+  /**
+   * Height is needed, since by default charts takes height of 100%
+   */
+  height?: string;
+}
+
+export type SnapshotComponentProps = SnapshotProps & UptimeGraphQLQueryProps<SnapshotQueryResult>;
+
 /**
  * This component visualizes a KPI and histogram chart to help users quickly
  * glean the status of their uptime environment.
  * @param props the props required by the component
  */
-export const SnapshotComponent = ({
-  data,
-  loading,
-}: UptimeGraphQLQueryProps<SnapshotQueryResult>) => (
-  <ChartWrapper loading={loading}>
+export const SnapshotComponent = ({ data, loading, height }: SnapshotComponentProps) => (
+  <ChartWrapper loading={loading} height={height}>
     <SnapshotHeading
       down={get<number>(data, 'snapshot.counts.down', 0)}
       total={get<number>(data, 'snapshot.counts.total', 0)}
@@ -49,4 +55,7 @@ export const SnapshotComponent = ({
  * This component visualizes a KPI and histogram chart to help users quickly
  * glean the status of their uptime environment.
  */
-export const Snapshot = withUptimeGraphQL<SnapshotQueryResult>(SnapshotComponent, snapshotQuery);
+export const Snapshot = withUptimeGraphQL<SnapshotQueryResult, SnapshotProps>(
+  SnapshotComponent,
+  snapshotQuery
+);
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/status_panel.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/status_panel.tsx
index e941c2dad87d2d2..a58d06ece0ede7c 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/status_panel.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/status_panel.tsx
@@ -15,6 +15,8 @@ interface StatusPanelProps {
   sharedProps: { [key: string]: any };
 }
 
+const STATUS_CHART_HEIGHT = '160px';
+
 export const StatusPanel = ({
   absoluteDateRangeStart,
   absoluteDateRangeEnd,
@@ -23,13 +25,13 @@ export const StatusPanel = ({
   <EuiPanel>
     <EuiFlexGroup gutterSize="l">
       <EuiFlexItem grow={2}>
-        <Snapshot variables={sharedProps} />
+        <Snapshot variables={sharedProps} height={STATUS_CHART_HEIGHT} />
       </EuiFlexItem>
       <EuiFlexItem grow={10}>
         <SnapshotHistogram
           absoluteStartDate={absoluteDateRangeStart}
           absoluteEndDate={absoluteDateRangeEnd}
-          height="160px"
+          height={STATUS_CHART_HEIGHT}
           isResponsive={true}
           variables={sharedProps}
         />