From f1d182609840fa7b3351b5e7d3bbf2a0542b13a3 Mon Sep 17 00:00:00 2001 From: sanskar Date: Mon, 3 Feb 2025 09:46:10 -0800 Subject: [PATCH 1/8] chore: rebase --- apps/gitness/src/RouteDefinitions.ts | 3 +- .../webhooks/stores/webhook-store.tsx | 6 +- .../pages-v2/webhooks/webhook-executions.tsx | 31 ++++++ apps/gitness/src/routes.tsx | 58 +++++++++-- packages/ui/locales/en/views.json | 4 +- packages/ui/locales/es/views.json | 4 +- packages/ui/locales/fr/views.json | 4 +- packages/ui/src/views/index.ts | 1 + .../layouts/webhooks-settings-layout.tsx | 25 +++++ packages/ui/src/views/repo/webhooks/index.ts | 3 + .../components/webhook-executions-list.tsx | 0 .../repo-webhook-executions-page.tsx | 99 +++++++++++++++++++ .../views/repo/webhooks/webhook-list/types.ts | 16 +++ 13 files changed, 241 insertions(+), 13 deletions(-) create mode 100644 apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx create mode 100644 packages/ui/src/views/layouts/webhooks-settings-layout.tsx create mode 100644 packages/ui/src/views/repo/webhooks/webhook-executions/components/webhook-executions-list.tsx create mode 100644 packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx diff --git a/apps/gitness/src/RouteDefinitions.ts b/apps/gitness/src/RouteDefinitions.ts index be9afeb93..dffedb6c7 100644 --- a/apps/gitness/src/RouteDefinitions.ts +++ b/apps/gitness/src/RouteDefinitions.ts @@ -20,7 +20,8 @@ export const PathProps = { pullRequestId: ':pullRequestId', gitRef: ':gitRef*', resourcePath: ':resourcePath*', - diffRefs: ':diffRefs*' + diffRefs: ':diffRefs*', + webhookId: ':webhookId*' } export type PullRequestRoutePathParams = Omit diff --git a/apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx b/apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx index debd7a22b..9a278ef15 100644 --- a/apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx +++ b/apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx @@ -1,6 +1,6 @@ import { create } from 'zustand' -import { CreateWebhookFormFields, WebhookStore } from '@harnessio/ui/views' +import { CreateWebhookFormFields, WebhookExecutionType, WebhookStore } from '@harnessio/ui/views' import { timeAgoFromEpochTime } from '../../../pages/pipeline-edit/utils/time-utils' import { PageResponseHeader } from '../../../types' @@ -14,6 +14,7 @@ export const useWebhookStore = create(set => ({ page: 1, setPage: page => set({ page }), webhookLoading: false, + executions: null, setWebhookLoading: (webhookLoading: boolean) => set({ webhookLoading }), setWebhooks: data => { const transformedWebhooks = data.map(webhook => ({ @@ -31,6 +32,9 @@ export const useWebhookStore = create(set => ({ webhooks: transformedWebhooks }) }, + setExecutions: (data: WebhookExecutionType[]) => { + set({ executions: data }) + }, setTotalPages: headers => set({ totalPages: parseInt(headers?.get(PageResponseHeader.xTotalPages) || '0') }), setPreSetWebhookData: (data: CreateWebhookFormFields | null) => set({ preSetWebhookData: data }) })) diff --git a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx new file mode 100644 index 000000000..6658672a7 --- /dev/null +++ b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx @@ -0,0 +1,31 @@ +import { useEffect } from 'react' +import { useParams } from 'react-router-dom' + +import { useListRepoWebhookExecutionsQuery } from '@harnessio/code-service-client' +import { RepoWebhookExecutionsPage, WebhookExecutionType } from '@harnessio/ui/views' + +import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' +import { useTranslationStore } from '../../i18n/stores/i18n-store' +import { PathParams } from '../../RouteDefinitions' +import { useWebhookStore } from './stores/webhook-store' + +export const WebhookExecutionsContainer = () => { + const repo_ref = useGetRepoRef() + const { webhookId } = useParams() + const { setExecutions } = useWebhookStore() + + const { data: { body: executions, headers } = {} } = useListRepoWebhookExecutionsQuery( + { + repo_ref, + webhook_identifier: parseInt(webhookId ?? ''), + queryParams: {} + }, + { enabled: !!webhookId } + ) + + useEffect(() => { + setExecutions(executions as WebhookExecutionType[]) + }, [executions, setExecutions]) + + return +} diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx index d49f64108..2fa351052 100644 --- a/apps/gitness/src/routes.tsx +++ b/apps/gitness/src/routes.tsx @@ -1,7 +1,16 @@ import { Navigate } from 'react-router-dom' +// import { use } from 'i18next' +// import { Text } from '@harnessio/ui/components' + import { Breadcrumb, Text } from '@harnessio/ui/components' -import { EmptyPage, ProfileSettingsLayout, RepoSettingsLayout, SandboxLayout } from '@harnessio/ui/views' +import { + EmptyPage, + ProfileSettingsLayout, + RepoSettingsLayout, + SandboxLayout, + WebhookSettingsLayout +} from '@harnessio/ui/views' import { AppShell, AppShellMFE } from './components-v2/app-shell' import { ProjectDropdown } from './components-v2/breadcrumbs/project-dropdown' @@ -52,6 +61,7 @@ import { SignIn } from './pages-v2/signin' import { SignUp } from './pages-v2/signup' import { UserManagementPageContainer } from './pages-v2/user-management/user-management-container' import { CreateWebhookContainer } from './pages-v2/webhooks/create-webhook-container' +import { WebhookExecutionsContainer } from './pages-v2/webhooks/webhook-executions' import WebhookListPage from './pages-v2/webhooks/webhook-list' enum Page { @@ -426,14 +436,21 @@ export const repoRoutes: CustomRouteObject[] = [ handle: { breadcrumb: () => Create a webhook } - }, - { - path: ':webhookId', - element: , - handle: { - breadcrumb: ({ webhookId }: { webhookId: string }) => {webhookId} - } } + // { + // path: ':webhookId', + // element: , + // handle: { + // breadcrumb: ({ webhookId }: { webhookId: string }) => {webhookId} + // } + // }, + // { + // path: ':webhookId/executions', + // element: , + // handle: { + // breadcrumb: () => Executions + // } + // } ] }, { @@ -465,6 +482,31 @@ export const repoRoutes: CustomRouteObject[] = [ ] } ] + }, + + { + path: 'settings/webhooks/:webhookId', + element: , + children: [ + { + index: true, + element: + }, + { + path: 'details', + element: , + handle: { + breadcrumb: ({ webhookId }: { webhookId: string }) => {webhookId} + } + }, + { + path: 'executions', + element: , + handle: { + breadcrumb: () => Executions + } + } + ] } ] } diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json index f442f9865..0b6b9154a 100644 --- a/packages/ui/locales/en/views.json +++ b/packages/ui/locales/en/views.json @@ -12,6 +12,9 @@ "settings": "Settings", "descriptionPlaceholder": "Enter a description", "description": "Description", + "general": "General", + "details": "Details", + "executions": "Executions", "error": "Error:", "saving": "Saving…", "save": "Save", @@ -127,7 +130,6 @@ "security": "Security", "secretScanning": "Secret scanning", "secretScanningDescription": "Block commits containing secrets like passwords, API keys and tokens.", - "general": "General", "codeAutomation": "Code and automation", "webhooks": "Webhooks", "labels": "Labels", diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json index f40a45c8a..3d7c26f54 100644 --- a/packages/ui/locales/es/views.json +++ b/packages/ui/locales/es/views.json @@ -12,6 +12,9 @@ "settings": "Settings", "descriptionPlaceholder": "Enter a description", "description": "Description", + "general": "General", + "details": "Details", + "executions": "Executions", "error": "Error:", "saving": "Saving...", "save": "Save", @@ -127,7 +130,6 @@ "security": "Security", "secretScanning": "Secret scanning", "secretScanningDescription": "Block commits containing secrets like passwords, API keys and tokens.", - "general": "General", "codeAutomation": "Code and automation", "webhooks": "Webhooks", "labels": "Labels", diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json index 1da9a94ba..fce365071 100644 --- a/packages/ui/locales/fr/views.json +++ b/packages/ui/locales/fr/views.json @@ -12,6 +12,9 @@ "settings": "Paramètres", "descriptionPlaceholder": "Entrez une description", "description": "Description", + "general": "Général", + "details": "Details", + "executions": "Executions", "error": "Erreur :", "saving": "Enregistrement...", "save": "Enregistrer", @@ -127,7 +130,6 @@ "security": "Sécurité", "secretScanning": "Analyse des secrets", "secretScanningDescription": "Empêcher les commits contenant des secrets comme les mots de passe ou jetons API.", - "general": "Général", "codeAutomation": "Automatisation du code", "webhooks": "Webhooks", "labels": "Labels", diff --git a/packages/ui/src/views/index.ts b/packages/ui/src/views/index.ts index bb5ad0ceb..ea462c500 100644 --- a/packages/ui/src/views/index.ts +++ b/packages/ui/src/views/index.ts @@ -6,6 +6,7 @@ export * as SandboxLayout from './layouts/SandboxLayout' export * from './layouts/Floating1ColumnLayout' export * from './layouts/PullRequestLayout' export * from './layouts/content-layout-with-sidebar' +export * from './layouts/webhooks-settings-layout' // Account export * from './account' diff --git a/packages/ui/src/views/layouts/webhooks-settings-layout.tsx b/packages/ui/src/views/layouts/webhooks-settings-layout.tsx new file mode 100644 index 000000000..0ca41aa1b --- /dev/null +++ b/packages/ui/src/views/layouts/webhooks-settings-layout.tsx @@ -0,0 +1,25 @@ +import { Outlet } from 'react-router-dom' + +import { ContentLayoutWithSidebar, TranslationStore } from '@/views' +import { TFunction } from 'i18next' + +const getNavItems = (t: TFunction) => [ + { + groupId: 0, + title: t('views:repos.general', 'Webhook Settings'), + items: [ + { id: 0, title: t('views:repos.details', 'Details'), to: 'details' }, + { id: 1, title: t('views:repos.executions', 'Executions'), to: 'executions' } + ] + } +] + +export function WebhookSettingsLayout({ useTranslationStore }: { useTranslationStore: () => TranslationStore }) { + const { t } = useTranslationStore() + + return ( + + + + ) +} diff --git a/packages/ui/src/views/repo/webhooks/index.ts b/packages/ui/src/views/repo/webhooks/index.ts index 7da713636..a2f9f51cf 100644 --- a/packages/ui/src/views/repo/webhooks/index.ts +++ b/packages/ui/src/views/repo/webhooks/index.ts @@ -5,3 +5,6 @@ export * from '@views/repo/webhooks/webhook-list/types' // webhook create export * from '@views/repo/webhooks/webhook-create/repo-webhook-create-page' export * from '@views/repo/webhooks/webhook-create/types' + +// webhook executions +export * from '@views/repo/webhooks/webhook-executions/repo-webhook-executions-page' diff --git a/packages/ui/src/views/repo/webhooks/webhook-executions/components/webhook-executions-list.tsx b/packages/ui/src/views/repo/webhooks/webhook-executions/components/webhook-executions-list.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx new file mode 100644 index 000000000..d6b54f0d0 --- /dev/null +++ b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx @@ -0,0 +1,99 @@ +import { FC, useMemo } from 'react' + +import { + Badge, + Button, + FormSeparator, + FormWrapper, + ListActions, + SearchBox, + SkeletonList, + Spacer, + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, + Text +} from '@/components' +import { SandboxLayout, TranslationStore, WebhookStore } from '@/views' +import { timeAgo } from '@utils/utils' + +import { getBranchEvents, getPrEvents, getTagEvents } from '../webhook-create/components/create-webhook-form-data' + +interface RepoWebhookExecutionsPageProps { + useWebhookStore: () => WebhookStore + useTranslationStore: () => TranslationStore +} +const RepoWebhookExecutionsPage: FC = ({ useWebhookStore, useTranslationStore }) => { + const { t } = useTranslationStore() + const { executions } = useWebhookStore() + + const events = useMemo(() => { + return [...getBranchEvents(t), ...getTagEvents(t), ...getPrEvents(t)] + }, []) + + return ( + + +

Order Status Update Webhook

+ + This webhook triggers every time an order status is updated, sending data to the specified endpoint for + real-time tracking. + + {/* */} + +

Executions

+ + + + ID + Event + Status + Last triggered at + + + + {executions && + executions.map((execution: any) => ( + + + {`#${execution.id}`} + + + {events.find(event => event.id === execution.trigger_type)?.event || execution.trigger_type} + + + + {execution.result === 'success' + ? 'Success' + : execution.result === 'fatal_error' || execution.result === 'retriable_error' + ? 'Failed' + : 'Invalid'} + + + + {timeAgo(execution.created)} + + + ))} + +
+ + + ) +} + +export { RepoWebhookExecutionsPage } diff --git a/packages/ui/src/views/repo/webhooks/webhook-list/types.ts b/packages/ui/src/views/repo/webhooks/webhook-list/types.ts index 251587623..1fd863f78 100644 --- a/packages/ui/src/views/repo/webhooks/webhook-list/types.ts +++ b/packages/ui/src/views/repo/webhooks/webhook-list/types.ts @@ -12,16 +12,32 @@ export interface WebhookType { triggers: EnumWebhookTrigger[] | null } +export interface WebhookExecutionType { + created?: number + duration?: number + error?: string + id?: number + request?: { body: string; headers: string; url: string } + response?: { body: string; headers: string; status: string; status_code: number } + result?: EnumWebhookExecutionResult + retrigger_of?: number | null + retriggerable?: boolean + trigger_type?: EnumWebhookTrigger + webhook_id?: number +} + export interface WebhookStore { webhooks: WebhookType[] | null // onDelete: (id: number) => void preSetWebhookData: CreateWebhookFormFields | null + executions: WebhookExecutionType[] | null setPreSetWebhookData: (data: CreateWebhookFormFields | null) => void error: string | undefined setError: (error?: string) => void totalPages: number webhookLoading: boolean setWebhookLoading: (webhookLoading: boolean) => void + setExecutions: (data: WebhookExecutionType[]) => void page: number setPage: (page: number) => void setWebhooks: (data: ListRepoWebhooksOkResponse) => void From 6e67185ee22591347c874307c84a8c0bba0a33c7 Mon Sep 17 00:00:00 2001 From: sanskar Date: Fri, 31 Jan 2025 20:05:12 -0800 Subject: [PATCH 2/8] chore: rebase --- .../webhooks/stores/webhook-store.tsx | 5 + .../pages-v2/webhooks/webhook-executions.tsx | 29 +++- apps/gitness/src/routes.tsx | 17 --- packages/ui/locales/en/views.json | 2 + packages/ui/locales/es/views.json | 2 + packages/ui/locales/fr/views.json | 2 + .../repo-webhook-executions-page.tsx | 136 +++++++++++------- .../views/repo/webhooks/webhook-list/types.ts | 4 + 8 files changed, 123 insertions(+), 74 deletions(-) diff --git a/apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx b/apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx index 9a278ef15..135c38cf3 100644 --- a/apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx +++ b/apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx @@ -12,10 +12,15 @@ export const useWebhookStore = create(set => ({ preSetWebhookData: null, setError: error => set({ error }), page: 1, + webhookExecutionPage: 1, + totalWebhookExecutionPages: 0, setPage: page => set({ page }), webhookLoading: false, executions: null, setWebhookLoading: (webhookLoading: boolean) => set({ webhookLoading }), + setWebhookExecutionPage: page => set({ webhookExecutionPage: page }), + setTotalWebhookExecutionPages: headers => + set({ totalWebhookExecutionPages: parseInt(headers.get(PageResponseHeader.xTotalPages) || '0') }), setWebhooks: data => { const transformedWebhooks = data.map(webhook => ({ id: webhook.id || 0, diff --git a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx index 6658672a7..074462843 100644 --- a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx +++ b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx @@ -4,28 +4,49 @@ import { useParams } from 'react-router-dom' import { useListRepoWebhookExecutionsQuery } from '@harnessio/code-service-client' import { RepoWebhookExecutionsPage, WebhookExecutionType } from '@harnessio/ui/views' +import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' +import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { useWebhookStore } from './stores/webhook-store' export const WebhookExecutionsContainer = () => { const repo_ref = useGetRepoRef() + const routes = useRoutes() const { webhookId } = useParams() - const { setExecutions } = useWebhookStore() + const { webhookExecutionPage, setWebhookExecutionPage, setExecutions, setTotalWebhookExecutionPages } = + useWebhookStore() + + const { queryPage } = usePaginationQueryStateWithStore({ + page: webhookExecutionPage, + setPage: setWebhookExecutionPage + }) const { data: { body: executions, headers } = {} } = useListRepoWebhookExecutionsQuery( { repo_ref, webhook_identifier: parseInt(webhookId ?? ''), - queryParams: {} + queryParams: { + page: queryPage + } }, { enabled: !!webhookId } ) useEffect(() => { - setExecutions(executions as WebhookExecutionType[]) + if (executions && headers) { + setExecutions(executions as WebhookExecutionType[]) + setTotalWebhookExecutionPages(headers) + } }, [executions, setExecutions]) - return + return ( + + ) } diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx index 2fa351052..7b82e183f 100644 --- a/apps/gitness/src/routes.tsx +++ b/apps/gitness/src/routes.tsx @@ -1,8 +1,5 @@ import { Navigate } from 'react-router-dom' -// import { use } from 'i18next' -// import { Text } from '@harnessio/ui/components' - import { Breadcrumb, Text } from '@harnessio/ui/components' import { EmptyPage, @@ -437,20 +434,6 @@ export const repoRoutes: CustomRouteObject[] = [ breadcrumb: () => Create a webhook } } - // { - // path: ':webhookId', - // element: , - // handle: { - // breadcrumb: ({ webhookId }: { webhookId: string }) => {webhookId} - // } - // }, - // { - // path: ':webhookId/executions', - // element: , - // handle: { - // breadcrumb: () => Executions - // } - // } ] }, { diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json index 0b6b9154a..bc52db514 100644 --- a/packages/ui/locales/en/views.json +++ b/packages/ui/locales/en/views.json @@ -197,6 +197,8 @@ "noRepos": "No repositories yet", "noReposProject": "There are no repositories in this project yet.", "createOrImportRepos": "Create new or import an existing repository.", + "noWebhookExecution": "No webhook executions yet", + "noWebhookExecutionsDescription": "Your webhook executions will appear here once they're completed. Trigger your webhook to see the results.", "noWebhooks": "No webhooks yet", "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.", "commit": "Commit", diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json index 3d7c26f54..dcc40f718 100644 --- a/packages/ui/locales/es/views.json +++ b/packages/ui/locales/es/views.json @@ -197,6 +197,8 @@ "noRepos": "No repositories yet", "noReposProject": "There are no repositories in this project yet.", "createOrImportRepos": "Create new or import an existing repository.", + "noWebhookExecution": "No webhook executions yet", + "noWebhookExecutionsDescription": "Your webhook executions will appear here once they're completed. Trigger your webhook to see the results.", "noWebhooks": "No webhooks yet", "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.", "commit": "Commit", diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json index fce365071..88625d304 100644 --- a/packages/ui/locales/fr/views.json +++ b/packages/ui/locales/fr/views.json @@ -197,6 +197,8 @@ "noRepos": "Pas encore de dépôts", "noReposProject": "Il n'y a pas encore de dépôts dans ce projet.", "createOrImportRepos": "Créer un nouveau dépôt ou importer un dépôt existant.", + "noWebhookExecution": "No webhook executions yet", + "noWebhookExecutionsDescription": "Your webhook executions will appear here once they're completed. Trigger your webhook to see the results.", "noWebhooks": "No webhooks yet", "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.", "commit": "Validation", diff --git a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx index d6b54f0d0..60d10b4af 100644 --- a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx +++ b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx @@ -2,13 +2,8 @@ import { FC, useMemo } from 'react' import { Badge, - Button, FormSeparator, - FormWrapper, - ListActions, - SearchBox, - SkeletonList, - Spacer, + PaginationComponent, Table, TableBody, TableCell, @@ -19,16 +14,24 @@ import { } from '@/components' import { SandboxLayout, TranslationStore, WebhookStore } from '@/views' import { timeAgo } from '@utils/utils' +import { NoData } from 'dist/components' import { getBranchEvents, getPrEvents, getTagEvents } from '../webhook-create/components/create-webhook-form-data' interface RepoWebhookExecutionsPageProps { useWebhookStore: () => WebhookStore useTranslationStore: () => TranslationStore + toRepoWebhooks: (repoId: string) => string + repo_ref: string } -const RepoWebhookExecutionsPage: FC = ({ useWebhookStore, useTranslationStore }) => { +const RepoWebhookExecutionsPage: FC = ({ + useWebhookStore, + useTranslationStore, + toRepoWebhooks, + repo_ref +}) => { const { t } = useTranslationStore() - const { executions } = useWebhookStore() + const { executions, webhookExecutionPage, setWebhookExecutionPage, totalWebhookExecutionPages } = useWebhookStore() const events = useMemo(() => { return [...getBranchEvents(t), ...getTagEvents(t), ...getPrEvents(t)] @@ -45,52 +48,79 @@ const RepoWebhookExecutionsPage: FC = ({ useWebh {/* */}

Executions

- - - - ID - Event - Status - Last triggered at - - - - {executions && - executions.map((execution: any) => ( - - - {`#${execution.id}`} - - - {events.find(event => event.id === execution.trigger_type)?.event || execution.trigger_type} - - - - {execution.result === 'success' - ? 'Success' - : execution.result === 'fatal_error' || execution.result === 'retriable_error' - ? 'Failed' - : 'Invalid'} - - - - {timeAgo(execution.created)} - + {executions && executions?.length > 0 ? ( + <> +
+ + + ID + Event + Status + Last triggered at - ))} - -
+ + + {executions && + executions.map(execution => ( + + + {`#${execution.id}`} + + + {events.find(event => event.id === execution.trigger_type)?.event || execution.trigger_type} + + + + {execution.result === 'success' + ? 'Success' + : execution.result === 'fatal_error' || execution.result === 'retriable_error' + ? 'Failed' + : 'Invalid'} + + + + {timeAgo(execution.created)} + + + ))} + + + + + ) : ( + + )} ) diff --git a/packages/ui/src/views/repo/webhooks/webhook-list/types.ts b/packages/ui/src/views/repo/webhooks/webhook-list/types.ts index 1fd863f78..40409e9e0 100644 --- a/packages/ui/src/views/repo/webhooks/webhook-list/types.ts +++ b/packages/ui/src/views/repo/webhooks/webhook-list/types.ts @@ -29,14 +29,18 @@ export interface WebhookExecutionType { export interface WebhookStore { webhooks: WebhookType[] | null // onDelete: (id: number) => void + totalWebhookExecutionPages: number + webhookExecutionPage: number preSetWebhookData: CreateWebhookFormFields | null executions: WebhookExecutionType[] | null setPreSetWebhookData: (data: CreateWebhookFormFields | null) => void + setTotalWebhookExecutionPages: (headers: Headers) => void error: string | undefined setError: (error?: string) => void totalPages: number webhookLoading: boolean setWebhookLoading: (webhookLoading: boolean) => void + setWebhookExecutionPage: (page: number) => void setExecutions: (data: WebhookExecutionType[]) => void page: number setPage: (page: number) => void From efcc6c8760a25c98ea5e110343747ef01c03228e Mon Sep 17 00:00:00 2001 From: sanskar Date: Fri, 31 Jan 2025 15:51:16 -0800 Subject: [PATCH 3/8] fix: lint/tsc --- .../webhook-executions/components/webhook-executions-list.tsx | 0 .../webhook-executions/repo-webhook-executions-page.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 packages/ui/src/views/repo/webhooks/webhook-executions/components/webhook-executions-list.tsx diff --git a/packages/ui/src/views/repo/webhooks/webhook-executions/components/webhook-executions-list.tsx b/packages/ui/src/views/repo/webhooks/webhook-executions/components/webhook-executions-list.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx index 60d10b4af..091f3bbdd 100644 --- a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx +++ b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx @@ -3,6 +3,7 @@ import { FC, useMemo } from 'react' import { Badge, FormSeparator, + NoData, PaginationComponent, Table, TableBody, @@ -14,7 +15,6 @@ import { } from '@/components' import { SandboxLayout, TranslationStore, WebhookStore } from '@/views' import { timeAgo } from '@utils/utils' -import { NoData } from 'dist/components' import { getBranchEvents, getPrEvents, getTagEvents } from '../webhook-create/components/create-webhook-form-data' From d17550382e6cdbf297ee6fee7f92743229bbd9c1 Mon Sep 17 00:00:00 2001 From: sanskar Date: Fri, 31 Jan 2025 20:22:26 -0800 Subject: [PATCH 4/8] chore: rebase --- packages/ui/locales/en/views.json | 6 +++--- packages/ui/locales/es/views.json | 6 +++--- packages/ui/locales/fr/views.json | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json index bc52db514..d66a96efe 100644 --- a/packages/ui/locales/en/views.json +++ b/packages/ui/locales/en/views.json @@ -12,13 +12,13 @@ "settings": "Settings", "descriptionPlaceholder": "Enter a description", "description": "Description", - "general": "General", - "details": "Details", - "executions": "Executions", "error": "Error:", "saving": "Saving…", "save": "Save", "cancel": "Cancel", + "general": "General", + "details": "Details", + "executions": "Executions", "generalTab": "General", "keysTab": "Keys and tokens", "tags": "Tags", diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json index dcc40f718..f9d7b3132 100644 --- a/packages/ui/locales/es/views.json +++ b/packages/ui/locales/es/views.json @@ -12,13 +12,13 @@ "settings": "Settings", "descriptionPlaceholder": "Enter a description", "description": "Description", - "general": "General", - "details": "Details", - "executions": "Executions", "error": "Error:", "saving": "Saving...", "save": "Save", "cancel": "Cancel", + "general": "General", + "details": "Details", + "executions": "Executions", "generalTab": "General", "keysTab": "Keys and tokens", "tags": "Tags", diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json index 88625d304..815a661ed 100644 --- a/packages/ui/locales/fr/views.json +++ b/packages/ui/locales/fr/views.json @@ -12,13 +12,13 @@ "settings": "Paramètres", "descriptionPlaceholder": "Entrez une description", "description": "Description", - "general": "Général", - "details": "Details", - "executions": "Executions", "error": "Erreur :", "saving": "Enregistrement...", "save": "Enregistrer", "cancel": "Annuler", + "general": "Général", + "details": "Details", + "executions": "Executions", "generalTab": "General", "keysTab": "Keys and tokens", "tags": "Étiquettes", From 5edd8118b9eacb23256ad6eadda27fe8675f4ce6 Mon Sep 17 00:00:00 2001 From: sanskar Date: Fri, 31 Jan 2025 20:39:29 -0800 Subject: [PATCH 5/8] fix: lint/tsc --- .../views/repo-webhooks-list/repo-webhooks-list-store.ts | 6 ++++++ apps/gitness/src/routes.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list-store.ts b/apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list-store.ts index b25a85525..aec5e9bdf 100644 --- a/apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list-store.ts +++ b/apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list-store.ts @@ -31,6 +31,12 @@ export const repoWebhooksListStore: RepoWebhooksListStore = { } ], error: undefined, + webhookExecutionPage: 1, + setWebhookExecutionPage: (_: number) => {}, + totalWebhookExecutionPages: 1, + executions: [], + setExecutions: () => {}, + setTotalWebhookExecutionPages: (_: Headers) => {}, setError: noop, totalPages: 20, webhookLoading: false, diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx index 7b82e183f..1226a1db3 100644 --- a/apps/gitness/src/routes.tsx +++ b/apps/gitness/src/routes.tsx @@ -1,6 +1,6 @@ import { Navigate } from 'react-router-dom' -import { Breadcrumb, Text } from '@harnessio/ui/components' +import { Text } from '@harnessio/ui/components' import { EmptyPage, ProfileSettingsLayout, From 14906b944d1014567dbdbf3b4d834b67b621c1af Mon Sep 17 00:00:00 2001 From: sanskar Date: Fri, 31 Jan 2025 21:07:33 -0800 Subject: [PATCH 6/8] tsc again --- apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx | 2 +- .../webhook-executions/repo-webhook-executions-page.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx index 074462843..78732700d 100644 --- a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx +++ b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx @@ -45,7 +45,7 @@ export const WebhookExecutionsContainer = () => { routes.toRepoWebhooks({ repoId: repo_ref })} repo_ref={repo_ref} /> ) diff --git a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx index 091f3bbdd..0bce2b616 100644 --- a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx +++ b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx @@ -21,7 +21,9 @@ import { getBranchEvents, getPrEvents, getTagEvents } from '../webhook-create/co interface RepoWebhookExecutionsPageProps { useWebhookStore: () => WebhookStore useTranslationStore: () => TranslationStore - toRepoWebhooks: (repoId: string) => string + + toRepoWebhooks: (repoRef?: string) => string + repo_ref: string } const RepoWebhookExecutionsPage: FC = ({ From b315a2fec238bc0629369a67658deffd61e96e93 Mon Sep 17 00:00:00 2001 From: sanskar Date: Mon, 3 Feb 2025 09:58:26 -0800 Subject: [PATCH 7/8] chore: minor fix --- apps/gitness/src/routes.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx index 1226a1db3..7b82e183f 100644 --- a/apps/gitness/src/routes.tsx +++ b/apps/gitness/src/routes.tsx @@ -1,6 +1,6 @@ import { Navigate } from 'react-router-dom' -import { Text } from '@harnessio/ui/components' +import { Breadcrumb, Text } from '@harnessio/ui/components' import { EmptyPage, ProfileSettingsLayout, From b9f72a5725a4a44b911a4e8f02d35781a1b371bc Mon Sep 17 00:00:00 2001 From: sanskar Date: Mon, 3 Feb 2025 10:57:40 -0800 Subject: [PATCH 8/8] feat: review comments --- apps/gitness/src/framework/routing/types.ts | 4 +- .../pages-v2/webhooks/webhook-executions.tsx | 3 +- apps/gitness/src/routes.tsx | 16 +++- .../repo-webhook-executions-page.tsx | 83 ++++++++++--------- 4 files changed, 61 insertions(+), 45 deletions(-) diff --git a/apps/gitness/src/framework/routing/types.ts b/apps/gitness/src/framework/routing/types.ts index 1d2d25d0d..d8f446d5d 100644 --- a/apps/gitness/src/framework/routing/types.ts +++ b/apps/gitness/src/framework/routing/types.ts @@ -73,7 +73,9 @@ export enum RouteConstants { toProfileKeys = 'toProfileKeys', toProfileGeneral = 'toProfileGeneral', toRepoLabels = 'toRepoLabels', - toProjectLabels = 'toProjectLabels' + toProjectLabels = 'toProjectLabels', + toRepoWebhookDetails = 'toRepoWebhookDetails', + toRepoWebhookExecutions = 'toRepoWebhookExecutions' } export interface RouteEntry { diff --git a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx index 78732700d..0565c3b8c 100644 --- a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx +++ b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx @@ -23,7 +23,7 @@ export const WebhookExecutionsContainer = () => { setPage: setWebhookExecutionPage }) - const { data: { body: executions, headers } = {} } = useListRepoWebhookExecutionsQuery( + const { data: { body: executions, headers } = {}, isLoading } = useListRepoWebhookExecutionsQuery( { repo_ref, webhook_identifier: parseInt(webhookId ?? ''), @@ -47,6 +47,7 @@ export const WebhookExecutionsContainer = () => { useWebhookStore={useWebhookStore} toRepoWebhooks={() => routes.toRepoWebhooks({ repoId: repo_ref })} repo_ref={repo_ref} + isLoading={isLoading} /> ) } diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx index 7b82e183f..6f995ac81 100644 --- a/apps/gitness/src/routes.tsx +++ b/apps/gitness/src/routes.tsx @@ -479,14 +479,26 @@ export const repoRoutes: CustomRouteObject[] = [ path: 'details', element: , handle: { - breadcrumb: ({ webhookId }: { webhookId: string }) => {webhookId} + breadcrumb: ({ webhookId }: { webhookId: string }) => ( + <> + {webhookId} + Details + + ), + routeName: RouteConstants.toRepoWebhookDetails } }, { path: 'executions', element: , handle: { - breadcrumb: () => Executions + breadcrumb: ({ webhookId }: { webhookId: string }) => ( + <> + {webhookId} + Executions + + ), + routeName: RouteConstants.toRepoWebhookExecutions } } ] diff --git a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx index 0bce2b616..3cd5f2a4e 100644 --- a/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx +++ b/packages/ui/src/views/repo/webhooks/webhook-executions/repo-webhook-executions-page.tsx @@ -5,6 +5,7 @@ import { FormSeparator, NoData, PaginationComponent, + SkeletonList, Table, TableBody, TableCell, @@ -21,16 +22,16 @@ import { getBranchEvents, getPrEvents, getTagEvents } from '../webhook-create/co interface RepoWebhookExecutionsPageProps { useWebhookStore: () => WebhookStore useTranslationStore: () => TranslationStore - toRepoWebhooks: (repoRef?: string) => string - repo_ref: string + isLoading: boolean } const RepoWebhookExecutionsPage: FC = ({ useWebhookStore, useTranslationStore, toRepoWebhooks, - repo_ref + repo_ref, + isLoading }) => { const { t } = useTranslationStore() const { executions, webhookExecutionPage, setWebhookExecutionPage, totalWebhookExecutionPages } = useWebhookStore() @@ -40,17 +41,18 @@ const RepoWebhookExecutionsPage: FC = ({ }, []) return ( - - + +

Order Status Update Webhook

This webhook triggers every time an order status is updated, sending data to the specified endpoint for real-time tracking. - {/* */}

Executions

- {executions && executions?.length > 0 ? ( + {isLoading ? ( + + ) : executions && executions.length > 0 ? ( <> @@ -62,40 +64,39 @@ const RepoWebhookExecutionsPage: FC = ({ - {executions && - executions.map(execution => ( - - - {`#${execution.id}`} - - - {events.find(event => event.id === execution.trigger_type)?.event || execution.trigger_type} - - - - {execution.result === 'success' - ? 'Success' - : execution.result === 'fatal_error' || execution.result === 'retriable_error' - ? 'Failed' - : 'Invalid'} - - - - {timeAgo(execution.created)} - - - ))} + {executions.map(execution => ( + + + {`#${execution.id}`} + + + {events.find(event => event.id === execution.trigger_type)?.event || execution.trigger_type} + + + + {execution.result === 'success' + ? 'Success' + : ['fatal_error', 'retriable_error'].includes(execution.result ?? '') + ? 'Failed' + : 'Invalid'} + + + + {timeAgo(execution.created)} + + + ))}