[Uptime] Donut chart loader position centered vertically (#50219) (#5…

…0983)

* added height for snapshot como

* added constant for height

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
+);

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}
         />