diff --git a/core/test/unit/src/plugins/kubernetes/container/build/buildkit.ts b/core/test/unit/src/plugins/kubernetes/container/build/buildkit.ts index bf77b424e6..da4a0c2463 100644 --- a/core/test/unit/src/plugins/kubernetes/container/build/buildkit.ts +++ b/core/test/unit/src/plugins/kubernetes/container/build/buildkit.ts @@ -1,5 +1,5 @@ /* - * Copyright (C) 2018-2020 Garden Technologies, Inc. + * Copyright (C) 2018-2021 Garden Technologies, Inc. * * 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 diff --git a/dashboard/src/app.tsx b/dashboard/src/app.tsx index 275766f2e6..057b7eebab 100644 --- a/dashboard/src/app.tsx +++ b/dashboard/src/app.tsx @@ -24,6 +24,8 @@ import { InfoBox } from "./components/InfoBox" const AppWrapper = styled.div` display: flex; + flex-direction: row; + flex-wrap: wrap; height: 100vh; max-height: 100vh; overflow-y: hidden; diff --git a/dashboard/src/components/button.tsx b/dashboard/src/components/button.tsx index e1274b59d8..41444166f8 100644 --- a/dashboard/src/components/button.tsx +++ b/dashboard/src/components/button.tsx @@ -12,8 +12,8 @@ import { colors } from "../styles/variables" export const TertiaryButton = styled.button` cursor: pointer; padding: 0; - font-size: 0.8125rem; - line-height: 1.1875rem; + font-size: 0.7rem; + line-height: 1rem; text-align: center; letter-spacing: 0.01em; color: ${colors.buttons.tertiary.default.color}; diff --git a/dashboard/src/components/entity-cards/common.tsx b/dashboard/src/components/entity-cards/common.tsx index 2141497622..710d2426cf 100644 --- a/dashboard/src/components/entity-cards/common.tsx +++ b/dashboard/src/components/entity-cards/common.tsx @@ -18,7 +18,7 @@ export const EntityCardWrap = styled.div` border-radius: 4px; width: 100%; margin-top: 1rem; - padding: 0.75rem; + padding: 0.75rem 0.75rem 0.4rem 0.75rem; &:first-of-type { margin-top: 0; @@ -39,7 +39,8 @@ export const Content = styled.div` width: 100%; position: relative; max-height: 10rem; - padding-top: 0.75rem; + padding-top: 0.4rem; + overflow-y: hidden; &:empty { display: none; } @@ -50,7 +51,7 @@ type StateLabelProps = { } export const StateLabel = styled.div` - padding: 0 0.5rem; + padding: 0 0.4rem; margin-left: auto; background-color: ${(props) => (props && props.state ? colors.state[props.state] : colors.gardenGrayLight)}; display: ${(props) => (props && props.state && colors.state[props.state] ? "flex" : "none")}; @@ -69,15 +70,15 @@ export const Label = styled.div` display: flex; align-items: center; font-weight: 500; - font-size: 10px; - line-height: 10px; + font-size: 9px; + line-height: 9px; text-align: right; letter-spacing: 0.01em; color: #90a0b7; ` const Name = styled.div` - font-size: 0.9375rem; + font-size: 0.875rem; font-weight: 500; color: rgba(0, 0, 0, 0.87); padding-top: 0.125rem; @@ -93,6 +94,9 @@ type FieldWrapProps = { export const FieldWrap = styled.div` display: ${(props) => (props.visible ? `block` : "none")}; + font-size: 0.7rem; + line-height: 1rem; + letter-spacing: 0.01em; animation: fadein 0.5s; @keyframes fadein { from { @@ -121,23 +125,17 @@ type FieldGroupProps = { export const FieldGroup = styled.div` display: ${(props) => (props.visible ? "flex" : "none")}; flex-direction: row; - padding-top: 0.25rem; + padding-top: 0.15rem; ` export const Key = styled.div` padding-right: 0.25rem; - font-size: 0.8125rem; - line-height: 1.1875rem; - letter-spacing: 0.01em; color: #4c5862; opacity: 0.5; ` export const Value = styled.div` padding-right: 0.5rem; - font-size: 0.8125rem; - line-height: 1.1875rem; - letter-spacing: 0.01em; ` interface NameFieldProps { diff --git a/dashboard/src/components/entity-cards/module.tsx b/dashboard/src/components/entity-cards/module.tsx index d0ea35da46..fdbfcab7ab 100644 --- a/dashboard/src/components/entity-cards/module.tsx +++ b/dashboard/src/components/entity-cards/module.tsx @@ -19,14 +19,14 @@ import { Field, Value, FieldWrap, NameField } from "./common" import { useUiState } from "../../hooks" const Wrap = styled.div` - padding: 1.2rem; + padding: 1rem; background: white; box-shadow: 0rem 0.375rem 1.125rem rgba(0, 0, 0, 0.06); border-radius: 0.25rem; margin: 0 1.3rem 1.3rem 0; - min-width: 17.5rem; + min-width: 17rem; flex: 1 1; - max-width: 20rem; + max-width: 18rem; ` type CardWrapProps = { diff --git a/dashboard/src/components/entity-cards/task.tsx b/dashboard/src/components/entity-cards/task.tsx index 59936af0e3..88f17b4dc2 100644 --- a/dashboard/src/components/entity-cards/task.tsx +++ b/dashboard/src/components/entity-cards/task.tsx @@ -59,7 +59,7 @@ export const TaskCard = ({ Show result diff --git a/dashboard/src/components/graph/index.tsx b/dashboard/src/components/graph/index.tsx index b68a54abd8..eff319e615 100644 --- a/dashboard/src/components/graph/index.tsx +++ b/dashboard/src/components/graph/index.tsx @@ -12,9 +12,8 @@ import { Canvas, Node, Edge, MarkerArrow, NodeChildProps } from "reaflow" import React, { useState } from "react" import styled from "@emotion/styled" import { capitalize } from "lodash" -import Card from "../card" import "./graph.scss" -import { colors, fontMedium } from "../../styles/variables" +import { colors } from "../../styles/variables" import Spinner, { SpinnerProps } from "../spinner" import { SelectGraphNode, StackGraphSupportedFilterKeys } from "../../contexts/ui" import { FiltersButton, Filters } from "../group-filter" @@ -47,11 +46,6 @@ const Span = styled.span` margin-left: 1rem; ` -const Status = styled.p` - ${fontMedium} - color: grey; -` - const ProcessSpinner = styled(Spinner)` margin: 16px 0 0 20px; ` @@ -98,9 +92,8 @@ export const StackGraph: React.FC = ({ onFilter, }) => { let spinner: React.ReactNode = null - let graphStatus = "" + if (isProcessing) { - graphStatus = "Processing..." spinner = } @@ -188,83 +181,83 @@ export const StackGraph: React.FC = ({ } return ( - +
-
-
- -
- {graphStatus} - {spinner} -
-
-
+ {spinner} +
+
+ +
-
- {renderNode}} - edge={} - arrow={} - /> -
+
+ {renderNode}} + edge={} + arrow={} + /> +
-
- {Object.entries(taskStates).map(([state, props]) => { - return ( - - - {props.indicator || defaultTaskIndicator}{" "} - - {capitalize(state)} - - ) - })} -
+
+ {Object.entries(taskStates).map(([state, props]) => { + return ( + + + {props.indicator || defaultTaskIndicator}{" "} + + {capitalize(state)} + + ) + })}
- +
) } diff --git a/dashboard/src/components/group-filter.tsx b/dashboard/src/components/group-filter.tsx index 02ffa9b1ca..54003c1477 100644 --- a/dashboard/src/components/group-filter.tsx +++ b/dashboard/src/components/group-filter.tsx @@ -15,11 +15,11 @@ interface FilterProps { } const Filter = styled.li` - padding: 0.5rem; + padding: 0.4rem; border: 1px solid transparent; box-sizing: border-box; - font-size: 13px; - line-height: 19px; + font-size: 12px; + line-height: 13px; display: flex; align-items: center; text-align: center; @@ -28,13 +28,13 @@ const Filter = styled.li` background-color: ${(props) => (props.selected ? colors.gardenGreenDark : "white")}; box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.06); margin-right: 0.25rem; - border-radius: 4px; - height: 2rem; + border-radius: 3px; + height: 24px; transition: background-color 0.2s ease-in-out; &:hover { cursor: pointer; - background-color: ${(props) => (!props.selected ? "white" : colors.gardenPink)}; + background-color: ${(props) => (!props.selected ? "white" : colors.gardenGreenDarker)}; } ` diff --git a/dashboard/src/components/links.tsx b/dashboard/src/components/links.tsx index 234a76b660..13e0c26781 100644 --- a/dashboard/src/components/links.tsx +++ b/dashboard/src/components/links.tsx @@ -6,9 +6,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React from "react" import styled from "@emotion/styled" -import { NavLink as ReactRouterNavLink } from "react-router-dom" import { colors } from "../styles/variables" @@ -21,7 +19,3 @@ export const ExternalLink = styled.a` color: ${colors.gardenPink}; } ` - -export const NavLink = (props) => ( - -) diff --git a/dashboard/src/components/logs.tsx b/dashboard/src/components/logs.tsx index e4b80280af..b6ecb85e4a 100644 --- a/dashboard/src/components/logs.tsx +++ b/dashboard/src/components/logs.tsx @@ -34,12 +34,16 @@ const Header = styled.div` display: flex; justify-content: space-between; align-items: center; + font-size: 0.8rem; ` +const selectFontSize = "0.9rem" + // TODO: Roll our own Select component instead of using react-select, it's an overkill. const selectStyles = { control: (base, state) => ({ ...base, + "fontSize": selectFontSize, "boxShadow": state.isFocused ? `0 0 0 1px ${colors.gardenGrayLight}` : 0, // The box shadow adds width to the border "borderColor": state.isFocused ? colors.gardenGrayLight : base.borderColor, "&:hover": { @@ -49,6 +53,7 @@ const selectStyles = { option: (base, state) => ({ ...base, color: colors.gardenBlack, + fontSize: selectFontSize, backgroundColor: state.isSelected ? colors.gardenGreenDark : state.isFocused @@ -104,7 +109,7 @@ class Logs extends Component { const filteredLogs = value === "all" ? flatten(Object.values(logs)) : logs[value] return ( -
+
+ const A = styled.a(linkStyle) const Link = styled(NavLink)(linkStyle) // Style and align properly const Logo = styled.img` - width: 144px; - height: 60px; + display: inline-block; + height: 42px; + margin-right: 18px; max-width: 9rem; ` -type SidebarContainerProps = { +type MenuContainerProps = { visible: boolean } -const SidebarContainer = styled.div` +const MenuContainer = styled.div` + padding-left: 15px; display: ${(props) => (props.visible ? `block` : "none")}; - width: ${(props) => (props.visible ? `11.5rem` : "0")}; -` - -const SidebarToggleButton = styled.div` - position: absolute; - left: 1.5rem; - bottom: 1.5rem; - width: 1.5rem; - cursor: pointer; - font-size: 1.125rem; + height: ${(props) => (props.visible ? `100%` : "0")}; ` -const Sidebar: React.FC = ({ pages }) => { +const Menu: React.FC = ({ pages }) => { const { - state: { isSidebarOpen }, - actions: { toggleSidebar }, + state: { isMenuOpen }, } = useUiState() return ( <> - - {isSidebarOpen ? : } - - -
+ +
-
- -
- + {pages.map((page) => ( + + ))} + + ) } -interface SidebarButtonProps { +interface MenuButtonProps { page: Page } -const SidebarButton: React.FC = ({ page }) => { +const MenuButton: React.FC = ({ page }) => { let link: React.ReactNode if (page.newWindow && page.url) { link = ( @@ -125,4 +112,4 @@ const SidebarButton: React.FC = ({ page }) => { return } -export default Sidebar +export default Menu diff --git a/dashboard/src/components/page-error.tsx b/dashboard/src/components/page-error.tsx index 4d61827903..ef0bc39764 100644 --- a/dashboard/src/components/page-error.tsx +++ b/dashboard/src/components/page-error.tsx @@ -19,6 +19,16 @@ interface Props { error?: AxiosError | string } +const renderEmoji = (emoji: string, label: string) => { + return ( + <> + + {emoji} + {" "} + + ) +} + // TODO Style me + add prop interface const PageError: React.FC = ({ error }) => { let suggestion =
@@ -33,9 +43,7 @@ const PageError: React.FC = ({ error }) => {

Please look at the terminal logs displayed by the dashboard server for details.

- - 💡 - {" "} + {renderEmoji("💡", "Tip:")} You can get more detailed logs by running the server with --log-level=debug.

@@ -50,17 +58,15 @@ const PageError: React.FC = ({ error }) => {
-

Whoops, something went wrong.

+

Whoops, something went wrong.

{message && (

- - ❌ - {" "} + {renderEmoji("❌", "Error:")} {message}

)} diff --git a/dashboard/src/components/provider.tsx b/dashboard/src/components/provider.tsx index 6688dfabb4..7e3024d70d 100644 --- a/dashboard/src/components/provider.tsx +++ b/dashboard/src/components/provider.tsx @@ -10,6 +10,7 @@ import React, { useState } from "react" import { Frame } from "./frame" import Spinner from "./spinner" import styled from "@emotion/styled" +import { menuHeight } from "../containers/menu" interface ProviderPageProps { url: string @@ -17,10 +18,10 @@ interface ProviderPageProps { } const ProviderPageWrapper = styled.div` - flex: 0 auto; border: 0; width: 100%; - height: 100%; + height: calc(100vh - ${menuHeight}); + padding: 1rem; ` const ProviderPageFrame: React.FC = ({ url, active }) => { diff --git a/dashboard/src/components/spinner.tsx b/dashboard/src/components/spinner.tsx index a80b60fed2..5172148ddc 100644 --- a/dashboard/src/components/spinner.tsx +++ b/dashboard/src/components/spinner.tsx @@ -16,26 +16,30 @@ export interface SpinnerProps { background?: string } +const color = colors.gardenGreenDark +const colorRgba = colors.gardenPinkRgba + // From https://projects.lukehaas.me/css-loaders/ const Spinner = styled("div")` font-size: ${(props) => props.fontSize || "6px"}; margin: 50px auto; text-indent: -9999em; - width: ${(props) => props.size || "4.5rem"}; - height: ${(props) => props.size || "4.5rem"}; + opacity: 0.5; + width: ${(props) => props.size || "4rem"}; + height: ${(props) => props.size || "4rem"}; border-radius: 50%; - background: ${colors.gardenPink}; - background: linear-gradient(to right, ${colors.gardenPink} 10%, ${colors.gardenPinkRgba} 42%); + background: ${color}; + background: linear-gradient(to right, ${color} 10%, ${colorRgba} 42%); position: relative; - -webkit-animation: load3 1.4s infinite linear; - animation: load3 1.4s infinite linear; + -webkit-animation: load3 1.1s infinite linear; + animation: load3 1.1s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); :before { width: 50%; height: 50%; - background: ${colors.gardenPink}; + background: ${color}; border-radius: 100% 0 0 0; position: absolute; top: 0; diff --git a/dashboard/src/components/terminal.tsx b/dashboard/src/components/terminal.tsx index 44768f1f22..17b6b51dcf 100644 --- a/dashboard/src/components/terminal.tsx +++ b/dashboard/src/components/terminal.tsx @@ -23,13 +23,15 @@ interface Props { const Term = styled.div` background-color: ${colors.gardenBlack}; border-radius: 2px; - max-height: calc(100vh - 9rem); + max-height: calc(100vh - 12rem); overflow-y: auto; ` const P = styled.p` color: ${colors.gardenWhite}; - font-size: 0.8rem; + font-size: 0.65rem; + line-height: 0.7rem; + margin: 0.15rem; ` const Service = styled.span` diff --git a/dashboard/src/containers/graph.tsx b/dashboard/src/containers/graph.tsx index db0b102788..2807f59c61 100644 --- a/dashboard/src/containers/graph.tsx +++ b/dashboard/src/containers/graph.tsx @@ -21,9 +21,11 @@ import { GraphOutput } from "@garden-io/core/build/src/commands/get/get-graph" import { loadGraph } from "../api/actions" import { getTestKey } from "../util/helpers" import { useApi, useUiState } from "../hooks" +import { colors } from "../styles/variables" const Wrapper = styled.div` - padding-left: 0.75rem; + width: 100%; + background-color: ${colors.gardenWhite}; ` export interface StackGraphNode extends RenderedNode { diff --git a/dashboard/src/containers/sidebar.tsx b/dashboard/src/containers/menu.tsx similarity index 81% rename from dashboard/src/containers/sidebar.tsx rename to dashboard/src/containers/menu.tsx index cec5410a07..dd829cd934 100644 --- a/dashboard/src/containers/sidebar.tsx +++ b/dashboard/src/containers/menu.tsx @@ -8,10 +8,12 @@ import React from "react" -import Sidebar from "../components/sidebar" +import Menu from "../components/menu" import { useApi } from "../hooks" import { Page } from "../contexts/api" +export const menuHeight = "56px" + const builtinPages: Page[] = [ { name: "overview", @@ -36,14 +38,14 @@ const builtinPages: Page[] = [ }, ] -const SidebarContainer = () => { +const MenuContainer = () => { const { store: { entities: { providerPages }, }, } = useApi() - return + return } -export default SidebarContainer +export default MenuContainer diff --git a/dashboard/src/containers/overview.tsx b/dashboard/src/containers/overview.tsx index 1079b85fbe..f27ad95780 100644 --- a/dashboard/src/containers/overview.tsx +++ b/dashboard/src/containers/overview.tsx @@ -18,9 +18,11 @@ import EntityResult from "./entity-result" import ViewIngress from "../components/view-ingress" import { ServiceEntity, TestEntity, TaskEntity } from "../contexts/api" import { useApi, useUiState } from "../hooks" +import { menuHeight } from "./menu" const Overview = styled.div` - padding-top: 0.5rem; + padding: 1rem 0.5rem; + height: calc(100vh - ${menuHeight}); ` const Modules = styled.div` diff --git a/dashboard/src/containers/routes.tsx b/dashboard/src/containers/routes.tsx index f445ac14f4..f618dd507b 100644 --- a/dashboard/src/containers/routes.tsx +++ b/dashboard/src/containers/routes.tsx @@ -15,7 +15,7 @@ import PageError from "../components/page-error" import Spinner from "../components/spinner" import { initApiStore } from "../api/actions" import ErrorBoundary from "../components/error-boundary" -import Sidebar from "../containers/sidebar" +import Menu, { menuHeight } from "./menu" import { useApi } from "../hooks" import ProviderPageFrame from "../components/provider" @@ -24,19 +24,20 @@ const Logs = React.lazy(() => import("./logs")) const Overview = React.lazy(() => import("./overview")) const RouteWrapper = styled.div` - background-color: ${colors.gardenGrayLighter}; display: flex; - flex-direction: column; + flex-direction: row; flex-grow: 1; + width: 100%; overflow-y: hidden; - padding: 1rem 1rem 1rem 2rem; ` -const SidebarWrapper = styled.div` - height: 100vh; - position: relative; +const MenuWrapper = styled.div` + display: flex; + flex-direction: row; + height: ${menuHeight}; + width: 100%; background: ${colors.gardenWhite}; - box-shadow: 6px 0px 18px rgba(0, 0, 0, 0.06); + box-shadow: 6px 0px 18px rgba(0, 0, 0, 0.04); ` const providerPageShown: { [path: string]: boolean } = {} @@ -99,11 +100,11 @@ export default () => { return ( <> - - - + + + - + {routes} diff --git a/dashboard/src/contexts/ui.tsx b/dashboard/src/contexts/ui.tsx index 289679f45b..a5c07af135 100644 --- a/dashboard/src/contexts/ui.tsx +++ b/dashboard/src/contexts/ui.tsx @@ -13,7 +13,7 @@ import { DependencyGraphNodeType } from "@garden-io/core/build/src/config-graph" import { PickFromUnion } from "@garden-io/core/build/src/util/util" interface UiState { - isSidebarOpen: boolean + isMenuOpen: boolean overview: { selectedIngress: ServiceIngress | null selectedEntity: SelectedEntity | null @@ -58,7 +58,6 @@ export type SelectedEntity = { } interface UiActions { - toggleSidebar: () => void overviewToggleItemsView: (filterKey: OverviewSupportedFilterKeys) => void stackGraphToggleItemsView: (filterKey: StackGraphSupportedFilterKeys) => void selectGraphNode: SelectGraphNode @@ -103,7 +102,7 @@ const INITIAL_UI_STATE: UiState = { visible: false, content: null, }, - isSidebarOpen: true, + isMenuOpen: true, selectedGraphNode: null, } @@ -116,14 +115,6 @@ interface UiStateAndActions { const useUiStateProvider = () => { const [uiState, setState] = useState(INITIAL_UI_STATE) - const toggleSidebar = () => { - setState( - produce(uiState, (draft) => { - draft.isSidebarOpen = !uiState.isSidebarOpen - }) - ) - } - const overviewToggleItemsView = (filterKey: OverviewSupportedFilterKeys) => { setState( produce(uiState, (draft) => { @@ -219,7 +210,6 @@ const useUiStateProvider = () => { return { state: uiState, actions: { - toggleSidebar, overviewToggleItemsView, stackGraphToggleItemsView, selectGraphNode, diff --git a/examples/vote/garden.yml b/examples/vote/garden.yml index ddd671ed64..5beb82459c 100644 --- a/examples/vote/garden.yml +++ b/examples/vote/garden.yml @@ -24,6 +24,7 @@ providers: environments: [testing] context: ${var.remoteContext} buildMode: cluster-buildkit + - name: octant variables: userId: ${local.env.CIRCLE_BUILD_NUM || local.username} remoteContext: gke_garden-dev-200012_europe-west1-b_garden-dev-1