improvement(dashboard): add task and test info pane to overview page

dashboard/src/components/button.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 styled from "@emotion/styled"
+import { colors } from "../styles/variables"
+
+export const TertiaryButton = styled.button`
+    cursor: pointer;
+    padding: 0;
+    font-size: 0.8125rem;
+    line-height: 1.1875rem;
+    text-align: center;
+    letter-spacing: 0.01em;
+    color: ${colors.buttons.tertiary.default.color};
+    background: none;
+
+    &:hover {
+       color: ${colors.buttons.tertiary.hover.color};
+    }
+    &:active{
+       color: ${colors.buttons.tertiary.pressed.color};
+    }
+  `

dashboard/src/components/info-card.tsx → dashboard/src/components/entity-card.tsx

@@ -12,10 +12,10 @@ import { Entity } from "../containers/overview"
 import { colors } from "../styles/variables"
 import { Facebook } from "react-content-loader"
 
-interface InfoCardProps {
+interface EntityCardProps {
   type: EntityType
 }
-const InfoCard = styled.div<InfoCardProps>`
+const EntityCard = styled.div<EntityCardProps>`
   max-height: 13rem;
   background-color: ${props => (props && props.type && colors.cardTypes[props.type] || "white")};
   margin-right: 1rem;
@@ -105,7 +105,7 @@ export default ({
 }: Props) => {
 
   return (
-    <InfoCard type={type}>
+    <EntityCard type={type}>
       <Header>
         <Tag>{type.toUpperCase()}</Tag>
         <Row>
@@ -123,6 +123,6 @@ export default ({
         )}
         {!isLoading && children}
       </Content>
-    </InfoCard>
+    </EntityCard>
   )
 }

dashboard/src/components/info-pane.tsx → dashboard/src/components/entity-result.tsx

@@ -12,11 +12,11 @@ import { capitalize } from "lodash"
 import { css } from "emotion"
 import moment from "moment"
 import styled from "@emotion/styled"
-import Card from "../components/card"
+import Card from "./card"
 import { colors } from "../styles/variables"
-import { RenderedNode } from "garden-cli/src/config-graph"
 import { WarningNotification } from "./notifications"
 import { ActionIcon } from "./ActionIcon"
+import { EntityResultSupportedTypes } from "../context/ui"
 
 const Term = styled.div`
   background-color: ${colors.gardenBlack};
@@ -100,28 +100,31 @@ const Header = styled.div`
 `
 
 interface Props {
-  node: RenderedNode
-  clearGraphNodeSelection: () => void
-  onRefresh?: () => void
-  loading?: boolean
+  type: EntityResultSupportedTypes
+  name: string
+  moduleName: string
   output?: string | null
   startedAt?: Date | null
   completedAt?: Date | null
   duration?: string | null
+  onClose: () => void
+  onRefresh?: () => void
+  loading?: boolean
 }
 
 // TODO: Split up into something InfoPane and InfoPaneWithResults. Props are kind of messy.
-export const InfoPane: React.FC<Props> = ({
-  clearGraphNodeSelection,
-  loading,
-  onRefresh,
-  node,
+export default ({
+  type,
+  name,
+  moduleName,
   output,
   startedAt,
   completedAt,
   duration,
-}) => {
-  const { name, moduleName, type } = node
+  onClose,
+  onRefresh,
+  loading,
+}: Props) => {
   let outputEl: React.ReactNode = null
 
   if (output) {
@@ -175,7 +178,7 @@ export const InfoPane: React.FC<Props> = ({
             {onRefresh && (
               <ActionIcon onClick={onRefresh} inProgress={loading || false} iconClassName="redo-alt" />
             )}
-            <ActionIcon onClick={clearGraphNodeSelection} iconClassName="window-close" />
+            <ActionIcon onClick={onClose} iconClassName="window-close" />
           </ClosePaneContainer>
         </div>
 
@@ -211,8 +214,8 @@ export const InfoPane: React.FC<Props> = ({
             <Value>{moment(completedAt).fromNow()}</Value>
           </Field>
         )}
-
-        {(type === "test" || type === "run") && outputEl !== null && outputEl}
+        {/* we only show the output if has content and only for these types */}
+        {(type === "test" || type === "run" || type === "task") && outputEl !== null && outputEl}
       </div>
     </Card>
   )

dashboard/src/components/module.tsx

@@ -8,11 +8,12 @@
 
 import React, { useState, useContext } from "react"
 import styled from "@emotion/styled"
+import moment from "moment"
 import { ModuleModel } from "../containers/overview"
-import InfoCard from "./info-card"
+import EntityCard from "./entity-card"
 import { UiStateContext } from "../context/ui"
 import Ingresses from "./ingresses"
-import moment from "moment"
+import { TertiaryButton } from "./button"
 
 const Module = styled.div`
   padding: 1.2rem;
@@ -25,10 +26,10 @@ const Module = styled.div`
   max-width: 20rem;
 `
 
-type InfoCardsProps = {
+type EntityCardsProps = {
   visible: boolean,
 }
-const InfoCards = styled.div<InfoCardsProps>`
+const EntityCards = styled.div<EntityCardsProps>`
   padding-top: .75rem;
   display: flex;
   flex-wrap: wrap;
@@ -152,11 +153,32 @@ export default ({
 }: ModuleProp) => {
   const {
     state: { overview: { filters } },
+    actions: { selectEntity },
   } = useContext(UiStateContext)
 
   const [showFullDescription, setDescriptionState] = useState(false)
   const toggleDescriptionState = () => (setDescriptionState(!showFullDescription))
 
+  const handleSelectEntity = (
+    {
+      moduleName,
+      entityName,
+      entityType,
+    }:
+      {
+        moduleName: string,
+        entityName: string,
+        entityType: "test" | "task",
+      }) => {
+    if (moduleName && entityName && entityType) {
+      selectEntity({
+        type: entityType,
+        name: entityName,
+        module: moduleName,
+      })
+    }
+  }
+
   return (
     <Module>
       <Header>
@@ -174,9 +196,9 @@ export default ({
           </Description>
         )}
       </Fields>
-      <InfoCards visible={filters.services && !!services.length}>
+      <EntityCards visible={filters.services && !!services.length}>
         {services.map(service => (
-          <InfoCard
+          <EntityCard
             key={service.name}
             entity={service}
             type={"service"}
@@ -192,12 +214,12 @@ export default ({
                 <Ingresses ingresses={service.ingresses} />
               </Field>
             </Fields>
-          </InfoCard>
+          </EntityCard>
         ))}
-      </InfoCards>
-      <InfoCards visible={filters.tests && !!tests.length}>
+      </EntityCards>
+      <EntityCards visible={filters.tests && !!tests.length}>
         {tests.map(test => (
-          <InfoCard
+          <EntityCard
             key={test.name}
             entity={test}
             type={"test"}
@@ -221,13 +243,23 @@ export default ({
                   </Field>
                 }
               </div>
+              <div className="row">
+                <div className="col-xs">
+                  <ShowResultButton
+                    entityType="test"
+                    moduleName={name}
+                    entityName={test.name}
+                    onClick={handleSelectEntity}
+                  />
+                </div>
+              </div>
             </Fields>
-          </InfoCard>
+          </EntityCard>
         ))}
-      </InfoCards>
-      <InfoCards visible={filters.tasks && !!tasks.length}>
+      </EntityCards>
+      <EntityCards visible={filters.tasks && !!tasks.length}>
         {tasks.map(task => (
-          <InfoCard
+          <EntityCard
             key={task.name}
             entity={task}
             type={"task"}
@@ -251,11 +283,39 @@ export default ({
                   </Field>
                 }
               </div>
+              <div className="row">
+                <div className="col-xs">
+                  <ShowResultButton
+                    entityType="task"
+                    moduleName={name}
+                    entityName={task.name}
+                    onClick={handleSelectEntity}
+                  />
+                </div>
+              </div>
             </Fields>
-          </InfoCard>
+          </EntityCard>
         ))}
-      </InfoCards>
-
+      </EntityCards>
     </Module>
   )
 }
+
+const ShowResultButton = ({
+  entityName,
+  entityType,
+  moduleName,
+  onClick,
+}: {
+  entityName: string,
+  entityType: "test" | "task",
+  moduleName: string,
+  onClick,
+}) => {
+  const handleClick = () => onClick({ entityName, moduleName, entityType })
+  return (
+    <TertiaryButton onClick={handleClick}>
+      Show result
+    </TertiaryButton>
+  )
+}