github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/OverviewResourceDetails.tsx (about) 1 import React from "react" 2 import styled from "styled-components" 3 import { Alert } from "./alerts" 4 import { ButtonSet } from "./ApiButton" 5 import { useFilterSet } from "./logfilters" 6 import OverviewActionBar from "./OverviewActionBar" 7 import OverviewLogPane from "./OverviewLogPane" 8 import { Color } from "./style-helpers" 9 import { ResourceName, UIResource } from "./types" 10 11 type OverviewResourceDetailsProps = { 12 resource?: UIResource 13 buttons?: ButtonSet 14 alerts?: Alert[] 15 name: string 16 } 17 18 let OverviewResourceDetailsRoot = styled.div` 19 display: flex; 20 flex-grow: 1; 21 flex-shrink: 1; 22 flex-direction: column; 23 ` 24 25 let NotFound = styled.div` 26 width: 100%; 27 height: 100%; 28 display: flex; 29 justify-content: center; 30 align-items: center; 31 background-color: ${Color.gray10}; 32 ` 33 34 export default function OverviewResourceDetails( 35 props: OverviewResourceDetailsProps 36 ) { 37 let { name, resource, alerts, buttons } = props 38 let manifestName = resource?.metadata?.name || "" 39 let all = name === "" || name === ResourceName.all 40 let starred = name === "" || name === ResourceName.starred 41 let notFound = !all && !starred && !manifestName 42 let filterSet = useFilterSet() 43 44 return ( 45 <OverviewResourceDetailsRoot> 46 <OverviewActionBar 47 resource={resource} 48 filterSet={filterSet} 49 alerts={alerts} 50 buttons={buttons} 51 /> 52 {notFound ? ( 53 <NotFound>No resource '{name}'</NotFound> 54 ) : ( 55 <OverviewLogPane 56 manifestName={starred ? name : manifestName} 57 filterSet={filterSet} 58 /> 59 )} 60 </OverviewResourceDetailsRoot> 61 ) 62 }