feat: support taskname slug in the ui

services/ui/server.js

@@ -87,7 +87,7 @@ app
       (req, res) => {
         app.render(req, res, '/task', {
           openshiftProjectName: req.params.environmentSlug,
-          taskId: req.params.taskSlug
+          taskName: req.params.taskSlug
         });
       }
     );

services/ui/src/components/Breadcrumbs/Task.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { getLinkData } from 'components/link/Task';
+import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+
+const TaskBreadcrumb = ({ taskName, taskSlug, environmentSlug, projectSlug }) => {
+  const linkData = getLinkData(taskSlug, environmentSlug, projectSlug);
+
+  return (
+    <Breadcrumb
+      header="Task"
+      title={taskName}
+      {... linkData}
+    />
+  );
+};
+
+export default TaskBreadcrumb;

services/ui/src/components/Task/index.js

@@ -9,7 +9,6 @@ import { bp } from 'lib/variables';
 const Task = ({ task }) => (
   <div className="task">
     <div className="details">
-      <h3>{task.name}</h3>
       <div className="field-wrapper created">
         <div>
           <label>Created</label>
@@ -138,17 +137,47 @@ const Task = ({ task }) => (
               }
             }
 
+            &.new {
+              &::before {
+                background-image: url('/static/images/in-progress.svg');
+              }
+            }
+
+            &.pending {
+              &::before {
+                background-image: url('/static/images/in-progress.svg');
+              }
+            }
+
+            &.running {
+              &::before {
+                background-image: url('/static/images/in-progress.svg');
+              }
+            }
+
             &.failed {
               &::before {
                 background-image: url('/static/images/failed.svg');
               }
             }
 
+            &.cancelled {
+              &::before {
+                background-image: url('/static/images/failed.svg');
+              }
+            }
+
             &.succeeded {
               &::before {
                 background-image: url('/static/images/successful.svg');
               }
             }
+
+            &.complete {
+              &::before {
+                background-image: url('/static/images/successful.svg');
+              }
+            }
           }
 
           & > div {

services/ui/src/components/Tasks/index.js

@@ -18,12 +18,12 @@ const Tasks = ({ tasks, environmentSlug, projectSlug }) => (
       {!tasks.length && <div className="data-none">No Tasks</div>}
       {tasks.map(task => (
         <TaskLink
-          taskSlug={task.id}
+          taskSlug={task.taskName}
           environmentSlug={environmentSlug}
           projectSlug={projectSlug}
-          key={task.id}
+          key={task.taskName}
         >
-          <div className="data-row" task={task.id}>
+          <div className="data-row" task={task.taskName}>
             <div className="name">{task.name}</div>
             <div className="started">
               {moment
@@ -148,14 +148,34 @@ const Tasks = ({ tasks, environmentSlug, projectSlug }) => (
               background-image: url('/static/images/in-progress.svg');
             }
 
+            &.new {
+              background-image: url('/static/images/in-progress.svg');
+            }
+
+            &.pending {
+              background-image: url('/static/images/in-progress.svg');
+            }
+
+            &.running {
+              background-image: url('/static/images/in-progress.svg');
+            }
+
             &.failed {
               background-image: url('/static/images/failed.svg');
             }
 
+            &.cancelled {
+              background-image: url('/static/images/failed.svg');
+            }
+
             &.succeeded {
               background-image: url('/static/images/successful.svg');
             }
 
+            &.complete {
+              background-image: url('/static/images/successful.svg');
+            }
+
             span {
               @media ${bp.tiny_wide} {
                 display: none;

services/ui/src/components/errors/TaskNotFound.js

@@ -4,6 +4,6 @@ import ErrorPage from 'pages/_error';
 export default ({ variables }) => (
   <ErrorPage
     statusCode={404}
-    errorMessage={`Task "${variables.taskId}" not found`}
+    errorMessage={`Task "${variables.taskName}" not found`}
   />
 );

services/ui/src/components/errors/TaskNotFound.stories.js

@@ -9,7 +9,7 @@ export default {
 export const Default = () => (
   <TaskNotFound
     variables={{
-      taskId: 42,
+      taskName: 'lagoon-task-abcdef',
     }}
   />
 );

services/ui/src/components/link/Task.js

@@ -5,7 +5,7 @@ export const getLinkData = (taskSlug, environmentSlug, projectSlug) => ({
     pathname: '/task',
     query: {
       openshiftProjectName: environmentSlug,
-      taskId: taskSlug
+      taskName: taskSlug
     }
   },
   asPath: `/projects/${projectSlug}/${environmentSlug}/tasks/${taskSlug}`

services/ui/src/lib/query/EnvironmentWithTask.js

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag';
 
 export default gql`
-  query getEnvironment($openshiftProjectName: String!, $taskId: Int!) {
+  query getEnvironment($openshiftProjectName: String!, $taskName: String!) {
     environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
@@ -13,8 +13,9 @@ export default gql`
         problemsUi
         factsUi
       }
-      tasks(id: $taskId) {
+      tasks(taskName: $taskName) {
         name
+        taskName
         status
         created
         service

services/ui/src/lib/query/EnvironmentWithTasks.js

@@ -59,6 +59,7 @@ export default gql`
       tasks(limit: $limit) {
         id
         name
+        taskName
         status
         created
         service

services/ui/src/pages/stories/task.stories.js

@@ -11,7 +11,7 @@ export const Default = () => (
     router={{
       query: {
         openshiftProjectName: 'Example',
-        taskId: 42,
+        taskName: 'lagoon-task-abcdef',
       },
     }}
   />

services/ui/src/pages/task.js

@@ -8,6 +8,7 @@ import EnvironmentWithTaskQuery from 'lib/query/EnvironmentWithTask';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
+import TaskBreadcrumb from 'components/Breadcrumbs/Task';
 import NavTabs from 'components/NavTabs';
 import Task from 'components/Task';
 import withQueryLoading from 'lib/withQueryLoading';
@@ -24,13 +25,13 @@ import { bp } from 'lib/variables';
 export const PageTask = ({ router }) => (
   <>
     <Head>
-      <title>{`${router.query.taskId} | Task`}</title>
+      <title>{`${router.query.taskName} | Task`}</title>
     </Head>
     <Query
       query={EnvironmentWithTaskQuery}
       variables={{
         openshiftProjectName: router.query.openshiftProjectName,
-        taskId: parseInt(router.query.taskId, 10)
+        taskName: router.query.taskName
       }}
     >
       {R.compose(
@@ -46,6 +47,12 @@ export const PageTask = ({ router }) => (
               environmentSlug={environment.openshiftProjectName}
               projectSlug={environment.project.name}
             />
+            <TaskBreadcrumb
+              environmentSlug={environment.openshiftProjectName}
+              projectSlug={environment.project.name}
+              taskSlug={environment.tasks[0].taskName}
+              taskName={environment.tasks[0].name}
+            />
           </Breadcrumbs>
           <div className="content-wrapper">
             <NavTabs activeTab="tasks" environment={environment} />