import { FeatureBox , FeatureHeader , FeatureHeaderTitle , } from 'teleport/components/Layout' ; import React from 'react' ; import { Danger } from 'design/Alert' ; import { Indicator , Text , Box , Flex , ButtonPrimary , Link } from 'design' ; import Card from 'design/Card' ; import Image from 'design/Image' ; import ResourceEditor from 'teleport/components/ResourceEditor' ; import TrustedList from './TrustedList' ; import DeleteTrust from './DeleteTrust' ; import templates from './templates' ; import useResources from 'teleport/components/useResources' ; import useTrustedClusters from './useTrustedClusters' ; import { emptyPng } from './assets' ; export default function TrustedClusters ( ) { const tclusters = useTrustedClusters ( ) ; const isEmpty = tclusters . isSuccess && tclusters . items . length === 0 ; const hasClusters = tclusters . isSuccess && tclusters . items . length > 0 ; const resources = useResources ( tclusters . items , templates ) ; const title = resources . status === 'creating' ? 'Add a new trusted cluster' : 'Edit trusted cluster' ; function remove ( ) { return tclusters . remove ( resources . item . name ) ; } function save ( content ) { const isNew = resources . status === 'creating' ; return tclusters . save ( content , isNew ) ; } return ( < FeatureBox > < FeatureHeader alignItems = "center" > < FeatureHeaderTitle > Trusted Clusters < /FeatureHeaderTitle> { hasClusters && ( < ButtonPrimary disabled = { ! tclusters . canCreate } ml = "auto" width = "240px" onClick = { ( ) => resources . create ( 'trusted_cluster' ) } > Connect to Root Cluster < /ButtonPrimary>)} < /FeatureHeader> { tclusters . isFailed && < Danger > { tclusters . message } < /Danger>} { tclusters . isProcessing && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { isEmpty && ( < Empty disabled = { ! tclusters . canCreate } onCreate = { ( ) => resources . create ( 'trusted_cluster' ) } />)} { hasClusters && ( < Flex alignItems = "start" > < TrustedList mt = "4" flex = "1" items = { tclusters . items } onEdit = { resources . edit } onDelete = { resources . remove } / > < Info ml = "4" width = "240px" color = "text.primary" style = { { flexShrink : 0 } } /> < /Flex>)} { ( resources . status === 'creating' || resources . status === 'editing' ) && ( < ResourceEditor onSave = { save } title = { title } onClose = { resources . disregard } text = { resources . item . content } name = { resources . item . name } isNew = { resources . status === 'creating' } / > ) } { resources . status === 'removing' && ( < DeleteTrust name = { resources . item . name } onClose = { resources . disregard } onDelete = { remove } / > ) } < /FeatureBox>); } const Info = props => ( < Box { ... props } > < Text typography = "h6" mb = { 3 } > TRUSTED CLUSTERS < /Text> < Text typography = "subtitle1" mb = { 3 } > Trusted Clusters allow Teleport administrators to connect multiple clusters together and establish trust between them . Users of Trusted Clusters can seamlessly access the nodes of the cluster from the root cluster . < /Text> < Text typography = "subtitle1" mb = { 2 } > Please { ' ' } < Link color = "light" href = "https://goteleport.com/teleport/docs/trustedclusters/" target = "_blank" > view our documentation < /Link>{' '} to learn more about Trusted Clusters . < /Text> < /Box>); const Empty = ( props ) => { return ( < Card maxWidth = "700px" mt = { 4 } mx = "auto" py = { 4 } as = { Flex } alignItems = "center" flex = "0 0 auto" > < Box mx = "4" > < Image width = "180px" src = { emptyPng } / > < /Box> < Box > < Info pr = { 4 } mb = { 6 } / > < ButtonPrimary disabled = { props . disabled } onClick = { props . onCreate } mb = "2" mx = "auto" width = "240px" > Connect to Root Cluster < /ButtonPrimary> < /Box> < /Card>); } ; type EmptyProps = { onCreate ( ) : void ; disabled : boolean ; } ;