From 48fb84a9fd7df65fdff4c1f12df77e69ab742183 Mon Sep 17 00:00:00 2001
From: Stanislav Bohm <spirali@kreatrix.org>
Date: Tue, 28 Aug 2018 11:24:51 +0200
Subject: [PATCH] [dashboard] Small visual improvement

---
 dashboard/src/components/Session.tsx  |  4 ++--
 dashboard/src/components/Sessions.tsx |  4 ++--
 dashboard/src/components/TaskList.tsx |  8 +++++---
 dashboard/src/components/utils.tsx    | 13 ++++++++++++-
 dashboard/src/utils/fetch.ts          |  4 ++--
 docs/guide/install.rst                |  2 +-
 6 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/components/Session.tsx b/dashboard/src/components/Session.tsx
index da2f42d..81a301b 100644
--- a/dashboard/src/components/Session.tsx
+++ b/dashboard/src/components/Session.tsx
@@ -4,7 +4,7 @@ import { parseDate } from "../utils/date";
 import { fetchEvents } from "../utils/fetch";
 import Error from "./Error";
 import { SessionBar } from "./SessionBar";
-import { niceTime, StatusBadge } from "./utils";
+import { niceTime, SessionStatusBadge } from "./utils";
 
 interface Props {
   id: string;
@@ -118,7 +118,7 @@ class Session extends Component<Props, State> {
                 <tr>
                   <td>Status</td>
                   <td>
-                    <StatusBadge status={session.status} />
+                    <SessionStatusBadge status={session.status} />
                     <p className="text-left text-monospace">
                       {session.message}
                     </p>
diff --git a/dashboard/src/components/Sessions.tsx b/dashboard/src/components/Sessions.tsx
index acdb235..33f1085 100644
--- a/dashboard/src/components/Sessions.tsx
+++ b/dashboard/src/components/Sessions.tsx
@@ -5,7 +5,7 @@ import { EventWrapper, SessionSpec } from "../lib/event";
 import { parseDate } from "../utils/date";
 import { fetchEvents } from "../utils/fetch";
 import Error from "./Error";
-import { niceTime, StatusBadge } from "./utils";
+import { niceTime, SessionStatusBadge } from "./utils";
 
 interface Session {
   id: string;
@@ -118,7 +118,7 @@ class Sessions extends Component<{}, State> {
                       <Link to={"session/" + s.id}>{s.spec.name}</Link>
                     </td>
                     <td>
-                      <StatusBadge status={s.status} />
+                      <SessionStatusBadge status={s.status} />
                     </td>
                     <td>{s.client}</td>
                     <td>{s.created}</td>
diff --git a/dashboard/src/components/TaskList.tsx b/dashboard/src/components/TaskList.tsx
index 06c3520..c3f78fa 100644
--- a/dashboard/src/components/TaskList.tsx
+++ b/dashboard/src/components/TaskList.tsx
@@ -6,7 +6,7 @@ import Error from "./Error";
 import { FaCaretDown, FaCaretRight } from "react-icons/fa";
 import { parseDate } from "../utils/date";
 import { SessionBar } from "./SessionBar";
-import { niceTime } from "./utils";
+import { niceTime, TaskStatusBadge } from "./utils";
 
 const bgColors = ["white", "#EEE", "#D2D2D2"];
 
@@ -117,10 +117,12 @@ const TaskRow = (props: {
           onClick={toggle}
         >
           {node.open ? <FaCaretDown /> : <FaCaretRight />}
-          Task {node.name} {node.spec && node.spec.id[1]}
+          Task {node.spec && node.spec.id[1]} {node.name}
         </span>
       </td>
-      <td>{node.status}</td>
+      <td>
+        <TaskStatusBadge status={node.status} />
+      </td>
       <td>{duration && niceTime(duration)}</td>
       {duration ? (
         <td
diff --git a/dashboard/src/components/utils.tsx b/dashboard/src/components/utils.tsx
index cf4fcb0..99979f9 100644
--- a/dashboard/src/components/utils.tsx
+++ b/dashboard/src/components/utils.tsx
@@ -4,7 +4,7 @@ interface Props {
   status: string;
 }
 
-export const StatusBadge = (props: Props) => {
+export const SessionStatusBadge = (props: Props) => {
   const style: { color?: string } = {};
   if (props.status === "Open") {
     style.color = "green";
@@ -18,6 +18,17 @@ export const StatusBadge = (props: Props) => {
   return <span style={style}>{props.status}</span>;
 };
 
+export const TaskStatusBadge = (props: Props) => {
+  const style: { color?: string } = {};
+  if (props.status === "running") {
+    style.color = "green";
+  }
+  if (props.status === "error") {
+    style.color = "red";
+  }
+  return <span style={style}>{props.status}</span>;
+};
+
 export function niceTime(s: number) {
   if (s < 0.5) {
     return (s * 1000).toFixed(0) + "ms";
diff --git a/dashboard/src/utils/fetch.ts b/dashboard/src/utils/fetch.ts
index 184e4dd..6ef7363 100644
--- a/dashboard/src/utils/fetch.ts
+++ b/dashboard/src/utils/fetch.ts
@@ -3,8 +3,8 @@ import { EventWrapper } from "../lib/event";
 let SERVER_URL = "/";
 
 if (window.location.href.startsWith("http://localhost:3000")) {
-  console.log("DEV mode detected, connecting to http://localhost:8080/");
-  SERVER_URL = "http://localhost:8080/";
+  console.log("DEV mode detected, connecting to http://localhost:7222/");
+  SERVER_URL = "http://localhost:7222/";
 }
 
 export function fetchFromServer(
diff --git a/docs/guide/install.rst b/docs/guide/install.rst
index c85a05a..e13cefe 100644
--- a/docs/guide/install.rst
+++ b/docs/guide/install.rst
@@ -209,7 +209,7 @@ ready and terminates.
   Set listening address of server. Default is 0.0.0.0:7210.
 
 **--http-listen=(PORT|ADDRESS|ADDRESS:PORT)**
-  Set listening address of server for HTTP (dashboard). Default is 0.0.0.0:8080.
+  Set listening address of server for HTTP (dashboard). Default is 0.0.0.0:7222.
 
 **--runprefix**
   Set a command before rain programs. It is designed to used to run