Add initial support for displaying Run resources

- Add basic list page for Run resources, including pagination, label
  filtering, ability to delete runs (single / batch)
- Add basic details page for Run resource showing common metadata,
  information about the type of custom task, and the optional params,
  as well as the YAML view showing full details of the resource

In a subsequent set of changes, these pages will be updated to include
additional status and trigger information similar to the recent
TaskRun and PipelineRun design updates.

base/200-clusterrole-tenant.yaml

@@ -49,6 +49,7 @@ rules:
       - pipelines
       - pipelineruns
       - pipelineresources
+      - runs
     verbs:
       - get
       - list

overlays/patches/read-write/clusterrole-tenant-patch.yaml

@@ -24,6 +24,7 @@
       - pipelines
       - pipelineruns
       - pipelineresources
+      - runs
     verbs:
       - create
       - update

packages/utils/src/utils/router.js

@@ -129,6 +129,17 @@ export const paths = {
       return '/:type/:name';
     }
   },
+  runs: {
+    all() {
+      return '/runs';
+    },
+    byName() {
+      return byNamespace({ path: '/runs/:runName' });
+    },
+    byNamespace() {
+      return byNamespace({ path: '/runs' });
+    }
+  },
   settings() {
     return '/settings';
   },

packages/utils/src/utils/router.test.js

@@ -20,6 +20,7 @@ const namespace = 'fake_namespace';
 const pipelineName = 'fake_pipelineName';
 const pipelineResourceName = 'fake_pipelineResourceName';
 const pipelineRunName = 'fake_pipelineRunName';
+const runName = 'fake_runName';
 const taskName = 'fake_taskName';
 const taskRunName = 'fake_taskRunName';
 const triggerName = 'fake_triggerName';
@@ -276,6 +277,27 @@ describe('rawCRD', () => {
   });
 });
 
+describe('runs', () => {
+  it('all', () => {
+    expect(urls.runs.all()).toEqual(generatePath(paths.runs.all()));
+  });
+
+  it('byName', () => {
+    expect(urls.runs.byName({ namespace, runName })).toEqual(
+      generatePath(paths.runs.byName(), {
+        namespace,
+        runName
+      })
+    );
+  });
+
+  it('byNamespace', () => {
+    expect(urls.runs.byNamespace({ namespace })).toEqual(
+      generatePath(paths.runs.byNamespace(), { namespace })
+    );
+  });
+});
+
 it('settings', () => {
   expect(urls.settings()).toEqual(generatePath(paths.settings()));
 });

src/api/index.js

@@ -37,6 +37,7 @@ export * from './extensions';
 export * from './pipelineResources';
 export * from './pipelineRuns';
 export * from './pipelines';
+export * from './runs';
 export * from './serviceAccounts';
 export * from './taskRuns';
 export * from './tasks';

src/api/pipelineRuns.js

@@ -133,7 +133,7 @@ export function rerunPipelineRun(pipelineRun) {
     generateName: getGenerateNamePrefixForRerun(name),
     labels: {
       ...labels,
-      reruns: name
+      'dashboard.tekton.dev/rerunOf': name
     },
     namespace
   };

src/api/runs.js

