Fix processes table

- table styling was broken since pid changed to processId. - rename cellRenderer renderPIDCell to renderProcessIdCell. - update endpoint.
workfloworchestrator · Sep 20, 2023 · a561bd1 · a561bd1
1 parent cc6ef13
commit a561bd1
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 31 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -263,7 +263,7 @@ export class ApiClient extends ApiClientInterface {
 
     processSubscriptionsByProcessId = (processId: string): Promise<ProcessSubscription[]> => {
         return this.fetchJsonWithCustomErrorHandling<ProcessSubscription[]>(
-            `processes/process-subscriptions-by-pid/${processId}`
+            `processes/process-subscriptions-by-process_id/${processId}`
         ).catch((err) => []);
     };
 

diff --git a/src/components/tables/Processes.tsx b/src/components/tables/Processes.tsx
@@ -17,7 +17,7 @@ import { EuiPanel } from "@elastic/eui";
 import ActionContainer from "components/ActionContainer";
 import {
     renderCustomersCell,
-    renderPidCell,
+    renderProcessIdCell,
     renderProductTagCell,
     renderProductsCell,
     renderSubscriptionsCell,
@@ -153,11 +153,11 @@ export function ProcessesTable({ initialTableSettings, renderActions }: Processe
 
     const extraRowPropGetter: RowPropGetter<ProcessV2> = useCallback(
         (props: any, { row }: any) => {
-            const highlighted = row.values.pid === highlightQ ? " highlighted" : "";
+            const highlighted = row.values.processId === highlightQ ? " highlighted" : "";
             return {
                 ...props,
-                id: row.values.pid,
-                className: `${row.values.last_status}${highlighted}`,
+                id: row.values.processId,
+                className: `${row.values.lastStatus}${highlighted}`,
             };
         },
         [highlightQ]
@@ -188,11 +188,11 @@ export function ProcessesTable({ initialTableSettings, renderActions }: Processe
                     <i className="fa fa-arrows-alt-v" onClick={() => toggleAllRowsExpanded()} />
                 ),
                 Cell: ({ row }: { row: Row; cell: Cell }) => {
-                    const caret = row.values.process_id === highlightQ ? <i className={"fa fa-caret-right"} /> : null;
+                    const caret = row.values.processId === highlightQ ? <i className={"fa fa-caret-right"} /> : null;
                     const button = row.isExpanded ? (
-                        <i className={`fa fa-minus-circle ${row.values.last_status}`} />
+                        <i className={`fa fa-minus-circle ${row.values.lastStatus}`} />
                     ) : (
-                        <i className={`fa fa-plus-circle ${row.values.last_status}`} />
+                        <i className={`fa fa-plus-circle ${row.values.lastStatus}`} />
                     );
                     return (
                         <div
@@ -214,7 +214,7 @@ export function ProcessesTable({ initialTableSettings, renderActions }: Processe
                 accessor: "process_id",
                 disableSortBy: true,
                 disableFilters: true,
-                Cell: renderPidCell,
+                Cell: renderProcessIdCell,
             },
             {
                 Header: "Assignee",
@@ -306,7 +306,7 @@ export function ProcessesTable({ initialTableSettings, renderActions }: Processe
             {
                 Header: "Modified",
                 id: "lastModifiedAt",
-                accessor: "last_lastModifiedAt_at",
+                accessor: "last_modified_at",
                 Cell: renderTimestampCell,
                 disableFilters: true,
             },

diff --git a/src/components/tables/ProcessesStyling.ts b/src/components/tables/ProcessesStyling.ts
@@ -33,7 +33,7 @@ export const processesStyling = css`
                     }
                 }
             }
-            td.step {
+            td.last_step {
                 width: 15%;
             }
             td.actions {
@@ -42,7 +42,7 @@ export const processesStyling = css`
                 font-size: 18px;
                 position: relative;
             }
-            td.pid {
+            td.process_id {
                 width: 80px;
             }
         }

diff --git a/src/components/tables/cellRenderers.tsx b/src/components/tables/cellRenderers.tsx
@@ -165,7 +165,7 @@ export function renderTimestampCell({ cell }: { cell: Cell }): string | null {
     return time.tz(timezone).format(format);
 }
 
-export function renderPidCell({ cell }: { cell: Cell }) {
+export function renderProcessIdCell({ cell }: { cell: Cell }) {
     const processId: string = cell.value;
     return (
         <Link key={processId} onClick={(e) => e.stopPropagation()} to={`/processes/${processId}`} title={processId}>

diff --git a/src/locale/en.ts b/src/locale/en.ts
@@ -162,8 +162,9 @@ I18n.translations.en = {
         cancel: "Cancel",
         choose_product: "Choose Product",
         flash: {
-            create_create: "Created create process for product {{name}} with pid {{pid}}",
-            create_modify: "Created {{name}} process for subscription {{subscriptionId}} with pid {{pid}}",
+            create_create: "Created create process for product {{name}} with process id {{process_id}}",
+            create_modify:
+                "Created {{name}} process for subscription {{subscriptionId}} with process id {{process_id}}",
             update: "Resumed process for workflow {{name}}",
             wizard_next_step: "Navigated to next step in form wizard",
         },
@@ -191,10 +192,10 @@ I18n.translations.en = {
         wording_process: "Process {{product}} of workflow {{workflow}} for {{customer}}",
         wording_task: "Task of workflow {{workflow}}",
         summary: {
-            status: "Status",
+            last_status: "Status",
             assignee: "Assignee",
             created_by: "Created by",
-            step: "Current step",
+            last_step: "Current step",
             started_at: "Started",
             last_modified_at: "Last updated",
         },
@@ -365,7 +366,7 @@ I18n.translations.en = {
         relatedSubscriptionsLP: "The ports used in the {{description}} subscription:",
         relatedSubscriptionsServicePort: "The light-paths using the {{description}} subscription:",
         terminatedWarning: "The info below may be outdated as the subscription they belong to is terminated!",
-        failed_task: "See {{pid}}",
+        failed_task: "See {{process_id}}",
         customer_descriptions: "Customer description(s)",
         stats_in_grafana: "Stats",
         go_to_grafana: "Go to Grafana",
@@ -735,7 +736,7 @@ I18n.translations.en = {
         subscription_link_txt: "Show Subscription related by this task",
         new_task: "New task",
         flash: {
-            create: "Created task for workflow {{name}} with pid {{pid}}",
+            create: "Created task for workflow {{name}} with process id {{process_id}}",
             update: "Resumed task for workflow {{name}}",
         },
     },

diff --git a/src/stories/ProcessDetail.stories.tsx b/src/stories/ProcessDetail.stories.tsx
@@ -37,36 +37,36 @@ export default {
 
 export const Process: ComponentStory<typeof ProcessDetail> = () => {
     mock.reset();
-    mock.onGet("processes/pid").reply(200, FAILED_PROCESS_JSON);
-    mock.onGet("processes/process-subscriptions-by-pid/1a5686d9-eaa2-4d0b-96eb-1ec081c62a08").reply(200, []);
+    mock.onGet("processes/process_id").reply(200, FAILED_PROCESS_JSON);
+    mock.onGet("processes/process-subscriptions-by-process_id/1a5686d9-eaa2-4d0b-96eb-1ec081c62a08").reply(200, []);
 
     //@ts-ignore
-    return <ProcessDetail match={{ params: { id: "pid" } }} isProcess={true} />;
+    return <ProcessDetail match={{ params: { id: "process_id" } }} isProcess={true} />;
 };
 
 export const Task: ComponentStory<typeof ProcessDetail> = () => {
     mock.reset();
-    mock.onGet("processes/pid").reply(200, FAILED_PROCESS_JSON);
-    mock.onGet("processes/process-subscriptions-by-pid/1a5686d9-eaa2-4d0b-96eb-1ec081c62a08").reply(200, []);
+    mock.onGet("processes/process_id").reply(200, FAILED_PROCESS_JSON);
+    mock.onGet("processes/process-subscriptions-by-process_id/1a5686d9-eaa2-4d0b-96eb-1ec081c62a08").reply(200, []);
 
     //@ts-ignore
-    return <ProcessDetail match={{ params: { id: "pid" } }} isProcess={false} />;
+    return <ProcessDetail match={{ params: { id: "process_id" } }} isProcess={false} />;
 };
 
 export const SuspendedProcess: ComponentStory<typeof ProcessDetail> = () => {
     mock.reset();
-    mock.onGet("processes/pid").reply(200, SUSPENDED_PROCESS_JSON);
-    mock.onGet("processes/process-subscriptions-by-pid/cdae2399-dd25-440b-81db-b8846c5fa3ce").reply(200, []);
+    mock.onGet("processes/process_id").reply(200, SUSPENDED_PROCESS_JSON);
+    mock.onGet("processes/process-subscriptions-by-process_id/cdae2399-dd25-440b-81db-b8846c5fa3ce").reply(200, []);
 
     //@ts-ignore
-    return <ProcessDetail match={{ params: { id: "pid" } }} isProcess={true} />;
+    return <ProcessDetail match={{ params: { id: "process_id" } }} isProcess={true} />;
 };
 
 export const SuspendedTask: ComponentStory<typeof ProcessDetail> = () => {
     mock.reset();
-    mock.onGet("processes/pid").reply(200, SUSPENDED_PROCESS_JSON);
-    mock.onGet("processes/process-subscriptions-by-pid/cdae2399-dd25-440b-81db-b8846c5fa3ce").reply(200, []);
+    mock.onGet("processes/process_id").reply(200, SUSPENDED_PROCESS_JSON);
+    mock.onGet("processes/process-subscriptions-by-process_id/cdae2399-dd25-440b-81db-b8846c5fa3ce").reply(200, []);
 
     //@ts-ignore
-    return <ProcessDetail match={{ params: { id: "pid" } }} isProcess={false} />;
+    return <ProcessDetail match={{ params: { id: "process_id" } }} isProcess={false} />;
 };