added height for snapshot como

elastic · Nov 11, 2019 · 908afe0 · 908afe0
1 parent 0491589
commit 908afe0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 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
@@ -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
@@ -23,7 +23,7 @@ export const StatusPanel = ({
   <EuiPanel>
     <EuiFlexGroup gutterSize="l">
       <EuiFlexItem grow={2}>
-        <Snapshot variables={sharedProps} />
+        <Snapshot variables={sharedProps} height="160px" />
       </EuiFlexItem>
       <EuiFlexItem grow={10}>
         <SnapshotHistogram