Show timestamp at the stage logs (#468)

**What this PR does / why we need it**:

![image](https://user-images.githubusercontent.com/6136383/87772716-1353e380-c85d-11ea-89a1-0dd749bad76f.png)


**Which issue(s) this PR fixes**:

Fixes #411 

**Does this PR introduce a user-facing change?**:
<!--
If no, just write "NONE" in the release-note block below.
-->
```release-note
NONE
```

This PR was merged by Kapetanios.

pkg/app/web/src/components/log-line.tsx

@@ -5,10 +5,12 @@ import {
   DEFAULT_BACKGROUND_COLOR,
   SELECTED_BACKGROUND_COLOR,
   TERMINAL_LINE_NUMBER_COLOR,
+  DEFAULT_TEXT_COLOR,
   TERM_COLORS,
 } from "../constants/term-colors";
 import { LogSeverity } from "../modules/stage-logs";
 import { parseLog } from "../utils/parse-log";
+import dayjs from "dayjs";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -32,15 +34,28 @@ const useStyles = makeStyles((theme) => ({
     position: "absolute",
     marginLeft: theme.spacing(1),
   },
+  timestamp: {
+    color: DEFAULT_TEXT_COLOR,
+    paddingRight: theme.spacing(1),
+    opacity: 0.8,
+  },
 }));
 
 interface Props {
   lineNumber: number;
   body: string;
   severity: LogSeverity;
+  createdAt: number;
 }
 
-export const LogLine: FC<Props> = ({ body, lineNumber, severity }) => {
+const TIMESTAMP_FORMAT = "YYYY-MM-DD HH:mm:ss";
+
+export const LogLine: FC<Props> = ({
+  body,
+  lineNumber,
+  severity,
+  createdAt,
+}) => {
   const classes = useStyles();
 
   return (
@@ -49,6 +64,9 @@ export const LogLine: FC<Props> = ({ body, lineNumber, severity }) => {
         <Error color="error" fontSize="small" className={classes.icon} />
       )}
       <span className={classes.lineNumber}>{lineNumber}</span>
+      <span className={classes.timestamp}>{`[${dayjs(createdAt * 1000).format(
+        TIMESTAMP_FORMAT
+      )}]`}</span>
       <Box pr={2} flex={1} style={{ wordBreak: "break-word" }}>
         {parseLog(body).map((cell, i) => (
           <span

pkg/app/web/src/components/log.tsx

@@ -31,6 +31,7 @@ export const Log: FC<Props> = memo(function Log({ logs, loading, height }) {
           severity={log.severity}
           body={log.log}
           lineNumber={i + 1}
+          createdAt={log.createdAt}
         />
       ))}
       {loading && (

pkg/app/web/src/constants/term-colors.ts

@@ -17,6 +17,7 @@ export const TERM_COLORS = [
   "#FFFFFF",
 ];
 
+export const DEFAULT_TEXT_COLOR = TERM_COLORS[7];
 export const TERMINAL_LINE_NUMBER_COLOR = "#80D8FF";
 export const DEFAULT_BACKGROUND_COLOR = "#263238";
 export const SELECTED_BACKGROUND_COLOR = "#607D8B";