import React from 'react' ; import { FeatureBox , FeatureHeader , FeatureHeaderTitle , } from 'teleport/components/Layout' ; import EventList from './EventList' ; import RangePicker from 'teleport/components/EventRangePicker' ; import { Danger } from 'design/Alert' ; import { Indicator , Box } from 'design' ; import useTeleport from 'teleport/useTeleport' ; import useStickyClusterId from 'teleport/useStickyClusterId' ; import useAuditEvents , { State } from './useAuditEvents' ; export default function Container ( ) { const teleCtx = useTeleport ( ) ; const { clusterId } = useStickyClusterId ( ) ; const state = useAuditEvents ( teleCtx , clusterId ) ; return < Audit { ... state } / > ; } export function Audit ( props ) { const { attempt , range , setRange , rangeOptions , events , clusterId , fetchMore , fetchStatus , } = props ; return ( < FeatureBox > < FeatureHeader alignItems = "center" > < FeatureHeaderTitle mr = "8" > Audit Log < /FeatureHeaderTitle> < RangePicker ml = "auto" range = { range } ranges = { rangeOptions } onChangeRange = { setRange } / > < /FeatureHeader> { attempt . status === 'failed' && < Danger > { attempt . statusText } < /Danger>} { attempt . status === 'processing' && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { attempt . status === 'success' && ( < EventList events = { events } clusterId = { clusterId } fetchMore = { fetchMore } fetchStatus = { fetchStatus } / > ) } < /FeatureBox>); }