feat(dashboard): add 'more info' pane to stack graph

dashboard/package.json

@@ -25,6 +25,7 @@
     "dagre-d3": "^0.6.1",
     "emotion": "^10.0.0",
     "flexboxgrid": "^6.3.1",
+    "flexboxgrid-helpers": "^1.1.3",
     "http-proxy-middleware": "^0.19.1",
     "lodash": "^4.17.11",
     "node-sass": "^4.10.0",

dashboard/src/api/index.ts

@@ -14,9 +14,13 @@ import {
   FetchLogsResponse,
   ApiRequest,
   FetchGraphResponse,
+  FetchTaskResultResponse,
+  FetchTestResultResponse,
 } from "./types"
 
 export type FetchLogsParam = string[]
+export type FetchTaskResultParam = { name: string }
+export type FetchTestResultParam = { name: string, module: string }
 
 const MAX_LOG_LINES = 5000
 
@@ -32,6 +36,14 @@ export async function fetchStatus(): Promise<FetchStatusResponse> {
   return apiPost<FetchStatusResponse>("get.status")
 }
 
+export async function fetchTaskResult(params: FetchTaskResultParam): Promise<FetchTaskResultResponse> {
+  return apiPost<FetchTaskResultResponse>("get.task-result", params)
+}
+
+export async function fetchTestResult(params: FetchTestResultParam): Promise<FetchTestResultResponse> {
+  return apiPost<FetchTestResultResponse>("get.test-result", params)
+}
+
 export async function fetchLogs(services: FetchLogsParam): Promise<FetchLogsResponse> {
   const tail = Math.floor(MAX_LOG_LINES / services.length)
   return apiPost<FetchLogsResponse>("logs", { services, tail })

dashboard/src/api/types.ts

@@ -11,7 +11,9 @@
 
 export type Primitive = string | number | boolean
 
-export interface PrimitiveMap { [key: string]: Primitive }
+export interface PrimitiveMap {
+  [key: string]: Primitive
+}
 
 export interface DashboardPage {
   title: string
@@ -58,7 +60,7 @@ export interface ServiceStatus {
   version?: string
   state?: string
   runningReplicas?: number
-  ingresses?: ServiceIngress[],
+  ingresses?: ServiceIngress[]
   lastMessage?: string
   lastError?: string
   createdAt?: string
@@ -91,9 +93,18 @@ export type RenderedNode = {
   moduleName: string,
 }
 
-export type RenderedNodeType = "build" | "deploy" | "run" | "test" | "push" | "publish"
+export type RenderedNodeType =
+  | "build"
+  | "deploy"
+  | "run"
+  | "test"
+  | "push"
+  | "publish"
 
-export type RenderedEdge = { dependant: RenderedNode, dependency: RenderedNode }
+export type RenderedEdge = {
+  dependant: RenderedNode,
+  dependency: RenderedNode,
+}
 
 export interface FetchGraphResponse {
   nodes: RenderedNode[],
@@ -127,3 +138,20 @@ export interface WsMessage {
   name: NodeTask | "taskGraphProcessing" | "taskGraphComplete"
   payload: WsPayload
 }
+
+export interface FetchTaskResultResponse {
+  name: string
+  module: string
+  version: string
+  output: string
+  startedAt: Date
+  completedAt: Date
+}
+export interface FetchTestResultResponse {
+  name: string
+  version: string
+  output: string
+  module: string
+  startedAt: Date
+  completedAt: Date
+}

dashboard/src/app.tsx

@@ -21,20 +21,25 @@ import Provider from "./components/provider"
 import { colors } from "./styles/variables"
 import "flexboxgrid/dist/flexboxgrid.min.css"
 import "./styles/padding-margin-mixin.scss"
+import "./styles/custom-flexboxgrid.scss"
+import "./styles/icons.scss"
+
 import { EventProvider } from "./context/events"
 import { DataProvider } from "./context/data"
 import { NavLink } from "./components/links"
 
 import logo from "./assets/logo.png"
-import { ReactComponent as Hamburger } from "./assets/hamburger.svg"
+import { ReactComponent as OpenSidebarIcon } from "./assets/open-pane.svg"
+import { ReactComponent as CloseSidebarIcon } from "./assets/close-pane.svg"
 
 import { UiStateProvider, UiStateContext } from "./context/ui"
 
 // Style and align properly
 const Logo = styled.img`
+  width: 10rem;
   height: auto;
-  width: 100%;
   max-width: 10rem;
+  margin-top: .7rem;
 `
 
 const SidebarWrapper = styled.div`
@@ -43,13 +48,14 @@ const SidebarWrapper = styled.div`
   position: relative;
 `
 const SidebarContainer = styled.div`
-  display: ${props => (props.visible ? `block` : "none")}
-  width: ${props => (props.visible ? `19rem` : "0")}
+  display: ${props => (props.visible ? `block` : "none")};
+  width: ${props => (props.visible ? `12rem` : "0")};
 `
+
 const SidebarToggleButton = styled.div`
   position: absolute;
-  right: -2.5rem;
-  top: 1rem;
+  right: -2.2rem;
+  top: 3rem;
   width: 1.5rem;
   cursor: pointer;
 `
@@ -81,11 +87,16 @@ const App = () => {
         height: 100vh;
         max-height: 100vh;
         overflow-y: hidden;
+        background: ${colors.gardenGrayLighter};
       `}
     >
       <SidebarWrapper>
         <SidebarToggleButton onClick={toggleSidebar}>
-          <Hamburger width="24px" />
+          {isSidebarOpen ? (
+            <CloseSidebarIcon />
+          ) : (
+              <OpenSidebarIcon />
+            )}
         </SidebarToggleButton>
         <SidebarContainer visible={isSidebarOpen}>
           <div className={"ml-1"}>
@@ -111,7 +122,7 @@ const App = () => {
               flex-grow: 1;
             `,
             "pl-3",
-            "pt-4",
+            "pt-2",
             "pr-1",
           )}
         >

dashboard/src/components/card.tsx

@@ -13,13 +13,16 @@ import { colors, fontMedium } from "../styles/variables"
 
 interface CardProps {
   children: JSX.Element
-  title?: string
+  title?: string,
+  backgroundColor?: string
 }
 
 const Wrapper = styled.div`
-  background-color: ${colors.gardenWhite};
+  background-color: ${props => props.backgroundColor || colors.gardenWhite};
   border-radius: 2px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  width: 100%;
+  overflow: hidden;
 `
 
 export const CardTitle = styled.h3`
@@ -28,16 +31,16 @@ export const CardTitle = styled.h3`
   margin: 0;
 `
 
-const Card: React.SFC<CardProps> = ({ children, title }) => {
+const Card: React.SFC<CardProps> = ({ children, title, backgroundColor }) => {
   const titleEl = title
     ? (
-      <div className="pl-1 pr-1 pb-1">
+      <div className="p-1">
         <CardTitle>{title}</CardTitle>
       </div>
     )
     : null
   return (
-    <Wrapper className="pt-1 mb-2">
+    <Wrapper className="mb-2" backgroundColor={backgroundColor}>
       {titleEl}
       {children}
     </Wrapper>

dashboard/src/components/checkbox.tsx

@@ -15,15 +15,10 @@ const Label = styled.label`
   display: block;
   position: relative;
   padding-left: 35px;
-  margin-bottom: 12px;
   cursor: pointer;
   font-size: 1.1rem;
   user-select: none;
-  :hover {
-    input, span {
-      background-color: ${colors.gray};
-    }
-  }
+  margin-bottom: 1rem;
 `
 
 const Input = styled.input`
@@ -39,8 +34,8 @@ const Input = styled.input`
 
 const Checkmark = styled.span`
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 0rem;
+  left: 0rem;
   height: 21px;
   width: 21px;
   border: 1px solid ${colors.gardenGrayLight};
@@ -68,16 +63,15 @@ const CheckmarkChecked = styled(Checkmark)`
 
 interface Props {
   name: string
-  label: string
   checked?: boolean
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
 }
 
-const CheckBox: React.SFC<Props> = ({ name, label, onChange, checked = false }) => {
+const CheckBox: React.SFC<Props> = ({ name, onChange, checked = false, children }) => {
   const Mark = checked ? CheckmarkChecked : Checkmark
   return (
     <Label>
-      {label}
+      {children}
       <Input type={"checkbox"} name={name} checked={checked} onChange={onChange} />
       <Mark />
     </Label>

dashboard/src/components/graph/graph.scss

@@ -23,33 +23,44 @@
     stroke: red;
   }
 
-  text {
-    font-weight: 700;
-    font-size: 1em;
-  }
-
   .node rect {
     fill: #fff;
     stroke: #02f2b4;
     stroke-width: 2.5px;
   }
 
   .edgePath path {
-    stroke: rgba(0,0,0,0.32);
+    stroke: rgba(0, 0, 0, 0.32);
     stroke-width: 1.5px;
   }
 
-  div.label-wrap {
-    text-align: center;
+  .label-container {
+    cursor: pointer;
+  }
+
+  .label-container {
+    cursor: pointer;
+  }
 
-    span.name {
-      font-weight: 700;
-      font-size: 0.9rem;
+  div.node-container {
+    text-align: center;
+    padding: 1rem;
+    background-repeat: no-repeat;
+    background-position: left;
+    background-position-x: -0.5rem;
+    background-size: 4rem;
+    &--run,
+    &--test {
+      cursor: pointer;
     }
-    span.type {
-      display: inline-block;
-      margin-top: 0.5em
+    .type {
+      color: gray;
+      padding-bottom: 0.2rem;
     }
-  }
 
+    .module-name {
+      color: #343434;
+      font-weight: bold;
+    }
+  }
 }