/* * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ import React from 'react'; import { Container, Header, Box, Link, Spinner, ColumnLayout } from '@awsui/components-react'; // Attribute Display message content const MFOverview = (props) => { let history = props.history function handleClick(LinkProps) { history.push(LinkProps.href); } return <Container className="custom-dashboard-container" header={ <Header variant="h2" description="Overview of the status within the Migration Factory"> Migration Factory overview </Header> } > <ColumnLayout columns="4" variant="text-grid"> <div> <Box margin={{ bottom: 'xxxs' }} color="text-label"> Waves </Box> {props.dataWaves.isLoading ? <Spinner size="big"/> : <Link fontSize="display-l" href='/waves' onFollow={handleClick}> {props.dataWaves.isLoading ? <Spinner/> : <span className="custom-link-font-weight-light">{props.dataWaves.data.length}</span>} </Link> } </div> <div> <Box margin={{ bottom: 'xxxs' }} color="text-label"> Applications </Box> {props.dataApps.isLoading ? <Spinner size="big"/> : <Link fontSize="display-l" href="/apps"> <span className="custom-link-font-weight-light">{props.dataApps.data.length}</span> </Link> } </div> <div> <Box margin={{ bottom: 'xxxs' }} color="text-label"> Servers </Box> {props.dataServers.isLoading ? <Spinner size="big"/> : <Link fontSize="display-l" href="/servers"> <span className="custom-link-font-weight-light">{props.dataServers.data.length}</span> </Link> } </div> <div> <Box margin={{ bottom: 'xxxs' }} color="text-label"> Databases </Box> {props.dataDatabases.isLoading ? <Spinner size="big"/> : <Link fontSize="display-l" href="/databases"> <span className="custom-link-font-weight-light">{props.dataDatabases.data.length}</span> </Link> } </div> <div> <Box margin={{ bottom: 'xxxs' }} color="text-label"> Completed Waves </Box> {props.dataWaves.isLoading ? <Spinner size="big"/> : <Link fontSize="display-l" href="#"> <span className="custom-link-font-weight-light">{props.completion.waves ? props.completion.waves.length : 0}</span> </Link> } </div> <div> <Box margin={{ bottom: 'xxxs' }} color="text-label"> Migrated Applications </Box> {props.dataApps.isLoading ? <Spinner size="big"/> : <Link fontSize="display-l" href="#"> <span className="custom-link-font-weight-light">{props.completion.applications ? props.completion.applications.length : 0}</span> </Link> } </div> <div> <Box margin={{ bottom: 'xxxs' }} color="text-label"> Migrated Servers </Box> {props.dataServers.isLoading ? <Spinner size="big"/> : <Link fontSize="display-l" href="#"> <span className="custom-link-font-weight-light">{props.completion.servers ? props.completion.servers.length : 0}</span> </Link> } </div> <div> <Box margin={{ bottom: 'xxxs' }} color="text-label"> Migrated Databases </Box> {props.dataDatabases.isLoading ? <Spinner size="big"/> : <Link fontSize="display-l" href="#"> <span className="custom-link-font-weight-light">{props.completion.databases ? props.completion.databases.length : 0}</span> </Link> } </div> </ColumnLayout> </Container> }; export default MFOverview;