import React from 'react' ; import styled from 'styled-components' ; import { Indicator , Flex , Box } from 'design' ; import * as Alerts from 'design/Alert' ; import NodeList from 'teleport/components/NodeList' ; import QuickLaunch from 'teleport/components/QuickLaunch' ; import Document from 'teleport/Console/Document' ; import ClusterSelector from './ClusterSelector' ; import useNodes from './useNodes' ; import ThemeProvider from './ThemeProvider' ; import * as stores from 'teleport/Console/stores/types' ; type Props = { visible : boolean ; doc : stores . DocumentNodes ; } ; export default function DocumentNodes ( props ) { const { doc , visible } = props ; const { nodes , attempt , createSshSession , changeCluster , getNodeSshLogins } = useNodes ( doc ) ; const { isProcessing , isSuccess , isFailed , message } = attempt ; function onLoginMenuSelect ( e , login , serverId ) { const newBrowserTabRequested = e . ctrlKey || e . metaKey ; if ( ! newBrowserTabRequested ) { e . preventDefault ( ) ; createSshSession ( login , serverId ) ; } } function onQuickLaunchEnter ( login , serverId ) { createSshSession ( login , serverId ) ; } function onLoginMenuOpen ( serverId ) { return getNodeSshLogins ( serverId ) ; } function onChangeCluster ( newClusterId ) { changeCluster ( newClusterId ) ; } return ( < ThemeProvider > < Document visible = { visible } > < Container mx = "auto" mt = "4" px = "5" > < Flex justifyContent = "space-between" mb = "4" alignItems = "end" > < ClusterSelector value = { doc . clusterId } width = "336px" maxMenuHeight = { 200 } mr = "20px" onChange = { onChangeCluster } / > < QuickLaunch width = "240px" onPress = { onQuickLaunchEnter } / > < /Flex> { isProcessing && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { isFailed && < Alerts . Danger > { message } < /Alerts.Danger>} { isSuccess && ( < NodeList onLoginMenuOpen = { onLoginMenuOpen } onLoginSelect = { onLoginMenuSelect } nodes = { nodes } / > ) } < /Container> < /Document> < /ThemeProvider>); } const Container = styled ( Box ) `
  flex-direction: column;
  display: flex;
  flex: 1;
  max-width: 1024px;
  ::after {
    content: ' ';
    padding-bottom: 24px;
  }
` ;