import { FeatureBox , FeatureHeader , FeatureHeaderTitle , } from 'teleport/components/Layout' ; import React from 'react' ; import { Box , Indicator } from 'design' ; import { Danger } from 'design/Alert' ; import useTeleport from 'teleport/useTeleport' ; import ClusterList from './ClusterList' ; import useClusters from './useClusters' ; export default function Container ( ) { const ctx = useTeleport ( ) ; const state = useClusters ( ctx ) ; return < Clusters { ... state } / > ; } export function Clusters ( props ) { const { clusters , enabledFeatures , initAttempt } = props ; return ( < FeatureBox > < FeatureHeader alignItems = "center" > < FeatureHeaderTitle > Manage Clusters < /FeatureHeaderTitle> < /FeatureHeader> { initAttempt . status === 'processing' && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { initAttempt . status === 'failed' && ( < Danger > { initAttempt . statusText } < /Danger>)} { initAttempt . status === 'success' && ( < ClusterList clusters = { clusters } menuFlags = { { showNodes : enabledFeatures . nodes , showAudit : enabledFeatures . audit , showRecordings : enabledFeatures . recordings , showApps : enabledFeatures . apps , showDatabases : enabledFeatures . databases , showKubes : enabledFeatures . kubes , showDesktops : enabledFeatures . desktops , } } />)} < /FeatureBox>); }