import React from "react" ; import { Facebook as ContentLoader } from "react-content-loader" ; import { FieldWrap , Field , Key , Value , NameField } from "./common" ; import Ingresses from "../ingresses" ; import { EntityCardWrap , Header , Content , StateLabel , Label } from "./common" ; import { ServiceEntity } from "../../contexts/api" ; export type Props = Pick < ServiceEntity [ "config" ] , "name" | "dependencies" > & Pick < ServiceEntity [ "status" ] , "ingresses" | "state" > & { disabled : boolean ; isLoading : boolean ; showInfo : boolean ; } ; export const ServiceCard = ( { name , dependencies , state , ingresses , isLoading , showInfo , disabled } ) => { return ( < EntityCardWrap > < Header > < div > < Label > SERVICE < /Label> < NameField name = { name } disabled = { disabled } / > < /div> { state && < StateLabel state = { state } > { state } < /StateLabel>} < /Header> < Content > { isLoading && < ContentLoader height = { 100 } />} { ! isLoading && ( < FieldWrap visible = { showInfo } > < Field inline visible = { dependencies . length > 0 } > < Key > Depends on : < /Key> < Value > { dependencies . join ( ", " ) } < /Value> < /Field> < Field visible = { ! ! ingresses && ingresses . length > 0 } > < Ingresses ingresses = { ingresses } /> < /Field> < /FieldWrap>)} < /Content> < /EntityCardWrap>); } ;