diff --git a/ui/src/features/stage/verifications.tsx b/ui/src/features/stage/verifications.tsx index a9b5c8afe..9f6be021c 100644 --- a/ui/src/features/stage/verifications.tsx +++ b/ui/src/features/stage/verifications.tsx @@ -1,6 +1,8 @@ -import { Table, Tooltip } from 'antd'; +import { Checkbox, Flex, Table, Tooltip } from 'antd'; import Link from 'antd/es/typography/Link'; import { format } from 'date-fns'; +import moment from 'moment'; +import { useMemo, useState } from 'react'; import { VerificationInfo } from '@ui/gen/v1alpha1/generated_pb'; import { timestampDate } from '@ui/utils/connectrpc-utils'; @@ -18,60 +20,108 @@ type Props = { export const Verifications = ({ verifications, images }: Props) => { const { show } = useModal(); + const [showImplicitVerifications, setShowImplicitVerifications] = useState(false); + + // non-rollout verifications are now included in specs + const filteredVerifications = !showImplicitVerifications + ? verifications.filter((verfication) => verfication.id !== '') + : verifications; + + const hasImplicitVerifications = useMemo( + () => verifications.some((v) => v.id === ''), + [verifications] + ); + return ( - - dataSource={verifications} - size='small' - pagination={{ hideOnSinglePage: true }} - rowKey={(p) => p.id || ''} - > - - width={28} - render={(_, verification) => ( + <> + {hasImplicitVerifications && ( + ( -
-
{verification.phase}
- {verification.message &&
{verification.message}
} -
- )} + title={`Implicit verifications occur when a stage with no explicit verification process first reaches a healthy state following a promotion.`} > -
- -
+ setShowImplicitVerifications(e.target.checked)} + className='ml-auto' + > + Show implicit verifications +
- )} - /> - - title='Date' - render={(_, verification) => { - const date = timestampDate(verification.startTime); - return date ? format(date, 'MMM do yyyy HH:mm:ss') : ''; - }} - /> - - - title='AnalysisRun' - dataIndex='' - render={(val, verification) => ( - { - show((p) => ( - - )); - }} - > - {verification.analysisRun?.name} - - )} - /> - val?.substring(0, 7)} - width={120} - /> - +
+ )} + + + dataSource={filteredVerifications} + size='small' + pagination={{ hideOnSinglePage: true }} + rowKey={(p) => p.id || ''} + > + + width={28} + render={(_, verification) => ( + ( +
+
{verification.phase}
+ {verification.message &&
{verification.message}
} +
+ )} + > +
+ +
+
+ )} + /> + + title='Date' + render={(_, verification) => { + const date = timestampDate(verification.startTime); + return date ? format(date, 'MMM do yyyy HH:mm:ss') : ''; + }} + /> + + title='Duration' + render={(_, verification) => { + try { + const startTime = timestampDate(verification.startTime); + const finishTime = timestampDate(verification.finishTime); + + const timeTook = moment.duration(moment(finishTime).diff(moment(startTime))); + + return timeTook.humanize(); + } catch { + return null; + } + }} + /> + + + title='AnalysisRun' + dataIndex='' + render={(val, verification) => ( + { + show((p) => ( + + )); + }} + > + {verification.analysisRun?.name} + + )} + /> + val?.substring(0, 7)} + width={120} + /> + + ); };