build status added

Author: pashidlos

src/components/BuildList.tsx

@@ -9,6 +9,8 @@ import {
   Theme,
   createStyles,
   Chip,
+  Typography,
+  Grid,
 } from "@material-ui/core";
 import { Delete } from "@material-ui/icons";
 import { useHistory } from "react-router-dom";
@@ -17,6 +19,7 @@ import {
   useBuildDispatch,
   deleteBuild,
 } from "../contexts/build.context";
+import { BuildStatusChip } from "./BuildStatusChip";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -54,10 +57,35 @@ const BuildList: FunctionComponent = () => {
           }}
         >
           <ListItemText
-            primary={`#${build.id}`}
-            secondary={`Date: ${build.createdAt}`}
+            disableTypography
+            primary={
+              <Grid container>
+                <Grid item>
+                  <Typography variant="subtitle2">{`#${build.id}`}</Typography>
+                </Grid>
+              </Grid>
+            }
+            secondary={
+              <Grid container direction="column">
+                <Grid item>
+                  <Typography variant="caption" color="textPrimary">
+                    {build.createdAt}
+                  </Typography>
+                </Grid>
+                <Grid item>
+                  <Grid container justify="space-between">
+                    <Grid item>
+                      <Chip size="small" label={build.branchName} />
+                    </Grid>
+                    <Grid item>
+                      <BuildStatusChip status={build.status} />
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+            }
           />
-          <Chip size="small" label={build.branchName} />
+
           <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
             <IconButton
               onClick={() => {

src/components/BuildStatusChip.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Chip } from "@material-ui/core";
+import { BuildStatus } from "../types/buildStatus";
+
+export const BuildStatusChip: React.FunctionComponent<{
+  status: BuildStatus;
+}> = ({ status }) => {
+  let color: "inherit" | "primary" | "secondary" | "default" | undefined;
+  let variant: "default" | "outlined" | undefined;
+  switch (status) {
+    case BuildStatus.passed:
+      color = "primary";
+      variant = "outlined";
+      break;
+    case BuildStatus.unresolved:
+      color = "secondary";
+      break;
+    case BuildStatus.failed:
+      color = "secondary";
+      variant = "outlined";
+      break;
+    default:
+      color = undefined;
+      variant = undefined;
+  }
+  return <Chip variant={variant} color={color} label={status} size="small" />;
+};

src/contexts/build.context.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Build, TestRun } from "../types";
 import { buildsService } from "../services";
 import { TestStatus } from "../types/testStatus";
+import { BuildStatus } from "../types/buildStatus";
 
 interface IRequestAction {
   type: "request";
@@ -72,6 +73,7 @@ function buildReducer(state: State, action: IAction): State {
         buildList: state.buildList.map((build) => {
           if (build.id === action.payload) {
             // reset stats
+            build.status = BuildStatus.passed;
             build.passedCount = 0;
             build.unresolvedCount = 0;
             build.failedCount = 0;
@@ -95,6 +97,13 @@ function buildReducer(state: State, action: IAction): State {
                 }
               }
             });
+
+            if (build.failedCount > 0) {
+              build.status = BuildStatus.failed;
+            }
+            if (build.unresolvedCount > 0) {
+              build.status = BuildStatus.unresolved;
+            }
           }
           return build;
         }),

src/types/build.ts

@@ -1,10 +1,11 @@
 import { TestRun } from "./testRun";
+import { BuildStatus } from "./buildStatus";
 
 export interface Build {
   id: string;
   projectName: string;
   branchName: string;
-  status: string;
+  status: BuildStatus;
   createdAt: Date;
   createdBy: string;
   testRuns: TestRun[];

src/types/buildStatus.ts

@@ -0,0 +1,5 @@
+export enum BuildStatus {
+  passed = "passed",
+  unresolved = "unresolved",
+  failed = "failed",
+}