Skip to content

Commit

Permalink
improvement(dashboard): add dependencies to each entity card
Browse files Browse the repository at this point in the history
  • Loading branch information
@benstov
benstov committed Jun 5, 2019
1 parent dd87372 commit 8b0a430
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 48 deletions.
14 changes: 8 additions & 6 deletions dashboard/src/components/info-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { colors } from "../styles/variables"
import { Facebook } from "react-content-loader"

interface InfoCardProps {
type: InfoCardType
type: EntityType
}
const InfoCard = styled.div<InfoCardProps>`
max-height: 13rem;
Expand Down Expand Up @@ -91,9 +91,9 @@ const Row = styled.div`
display: flex;
align-items: center;
`
type InfoCardType = "service" | "test" | "task"
type EntityType = "service" | "test" | "task"
interface Props {
type: InfoCardType
type: EntityType
children: ReactNode
entity: Entity
}
Expand All @@ -110,9 +110,11 @@ export default ({
<Tag>{type.toUpperCase()}</Tag>
<Row>
<Name>{name}</Name>
<State state={state}>
{state}
</State>
{state && (
<State state={state}>
{state}
</State>
)}
</Row>
</Header>
<Content>
Expand Down
82 changes: 51 additions & 31 deletions dashboard/src/components/module.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ const Module = styled.div`
border-radius: 4px;
margin: 0 1.3rem 1.3rem 0;
min-width: 17rem;
flex: 1 1;
max-width: 20rem;
flex: 1 1;
max-width: 20rem;
`

type InfoCardsProps = {
Expand Down Expand Up @@ -57,11 +57,11 @@ type FieldsProps = {
}
const Fields = styled.div<FieldsProps>`
display: ${props => (props.visible ? `block` : "none")};
animation: fadein .5s ;
animation: fadein .5s ;
&:first-of-type{
padding-top:0;
}
&:first-of-type{
padding-top:0;
}
@keyframes fadein {
from {
opacity: 0;
Expand All @@ -72,7 +72,11 @@ const Fields = styled.div<FieldsProps>`
}
`

const Field = styled.div`
type FieldProps = {
inline?: boolean,
}
const Field = styled.div<FieldProps>`
display: ${props => (props.inline ? "inline" : "block")};
padding-bottom: .5rem;
&:last-of-type{
Expand All @@ -96,15 +100,15 @@ const Name = styled.div`
color: #323C47;
`

const Key = styled.div`
padding-right: .5rem;
const Key = styled.span`
padding-right: .25rem;
font-size: 13px;
line-height: 19px;
letter-spacing: 0.01em;
color: #4C5862;
opacity: 0.5;
`
const Value = styled.div`
const Value = styled.span`
padding-right: .5rem;
font-size: 13px;
line-height: 19px;
Expand Down Expand Up @@ -179,6 +183,12 @@ export default ({
type={"service"}
>
<Fields visible={filters.servicesInfo}>
{service.dependencies.length > 0 && (
<Field>
<Key>Depends on:</Key>
<Value>{service.dependencies.join(", ")}</Value>
</Field>
)}
<Field>
<Ingresses ingresses={service.ingresses} />
</Field>
Expand All @@ -193,20 +203,26 @@ export default ({
entity={test}
type={"test"}
>
{filters.testsInfo &&
<div className="row between-xs">
<div className="col-xs">
<Key>Last run</Key>
<Fields visible={filters.testsInfo}>
{test.dependencies.length > 0 && (
<Field>
<Key>Depends on:</Key>
<Value>{test.dependencies.join(", ")}</Value>
</Field>
)}
<div className="row between-xs" >
<Field className="col-xs" inline>
<Key>Ran:</Key>
<Value>{moment(test.startedAt).fromNow()}</Value>
</div>
</Field>
{test.state === "succeeded" &&
<div>
<Key>Duration</Key>
<Field inline>
<Key>Took:</Key>
<Value>{test.duration}</Value>
</div>
</Field>
}
</div>
}
</Fields>
</InfoCard>
))}
</InfoCards>
Expand All @@ -217,22 +233,26 @@ export default ({
entity={task}
type={"task"}
>
{filters.tasksInfo &&
<div className="row between-xs">
{task.startedAt && (
<div className="col-xs">
<Key>Last run</Key>
<Value>{moment(task.startedAt).fromNow()}</Value>
</div>
)}
<Fields visible={filters.tasksInfo}>
{task.dependencies.length && (
<Field>
<Key>Depends on:</Key>
<Value>{task.dependencies.join(", ")}</Value>
</Field>
)}
<div className="row between-xs" >
<Field className="col-xs" inline>
<Key>Ran:</Key>
<Value>{moment(task.startedAt).fromNow()}</Value>
</Field>
{task.state === "succeeded" &&
<div>
<Key>Duration</Key>
<Field inline>
<Key>Took:</Key>
<Value>{task.duration}</Value>
</div>
</Field>
}
</div>
}
</Fields>
</InfoCard>
))}
</InfoCards>
Expand Down
25 changes: 14 additions & 11 deletions dashboard/src/containers/overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,24 +49,25 @@ export type ModuleModel = {
}
export type Entity = {
name: string;
state?: ServiceState | RunState;
isLoading: boolean;
state: ServiceState | RunState;
dependencies: string[];
}
export interface Service extends Entity {
state: ServiceState
state?: ServiceState
ingresses?: ServiceIngress[]
}
export interface Test extends Entity {
startedAt?: Date
completedAt?: Date
duration?: string
state: RunState
state?: RunState
}
export interface Task extends Entity {
startedAt?: Date
completedAt?: Date
duration?: string
state: RunState
state?: RunState
}

// Note: We render the overview page components individually so we that we don't
Expand Down Expand Up @@ -103,15 +104,18 @@ export default () => {
services: moduleConfig.serviceConfigs.map(service => ({
name: service.name,
isLoading: true,
})) as Service[],
dependencies: service.dependencies,
})),
tests: moduleConfig.testConfigs.map(test => ({
name: test.name,
isLoading: true,
})) as Test[],
dependencies: test.dependencies,
})),
tasks: moduleConfig.taskConfigs.map(task => ({
name: task.name,
isLoading: true,
})) as Task[],
dependencies: task.dependencies,
})),
}))

// fill missing data from status
Expand All @@ -126,7 +130,7 @@ export default () => {
if (index !== -1) {
currModule.services[index] = {
...currModule.services[index],
state: servicesStatus[serviceName].state || "unknown",
state: servicesStatus[serviceName].state,
ingresses: servicesStatus[serviceName].ingresses,
isLoading: false,
}
Expand All @@ -140,7 +144,7 @@ export default () => {
const testStatus = testsStatus[testName]
currModule.tests[index] = {
...currModule.tests[index],
state: testStatus.state || "outdated",
state: testStatus.state,
isLoading: false,
startedAt: testStatus.startedAt,
completedAt: testStatus.completedAt,
Expand All @@ -158,7 +162,7 @@ export default () => {
const taskStatus = tasksStatus[taskName]
currModule.tasks[index] = {
...currModule.tasks[index],
state: taskStatus.state || "outdated",
state: taskStatus.state,
isLoading: false,
startedAt: taskStatus.startedAt,
completedAt: taskStatus.completedAt,
Expand Down Expand Up @@ -188,7 +192,6 @@ export default () => {
}
</div>
}

</div>
</Overview >
)
Expand Down

0 comments on commit 8b0a430

Please sign in to comment.