Skip to content

Commit

Permalink
Update deployment build details
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucemans
lucemans committed Feb 17, 2025
1 parent f5ee0da commit 3f828be
Show file tree
Hide file tree
Showing 8 changed files with 217 additions and 80 deletions.
2 changes: 1 addition & 1 deletion web/src/components/button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const [buttonVariants, buttonVariantsConfig] = cvax(
'disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-200 disabled:hover:bg-neutral-100 disabled:cursor-not-allowed',
],
ghost: [
'hover:bg-neutral-100 text-neutral-700 border-transparent',
'hover:bg-muted text-default border-transparent',
'disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-transparent disabled:hover:bg-neutral-100 disabled:cursor-not-allowed',
],
link: 'text-blue-500 hover:underline border-transparent bg-transparent',
Expand Down
38 changes: 6 additions & 32 deletions web/src/gui/deployments/DeploymentPreview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Link } from '@tanstack/react-router';
import { FC, useEffect, useState } from 'react';
import { FC } from 'react';
import {
FiCheckCircle,
FiClock,
Expand All @@ -11,10 +11,11 @@ import TimeAgo from 'react-timeago-i18n';
import { match } from 'ts-pattern';

import { Deployment, useDeployment } from '@/api';
import { secondsToDuration } from '@/util/time';
import { LiveAgo, secondsToDuration } from '@/util/time';

import { parseDeploymentContext } from './context/context';
import { decorateGithubDeploymentContext } from './context/github';
import { WorkflowStatusIndicator } from './WorkflowStatusIndicator';

export const DeploymentPreview: FC<{
deployment?: Deployment;
Expand Down Expand Up @@ -65,18 +66,9 @@ export const DeploymentPreview: FC<{
>
{githubContext.data.commit.message}
</Link>
{githubContext.data.workflow_status &&
match(githubContext.data.workflow_status)
.with('pre', () => (
<FiClock className="text-yellow-500" />
))
.with('push', () => (
<FiUpload className="text-blue-400" />
))
.with('post', () => (
<FiCheckCircle className="text-green-500" />
))
.otherwise((status) => <div>{status}?</div>)}
<WorkflowStatusIndicator
status={githubContext.data.workflow_status}
/>
</div>
<div className="w-fit">
<Link
Expand Down Expand Up @@ -182,21 +174,3 @@ export const DeploymentPreview: FC<{
</div>
);
};

const LiveAgo: FC<{ date: Date }> = ({ date }) => {
const [time, setTime] = useState(date);

useEffect(() => {
const interval = setInterval(() => {
setTime(new Date());
}, 1000);

return () => clearInterval(interval);
}, []);

const ago = secondsToDuration(
Math.floor((Date.now() - date.getTime()) / 1000)
);

return <>{ago}</>;
};
41 changes: 41 additions & 0 deletions web/src/gui/deployments/WorkflowStatusIndicator.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { FC, Fragment } from 'react';
import { FiCheckCircle, FiClock, FiUpload } from 'react-icons/fi';
import { match } from 'ts-pattern';

export type WorkflowStatusVariant = 'small' | 'expanded';

export const WorkflowStatusIndicator: FC<{
status: string;
variant?: WorkflowStatusVariant;
}> = ({ status, variant = 'small' }) => {
const Wrapper = variant === 'expanded' ? 'div' : Fragment;
const wrapperProperties =
variant === 'small'
? {}
: {
className: 'flex items-center gap-1.5',
};

return (
<Wrapper {...wrapperProperties}>
{match(status)
.with('pre', () => <FiClock className="text-yellow-500" />)
.with('push', () => <FiUpload className="text-blue-400" />)
.with('post', () => (
<FiCheckCircle className="text-green-500" />
))
.otherwise((status) => (
<div>{status}?</div>
))}
{variant === 'expanded' && (
<div>
{match(status)
.with('pre', () => 'Starting')
.with('push', () => 'Uploading...')
.with('post', () => 'Deployed')
.otherwise(() => status)}
</div>
)}
</Wrapper>
);
};
115 changes: 89 additions & 26 deletions web/src/gui/deployments/context/github.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { Link } from '@tanstack/react-router';
import { FC } from 'react';
import { FiGithub } from 'react-icons/fi';
import { FiClock, FiFileText, FiGitCommit } from 'react-icons/fi';
import TimeAgo from 'react-timeago-i18n';
import { match } from 'ts-pattern';

import { LiveAgo, secondsToDuration } from '@/util/time';

import { WorkflowStatusIndicator } from '../WorkflowStatusIndicator';

export type GithubDeploymentContextType = {
contextType: 'github-action';
Expand Down Expand Up @@ -90,26 +96,57 @@ export const GithubDeploymentContext: FC<{
const decoratedContext = decorateGithubDeploymentContext(context);

return (
<div className="card no-padding flex justify-between gap-2 p-5">
<div className="h-full grow space-y-1">
<Link
to={decoratedContext.workflowUrl}
className="hover:text-link flex items-center gap-2 hover:underline"
target="_blank"
>
<FiGithub className="text-xl" />
<div className="font-bold">
{context.data.commit.message}
<div className="card no-padding space-y-4 p-5">
<div className="flex items-start justify-between gap-4">
<div className="h-full space-y-1">
<div className="flex items-center gap-2">
<div className="font-bold">
{context.data.commit.message}
</div>
{decoratedContext.workflowUrl && (
<Link
to={decoratedContext.workflowUrl}
className="hover:text-link flex items-center gap-2 hover:underline"
target="_blank"
>
<FiFileText />
</Link>
)}
{decoratedContext.data.commit.url && (
<Link
to={decoratedContext.data.commit.url}
className="hover:text-link flex items-center gap-2 hover:underline"
target="_blank"
>
<FiGitCommit />
</Link>
)}
</div>
</Link>
<div className="space-y-2 pl-8">
<Link
to={context.data.commit.url}
className="hover:text-link hover:underline"
target="_blank"
>
{context.data.sha}
</Link>
<div className="space-y-2">
<Link
to={decoratedContext.repoUrl}
className="hover:text-link text-muted flex w-fit items-center gap-1 hover:underline"
target="_blank"
>
<FiGitCommit />
{decoratedContext.data.commit.id.slice(0, 7)}
</Link>
</div>
</div>
<div className="flex flex-col items-end justify-center">
<div className="bg-secondary w-fit rounded-md border px-2 py-0">
{context.data.event}
</div>
<div>
<TimeAgo
date={new Date(context.data.commit.timestamp)}
/>
</div>
</div>
</div>
<div className="grid grid-flow-col">
<div className="space-y-1">
<div className="text-muted">Created by</div>
<Link
to={
`https://github.com/${context.data.commit.author.username}` as any
Expand All @@ -125,12 +162,38 @@ export const GithubDeploymentContext: FC<{
{context.data.commit.author.name}
</Link>
</div>
</div>
<div className="flex flex-col items-end justify-center">
<div>{context.data.commit.timestamp}</div>
<div className="bg-secondary w-fit rounded-md border px-2 py-0">
{context.data.event}
</div>
{decoratedContext.data.workflow_status && (
<div>
<div className="text-muted">Status</div>
<WorkflowStatusIndicator
status={decoratedContext.data.workflow_status}
variant="expanded"
/>
</div>
)}
{decoratedContext.duration && (
<div>
<div className="text-muted">Duration</div>
{match(decoratedContext.duration)
.with({ type: 'completed' }, (duration) => (
<div className="text-default flex items-center gap-1.5">
<FiClock />
{secondsToDuration(duration.duration)}
</div>
))
.with({ type: 'pending' }, (duration) => (
<div className="flex animate-pulse items-center gap-1.5 text-cyan-500 dark:text-cyan-300">
<FiClock className="animate-spin" />
<LiveAgo
date={new Date(duration.startedAt)}
/>
</div>
))
.otherwise(() => (
<></>
))}
</div>
)}
</div>
</div>
);
Expand Down
49 changes: 31 additions & 18 deletions web/src/gui/navigation/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Link, useParams } from '@tanstack/react-router';
import { AnimatePresence } from 'framer-motion';
import { FiServer } from 'react-icons/fi';

import { useMe } from '@/api';
import { authStore } from '@/api/auth/store';
Expand All @@ -8,7 +9,9 @@ import { Avatar, Button } from '@/components';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '../Dropdown';
import { InteractiveNavigator } from './InteractiveNavigator';
Expand All @@ -33,28 +36,38 @@ const UserProfile = () => {
</div>
<DropdownMenuPortal>
<DropdownMenuContent>
<div className="top-full flex w-full flex-col gap-y-2 whitespace-nowrap rounded-b-md">
<DropdownMenuItem className="flex items-center justify-between gap-6">
<div>Theme</div>
<ThemeSwitcher />
<div className="flex flex-col gap-y-1">
{me?.admin && (
<Link to="/admin">
<Button className="w-full">
Admin
</Button>
</Link>
)}
</DropdownMenuItem>
{me?.admin && (
<DropdownMenuItem asChild>
<Button
className="flex w-full items-start px-4 py-2 hover:bg-black/10"
onClick={() => {
authStore.send({
type: 'clearAuthToken',
});
}}
className="w-full justify-start"
variant="ghost"
asChild
>
Log out
<Link to="/admin">
<FiServer />
Administration
</Link>
</Button>
</div>
</div>
</DropdownMenuItem>
)}
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Button
className="flex w-full cursor-pointer items-start px-4 py-2"
onClick={() => {
authStore.send({
type: 'clearAuthToken',
});
}}
variant="ghost"
>
Log out
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenuPortal>
</div>
Expand Down
8 changes: 6 additions & 2 deletions web/src/gui/navigation/ThemeSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const ThemeSwitcher = () => {
};

return (
<div className="mx-auto flex size-full">
<div className="bg-muted mx-auto flex size-full gap-1 rounded-xl">
{(
[
['light', <FiSun key="light" />],
Expand All @@ -31,7 +31,11 @@ export const ThemeSwitcher = () => {
).map(([theme, icon]) => (
<button
key={theme}
onClick={() => setTheme(theme)}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
setTheme(theme);
}}
className={cn(
currentTheme === theme && 'bg-hover',
'h-full flex items-center px-1 aspect-square rounded-full'
Expand Down
24 changes: 23 additions & 1 deletion web/src/routes/_authed/site/$siteId/deployment/$deploymentId/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import { createFileRoute } from '@tanstack/react-router';
import { FiMoreHorizontal } from 'react-icons/fi';

import { useDeployment } from '@/api';
import { Button } from '@/components';
import { DeploymentContext } from '@/gui/deployments/context/context';
import { FileExplorer } from '@/gui/deployments/files/FileExplorer';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/gui/Dropdown';
import { SCPage } from '@/layouts';

export const Route = createFileRoute(
Expand All @@ -16,7 +24,21 @@ function RouteComponent() {
const { data: deployment } = useDeployment(siteId, deploymentId);

return (
<SCPage title={`Deployment ${deploymentId}`}>
<SCPage
title="Deployment Details"
suffix={
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="icon">
<FiMoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Hello world</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
}
>
{deployment?.context && (
<DeploymentContext context={deployment.context} />
)}
Expand Down
Loading

0 comments on commit 3f828be

Please sign in to comment.