Skip to content

Commit

Permalink
Merge pull request #897 from traPtitech/dashboard/refactor-app-info
Browse files Browse the repository at this point in the history 
Dashboard/refactor app info
  • Loading branch information
@motoki317
motoki317 authored Apr 17, 2024
2 parents 84bd6c4 + e626ac1 commit dac8593
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 107 deletions.
15 changes: 9 additions & 6 deletions dashboard/src/components/UI/JumpButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { styled } from '@macaron-css/solid'
import { A } from '@solidjs/router'
import type { VoidComponent } from 'solid-js'
import { ToolTip } from '/@/components/UI/ToolTip'
import { colorVars } from '/@/theme'
import { MaterialSymbols } from './MaterialSymbols'

Expand Down Expand Up @@ -35,12 +36,14 @@ const JumpButtonContainer = styled('div', {
},
},
})
const JumpButton: VoidComponent<{ href: string }> = (props) => (
<A href={props.href}>
<JumpButtonContainer>
<MaterialSymbols opticalSize={20}>arrow_outward</MaterialSymbols>
</JumpButtonContainer>
</A>
const JumpButton: VoidComponent<{ href: string; tooltip?: string }> = (props) => (
<ToolTip props={{ content: props.tooltip }} disabled={!props.tooltip}>
<A href={props.href}>
<JumpButtonContainer>
<MaterialSymbols opticalSize={20}>arrow_outward</MaterialSymbols>
</JumpButtonContainer>
</A>
</ToolTip>
)

export default JumpButton
1 change: 0 additions & 1 deletion dashboard/src/components/templates/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ const Titles = styled('div', {
})
const Title = styled('h1', {
base: {
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
Expand Down
108 changes: 48 additions & 60 deletions ...components/templates/app/AppInfoLists.tsx → ...nts/templates/app/AppBranchResolution.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,31 @@ import { type Component, For, Show } from 'solid-js'
import { type Application, DeployType } from '/@/api/neoshowcase/protobuf/gateway_pb'
import { Button } from '/@/components/UI/Button'
import Code from '/@/components/UI/Code'
import JumpButton from '/@/components/UI/JumpButton'
import { ToolTip } from '/@/components/UI/ToolTip'
import { List } from '/@/components/templates/List'
import { type CommitsMap, systemInfo } from '/@/libs/api'
import { ApplicationState, deploymentState } from '/@/libs/application'
import { diffHuman, shortSha } from '/@/libs/format'
import { colorVars, textVars } from '/@/theme'
import { List } from '../List'

const DataRow = styled('div', {
const DataRows = styled('div', {
base: {
width: '100%',
display: 'flex',
flexDirection: 'row',
flexDirection: 'column',
alignContent: 'left',
gap: '4px',
alignItems: 'center',
},
})

const DataRows = styled('div', {
const DataRow = styled('div', {
base: {
width: '100%',
display: 'flex',
flexDirection: 'column',
alignContent: 'left',
flexDirection: 'row',
gap: '4px',
alignItems: 'center',
},
})

Expand All @@ -34,43 +38,54 @@ const greyText = style({
...textVars.caption.regular,
})

const AppInfoLists: Component<{
const noOverflow = style({
overflowX: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
})

const shrinkFirst = style({
flexShrink: 0,
flexGrow: 1,
flexBasis: 0,
minWidth: 0,
})

const AppBranchResolution: Component<{
app: Application
commits?: CommitsMap
refreshCommit: () => void
disableRefreshCommit: boolean
hasPermission: boolean
}> = (props) => {
const sshAccessCommand = () => `ssh -p ${systemInfo()?.ssh?.port} ${props.app.id}@${systemInfo()?.ssh?.host}`

const commit = () => props.commits?.[props.app.commit]
const commitDisplay = () => {
const c = commit()
const base = (
<DataRow>
<AiOutlineBranches />
<div>{`${props.app.refName} → ${shortSha(props.app.commit)}`}</div>
</DataRow>
)
if (!c || !c.commitDate) {
return (
<DataRow>
<AiOutlineBranches />
<div>{`${props.app.refName} (${shortSha(props.app.commit)})`}</div>
</DataRow>
)
return base
}

const { diff, localeString } = diffHuman(c.commitDate.toDate())
return (
<DataRows>
<DataRow>
<AiOutlineBranches />
<div>{props.app.refName}</div>
</DataRow>
<For each={c.message.split('\n')}>{(line) => <div>{line}</div>}</For>
<div class={greyText}>
{c.authorName}
<span>, </span>
<ToolTip props={{ content: localeString }}>
<span>{diff}</span>
</ToolTip>
<span>, </span>
{shortSha(c.hash)}
{base}
<div>
<For each={c.message.split('\n')}>{(line) => <div class={noOverflow}>{line}</div>}</For>
<div class={greyText}>
{c.authorName}
<span>, </span>
<ToolTip props={{ content: localeString }}>
<span>{diff}</span>
</ToolTip>
<span>, </span>
{shortSha(c.hash)}
</div>
</div>
</DataRows>
)
Expand All @@ -79,26 +94,8 @@ const AppInfoLists: Component<{
return (
<>
<List.Container>
<Show when={props.app.createdAt}>
{(nonNullCreatedAt) => {
const { diff, localeString } = diffHuman(nonNullCreatedAt().toDate())
return (
<List.Row>
<List.RowContent>
<List.RowTitle>作成日</List.RowTitle>
<ToolTip props={{ content: localeString }}>
<List.RowData>{diff}</List.RowData>
</ToolTip>
</List.RowContent>
</List.Row>
)
}}
</Show>
<List.Row>
<List.RowContent>
<List.RowTitle>Branch (Commit)</List.RowTitle>
<List.RowData>{commitDisplay()}</List.RowData>
</List.RowContent>
<List.RowContent class={shrinkFirst}>{commitDisplay()}</List.RowContent>
<Show when={props.hasPermission}>
<Button
variants="ghost"
Expand All @@ -120,20 +117,11 @@ const AppInfoLists: Component<{
Refresh Commit
</Button>
</Show>
<JumpButton href={`/apps/${props.app.id}/settings`} tooltip="設定を変更" />
</List.Row>
<Show when={props.app.deployType === DeployType.RUNTIME}>
<List.Row>
<List.RowContent>
<List.RowTitle>SSH Access</List.RowTitle>
<Code value={sshAccessCommand()} copyable />
<Show when={deploymentState(props.app) !== ApplicationState.Running}>
<List.RowData>現在アプリが起動していないためSSHアクセスはできません</List.RowData>
</Show>
</List.RowContent>
</List.Row>
</Show>
</List.Container>
</>
)
}
export default AppInfoLists

export default AppBranchResolution
48 changes: 23 additions & 25 deletions dashboard/src/components/templates/app/AppDeployInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import toast from 'solid-toast'
import { type Application, type Build, DeployType, type Repository } from '/@/api/neoshowcase/protobuf/gateway_pb'
import Badge from '/@/components/UI/Badge'
import { Button } from '/@/components/UI/Button'
import Code from '/@/components/UI/Code'
import JumpButton from '/@/components/UI/JumpButton'
import { ToolTip } from '/@/components/UI/ToolTip'
import { URLText } from '/@/components/UI/URLText'
import { client, handleAPIError } from '/@/libs/api'
import { deploymentState, getWebsiteURL } from '/@/libs/application'
import { client, handleAPIError, systemInfo } from '/@/libs/api'
import { ApplicationState, deploymentState, getWebsiteURL } from '/@/libs/application'
import { titleCase } from '/@/libs/casing'
import { colorOverlay } from '/@/libs/colorOverlay'
import { diffHuman, shortSha } from '/@/libs/format'
Expand Down Expand Up @@ -215,6 +216,8 @@ const AppDeployInfo: Component<{
)
}

const sshAccessCommand = () => `ssh -p ${systemInfo()?.ssh?.port} ${props.app.id}@${systemInfo()?.ssh?.host}`

return (
<DeploymentContainer>
<AppStateContainer variant={deploymentState(props.app)}>
Expand All @@ -235,29 +238,21 @@ const AppDeployInfo: Component<{
</Show>
</AppStateContainer>
<InfoContainer>
<DeployInfo>
<List.RowContent>
<List.RowTitle>起動時刻</List.RowTitle>
<Show when={props.app.updatedAt}>
{(nonNullUpdatedAt) => {
const { diff, localeString } = diffHuman(nonNullUpdatedAt().toDate())

return (
<ToolTip props={{ content: localeString }}>
<List.RowData>{diff}</List.RowData>
</ToolTip>
)
}}
</Show>
</List.RowContent>
</DeployInfo>
<DeployInfo>
<DeployInfo long={props.app.containerMessage === ''}>
<List.RowContent>
<List.RowTitle>Deploy Type</List.RowTitle>
<List.RowData>{titleCase(DeployType[props.app.deployType])}</List.RowData>
</List.RowContent>
<JumpButton href={`/apps/${props.app.id}/settings/build`} />
<JumpButton href={`/apps/${props.app.id}/settings/build`} tooltip="設定を変更" />
</DeployInfo>
<Show when={props.app.containerMessage !== ''}>
<DeployInfo>
<List.RowContent>
<List.RowTitle>Container Status</List.RowTitle>
<List.RowData>{props.app.containerMessage}</List.RowData>
</List.RowContent>
</DeployInfo>
</Show>
<DeployInfo long>
<List.RowContent class={shrinkFirst}>
<List.RowTitle>Source Commit</List.RowTitle>
Expand All @@ -271,7 +266,7 @@ const AppDeployInfo: Component<{
</List.RowData>
</List.RowContent>
<Show when={props.deployedBuild}>
<JumpButton href={`/apps/${props.app.id}/builds/${props.deployedBuild?.id}`} />
<JumpButton href={`/apps/${props.app.id}/builds/${props.deployedBuild?.id}`} tooltip="ビルドの詳細" />
</Show>
</DeployInfo>
<DeployInfo long>
Expand All @@ -288,13 +283,16 @@ const AppDeployInfo: Component<{
)}
</For>
</List.RowContent>
<JumpButton href={`/apps/${props.app.id}/settings/urls`} />
<JumpButton href={`/apps/${props.app.id}/settings/urls`} tooltip="設定を変更" />
</DeployInfo>
<Show when={props.app.containerMessage !== ''}>
<Show when={props.app.deployType === DeployType.RUNTIME}>
<DeployInfo long>
<List.RowContent>
<List.RowTitle>Container Status</List.RowTitle>
<List.RowData>{props.app.containerMessage}</List.RowData>
<List.RowTitle>SSH Access</List.RowTitle>
<Code value={sshAccessCommand()} copyable />
<Show when={deploymentState(props.app) !== ApplicationState.Running}>
<List.RowData>現在アプリが起動していないためSSHアクセスはできません</List.RowData>
</Show>
</List.RowContent>
</DeployInfo>
</Show>
Expand Down
50 changes: 48 additions & 2 deletions dashboard/src/components/templates/app/AppNav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import { style } from '@macaron-css/core'
import { styled } from '@macaron-css/solid'
import { A } from '@solidjs/router'
import type { Component } from 'solid-js'
import { BiRegularPencil } from 'solid-icons/bi'
import { type Component, Show } from 'solid-js'
import type { Application, Repository } from '/@/api/neoshowcase/protobuf/gateway_pb'
import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
import { ToolTip } from '/@/components/UI/ToolTip'
import { originToIcon, repositoryURLToOrigin } from '/@/libs/application'
import { diffHuman } from '/@/libs/format'
import { colorVars, textVars } from '/@/theme'
import { Nav } from '../Nav'

Expand All @@ -21,6 +25,7 @@ const RepositoryInfoContainer = styled('div', {
...textVars.text.regular,
},
})

const RepositoryInfo = styled('div', {
base: {
width: '100%',
Expand All @@ -31,6 +36,7 @@ const RepositoryInfo = styled('div', {
overflowX: 'hidden',
},
})

const RepositoryName = styled('div', {
base: {
width: '100%',
Expand All @@ -40,12 +46,52 @@ const RepositoryName = styled('div', {
},
})

const rowFlex = style({
display: 'flex',
flexDirection: 'row',
gap: '4px',
})

const rightFit = style({
width: 'fit-content',
marginLeft: 'auto',
textAlign: 'right',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
})

const center = style({
display: 'flex',
alignItems: 'center',
})

export const AppNav: Component<{
app: Application
repository: Repository
}> = (props) => {
const edited = (
<div class={`${rowFlex} ${rightFit} ${center}`}>
<BiRegularPencil />
<Show when={props.app.updatedAt}>
{(nonNullUpdatedAt) => {
const { diff, localeString } = diffHuman(nonNullUpdatedAt().toDate())
return (
<ToolTip props={{ content: `App Last Edited: ${localeString}` }}>
<div>{diff}</div>
</ToolTip>
)
}}
</Show>
</div>
)

return (
<Nav title={props.app.name} icon={<MaterialSymbols displaySize={40}>deployed_code</MaterialSymbols>}>
<Nav
title={props.app.name}
icon={<MaterialSymbols displaySize={40}>deployed_code</MaterialSymbols>}
action={edited}
>
<RepositoryInfoContainer>
created from
<A
Expand Down
Loading

0 comments on commit dac8593

Please sign in to comment.