diff --git a/dashboard/src/components/UI/JumpButton.tsx b/dashboard/src/components/UI/JumpButton.tsx index 7ee5b575..33693327 100644 --- a/dashboard/src/components/UI/JumpButton.tsx +++ b/dashboard/src/components/UI/JumpButton.tsx @@ -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' @@ -35,12 +36,14 @@ const JumpButtonContainer = styled('div', { }, }, }) -const JumpButton: VoidComponent<{ href: string }> = (props) => ( - - - arrow_outward - - +const JumpButton: VoidComponent<{ href: string; tooltip?: string }> = (props) => ( + + + + arrow_outward + + + ) export default JumpButton diff --git a/dashboard/src/components/templates/Nav.tsx b/dashboard/src/components/templates/Nav.tsx index 95c3a69f..ded01d57 100644 --- a/dashboard/src/components/templates/Nav.tsx +++ b/dashboard/src/components/templates/Nav.tsx @@ -56,7 +56,6 @@ const Titles = styled('div', { }) const Title = styled('h1', { base: { - width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', diff --git a/dashboard/src/components/templates/app/AppInfoLists.tsx b/dashboard/src/components/templates/app/AppBranchResolution.tsx similarity index 52% rename from dashboard/src/components/templates/app/AppInfoLists.tsx rename to dashboard/src/components/templates/app/AppBranchResolution.tsx index c34efcf6..074b5286 100644 --- a/dashboard/src/components/templates/app/AppInfoLists.tsx +++ b/dashboard/src/components/templates/app/AppBranchResolution.tsx @@ -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', }, }) @@ -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 = ( + + +
{`${props.app.refName} → ${shortSha(props.app.commit)}`}
+
+ ) if (!c || !c.commitDate) { - return ( - - -
{`${props.app.refName} (${shortSha(props.app.commit)})`}
-
- ) + return base } const { diff, localeString } = diffHuman(c.commitDate.toDate()) return ( - - -
{props.app.refName}
-
- {(line) =>
{line}
}
-
- {c.authorName} - , - - {diff} - - , - {shortSha(c.hash)} + {base} +
+ {(line) =>
{line}
}
+
+ {c.authorName} + , + + {diff} + + , + {shortSha(c.hash)} +
) @@ -79,26 +94,8 @@ const AppInfoLists: Component<{ return ( <> - - {(nonNullCreatedAt) => { - const { diff, localeString } = diffHuman(nonNullCreatedAt().toDate()) - return ( - - - 作成日 - - {diff} - - - - ) - }} - - - Branch (Commit) - {commitDisplay()} - + {commitDisplay()}