@@ -0,0 +1,64 @@
+/*
+Copyright 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
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { deleteRequest, get } from './comms';
+import {
+  getQueryParams,
+  getTektonAPI,
+  useCollection,
+  useResource
+} from './utils';
+
+export function deleteRun({ name, namespace }) {
+  const uri = getTektonAPI('runs', { name, namespace, version: 'v1alpha1' });
+  return deleteRequest(uri);
+}
+
+function getRunsAPI({ filters, isWebSocket, name, namespace }) {
+  return getTektonAPI(
+    'runs',
+    { isWebSocket, namespace, version: 'v1alpha1' },
+    getQueryParams({ filters, name })
+  );
+}
+
+export function getRuns({ filters = [], namespace } = {}) {
+  const uri = getRunsAPI({ filters, namespace });
+  return get(uri);
+}
+
+export function getRun({ name, namespace }) {
+  const uri = getTektonAPI('runs', { name, namespace, version: 'v1alpha1' });
+  return get(uri);
+}
+
+export function useRuns(params) {
+  const webSocketURL = getRunsAPI({ ...params, isWebSocket: true });
+  return useCollection({
+    api: getRuns,
+    kind: 'Run',
+    params,
+    webSocketURL
+  });
+}
+
+export function useRun(params, queryConfig) {
+  const webSocketURL = getRunsAPI({ ...params, isWebSocket: true });
+  return useResource({
+    api: getRun,
+    kind: 'Run',
+    params,
+    queryConfig,
+    webSocketURL
+  });
+}

src/api/runs.test.js

@@ -0,0 +1,87 @@
+/*
+Copyright 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
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import fetchMock from 'fetch-mock';
+
+import * as API from './runs';
+import * as utils from './utils';
+
+it('deleteRun', () => {
+  const name = 'foo';
+  const data = { fake: 'Run' };
+  fetchMock.delete(`end:${name}`, data);
+  return API.deleteRun({ name }).then(run => {
+    expect(run).toEqual(data);
+    fetchMock.restore();
+  });
+});
+
+it('getRun', () => {
+  const name = 'foo';
+  const data = { fake: 'Run' };
+  fetchMock.get(`end:${name}`, data);
+  return API.getRun({ name }).then(run => {
+    expect(run).toEqual(data);
+    fetchMock.restore();
+  });
+});
+
+it('getRuns', () => {
+  const data = {
+    items: 'Runs'
+  };
+  fetchMock.get(/runs/, data);
+  return API.getRuns({ filters: [] }).then(runs => {
+    expect(runs).toEqual(data);
+    fetchMock.restore();
+  });
+});
+
+it('useRuns', () => {
+  const query = { fake: 'query' };
+  const params = { fake: 'params' };
+  jest.spyOn(utils, 'useCollection').mockImplementation(() => query);
+  expect(API.useRuns(params)).toEqual(query);
+  expect(utils.useCollection).toHaveBeenCalledWith(
+    expect.objectContaining({
+      api: API.getRuns,
+      kind: 'Run',
+      params
+    })
+  );
+});
+
+it('useRun', () => {
+  const query = { fake: 'query' };
+  const params = { fake: 'params' };
+  jest.spyOn(utils, 'useResource').mockImplementation(() => query);
+  expect(API.useRun(params)).toEqual(query);
+  expect(utils.useResource).toHaveBeenCalledWith(
+    expect.objectContaining({
+      api: API.getRun,
+      kind: 'Run',
+      params
+    })
+  );
+
+  const queryConfig = { fake: 'queryConfig' };
+  API.useRun(params, queryConfig);
+  expect(utils.useResource).toHaveBeenCalledWith(
+    expect.objectContaining({
+      api: API.getRun,
+      kind: 'Run',
+      params,
+      queryConfig
+    })
+  );
+});

src/api/taskRuns.js

@@ -153,7 +153,7 @@ export function rerunTaskRun(taskRun) {
     generateName: getGenerateNamePrefixForRerun(name),
     labels: {
       ...labels,
-      reruns: name
+      'dashboard.tekton.dev/rerunOf': name
     },
     namespace
   };

src/containers/App/App.js

@@ -62,6 +62,8 @@ import {
   Pipelines,
   ReadWriteRoute,
   ResourceList,
+  Run,
+  Runs,
   Settings,
   SideNav,
   TaskRun,
@@ -303,6 +305,17 @@ export function App({ lang }) {
                     <Route path={paths.taskRuns.byName()} exact>
                       <TaskRun />
                     </Route>
+
+                    <Route path={paths.runs.all()}>
+                      <Runs />
+                    </Route>
+                    <Route path={paths.runs.byNamespace()} exact>
+                      <Runs />
+                    </Route>
+                    <Route path={paths.runs.byName()} exact>
+                      <Run />
+                    </Route>
+
                     <Route path={paths.clusterTasks.all()} exact>
                       <ClusterTasks />
                     </Route>