go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/build/components/build_table/pending_duration_column.tsx (about) 1 // Copyright 2023 The LUCI Authors. 2 // 3 // Licensed under the Apache License, Version 2.0 (the "License"); 4 // you may not use this file except in compliance with the License. 5 // You may obtain a copy of the License at 6 // 7 // http://www.apache.org/licenses/LICENSE-2.0 8 // 9 // Unless required by applicable law or agreed to in writing, software 10 // distributed under the License is distributed on an "AS IS" BASIS, 11 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 // See the License for the specific language governing permissions and 13 // limitations under the License. 14 15 import { TableCell } from '@mui/material'; 16 import { DateTime } from 'luxon'; 17 18 import { DurationBadge } from '@/common/components/duration_badge'; 19 20 import { useBuild } from './context'; 21 22 export function PendingDurationHeadCell() { 23 return ( 24 // Use a shorthand with a tooltip to make the column narrower. 25 <TableCell width="1px" title="Pending Duration"> 26 Pending 27 </TableCell> 28 ); 29 } 30 31 export function PendingDurationContentCell() { 32 const build = useBuild(); 33 const createTime = DateTime.fromISO(build.createTime); 34 const startTime = build.startTime ? DateTime.fromISO(build.startTime) : null; 35 const pendingDuration = startTime ? startTime.diff(createTime) : null; 36 37 return ( 38 <TableCell> 39 {pendingDuration ? ( 40 <DurationBadge 41 css={{ verticalAlign: 'text-top' }} 42 duration={pendingDuration} 43 from={createTime} 44 to={startTime} 45 /> 46 ) : ( 47 'N/A' 48 )} 49 </TableCell> 50 ); 51 }