feat(dashboard): implement new overview page

dashboard/package.json

@@ -34,6 +34,7 @@
     "node-sass": "^4.10.0",
     "normalize-url": "^4.3.0",
     "react": "^16.8.6",
+    "react-content-loader": "^4.2.1",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.0",
     "react-select": "^2.3.0",

dashboard/src/app.tsx

@@ -6,9 +6,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { css } from "emotion/macro"
+import { css } from "emotion"
 import React, { useContext } from "react"
-import styled from "@emotion/styled/macro"
+import styled from "@emotion/styled"
 import { Route } from "react-router-dom"
 
 import Graph from "./containers/graph"
@@ -41,18 +41,23 @@ const Logo = styled.img`
 `
 
 const SidebarWrapper = styled.div`
-  border-right: 1px solid ${colors.border}
+  border-right: 1px solid ${colors.border};
   height: 100vh;
   position: relative;
+  background: ${colors.gardenWhite};
 `
-const SidebarContainer = styled.div`
+
+type SidebarContainerProps = {
+  visible: boolean,
+}
+const SidebarContainer = styled.div<SidebarContainerProps>`
   display: ${props => (props.visible ? `block` : "none")};
-  width: ${props => (props.visible ? `10.5rem` : "0")};
+  width: ${props => (props.visible ? `11.5rem` : "0")};
 `
 
 const SidebarToggleButton = styled.div`
   position: absolute;
-  right: -2.2rem;
+  right: -2.3rem;
   top: 2rem;
   width: 1.5rem;
   cursor: pointer;
