|
| 1 | +import { ColumnsType } from 'antd/es/table'; |
| 2 | +import React from 'react'; |
| 3 | +import { useFirestore, useFirestoreCollectionData } from 'reactfire'; |
| 4 | +import { Table, Tooltip } from 'antd'; |
| 5 | +import Spinner from '@site/src/components/molecules/spinner'; |
| 6 | +import DockerImageLinkOrRetryButton from '@site/src/components/docs/versions/docker-image-link-or-retry-button'; |
| 7 | +import BuildFailureDetails from '@site/src/components/docs/versions/build-failure-details'; |
| 8 | +// import styles from './builds.module.scss'; |
| 9 | + |
| 10 | +interface RepoVersionInfo { |
| 11 | + version: string; |
| 12 | + major: number; |
| 13 | + minor: number; |
| 14 | + patch: number; |
| 15 | +} |
| 16 | + |
| 17 | +interface Props { |
| 18 | + ciJobId: string; |
| 19 | + repoVersionInfo: RepoVersionInfo; |
| 20 | + editorVersionInfo; |
| 21 | +} |
| 22 | + |
| 23 | +const mapBuildStatusToIcon = { |
| 24 | + started: <Spinner type="slow" />, |
| 25 | + failed: '⚠', |
| 26 | + published: '✅', |
| 27 | +}; |
| 28 | + |
| 29 | +const Builds = ({ ciJobId, repoVersionInfo, editorVersionInfo, ...props }: Props) => { |
| 30 | + const loading = <p>Fetching builds...</p>; |
| 31 | + |
| 32 | + const ciBuilds = useFirestore().collection('ciBuilds').where('relatedJobId', '==', ciJobId); |
| 33 | + |
| 34 | + const { status, data } = useFirestoreCollectionData<{ [key: string]: any }>(ciBuilds); |
| 35 | + const isLoading = status === 'loading'; |
| 36 | + |
| 37 | + if (isLoading) { |
| 38 | + return loading; |
| 39 | + } |
| 40 | + |
| 41 | + const columns = [ |
| 42 | + { |
| 43 | + width: 45, |
| 44 | + dataIndex: 'status', |
| 45 | + key: 'status', |
| 46 | + render: (value, record) => { |
| 47 | + const icon = mapBuildStatusToIcon[value]; |
| 48 | + switch (value) { |
| 49 | + case 'published': |
| 50 | + return icon; |
| 51 | + case 'failed': |
| 52 | + return <Tooltip title={record.failure?.reason}>{icon}</Tooltip>; |
| 53 | + case 'started': |
| 54 | + return <Tooltip title="Build has started">{icon}</Tooltip>; |
| 55 | + default: |
| 56 | + return value; |
| 57 | + } |
| 58 | + }, |
| 59 | + }, |
| 60 | + { |
| 61 | + width: 45, |
| 62 | + render: (value, record) => <DockerImageLinkOrRetryButton record={record} />, |
| 63 | + key: 'docker-image-link-or-retry-button', |
| 64 | + }, |
| 65 | + { |
| 66 | + title: 'Build identifier', |
| 67 | + dataIndex: 'buildId', |
| 68 | + key: 'buildId', |
| 69 | + onFilter: (value, record) => record.buildId.includes(value), |
| 70 | + defaultSortOrder: 'ascend', |
| 71 | + sorter: (a, b) => a.buildId.localeCompare(b.buildId, 'en-GB'), |
| 72 | + ellipsis: true, |
| 73 | + }, |
| 74 | + { |
| 75 | + title: 'Image type', |
| 76 | + dataIndex: 'imageType', |
| 77 | + key: 'imageType', |
| 78 | + onFilter: (value, record) => record.imageType.includes(value), |
| 79 | + sorter: (a, b) => a.imageType.localeCompare(b.imageType, 'en-GB'), |
| 80 | + ellipsis: true, |
| 81 | + }, |
| 82 | + { |
| 83 | + title: 'OS', |
| 84 | + dataIndex: ['buildInfo', 'baseOs'], |
| 85 | + key: 'buildInfo.baseOs', |
| 86 | + onFilter: (value, record) => record.buildInfo.baseOs.includes(value), |
| 87 | + sorter: (a, b) => a.buildInfo.baseOs.localeCompare(b.buildInfo.baseOs, 'en-GB'), |
| 88 | + ellipsis: true, |
| 89 | + }, |
| 90 | + { |
| 91 | + title: 'Target platform', |
| 92 | + dataIndex: ['buildInfo', 'targetPlatform'], |
| 93 | + key: 'buildInfo.targetPlatform', |
| 94 | + onFilter: (value, record) => record.buildInfo.targetPlatform.includes(value), |
| 95 | + sorter: (a, b) => |
| 96 | + a.buildInfo.targetPlatform.localeCompare(b.buildInfo.targetPlatform, 'en-GB'), |
| 97 | + ellipsis: true, |
| 98 | + }, |
| 99 | + { |
| 100 | + title: 'Editor version', |
| 101 | + dataIndex: ['buildInfo', 'editorVersion'], |
| 102 | + key: 'buildInfo.editorVersion', |
| 103 | + onFilter: (value, record) => record.buildInfo.editorVersion.includes(value), |
| 104 | + sorter: (a, b) => a.buildInfo.editorVersion.localeCompare(b.buildInfo.editorVersion, 'en-GB'), |
| 105 | + ellipsis: true, |
| 106 | + }, |
| 107 | + { |
| 108 | + title: 'Repo version', |
| 109 | + dataIndex: ['buildInfo', 'repoVersion'], |
| 110 | + key: 'buildInfo.repoVersion', |
| 111 | + onFilter: (value, record) => record.buildInfo.repoVersion.includes(value), |
| 112 | + sorter: (a, b) => a.buildInfo.repoVersion.localeCompare(b.buildInfo.repoVersion, 'en-GB'), |
| 113 | + ellipsis: true, |
| 114 | + }, |
| 115 | + ] as ColumnsType<any>; |
| 116 | + |
| 117 | + const expandable = { |
| 118 | + rowExpandable: () => true, |
| 119 | + // expandedRowClassName: () => styles.expandedContentRow, |
| 120 | + expandedRowRender: (record) => ( |
| 121 | + <BuildFailureDetails |
| 122 | + style={{ margin: 0 }} |
| 123 | + ciJob={ciJobId} |
| 124 | + editorVersionInfo={editorVersionInfo} |
| 125 | + repoVersionInfo={repoVersionInfo} |
| 126 | + ciBuild={record} |
| 127 | + /> |
| 128 | + ), |
| 129 | + }; |
| 130 | + |
| 131 | + return ( |
| 132 | + <Table |
| 133 | + {...props} |
| 134 | + key={ciJobId} |
| 135 | + dataSource={data} |
| 136 | + columns={columns} |
| 137 | + // sticky |
| 138 | + rowKey={(row) => row.NO_ID_FIELD} |
| 139 | + // rowClassName={() => styles.stickyRow} |
| 140 | + expandable={expandable} |
| 141 | + pagination={false} |
| 142 | + /> |
| 143 | + ); |
| 144 | +}; |
| 145 | + |
| 146 | +export default Builds; |
0 commit comments