Merge pull request #38 from itk-dev/feature/filter-runs-by-failed-in-specific-step

Add filter on failed by

Author: rimi-itk

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+* [PR-38](https://github.com/itk-dev/rpa-process-overview/pull/38)
+  * Add filter on failed in
 * [PR-37](https://github.com/itk-dev/rpa-process-overview/pull/37)
   * Add favicon
 * [PR-36](https://github.com/itk-dev/rpa-process-overview/pull/36)

src/Controller/ProcessOverviewController.php

@@ -40,6 +40,9 @@ public function show(ProcessOverviewGroup $group, ProcessOverview $overview): Re
                     'Go to next page' => t('Go to next page'),
                     'Missing data' => t('Missing data'),
                     'Failed processes' => t('Failed processes'),
+                    // We're actually showing “process runs”, but it probably makes more sense to real people to (still) call them “processes”.
+                    'Showing processes failed in' => t('Showing processes failed in'),
+                    'Show all' => t('Show all'),
                     'The process was restarted' => t('The process was restarted'),
                     'An error occurred when trying to restart the process' => t('An error occurred when trying to restart the process'),
                     'Rerun step' => t('Rerun step'),

src/ProcessOverviewHelper.php

@@ -50,6 +50,7 @@ public function getData(Request $request, ProcessOverview $overview): array
             foreach ($process['steps'] as $step) {
                 $stepColumns[] = [
                     'label' => $step['name'],
+                    'id' => $step['id'],
                     'type' => 'step',
                 ];
             }

widgets/src/_standalone/ProcessOverview/FilterByFailed.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { t } from './config';
+	import { type Column } from '$lib/types';
+
+	let {
+		filters,
+		selectFilter,
+		selectedFilter
+	}: {
+		filters: Column[] | null;
+		selectFilter: Function;
+		selectedFilter: number | null;
+	} = $props();
+</script>
+
+{#if filters}
+	<div>
+		<label for="filter-select" class="mx-2">{t('Viewing processes failed in')}</label>
+		<select
+			value={selectedFilter}
+			onchange={(e) => selectFilter(e)}
+			id="filter-select"
+			class="rounded-md bg-violet-600 text-white py-1 px-2 border-6 border-violet-600"
+		>
+			<option value={null}>{t('Show all')}</option>
+			{#each filters as { label, id }}
+				<option value={id}>{label}</option>
+			{/each}
+		</select>
+	</div>
+{/if}

widgets/src/_standalone/ProcessOverview/Pagination.svelte

@@ -15,7 +15,7 @@
 		total: number;
 		changePage: Function;
 	} = $props();
-	const totalAmountOfButtons: number = total / size;
+	const totalAmountOfButtons: number = Math.ceil(total / size);
 	const totalAmountOfPagesAsIntegerArray = Array.from(
 		{ length: totalAmountOfButtons },
 		(_, i) => i + 1

widgets/src/_standalone/ProcessOverview/index.svelte

@@ -1,31 +1,47 @@
 <script lang="ts">
 	import Spinner from './Icons/Spinner.svelte';
 	import ExclamationMark from './Icons/ExclamationMark.svelte';
-	import { type ProgressData } from '$lib/types';
+	import { type ProgressData, type Column, type RawData } from '$lib/types';
 	import Table from '$lib/Table.svelte';
 	import { t, config } from './config';
 	import ErrorBanner from '$lib/ErrorBanner.svelte';
 	import Pagination from './Pagination.svelte';
+	import FilterByFailed from './FilterByFailed.svelte';
 
 	const { page_size, data_url } = config;
 
 	let error: boolean = $state(false);
+	let filters: Column[] | null = $state(null);
+	let selectedFilter: number | null = $state(getCurrentFilter());
 	let data: ProgressData | null = $state(null);
 	let total: number | null = $state(null);
 	let fetching: boolean = $state(true);
 	let errorMessage: string = $state('');
 	let size: number = $state(parseInt(page_size));
 	let page: number = $state(getCurrentPage());
 
+	function parseInteger(int: string | null): number | null {
+		if (int) {
+			return Number(int);
+		}
+		return null;
+	}
+
 	function getCurrentPage(): number {
 		const url = new URL(document.location.href);
-		const page = Number(url.searchParams.get('page')) || null;
+		const page = parseInteger(url.searchParams.get('page'));
 		return page ?? 1;
 	}
+	function getCurrentFilter(): number | null {
+		const url = new URL(document.location.href);
+		const failedAt = parseInteger(url.searchParams.get('failed_at'));
+		return failedAt;
+	}
 
 	function updateUrl(): void {
 		const pageUrl = new URL(document.location.href);
 		pageUrl.searchParams.set('page', String(page));
+		pageUrl.searchParams.set('failed_at', String(selectedFilter));
 		history.replaceState({}, '', pageUrl);
 	}
 
@@ -38,15 +54,21 @@
 		fetching = true;
 		errorMessage = '';
 		error = false;
+
 		const url = new URL(data_url, document.location.href);
 		url.searchParams.set('page', String(page));
+
+		if (selectedFilter) {
+			url.searchParams.set('failed_at', String(selectedFilter));
+		}
 		url.searchParams.set('size', String(size));
 		fetch(url.toString())
 			.then((response) => response.json())
-			.then(({ data: recievedData, meta }) => {
+			.then(({ data: recievedData, meta }: { data: ProgressData | null; meta: RawData }) => {
 				if (recievedData) {
 					total = meta?.total ?? null;
 					data = recievedData;
+					filters = recievedData.columns.filter(({ type }) => 'step' === type);
 				}
 				fetching = false;
 			})
@@ -57,6 +79,12 @@
 				errorMessage = t('An error occurred while fetching the data');
 			});
 	});
+
+	function selectFilter(event: Event): void {
+		// Page is reset on filters, so when filtered we start from scratch, and not accidentally end up on a page that has no content
+		page = 1;
+		selectedFilter = parseInteger((event.target as HTMLInputElement).value);
+	}
 </script>
 
 {#if error}
@@ -74,13 +102,17 @@
 		class="flex flex-col border bg-gray-100 dark:bg-gray-900 border-neutral-300 dark:border-neutral-800 rounded-md mb-5"
 	>
 		<div
-			class="p-3 dark:text-white font-medium bg-gray-200 dark:bg-gray-800 flex items-center border-b border-neutral-300 dark:border-neutral-800"
+			class="p-4 dark:text-white justify-between font-medium bg-gray-200 dark:bg-gray-800 flex items-center border-b border-neutral-300 dark:border-neutral-800"
 		>
-			<ExclamationMark />
-			<h2>{t('Failed processes')}</h2>
-			<span class="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full bg-rose-700 text-white"
-				>{total ?? '?'}</span
-			>
+			<div class="flex">
+				<ExclamationMark />
+				<h2>{t('Failed processes')}</h2>
+				<span
+					class="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full self-center bg-rose-700 text-white"
+					>{total ?? '?'}</span
+				>
+			</div>
+			<FilterByFailed {selectedFilter} {selectFilter} {filters} />
 		</div>
 		<div class="p-4 min-h-[450px] flex flex-col justify-between">
 			<Table columns={data.columns} rows={data.rows}></Table>

widgets/src/lib/TableCell.svelte

@@ -51,11 +51,10 @@
 </script>
 
 <!-- relative to absolute position the stick -->
-<td class="relative">
+<td class="relative [width:stretch]">
 	<button
 		id={`anchor-${id}`}
-		class="flex items-center justify-center width-stretch [width:stretch] {status !==
-		StepStatus.PENDING
+		class="flex items-center justify-center [width:stretch] {status !== StepStatus.PENDING
 			? 'cursor-pointer'
 			: ''}"
 		popovertarget={`popover-${id}`}

widgets/src/lib/types.ts

@@ -7,11 +7,12 @@ export type Status = 'success' | 'failed' | 'pending';
 export type Column = {
 	data: MetaType;
 	label: string;
+	id: number;
 	type: RowColumnType;
 };
 
 type Failure = {
-	code: Number;
+	code: number;
 	message: string;
 	occurred_at: Date;
 	retryable: Boolean;
@@ -50,10 +51,10 @@ type Item = {
 };
 
 export type RawData = {
-	page: Number;
-	pages: Number;
-	size: Number;
-	total: Number;
+	page: number;
+	pages: number;
+	size: number;
+	total: number;
 	items: Item[];
 };