@@ -112,7 +117,7 @@ const App = () => {
       >
         <div
           className={css`
-            background-color: ${colors.grayLight}
+            background-color: ${colors.gardenGrayLighter};
             flex-grow: 1;
             padding: 1rem 1rem 1rem 3rem;
           `}

dashboard/src/components/RefreshButton.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import styled from "@emotion/styled/macro"
+import styled from "@emotion/styled"
 import React from "react"
 
 import { colors } from "../styles/variables"
@@ -37,7 +37,7 @@ const Icon = styled.i`
 `
 
 const IconLoading = styled(Icon)`
-  animation spin 0.5s infinite linear;
+  animation: spin 0.5s infinite linear;
   @keyframes spin {
     from {
       transform:rotate(0deg);

dashboard/src/components/card.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import styled from "@emotion/styled/macro"
+import styled from "@emotion/styled"
 import React from "react"
 
 import { colors, fontMedium } from "../styles/variables"
@@ -17,7 +17,11 @@ interface CardProps {
   backgroundColor?: string
 }
 
-const Wrapper = styled.div`
+type WrapperProps = {
+  backgroundColor?: string,
+}
+
+const Wrapper = styled.div<WrapperProps>`
   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);

dashboard/src/components/checkbox.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import styled from "@emotion/styled/macro"
+import styled from "@emotion/styled"
 import React, { ChangeEvent } from "react"
 
 import { colors } from "../styles/variables"
@@ -18,7 +18,7 @@ const Label = styled.label`
   cursor: pointer;
   font-size: 1rem;
   user-select: none;
-  margin-bottom: 0.75rem;
+  margin-bottom: .75rem;
   height: 1rem;
   line-height: 1rem;
 `

dashboard/src/components/graph/index.tsx

@@ -7,7 +7,7 @@
  */
 
 import cls from "classnames"
-import { css } from "emotion/macro"
+import { css } from "emotion"
 import React, { Component, ChangeEvent } from "react"
 import styled from "@emotion/styled"
 import { capitalize, uniq } from "lodash"
@@ -232,7 +232,7 @@ const Span = styled.span`
 
 const Status = styled.p`
   ${fontMedium}
-  colors: grey;
+  color: grey;
 `
 
 const ProcessSpinner = styled<any, SpinnerProps>(Spinner)`

dashboard/src/components/header.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import styled from "@emotion/styled/macro"
+import styled from "@emotion/styled"
 import React from "react"
 
 import { H2 } from "./text"

dashboard/src/components/info-pane.tsx

@@ -9,22 +9,13 @@
 import React from "react"
 import cls from "classnames"
 import { capitalize } from "lodash"
-import { css } from "emotion/macro"
-import styled from "@emotion/styled/macro"
+import { css } from "emotion"
+import styled from "@emotion/styled"
 import Card from "../components/card"
 import { colors } from "../styles/variables"
 import { RenderedNode } from "garden-cli/src/config-graph"
 import { RefreshButton } from "./RefreshButton"
-
-export const ErrorTxt = styled.div`
-  color: #721c24;
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
-  position: relative;
-  padding: 0.75rem 1.25rem;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
-`
+import { ErrorNotification } from "./notifications"
 
 const Term = styled.div`
   background-color: ${colors.gardenBlack};
@@ -35,7 +26,7 @@ const Term = styled.div`
   padding: 1rem;
 `
 const Code = styled.code`
-  font-size: 0.8rem;
+  font-size: .8rem;
   white-space: pre-wrap;
 `
 
@@ -103,7 +94,7 @@ export const InfoPane: React.FC<Props> = ({
     )
   } else if (output === null) {
     // Output explictly set to null means that the data was  fetched but the result was empty
-    outputEl = <ErrorTxt>No test output</ErrorTxt>
+    outputEl = <ErrorNotification>No test output</ErrorNotification>
   }
 
   return (
@@ -115,7 +106,7 @@ export const InfoPane: React.FC<Props> = ({
           </div>
           <div
             className={css`
-              padding-left: 0.5rem;
+              padding-left: .5rem;
             `}
           >
             <h2

dashboard/src/components/ingresses.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2018 Garden Technologies, Inc. <[email protected]>
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import React from "react"
+import styled from "@emotion/styled"
+import { ExternalLink } from "./links"
+import { ServiceIngress } from "garden-cli/src/types/service"
+import { truncateMiddle } from "../util/helpers"
+import normalizeUrl from "normalize-url"
+import { format } from "url"
+
+const Ingresses = styled.div`
+  font-size: 1rem;
+  line-height: 1.4rem;
+  color: #4f4f4f;
+  height: 5rem;
+  overflow: hidden;
+  overflow-y: auto;
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  }
+`
+const LinkContainer = styled.div`
+  padding-bottom: 1rem;
+  font-size: .75rem;
+
+  &:last-of-type {
+    padding-bottom: 0;
+  }
+`
+
+const NoIngresses = styled.div`
+  font-style: italic;
+  font-size: .75rem;
+`
+
+const getIngressUrl = (ingress: ServiceIngress) => {
+  return normalizeUrl(format({
+    protocol: ingress.protocol,
+    hostname: ingress.hostname,
+    port: ingress.port,
+    pathname: ingress.path,
+  }))
+}
+
+interface IngressesProp {
+  ingresses: ServiceIngress[] | undefined
+}
+
+export default ({ ingresses }: IngressesProp) => {
+  return (
+    <Ingresses>
+      {ingresses && ingresses.map(i => {
+        const url = getIngressUrl(i)
+        return <LinkContainer key={i.path}>
+          <ExternalLink href={url} target="_blank">
+            {truncateMiddle(url)}
+          </ExternalLink>
+          <br />
+        </LinkContainer>
+      })}
+      {(!ingresses || !ingresses.length) &&
+        <NoIngresses>
+          No ingresses found
+        </NoIngresses>}
+    </Ingresses>
+  )
+}

dashboard/src/components/links.tsx

@@ -7,15 +7,15 @@
  */
 
 import React from "react"
-import styled from "@emotion/styled/macro"
+import styled from "@emotion/styled"
 import { NavLink as ReactRouterNavLink } from "react-router-dom"
 
 import { colors } from "../styles/variables"
 
 export const ExternalLink = styled.a`
   text-decoration: underline;
   &:visited {
-    color: ${colors.gardenGreen}
+    color: ${colors.gardenGreenDark}
   }
   &:hover {
     color: ${colors.gardenPink}

dashboard/src/components/logs.tsx

@@ -7,8 +7,8 @@
  */
 
 import cls from "classnames"
-import { css } from "emotion/macro"
-import styled from "@emotion/styled/macro"
+import { css } from "emotion"
+import styled from "@emotion/styled"
 import { max } from "lodash"
 import React, { Component } from "react"
 import Select from "react-select"

dashboard/src/components/module.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2018 Garden Technologies, Inc. <[email protected]>
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import React from "react"
+import styled from "@emotion/styled"
+import { ServiceModel, ModuleModel } from "../containers/overview"
+import Service from "./service"
+
+const Module = styled.div`
+  padding: 0rem 2rem 1rem 0rem;
+`
+
+const Services = styled.div`
+  border-top: solid #bcbcbc 1px;
+  padding-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: middle;
+`
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const Label = styled.div`
+  font-size: .75rem;
+  display: flex;
+  align-items: center;
+  color: #bcbcbc;
+`
+const Name = styled.div`
+  padding-right: .5rem;
+`
+
+interface ModuleProp {
+  module: ModuleModel
+}
+export default ({
+  module: { services = [], name },
+}: ModuleProp) => {
+
+  return (
+    <Module key={name}>
+      <Header>
+        <Name>{name}</Name>
+        <Label>MODULE</Label>
+
+      </Header>
+      <Services>
+        {services.map(service => (
+          <Service key={service.name} service={service as ServiceModel} />
+        ))}
+      </Services>
+    </Module>
+  )
+}