import React from 'react' ; import { Indicator , Box , Flex , Text } from 'design' ; import { Danger } from 'design/Alert' ; import { FeatureBox , FeatureHeader , FeatureHeaderTitle , } from 'teleport/components/Layout' ; import QuickLaunch from 'teleport/components/QuickLaunch' ; import Empty , { EmptyStateInfo } from 'teleport/components/Empty' ; import NodeList from 'teleport/components/NodeList' ; import useTeleport from 'teleport/useTeleport' ; import useStickyClusterId from 'teleport/useStickyClusterId' ; import useNodes , { State } from './useNodes' ; import AddNode from './AddNode' ; import ButtonAdd from './ButtonAdd' ; export default function Container ( ) { const teleCtx = useTeleport ( ) ; const stickyCluster = useStickyClusterId ( ) ; const state = useNodes ( teleCtx , stickyCluster ) ; return < Nodes { ... state } / > ; } export function Nodes ( props ) { const { nodes , getNodeLoginOptions , startSshSession , attempt , showAddNode , canCreate , hideAddNode , isLeafCluster , isAddNodeVisible , clusterId , } = props ; function onLoginSelect ( e , login , serverId ) { e . preventDefault ( ) ; startSshSession ( login , serverId ) ; } function onSshEnter ( login , serverId ) { startSshSession ( login , serverId ) ; } const isEmpty = attempt . status === 'success' && nodes . length === 0 ; const hasNodes = attempt . status === 'success' && nodes . length > 0 ; return ( < FeatureBox > < FeatureHeader alignItems = "center" justifyContent = "space-between" > < FeatureHeaderTitle > Servers < /FeatureHeaderTitle> < Flex alignItems = "center" > { hasNodes && ( < QuickLaunch width = "280px" onPress = { onSshEnter } mr = { 3 } / > ) } < ButtonAdd isLeafCluster = { isLeafCluster } canCreate = { canCreate } onClick = { showAddNode } / > < /Flex> < /FeatureHeader> { attempt . status === 'failed' && < Danger > { attempt . statusText } < /Danger>} { attempt . status === 'processing' && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { hasNodes && ( < > < NodeList nodes = { nodes } onLoginMenuOpen = { getNodeLoginOptions } onLoginSelect = { onLoginSelect } / > < />)} { isEmpty && ( < Empty clusterId = { clusterId } canCreate = { canCreate && ! isLeafCluster } onClick = { showAddNode } emptyStateInfo = { emptyStateInfo } / > ) } { isAddNodeVisible && < AddNode onClose = { hideAddNode } />} < /FeatureBox>); } const emptyStateInfo = { title : 'ADD YOUR FIRST SERVER' , description : ( < Text > Instant SSH access for engineers with native security and compliance . < /Text>), buttonText : 'ADD SERVER' , videoLink : 'https://www.youtube.com/watch?v=tUXYtwP-Kvw' , readOnly : { title : 'No Servers Found' , resource : 'servers' , } , } ;