go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/build/legacy/build_page/overview_tab/timing_section.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 styled from '@emotion/styled';
    16  import { Info } from '@mui/icons-material';
    17  import { IconProps } from '@mui/material';
    18  import { observer } from 'mobx-react-lite';
    19  
    20  import { Timestamp } from '@/common/components/timestamp';
    21  import { useStore } from '@/common/store';
    22  import { displayDuration } from '@/common/tools/time_utils';
    23  
    24  const InlineInfo = styled(Info)<IconProps>({
    25    verticalAlign: 'bottom',
    26  });
    27  
    28  export const TimingSection = observer(() => {
    29    const store = useStore();
    30  
    31    const build = store.buildPage.build;
    32    if (!build) {
    33      return <></>;
    34    }
    35    return (
    36      <>
    37        <h3>Timing</h3>
    38        <table
    39          css={{
    40            '& td:nth-of-type(2)': {
    41              clear: 'both',
    42              overflowWrap: 'anywhere',
    43            },
    44          }}
    45        >
    46          <tbody>
    47            <tr>
    48              <td>Created:</td>
    49              <td>
    50                <Timestamp datetime={build.createTime} />
    51              </td>
    52            </tr>
    53            <tr>
    54              <td>Started:</td>
    55              <td>
    56                {build.startTime ? (
    57                  <Timestamp datetime={build.startTime} />
    58                ) : (
    59                  'N/A'
    60                )}
    61              </td>
    62            </tr>
    63            <tr>
    64              <td>Ended:</td>
    65              <td>
    66                {build.endTime ? <Timestamp datetime={build.endTime} /> : 'N/A'}
    67              </td>
    68            </tr>
    69            <tr>
    70              <td>Pending:</td>
    71              <td>
    72                {displayDuration(build.pendingDuration)}
    73                {build.isPending ? '(and counting)' : ''}
    74                {build.exceededSchedulingTimeout ? (
    75                  <span className="warning">(exceeded timeout)</span>
    76                ) : (
    77                  ''
    78                )}
    79                <span
    80                  title={`Maximum pending duration: ${
    81                    build.schedulingTimeout
    82                      ? displayDuration(build.schedulingTimeout)
    83                      : 'N/A'
    84                  }`}
    85                >
    86                  <InlineInfo fontSize="small" />
    87                </span>
    88              </td>
    89            </tr>
    90            <tr>
    91              <td>Execution:</td>
    92              <td>
    93                {build.executionDuration
    94                  ? displayDuration(build.executionDuration)
    95                  : 'N/A'}
    96                {build.isExecuting ? '(and counting)' : ''}
    97                {build.exceededExecutionTimeout ? (
    98                  <span className="warning">(exceeded timeout)</span>
    99                ) : (
   100                  ''
   101                )}
   102                <span
   103                  title={`Maximum execution duration: ${
   104                    build.executionTimeout
   105                      ? displayDuration(build.executionTimeout)
   106                      : 'N/A'
   107                  }`}
   108                >
   109                  <InlineInfo fontSize="small" />
   110                </span>
   111              </td>
   112            </tr>
   113          </tbody>
   114        </table>
   115      </>
   116    );
   117  });