import React from 'react' ; import { Indicator , Box } from 'design' ; import { Danger } from 'design/Alert' ; import AjaxPoller from 'teleport/components/AjaxPoller' ; import { FeatureBox , FeatureHeader , FeatureHeaderTitle , } from 'teleport/components/Layout' ; import useTeleport from 'teleport/useTeleport' ; import SessionList from './SessionList' ; import useSessions from './useSessions' ; import useStickerClusterId from 'teleport/useStickyClusterId' ; const POLLING_INTERVAL = 3000 ; export default function Container ( ) { const ctx = useTeleport ( ) ; const { clusterId } = useStickerClusterId ( ) ; const state = useSessions ( ctx , clusterId ) ; return < Sessions { ... state } / > ; } export function Sessions ( props ) { const { attempt , onRefresh , sessions } = props ; return ( < FeatureBox > < FeatureHeader alignItems = "center" > < FeatureHeaderTitle > Active Sessions < /FeatureHeaderTitle> < /FeatureHeader> { attempt . isFailed && < Danger > { attempt . message } < /Danger>} { attempt . isProcessing && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { attempt . isSuccess && ( < > < SessionList sessions = { sessions } /> < AjaxPoller time = { POLLING_INTERVAL } onFetch = { onRefresh } / > < />)} < /FeatureBox>); }