Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 3x 3x 3x 3x 3x 7x 7x 7x 9x 2x 3x | /*
* Copyright 2022 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { Container, Pagination, TableV2 } from '@harness/uicore'
import type { ResponsePageServiceResponse, ServiceResponseDTO } from 'services/cd-ng'
import { ServiceName, ServiceDescription, ServiceMenu } from '../ServicesListColumns/ServicesListColumns'
import css from './ServicesListView.module.scss'
interface ServicesListViewProps {
data: ResponsePageServiceResponse | null
loading?: boolean
onRefresh?: () => Promise<void>
gotoPage?: (index: number) => void
onServiceSelect: (data: any) => Promise<void>
}
const ServicesListView = (props: ServicesListViewProps): React.ReactElement => {
const { data, gotoPage, onServiceSelect } = props
const services = data?.data?.content?.map(service => service.service) || []
return (
<>
<Container className={css.masonry} style={{ height: 'calc(100% - 66px)', width: '100%' }}>
<TableV2<any>
className={css.table}
sortable
columns={[
{
Header: 'SERVICE',
id: 'name',
accessor: 'name',
width: '60%',
Cell: ServiceName
},
{
Header: 'DESCRIPTION',
id: 'destination',
accessor: 'description',
width: '35%',
Cell: ServiceDescription
},
{
Header: '',
id: 'menu',
width: '3%',
// eslint-disable-next-line react/display-name
Cell: ({ row }: { row: { original: unknown } }) => (
<ServiceMenu data={row.original} onRefresh={props.onRefresh} />
)
}
]}
data={services}
onRowClick={(row: ServiceResponseDTO) => onServiceSelect(row)}
/>
</Container>
<Container className={css.pagination}>
<Pagination
itemCount={data?.data?.totalItems || 0}
pageSize={data?.data?.pageSize || 10}
pageCount={data?.data?.totalPages || 0}
pageIndex={data?.data?.pageIndex || 0}
gotoPage={gotoPage}
/>
</Container>
</>
)
}
export default ServicesListView
|