[Uptime] Donut chart loader position centered vertically (#50219)
* added height for snapshot como * added constant for height
This commit is contained in:
parent
2c49ce74b8
commit
9c38e3ef31
|
@ -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
|
||||
);
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue