import React from "react" ; import styled from "@emotion/styled" ; import { ServiceState } from "@garden-io/core/build/src/types/service" ; import { RunState } from "@garden-io/core/build/src/types/plugin/base" ; import PageError from "../components/page-error" ; import { ModuleCard , Props as ModuleProps } from "../components/entity-cards/module" ; import EntityResult from "./entity-result" ; import ViewIngress from "../components/view-ingress" ; import { ServiceEntity , TestEntity , TaskEntity } from "../contexts/api" ; import { useApi , useUiState } from "../hooks" ; const Overview = styled . div `
  padding: 1rem 0.5rem;
` ; const Modules = styled . div `
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 0 1rem;
` ; export type Entity = { name ? : string ; state ? : ServiceState | RunState ; dependencies : string [ ] ; } ; const mapServices = ( serviceEntities ) : ModuleProps [ "serviceCardProps" ] => { return serviceEntities . map ( ( { config , status } ) => ( { name : config . name , dependencies : config . dependencies || [ ] , state : status ? status . state : "missing" , disabled : config . disabled || config . moduleDisabled , ingresses : status ? status . ingresses : [ ] , } ) ) ; } ; const mapTests = ( testEntities , moduleName ) : ModuleProps [ "testCardProps" ] => { return testEntities . map ( ( { config , status } ) => ( { name : config . name , dependencies : config . dependencies || [ ] , state : status . state , startedAt : status . startedAt , completedAt : status . completedAt , disabled : config . disabled || config . moduleDisabled , moduleName , } ) ) ; } ; const mapTasksToProps = ( taskConfigs , moduleName ) : ModuleProps [ "taskCardProps" ] => { return taskConfigs . map ( ( { config , status } ) => ( { name : config . name , dependencies : config . dependencies || [ ] , state : status . state , startedAt : status . startedAt , completedAt : status . completedAt , disabled : config . disabled || config . moduleDisabled , moduleName , } ) ) ; } ; export default ( ) => { const { store : { entities : { project , modules , services , tests , tasks } , requestStates , } , } = useApi ( ) ; const { state : { overview : { selectedIngress , selectedEntity } , } , actions : { selectEntity } , } = useUiState ( ) ; const clearSelectedEntity = ( ) => { selectEntity ( null ) ; } ; if ( requestStates . status . error ) { return < PageError error = { requestStates . status . error } />; } const moduleProps = Object . values ( modules ) . map ( ( module ) => { const serviceEntities = module . services . map ( ( serviceName ) => services [ serviceName ] ) . filter ( Boolean ) ; const testEntities = module . tests . map ( ( testKey ) => tests [ testKey ] ) . filter ( Boolean ) ; const taskEntities = module . tasks . map ( ( taskName ) => tasks [ taskName ] ) . filter ( Boolean ) ; return { name : module . name , type : module . type , disabled : module . disabled , path : project . root . split ( "/" ) . pop ( ) + module . path . replace ( project . root , "" ) , repositoryUrl : module . repositoryUrl , description : module . description , serviceCardProps : mapServices ( serviceEntities ) , testCardProps : mapTests ( testEntities , module . name ) , taskCardProps : mapTasksToProps ( taskEntities , module . name ) , isLoading : requestStates . status . pending , } ; } ) ; return ( < Overview > < div className = "row" > < div className = "col-xs" > < Modules > { moduleProps . map ( ( props ) => ( < ModuleCard { ... props } key = { props . name } / > ) ) } < /Modules> < /div> { selectedIngress && ( < div className = "col-lg visible-lg-block" > { selectedIngress && < ViewIngress ingress = { selectedIngress } />}</div > ) } { selectedEntity && ( < div className = "col-xs-5 col-sm-5 col-md-4 col-lg-4 col-xl-4" > < EntityResult name = { selectedEntity . name } type = { selectedEntity . type } moduleName = { selectedEntity . module } onClose = { clearSelectedEntity } / > < /div>)} < /div> < /Overview>); } ;