Skip to content

Commit 9fbbdb7

Browse files
motoki317motoki317
authored
Merge pull request #914 from traPtitech/chores/dashboard
Chores/dashboard
2 parents ac5bb8f + 7f6d1bf commit 9fbbdb7

File tree

12 files changed

+71
-40
lines changed

12 files changed

+71
-40
lines changed

‎dashboard/src/components/templates/app/AppBranchResolution.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ const AppBranchResolution: Component<{
7878
return base
7979
}
8080

81-
const { diff, localeString } = diffHuman(c.commitDate.toDate())
81+
const diff = diffHuman(c.commitDate.toDate())
82+
const localeString = c.commitDate.toDate().toLocaleString()
8283
return (
8384
<DataRows>
8485
{base}
@@ -88,7 +89,7 @@ const AppBranchResolution: Component<{
8889
{c.authorName}
8990
<span>, </span>
9091
<ToolTip props={{ content: localeString }}>
91-
<span>{diff}</span>
92+
<span>{diff()}</span>
9293
</ToolTip>
9394
<span>, </span>
9495
{shortSha(c.hash)}

‎dashboard/src/components/templates/app/AppDeployInfo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,12 +200,12 @@ const AppDeployInfo: Component<{
200200
}
201201

202202
const firstLine = c.message.split('\n')[0]
203-
const { diff } = diffHuman(c.commitDate.toDate())
203+
const diff = diffHuman(c.commitDate.toDate())
204204
const tooltip = (
205205
<DataRows>
206206
<For each={c.message.split('\n')}>{(line) => <div>{line}</div>}</For>
207207
<div>
208-
{c.authorName}, {diff}, {shortSha(c.hash)}
208+
{c.authorName}, {diff()}, {shortSha(c.hash)}
209209
</div>
210210
</DataRows>
211211
)

‎dashboard/src/components/templates/app/AppNav.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,11 @@ export const AppNav: Component<{
7575
<BiRegularPencil />
7676
<Show when={props.app.updatedAt}>
7777
{(nonNullUpdatedAt) => {
78-
const { diff, localeString } = diffHuman(nonNullUpdatedAt().toDate())
78+
const diff = diffHuman(nonNullUpdatedAt().toDate())
79+
const localeString = nonNullUpdatedAt().toDate().toLocaleString()
7980
return (
8081
<ToolTip props={{ content: `App Last Edited: ${localeString}` }}>
81-
<div>{diff}</div>
82+
<div>{diff()}</div>
8283
</ToolTip>
8384
)
8485
}}

‎dashboard/src/components/templates/app/AppRow.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,12 +143,12 @@ export const AppRow: Component<Props> = (props) => {
143143
const commitTooltip = () => {
144144
const c = commit()
145145
if (!c || !c.commitDate) return `${shortSha(props.app!.commit)}`
146-
const { diff } = diffHuman(c.commitDate.toDate())
146+
const diff = diffHuman(c.commitDate.toDate())
147147
return (
148148
<>
149149
<For each={c.message.split('\n')}>{(line) => <div>{line}</div>}</For>
150150
<div>
151-
{c.authorName}, {diff}, {shortSha(c.hash)}
151+
{c.authorName}, {diff()}, {shortSha(c.hash)}
152152
</div>
153153
</>
154154
)
@@ -163,10 +163,11 @@ export const AppRow: Component<Props> = (props) => {
163163
<AppName>{props.app!.name}</AppName>
164164
<Show when={props.app!.updatedAt}>
165165
{(nonNullUpdatedAt) => {
166-
const { diff, localeString } = diffHuman(nonNullUpdatedAt().toDate())
166+
const diff = diffHuman(nonNullUpdatedAt().toDate())
167+
const localeString = nonNullUpdatedAt().toDate().toLocaleString()
167168
return (
168169
<ToolTip props={{ content: localeString }}>
169-
<UpdatedAt>{diff}</UpdatedAt>
170+
<UpdatedAt>{diff()}</UpdatedAt>
170171
</ToolTip>
171172
)
172173
}}

‎dashboard/src/components/templates/build/BuildRow.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,14 @@ export const BuildRow: Component<Props> = (props) => {
112112
const commitDetails = () => {
113113
const c = commit()
114114
if (!c || !c.commitDate) return '<no info>'
115-
const { diff, localeString } = diffHuman(c.commitDate.toDate())
115+
const diff = diffHuman(c.commitDate.toDate())
116+
const localeString = c.commitDate.toDate().toLocaleString()
116117
return (
117118
<>
118119
{c.authorName}
119120
<span>, </span>
120121
<ToolTip props={{ content: localeString }}>
121-
<span>{diff}</span>
122+
<span>{diff()}</span>
122123
</ToolTip>
123124
<span>, </span>
124125
{shortSha(c.hash)}
@@ -140,10 +141,11 @@ export const BuildRow: Component<Props> = (props) => {
140141
<Spacer />
141142
<Show when={props.build.queuedAt}>
142143
{(nonNullQueuedAt) => {
143-
const { diff, localeString } = diffHuman(nonNullQueuedAt().toDate())
144+
const diff = diffHuman(nonNullQueuedAt().toDate())
145+
const localeString = nonNullQueuedAt().toDate().toString()
144146
return (
145147
<ToolTip props={{ content: localeString }}>
146-
<UpdatedAt>{diff}</UpdatedAt>
148+
<UpdatedAt>{diff()}</UpdatedAt>
147149
</ToolTip>
148150
)
149151
}}

‎dashboard/src/components/templates/build/BuildStatusTable.tsx

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -102,15 +102,16 @@ const BuildStatusTable: Component<{
102102
return shortSha(props.build.commit)
103103
}
104104

105-
const { diff, localeString } = diffHuman(c.commitDate.toDate())
105+
const diff = diffHuman(c.commitDate.toDate())
106+
const localeString = c.commitDate.toDate().toLocaleString()
106107
return (
107108
<DataRows>
108109
<For each={c.message.split('\n')}>{(line) => <div>{line}</div>}</For>
109110
<div class={greyText}>
110111
{c.authorName}
111112
<span>, </span>
112113
<ToolTip props={{ content: localeString }}>
113-
<span>{diff}</span>
114+
<span>{diff()}</span>
114115
</ToolTip>
115116
<span>, </span>
116117
{shortSha(c.hash)}
@@ -155,13 +156,14 @@ const BuildStatusTable: Component<{
155156
<List.Columns>
156157
<Show when={props.build.queuedAt}>
157158
{(nonNullQueuedAt) => {
158-
const { diff, localeString } = diffHuman(nonNullQueuedAt().toDate())
159+
const diff = diffHuman(nonNullQueuedAt().toDate())
160+
const localeString = nonNullQueuedAt().toDate().toLocaleString()
159161
return (
160162
<List.Row>
161163
<List.RowContent>
162164
<List.RowTitle>キュー登録時刻</List.RowTitle>
163165
<ToolTip props={{ content: localeString }}>
164-
<List.RowData>{diff}</List.RowData>
166+
<List.RowData>{diff()}</List.RowData>
165167
</ToolTip>
166168
</List.RowContent>
167169
</List.Row>
@@ -170,13 +172,15 @@ const BuildStatusTable: Component<{
170172
</Show>
171173
<Show when={props.build.startedAt?.valid && props.build.startedAt} fallback={'-'}>
172174
{(nonNullStartedAt) => {
173-
const { diff, localeString } = diffHuman((nonNullStartedAt().timestamp as Timestamp).toDate())
175+
const ts = (nonNullStartedAt().timestamp as Timestamp).toDate()
176+
const diff = diffHuman(ts)
177+
const localeString = ts.toLocaleString()
174178
return (
175179
<List.Row>
176180
<List.RowContent>
177181
<List.RowTitle>ビルド開始時刻</List.RowTitle>
178182
<ToolTip props={{ content: localeString }}>
179-
<List.RowData>{diff}</List.RowData>
183+
<List.RowData>{diff()}</List.RowData>
180184
</ToolTip>
181185
</List.RowContent>
182186
</List.Row>
@@ -190,10 +194,12 @@ const BuildStatusTable: Component<{
190194
<List.RowTitle>ビルド終了時刻</List.RowTitle>
191195
<Show when={props.build.finishedAt?.valid && props.build.finishedAt} fallback={'-'}>
192196
{(nonNullFinishedAt) => {
193-
const { diff, localeString } = diffHuman((nonNullFinishedAt().timestamp as Timestamp).toDate())
197+
const ts = (nonNullFinishedAt().timestamp as Timestamp).toDate()
198+
const diff = diffHuman(ts)
199+
const localeString = ts.toLocaleString()
194200
return (
195201
<ToolTip props={{ content: localeString }}>
196-
<List.RowData>{diff}</List.RowData>
202+
<List.RowData>{diff()}</List.RowData>
197203
</ToolTip>
198204
)
199205
}}

‎dashboard/src/libs/format.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Timestamp } from '@bufbuild/protobuf'
2+
import { createSignal } from 'solid-js'
23

34
export const shortSha = (sha1: string): string => sha1.substring(0, 7)
45

@@ -52,13 +53,14 @@ export const durationHuman = (millis: number): string => {
5253
return `${remainMillis} ms`
5354
}
5455

55-
export const diffHuman = (target: Date) => {
56-
const diff = new Date().getTime() - target.getTime()
57-
const suffix = diff > 0 ? 'ago' : 'from now'
58-
const human = durationHuman(Math.abs(diff))
59-
const localeString = target.toLocaleString()
60-
return {
61-
diff: `${human} ${suffix}`,
62-
localeString,
56+
const [now, setNow] = createSignal(new Date())
57+
setInterval(() => setNow(new Date()), 10000)
58+
59+
export const diffHuman = (target: Date): (() => string) => {
60+
return () => {
61+
const diff = now().getTime() - target.getTime()
62+
const suffix = diff > 0 ? 'ago' : 'from now'
63+
const human = durationHuman(Math.abs(diff))
64+
return `${human} ${suffix}`
6365
}
6466
}

‎dashboard/src/pages/apps/[id]/builds.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createMemo, useTransition } from 'solid-js'
1+
import { createMemo, onCleanup, useTransition } from 'solid-js'
22
import { Show } from 'solid-js'
33
import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
44
import { DataTable } from '/@/components/layouts/DataTable'
@@ -8,9 +8,12 @@ import { BuildList, List } from '/@/components/templates/List'
88
import { useApplicationData } from '/@/routes'
99

1010
export default () => {
11-
const { app, builds, commits } = useApplicationData()
11+
const { app, builds, commits, refetch } = useApplicationData()
1212
const loaded = () => !!(app() && builds())
1313

14+
const refetchTimer = setInterval(refetch, 10000)
15+
onCleanup(() => clearInterval(refetchTimer))
16+
1417
const sortedBuilds = createMemo(
1518
() =>
1619
builds()

‎dashboard/src/pages/apps/[id]/settings.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { styled } from '@macaron-css/solid'
22
import { type RouteSectionProps, useMatch, useNavigate } from '@solidjs/router'
3-
import { ErrorBoundary, Show, Suspense, useTransition } from 'solid-js'
3+
import { ErrorBoundary, Show, Suspense, onCleanup, useTransition } from 'solid-js'
44
import { Button } from '/@/components/UI/Button'
55
import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
66
import ErrorView from '/@/components/layouts/ErrorView'
@@ -21,8 +21,12 @@ const SideMenu = styled('div', {
2121
})
2222

2323
export default (props: RouteSectionProps) => {
24-
const { app } = useApplicationData()
24+
const { app, refetch } = useApplicationData()
2525
const loaded = () => !!app()
26+
27+
const refetchTimer = setInterval(refetch, 10000)
28+
onCleanup(() => clearInterval(refetchTimer))
29+
2630
const matchGeneralPage = useMatch(() => `/apps/${app()?.id}/settings/`)
2731
const matchBuildPage = useMatch(() => `/apps/${app()?.id}/settings/build`)
2832
const matchURLsPage = useMatch(() => `/apps/${app()?.id}/settings/urls`)

‎dashboard/src/pages/apps/[id]/settings/build.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ export default () => {
4646
})
4747
toast.success('ビルド設定を更新しました')
4848
void refetch()
49+
// 非同期でビルドが開始されるので1秒程度待ってから再度リロード
50+
setTimeout(refetch, 1000)
4951
} catch (e) {
5052
handleAPIError(e, 'ビルド設定の更新に失敗しました')
5153
}

‎dashboard/src/pages/apps/[id]/settings/envVars.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const EnvVarsContainer = styled('div', {
3737
const EnvVarConfig: Component<{
3838
appId: string
3939
envVars: PlainMessage<ApplicationEnvVars>
40-
refetchEnvVars: () => void
40+
refetch: () => void
4141
}> = (props) => {
4242
const [envVarForm, EnvVar] = createForm<PlainMessage<ApplicationEnvVars>>({
4343
initialValues: {
@@ -124,7 +124,9 @@ const EnvVarConfig: Component<{
124124
try {
125125
await Promise.all([...addEnvVarRequests, ...deleteEnvVarRequests])
126126
toast.success('環境変数を更新しました')
127-
props.refetchEnvVars()
127+
props.refetch()
128+
// 非同期でビルドが開始されるので1秒程度待ってから再度リロード
129+
setTimeout(props.refetch, 1000)
128130
} catch (e) {
129131
handleAPIError(e, '環境変数の更新に失敗しました')
130132
}
@@ -214,11 +216,15 @@ const EnvVarConfig: Component<{
214216
}
215217

216218
export default () => {
217-
const { app, hasPermission } = useApplicationData()
219+
const { app, hasPermission, refetch: refetchApp } = useApplicationData()
218220
const [envVars, { refetch: refetchEnvVars }] = createResource(
219221
() => app()?.id,
220222
(id) => client.getEnvVars({ id }),
221223
)
224+
const refetch = () => {
225+
void refetchApp()
226+
void refetchEnvVars()
227+
}
222228

223229
const loaded = () => !!envVars()
224230

@@ -232,7 +238,7 @@ export default () => {
232238
}
233239
>
234240
<Show when={loaded()}>
235-
<EnvVarConfig appId={app()!.id} envVars={structuredClone(envVars()!)} refetchEnvVars={refetchEnvVars} />
241+
<EnvVarConfig appId={app()!.id} envVars={structuredClone(envVars()!)} refetch={refetch} />
236242
</Show>
237243
</Show>
238244
</DataTable.Container>

‎dashboard/src/pages/apps/[id]/settings/general.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@ const GeneralInfo: Component<{
2626
<List.Container>
2727
<Show when={props.app.createdAt}>
2828
{(nonNullCreatedAt) => {
29-
const { diff, localeString } = diffHuman(nonNullCreatedAt().toDate())
29+
const diff = diffHuman(nonNullCreatedAt().toDate())
30+
const localeString = nonNullCreatedAt().toDate().toLocaleString()
3031
return (
3132
<List.Row>
3233
<List.RowContent>
3334
<List.RowTitle>作成日</List.RowTitle>
3435
<ToolTip props={{ content: localeString }}>
35-
<List.RowData>{diff}</List.RowData>
36+
<List.RowData>{diff()}</List.RowData>
3637
</ToolTip>
3738
</List.RowContent>
3839
</List.Row>
@@ -149,6 +150,8 @@ export default () => {
149150
})
150151
toast.success('アプリケーション設定を更新しました')
151152
void refetch()
153+
// 非同期でビルドが開始されるので1秒程度待ってから再度リロード
154+
setTimeout(refetch, 1000)
152155
} catch (e) {
153156
handleAPIError(e, 'アプリケーション設定の更新に失敗しました')
154157
}

0 commit comments

Comments
 (0)