diff --git a/src/containers/ClusterInterceptors/ClusterInterceptors.js b/src/containers/ClusterInterceptors/ClusterInterceptors.js index 86deac0ae..ed7049706 100644 --- a/src/containers/ClusterInterceptors/ClusterInterceptors.js +++ b/src/containers/ClusterInterceptors/ClusterInterceptors.js @@ -21,6 +21,30 @@ import { Link as CarbonLink } from 'carbon-components-react'; import { ListPageLayout } from '..'; import { useClusterInterceptors } from '../../api'; +function getFormattedResources(resources) { + return resources.map(clusterInterceptor => ({ + id: clusterInterceptor.metadata.uid, + name: ( + + {clusterInterceptor.metadata.name} + + ), + createdTime: ( + + ) + })); +} + function ClusterInterceptors({ intl }) { const location = useLocation(); const filters = getFilters(location); @@ -67,56 +91,35 @@ function ClusterInterceptors({ intl }) { } ]; - const clusterInterceptorsFormatted = clusterInterceptors.map( - clusterInterceptor => ({ - id: clusterInterceptor.metadata.uid, - name: ( - - {clusterInterceptor.metadata.name} - - ), - createdTime: ( - - ) - }) - ); - return ( - + {({ resources }) => ( +
+ )} ); } diff --git a/src/containers/ClusterTasks/ClusterTasks.js b/src/containers/ClusterTasks/ClusterTasks.js index 97bdaf6ef..e1e3171e0 100644 --- a/src/containers/ClusterTasks/ClusterTasks.js +++ b/src/containers/ClusterTasks/ClusterTasks.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -32,6 +32,95 @@ import { getFilters, urls, useTitleSync } from '@tektoncd/dashboard-utils'; import { ListPageLayout } from '..'; import { deleteClusterTask, useClusterTasks, useIsReadOnly } from '../../api'; +function getFormattedResources({ + intl, + isReadOnly, + openDeleteModal, + resources +}) { + return resources.map(clusterTask => ({ + id: clusterTask.metadata.uid, + name: ( + + {clusterTask.metadata.name} + + ), + createdTime: ( + + ), + actions: ( + <> + {!isReadOnly ? ( +
- {showDeleteModal ? ( - - ) : null} + {({ resources }) => ( + <> +
+ {showDeleteModal ? ( + + ) : null} + + )} ); } diff --git a/src/containers/ClusterTriggerBindings/ClusterTriggerBindings.js b/src/containers/ClusterTriggerBindings/ClusterTriggerBindings.js index 88b299416..6114fe475 100644 --- a/src/containers/ClusterTriggerBindings/ClusterTriggerBindings.js +++ b/src/containers/ClusterTriggerBindings/ClusterTriggerBindings.js @@ -1,5 +1,5 @@ /* -Copyright 2020-2021 The Tekton Authors +Copyright 2020-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -21,6 +21,24 @@ import { Link as CarbonLink } from 'carbon-components-react'; import { ListPageLayout } from '..'; import { useClusterTriggerBindings } from '../../api'; +function getFormattedResources(resources) { + return resources.map(binding => ({ + id: `${binding.metadata.name}`, + name: ( + + {binding.metadata.name} + + ), + date: + })); +} + function ClusterTriggerBindings({ intl }) { const location = useLocation(); const filters = getFilters(location); @@ -58,50 +76,35 @@ function ClusterTriggerBindings({ intl }) { } ]; - const clusterTriggerBindingsFormatted = clusterTriggerBindings.map( - binding => ({ - id: `${binding.metadata.name}`, - name: ( - - {binding.metadata.name} - - ), - date: - }) - ); - return ( -
+ {({ resources }) => ( +
+ )} ); } diff --git a/src/containers/Conditions/Conditions.js b/src/containers/Conditions/Conditions.js index 1aa636798..a2156adb9 100644 --- a/src/containers/Conditions/Conditions.js +++ b/src/containers/Conditions/Conditions.js @@ -1,5 +1,5 @@ /* -Copyright 2020-2021 The Tekton Authors +Copyright 2020-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -21,6 +21,28 @@ import { Link as CarbonLink } from 'carbon-components-react'; import { useConditions, useSelectedNamespace } from '../../api'; import { ListPageLayout } from '..'; +function getFormattedResources(resources) { + return resources.map(condition => ({ + id: condition.metadata.uid, + name: ( + + {condition.metadata.name} + + ), + namespace: condition.metadata.namespace, + createdTime: ( + + ) + })); +} + function Conditions({ intl }) { const location = useLocation(); const params = useParams(); @@ -74,49 +96,36 @@ function Conditions({ intl }) { } ]; - const conditionsFormatted = conditions.map(condition => ({ - id: condition.metadata.uid, - name: ( - - {condition.metadata.name} - - ), - namespace: condition.metadata.namespace, - createdTime: ( - - ) - })); - return ( - -
+ + {({ resources }) => ( +
+ )} ); } diff --git a/src/containers/EventListener/EventListener.stories.js b/src/containers/EventListener/EventListener.stories.js index d8547dcf2..cde69eedf 100644 --- a/src/containers/EventListener/EventListener.stories.js +++ b/src/containers/EventListener/EventListener.stories.js @@ -146,7 +146,7 @@ export default { route: `/namespaces/${namespace}/eventlisteners/${name}` }, component: EventListenerContainer, - title: 'Containers/EventListenerContainer' + title: 'Containers/EventListener' }; export const Base = () => ; diff --git a/src/containers/EventListeners/EventListeners.js b/src/containers/EventListeners/EventListeners.js index 1839379c5..895aad0b0 100644 --- a/src/containers/EventListeners/EventListeners.js +++ b/src/containers/EventListeners/EventListeners.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -21,6 +21,26 @@ import { Link as CarbonLink } from 'carbon-components-react'; import { ListPageLayout } from '..'; import { useEventListeners, useSelectedNamespace } from '../../api'; +function getFormattedResources(resources) { + return resources.map(listener => ({ + id: `${listener.metadata.namespace}:${listener.metadata.name}`, + name: ( + + {listener.metadata.name} + + ), + namespace: listener.metadata.namespace, + date: + })); +} + function EventListeners({ intl }) { const location = useLocation(); const params = useParams(); @@ -69,47 +89,36 @@ function EventListeners({ intl }) { } ]; - const eventListenersFormatted = eventListeners.map(listener => ({ - id: `${listener.metadata.namespace}:${listener.metadata.name}`, - name: ( - - {listener.metadata.name} - - ), - namespace: listener.metadata.namespace, - date: - })); - return ( - -
+ + {({ resources }) => ( +
+ )} ); } diff --git a/src/containers/ListPageLayout/ListPageLayout.js b/src/containers/ListPageLayout/ListPageLayout.js index bbcf2b127..cb32c7f11 100644 --- a/src/containers/ListPageLayout/ListPageLayout.js +++ b/src/containers/ListPageLayout/ListPageLayout.js @@ -1,5 +1,5 @@ /* -Copyright 2020-2021 The Tekton Authors +Copyright 2020-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,7 +11,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; +import React, { useEffect, useState } from 'react'; +import PropTypes from 'prop-types'; import { generatePath, useHistory, @@ -20,7 +21,7 @@ import { useRouteMatch } from 'react-router-dom'; import { injectIntl } from 'react-intl'; -import { InlineNotification } from 'carbon-components-react'; +import { InlineNotification, Pagination } from 'carbon-components-react'; import { ALL_NAMESPACES, getErrorMessage, @@ -36,6 +37,7 @@ export const ListPageLayout = ({ filters, hideNamespacesDropdown, intl, + resources = [], title }) => { const history = useHistory(); @@ -46,6 +48,20 @@ export const ListPageLayout = ({ const { selectedNamespace: namespace, selectNamespace } = useSelectedNamespace(); + const [pageSize, setPageSize] = useState(100); + const [page, setPage] = useState(1); // pagination component counts from 1 + + useEffect(() => { + const savedPageSize = localStorage.getItem('tkn-page-size'); + if (savedPageSize) { + setPageSize(parseInt(savedPageSize, 10)); + } + }, []); + + useEffect(() => { + localStorage.setItem('tkn-page-size', pageSize); + }, [pageSize]); + function setPath(path) { history.push(`${path}${location.search}`); } @@ -72,6 +88,11 @@ export const ListPageLayout = ({ setPath(newURL); } + const resourcesForCurrentPage = resources.slice( + (page - 1) * pageSize, + page * pageSize + ); + return ( <>
@@ -109,9 +130,37 @@ export const ListPageLayout = ({ } /> )} - {children} + {children({ resources: resourcesForCurrentPage })} + {resources.length > 10 && ( + { + setPage(newPage); + setPageSize(newPageSize); + }} + page={page} + pageSize={pageSize} + pageSizes={[10, 25, 50, 100]} + totalItems={resources.length} + /> + )} ); }; export default injectIntl(ListPageLayout); + +ListPageLayout.propTypes = { + children: PropTypes.func.isRequired +}; diff --git a/src/containers/ListPageLayout/ListPageLayout.stories.js b/src/containers/ListPageLayout/ListPageLayout.stories.js index e682ec6b4..b62e67e14 100644 --- a/src/containers/ListPageLayout/ListPageLayout.stories.js +++ b/src/containers/ListPageLayout/ListPageLayout.stories.js @@ -1,5 +1,5 @@ /* -Copyright 2020-2021 The Tekton Authors +Copyright 2020-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -13,6 +13,7 @@ limitations under the License. import React from 'react'; import { QueryClient, QueryClientProvider } from 'react-query'; +import { Table } from '@tektoncd/dashboard-components'; import { ALL_NAMESPACES } from '@tektoncd/dashboard-utils'; import ListPageLayoutContainer from './ListPageLayout'; @@ -42,6 +43,10 @@ const namespaceContext = { }; export default { + args: { + hideNamespacesDropdown: false, + title: 'PipelineRuns' + }, component: ListPageLayoutContainer, decorators: [ Story => { @@ -64,20 +69,27 @@ export default { export const Base = args => ( - page content goes here + {() => page content goes here} ); -Base.args = { - hideNamespacesDropdown: false, - title: 'PipelineRuns' -}; export const WithFilters = args => ( - page content goes here + {() => page content goes here} + +); + +export const WithPagination = args => ( + ({ + id: index, + value: `Row ${index + 1}` + }))} + {...args} + > + {({ resources }) => ( +
+ )} ); -WithFilters.args = { - hideNamespacesDropdown: false, - title: 'PipelineRuns' -}; diff --git a/src/containers/ListPageLayout/ListPageLayout.test.js b/src/containers/ListPageLayout/ListPageLayout.test.js index 8bf281b6f..f342e5ab5 100644 --- a/src/containers/ListPageLayout/ListPageLayout.test.js +++ b/src/containers/ListPageLayout/ListPageLayout.test.js @@ -1,5 +1,5 @@ /* -Copyright 2020-2021 The Tekton Authors +Copyright 2020-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -36,7 +36,9 @@ describe('ListPageLayout', () => { , + > + {() => {}} + , { path, route: path } ); fireEvent.click(getByDisplayValue(/All Namespaces/i)); @@ -65,10 +67,9 @@ describe('ListPageLayout', () => { const selectNamespace = jest.fn(); jest.spyOn(window.history, 'pushState'); const { getByText, getByDisplayValue } = renderWithRouter( - , + + {() => {}} + , { path, route: `/namespaces/${namespace}/fake/path` } ); fireEvent.click(getByDisplayValue(namespace)); @@ -94,10 +95,9 @@ describe('ListPageLayout', () => { jest.spyOn(window.history, 'pushState'); const path = '/namespaces/:namespace/fake/path'; const { getByText, getByDisplayValue } = renderWithRouter( - , + + {() => {}} + , { path, route: `/namespaces/${namespace}/fake/path` @@ -126,10 +126,9 @@ describe('ListPageLayout', () => { jest.spyOn(window.history, 'pushState'); const path = '/namespaces/:namespace/fake/path'; const { getByTitle } = renderWithRouter( - , + + {() => {}} + , { path, route: `/namespaces/${namespace}/fake/path` } ); fireEvent.click(getByTitle(/clear selected item/i)); @@ -144,26 +143,28 @@ describe('ListPageLayout', () => { it('does not render namespaces dropdown in single namespace visibility mode', () => { jest.spyOn(API, 'useTenantNamespace').mockImplementation(() => 'fake'); const { queryByPlaceholderText } = renderWithRouter( - + {() => {}} ); expect(queryByPlaceholderText(/select namespace/i)).toBeFalsy(); }); it('does not render namespaces dropdown when hideNamespacesDropdown is true', () => { const { queryByPlaceholderText } = renderWithRouter( - + {() => {}} ); expect(queryByPlaceholderText(/select namespace/i)).toBeFalsy(); }); it('does not render LabelFilter input by default', () => { - const { queryByLabelText } = renderWithRouter(); + const { queryByLabelText } = renderWithRouter( + {() => {}} + ); expect(queryByLabelText(/Input a label filter/i)).toBeFalsy(); }); it('renders LabelFilter input when filters prop is provided', () => { const { getAllByLabelText } = renderWithRouter( - + {() => {}} ); expect(getAllByLabelText(/Input a label filter/i)[0]).toBeTruthy(); }); diff --git a/src/containers/PipelineResources/PipelineResources.js b/src/containers/PipelineResources/PipelineResources.js index 47466090c..872547c6e 100644 --- a/src/containers/PipelineResources/PipelineResources.js +++ b/src/containers/PipelineResources/PipelineResources.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -150,24 +150,29 @@ export function PipelineResources({ intl }) { - - {isDeleteModalOpen ? ( - - ) : null} + {({ resources }) => ( + <> + + {isDeleteModalOpen ? ( + + ) : null} + + )} ); } diff --git a/src/containers/PipelineRuns/PipelineRuns.js b/src/containers/PipelineRuns/PipelineRuns.js index 54d5b0a57..28e9db9f1 100644 --- a/src/containers/PipelineRuns/PipelineRuns.js +++ b/src/containers/PipelineRuns/PipelineRuns.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -316,30 +316,39 @@ export function PipelineRuns({ intl }) { ); return ( - - { - return runMatchesStatusFilter({ - run, - statusFilter - }); - })} - pipelineRunActions={pipelineRunActions()} - selectedNamespace={namespace} - toolbarButtons={toolbarButtons} - /> - {showDeleteModal ? ( - - ) : null} + { + return runMatchesStatusFilter({ + run, + statusFilter + }); + })} + title="PipelineRuns" + > + {({ resources }) => ( + <> + + {showDeleteModal ? ( + + ) : null} + + )} ); } diff --git a/src/containers/Pipelines/Pipelines.js b/src/containers/Pipelines/Pipelines.js index ad495ba11..e15f26bba 100644 --- a/src/containers/Pipelines/Pipelines.js +++ b/src/containers/Pipelines/Pipelines.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -42,6 +42,98 @@ import { useSelectedNamespace } from '../../api'; +function getFormattedResources({ + intl, + isReadOnly, + openDeleteModal, + resources +}) { + return resources.map(pipeline => ({ + id: pipeline.metadata.uid, + name: ( + + {pipeline.metadata.name} + + ), + namespace: pipeline.metadata.namespace, + createdTime: ( + + ), + actions: ( + <> + {!isReadOnly ? ( +
- openDeleteModal([{ id: pipeline.metadata.uid }], () => {}) - } - renderIcon={DeleteIcon} - size="sm" - tooltipAlignment="center" - tooltipPosition="left" - /> - ) : null} - {!isReadOnly ? ( -
- {showDeleteModal ? ( - - ) : null} + {showDeleteModal ? ( + + ) : null} + + )} ); } diff --git a/src/containers/ResourceList/ResourceList.js b/src/containers/ResourceList/ResourceList.js index 43a464bef..1f53ba149 100644 --- a/src/containers/ResourceList/ResourceList.js +++ b/src/containers/ResourceList/ResourceList.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -88,73 +88,76 @@ export function ResourceListContainer({ intl }) { error={getError()} filters={filters} hideNamespacesDropdown={!isNamespaced} + resources={resources} title={`${group}/${version}/${type}`} > -
{ - const { - creationTimestamp, - name, - namespace: resourceNamespace, - uid - } = resource.metadata; - - return { - id: uid, - name: ( - ( +
- {name} - - ), - namespace: resourceNamespace, - createdTime: - }; - })} - loading={isLoadingAPIResource || isLoadingResources} - emptyTextAllNamespaces={emptyText} - emptyTextSelectedNamespace={emptyText} - /> + : null, + { + key: 'createdTime', + header: intl.formatMessage({ + id: 'dashboard.tableHeader.createdTime', + defaultMessage: 'Created' + }) + } + ].filter(Boolean)} + rows={paginatedResources.map(resource => { + const { + creationTimestamp, + name, + namespace: resourceNamespace, + uid + } = resource.metadata; + + return { + id: uid, + name: ( + + {name} + + ), + namespace: resourceNamespace, + createdTime: + }; + })} + loading={isLoadingAPIResource || isLoadingResources} + emptyTextAllNamespaces={emptyText} + emptyTextSelectedNamespace={emptyText} + /> + )} ); } diff --git a/src/containers/TaskRuns/TaskRuns.js b/src/containers/TaskRuns/TaskRuns.js index cffdf1e07..976d65ddd 100644 --- a/src/containers/TaskRuns/TaskRuns.js +++ b/src/containers/TaskRuns/TaskRuns.js @@ -305,27 +305,36 @@ function TaskRuns({ intl }) { ); return ( - - { - return runMatchesStatusFilter({ run, statusFilter }); - })} - taskRunActions={taskRunActions()} - toolbarButtons={toolbarButtons} - /> - {showDeleteModal ? ( - - ) : null} + { + return runMatchesStatusFilter({ run, statusFilter }); + })} + title="TaskRuns" + > + {({ resources }) => ( + <> + + {showDeleteModal ? ( + + ) : null} + + )} ); } diff --git a/src/containers/Tasks/Tasks.js b/src/containers/Tasks/Tasks.js index 3d511e3a1..217a8a882 100644 --- a/src/containers/Tasks/Tasks.js +++ b/src/containers/Tasks/Tasks.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -42,6 +42,99 @@ import { useTasks } from '../../api'; +function getFormattedResources({ + intl, + isReadOnly, + openDeleteModal, + resources +}) { + return resources.map(task => ({ + id: task.metadata.uid, + name: ( + + {task.metadata.name} + + ), + namespace: task.metadata.namespace, + createdTime: ( + + ), + actions: ( + <> + {!isReadOnly ? ( +
- openDeleteModal([{ id: task.metadata.uid }], () => {}) - } - renderIcon={DeleteIcon} - size="sm" - tooltipAlignment="center" - tooltipPosition="left" - /> - ) : null} - {!isReadOnly ? ( -
- {showDeleteModal ? ( - - ) : null} + {showDeleteModal ? ( + + ) : null} + + )} ); } diff --git a/src/containers/TriggerBindings/TriggerBindings.js b/src/containers/TriggerBindings/TriggerBindings.js index 8f92e0bfa..c5bed0080 100644 --- a/src/containers/TriggerBindings/TriggerBindings.js +++ b/src/containers/TriggerBindings/TriggerBindings.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -21,6 +21,26 @@ import { Link as CarbonLink } from 'carbon-components-react'; import { ListPageLayout } from '..'; import { useSelectedNamespace, useTriggerBindings } from '../../api'; +function getFormattedResources(resources) { + return resources.map(binding => ({ + id: `${binding.metadata.namespace}:${binding.metadata.name}`, + name: ( + + {binding.metadata.name} + + ), + namespace: binding.metadata.namespace, + date: + })); +} + export function TriggerBindings({ intl }) { const location = useLocation(); const params = useParams(); @@ -69,51 +89,36 @@ export function TriggerBindings({ intl }) { } ]; - const triggerBindingsFormatted = triggerBindings.map(binding => ({ - id: `${binding.metadata.namespace}:${binding.metadata.name}`, - name: ( - - {binding.metadata.name} - - ), - namespace: binding.metadata.namespace, - date: - })); - return ( -
+ {({ resources }) => ( +
+ )} ); } diff --git a/src/containers/TriggerTemplates/TriggerTemplates.js b/src/containers/TriggerTemplates/TriggerTemplates.js index cb1215a51..cf6b159fe 100644 --- a/src/containers/TriggerTemplates/TriggerTemplates.js +++ b/src/containers/TriggerTemplates/TriggerTemplates.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Tekton Authors +Copyright 2019-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -21,6 +21,26 @@ import { Link as CarbonLink } from 'carbon-components-react'; import { ListPageLayout } from '..'; import { useSelectedNamespace, useTriggerTemplates } from '../../api'; +function getFormattedResources(resources) { + return resources.map(template => ({ + id: `${template.metadata.namespace}:${template.metadata.name}`, + name: ( + + {template.metadata.name} + + ), + namespace: template.metadata.namespace, + date: + })); +} + function TriggerTemplates({ intl }) { useTitleSync({ page: 'TriggerTemplates' }); @@ -65,51 +85,36 @@ function TriggerTemplates({ intl }) { } ]; - const triggerTemplatesFormatted = triggerTemplates.map(template => ({ - id: `${template.metadata.namespace}:${template.metadata.name}`, - name: ( - - {template.metadata.name} - - ), - namespace: template.metadata.namespace, - date: - })); - return ( -
+ {({ resources }) => ( +
+ )} ); } diff --git a/src/containers/Triggers/Triggers.js b/src/containers/Triggers/Triggers.js index c2d310416..9bc2379e2 100644 --- a/src/containers/Triggers/Triggers.js +++ b/src/containers/Triggers/Triggers.js @@ -1,5 +1,5 @@ /* -Copyright 2021 The Tekton Authors +Copyright 2021-2022 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -21,6 +21,28 @@ import { Link as CarbonLink } from 'carbon-components-react'; import { ListPageLayout } from '..'; import { useSelectedNamespace, useTriggers } from '../../api'; +function getFormattedResources(resources) { + return resources.map(trigger => ({ + id: trigger.metadata.uid, + name: ( + + {trigger.metadata.name} + + ), + namespace: trigger.metadata.namespace, + createdTime: ( + + ) + })); +} + function Triggers({ intl }) { useTitleSync({ page: 'Triggers' }); @@ -77,49 +99,36 @@ function Triggers({ intl }) { } ]; - const triggersFormatted = triggers.map(trigger => ({ - id: trigger.metadata.uid, - name: ( - - {trigger.metadata.name} - - ), - namespace: trigger.metadata.namespace, - createdTime: ( - - ) - })); - return ( - -
+ + {({ resources }) => ( +
+ )} ); } diff --git a/src/nls/messages_de.json b/src/nls/messages_de.json index 180a9b61b..9b4e422cf 100644 --- a/src/nls/messages_de.json +++ b/src/nls/messages_de.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "", "dashboard.notFound.title": "", "dashboard.notification.clear": "", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "", "dashboard.pipelineResource.fieldName": "", "dashboard.pipelineResource.secretKey": "", diff --git a/src/nls/messages_en.json b/src/nls/messages_en.json index 4237020d5..bfcabdfeb 100644 --- a/src/nls/messages_en.json +++ b/src/nls/messages_en.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "We couldn’t find the page you were looking for, but here are some helpful links instead:", "dashboard.notFound.title": "Oops… Page not found", "dashboard.notification.clear": "Clear notification", + "dashboard.pagination.nextPage": "Next page", + "dashboard.pagination.pageSize": "Items per page:", + "dashboard.pagination.previousPage": "Previous page", "dashboard.parameters.title": "Parameters", "dashboard.pipelineResource.fieldName": "Field name", "dashboard.pipelineResource.secretKey": "Secret key", diff --git a/src/nls/messages_es.json b/src/nls/messages_es.json index ddbe465f9..327bc501e 100644 --- a/src/nls/messages_es.json +++ b/src/nls/messages_es.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "", "dashboard.notFound.title": "", "dashboard.notification.clear": "", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "", "dashboard.pipelineResource.fieldName": "", "dashboard.pipelineResource.secretKey": "", diff --git a/src/nls/messages_fr.json b/src/nls/messages_fr.json index 4f6d7b5ab..6ed9c8c68 100644 --- a/src/nls/messages_fr.json +++ b/src/nls/messages_fr.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "", "dashboard.notFound.title": "", "dashboard.notification.clear": "", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "", "dashboard.pipelineResource.fieldName": "", "dashboard.pipelineResource.secretKey": "", diff --git a/src/nls/messages_it.json b/src/nls/messages_it.json index 2d83b6e47..3027c63e6 100644 --- a/src/nls/messages_it.json +++ b/src/nls/messages_it.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "", "dashboard.notFound.title": "", "dashboard.notification.clear": "", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "", "dashboard.pipelineResource.fieldName": "", "dashboard.pipelineResource.secretKey": "", diff --git a/src/nls/messages_ja.json b/src/nls/messages_ja.json index 2da309ff5..d8f71b108 100644 --- a/src/nls/messages_ja.json +++ b/src/nls/messages_ja.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "", "dashboard.notFound.title": "", "dashboard.notification.clear": "通知をクリア", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "パラメータ", "dashboard.pipelineResource.fieldName": "フィールド名", "dashboard.pipelineResource.secretKey": "Secretキー", diff --git a/src/nls/messages_ko.json b/src/nls/messages_ko.json index e819e15a6..f48101fc7 100644 --- a/src/nls/messages_ko.json +++ b/src/nls/messages_ko.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "", "dashboard.notFound.title": "", "dashboard.notification.clear": "", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "", "dashboard.pipelineResource.fieldName": "", "dashboard.pipelineResource.secretKey": "", diff --git a/src/nls/messages_pt.json b/src/nls/messages_pt.json index 4ec4b4be4..84157f137 100644 --- a/src/nls/messages_pt.json +++ b/src/nls/messages_pt.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "", "dashboard.notFound.title": "", "dashboard.notification.clear": "", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "", "dashboard.pipelineResource.fieldName": "", "dashboard.pipelineResource.secretKey": "", diff --git a/src/nls/messages_zh-Hans.json b/src/nls/messages_zh-Hans.json index eafa2a36b..e8062ff82 100644 --- a/src/nls/messages_zh-Hans.json +++ b/src/nls/messages_zh-Hans.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "我们找不到您要查找的页面，但以下是一些有用的链接：", "dashboard.notFound.title": "糟糕，找不到页面", "dashboard.notification.clear": "清除通知", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "参数", "dashboard.pipelineResource.fieldName": "字段名称", "dashboard.pipelineResource.secretKey": "Secret 密钥", diff --git a/src/nls/messages_zh-Hant.json b/src/nls/messages_zh-Hant.json index 3c5a73c1d..2965ab290 100644 --- a/src/nls/messages_zh-Hant.json +++ b/src/nls/messages_zh-Hant.json @@ -164,6 +164,9 @@ "dashboard.notFound.description": "", "dashboard.notFound.title": "", "dashboard.notification.clear": "", + "dashboard.pagination.nextPage": "", + "dashboard.pagination.pageSize": "", + "dashboard.pagination.previousPage": "", "dashboard.parameters.title": "", "dashboard.pipelineResource.fieldName": "", "dashboard.pipelineResource.secretKey": "", diff --git a/src/scss/_carbon.scss b/src/scss/_carbon.scss index be57eeeb9..0ac9c2f8d 100644 --- a/src/scss/_carbon.scss +++ b/src/scss/_carbon.scss @@ -74,6 +74,7 @@ $feature-flags: ( @import 'carbon-components/scss/components/modal/modal'; @import 'carbon-components/scss/components/notification/inline-notification'; @import 'carbon-components/scss/components/notification/toast-notification'; +@import 'carbon-components/scss/components/pagination/pagination'; @import 'carbon-components/scss/components/tooltip/tooltip'; @import 'carbon-components/scss/components/tabs/tabs'; @import 'carbon-components/scss/components/tag/tag';