Skip to content

Commit

Permalink
chore: Update layout component, metadata, and prettier configuration
Browse files Browse the repository at this point in the history 
feat: add github actions overview
  • Loading branch information
@KevinBacas
KevinBacas committed Jul 19, 2024
1 parent a2de699 commit 907c006
Show file tree
Hide file tree
Showing 13 changed files with 246 additions and 200 deletions.
2 changes: 1 addition & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"printWidth": 100,
"singleQuote": true
}
}
35 changes: 35 additions & 0 deletions app/github-actions/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import GitHubWorkflowGrid from '../../components/github-actions/GitHubWorkflowGrid';
import useSupabaseSession from '../../lib/react-custom-hooks/useSupabaseSession';

export default function Page() {
const session = useSupabaseSession();

console.log({ session });

if (session === null) {
return (
<span className="flex justify-center items-center h-screen text-red-500 text-4xl">
{'You must log in first.'}
</span>
);
}

if (session.provider_token === null || session.provider_token === undefined) {
return (
<span className="flex justify-center items-center h-screen text-red-500 text-4xl">
{'Something wrong happened, please ty again later.'}
</span>
);
}
const queryClient = new QueryClient();

return (
<QueryClientProvider client={queryClient}>
<GitHubWorkflowGrid githubToken={session.provider_token} />
</QueryClientProvider>
);
}
10 changes: 5 additions & 5 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
return (
<html lang="en" className="dark">
<body>
<Toaster />
<Header />
<div className="p-10">
<Providers>{children}</Providers>
</div>
<Toaster />
<Header />
<div className="p-10">
<Providers>{children}</Providers>
</div>
</body>
</html>
);
Expand Down
8 changes: 4 additions & 4 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ const routes = [
Label: 'Home',
URL: '/',
},
// {
// Label: 'Groupes',
// URL: '/groupes-parlementaires',
// },
{
Label: 'GitHub Actions',
URL: '/github-actions',
},
// {
// Label: 'Files',
// URL: '/files',
Expand Down
186 changes: 91 additions & 95 deletions components/github-actions/GitHubWorkflowCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,100 @@
// import React from 'react';
// import { Box, Button, Heading, IconButton, Text } from '@chakra-ui/react';
// import Link from 'next/link';
// import { formatDistanceToNow, parseJSON } from 'date-fns';
// import { ImCross } from 'react-icons/im';
// import { FaSync, FaCheck, FaSlash, FaCog } from 'react-icons/fa';
// import { useQuery, UseQueryResult } from 'react-query';
// import { GetJobs } from '../../lib/github/Workflows';
// import Spinner from '../common/Spinner';
'use client';

// interface EnhancedWorkflowRun extends Types.External.WorkflowRun {
// parentReactQuery: UseQueryResult;
// }
import React from 'react';
import Link from 'next/link';
import { formatDistanceToNow, parseJSON } from 'date-fns';
import { ImCross } from 'react-icons/im';
import { FaSync, FaCheck, FaSlash, FaCog, FaCodeBranch, FaClock } from 'react-icons/fa';
import { Badge, Card, Chip, Spacer, Spinner, Tooltip } from '@nextui-org/react';
import { useQuery, UseQueryResult } from '@tanstack/react-query';

// interface IGitHubWorkflowCardProps extends EnhancedWorkflowRun {
// githubToken: string;
// }
import { GetJobs } from '../../lib/github/Workflows';

// const statusToBg = {
// success: 'bg-teal-600',
// failure: 'bg-red-600',
// in_progress: '',
// };
interface EnhancedWorkflowRun extends Types.External.WorkflowRun {
parentReactQuery: UseQueryResult;
}

// const jobStatusToBg = {
// cancelled: 'bg-gray-500',
// success: 'bg-green-500',
// failure: 'bg-red-500',
// in_progress: 'bg-yellow-500',
// skipped: 'bg-gray-500',
// };
interface IGitHubWorkflowCardProps extends EnhancedWorkflowRun {
githubToken: string;
}

// export default function GitHubWorkflowCard(props: IGitHubWorkflowCardProps) {
// const { data, isLoading } = useQuery(
// ['github-jobs', props.repository.name, props.id],
// () => GetJobs(props.githubToken, props.repository.name, props.id.toString()),
// {
// refetchInterval: (data) =>
// data ? (data.jobs.some((j) => j.status !== 'completed') ? 5000 : false) : false,
// refetchOnWindowFocus: (data) => data.state.data.jobs.some((j) => j.status !== 'completed'),
// refetchIntervalInBackground: false,
// },
// );
const jobStatusToColor = {
cancelled: 'default',
success: 'success',
failure: 'danger',
in_progress: 'warning',
skipped: 'default',
};

// return (
// <div className="rounded-md p-5 bg-gray-900 hover:bg-gray-700 transition-colors ease-out delay-100">
// <div className="flex flex-row justify-between">
// <div className="flex flex-row">
// <Link href={props.repository.html_url}>
// <a className="flex flex-col text-3xl font-bold hover:underline hover:underline-offset-2">
// {props.repository.name}
// </a>
// </Link>
// <span
// className={`items-center justify-center h-6 mx-2 my-2 px-2 py-1 text-sm leading-none ${
// statusToBg[props.conclusion]
// } rounded`}
// >
// {props.conclusion}
// </span>
// </div>
// {/* <IconButton
// aria-label="Refresh"
// icon={isFetching ? <Spinner size="sm" color="gray" /> : <FaSync />}
// onClick={() => refetch()}
// isDisabled={isFetching}
// /> */}
// </div>
export default function GitHubWorkflowCard(props: IGitHubWorkflowCardProps) {
const { data, isLoading } = useQuery({
queryKey: ['github-jobs', props.repository.name, props.id],
queryFn: () => GetJobs(props.githubToken, props.repository.name, props.id.toString()),
refetchInterval: (data) =>
data.state.data?.jobs.some((j) => j.status !== 'completed') ? 30000 : false,
refetchOnWindowFocus: (data) =>
data.state.data?.jobs.some((j) => j.status !== 'completed') ?? false,
refetchIntervalInBackground: false,
});

// <div className="text-mg my-2">{props.head_branch}</div>
return (
<Card isPressable className="p-4 min-h-40">
<div className="flex justify-between flex-row w-full">
<span>
<Link
href={props.repository.html_url}
className="text-xl font-bold hover:underline hover:underline-offset-2"
>
{props.repository.name}
</Link>
</span>
<Chip color={props.conclusion === 'success' ? 'success' : 'danger'}>
{props.conclusion === 'success' ? 'Success' : 'Error'}
</Chip>
</div>

// <div className="text-mg text-gray-500 my-2">
// {formatDistanceToNow(parseJSON(props.created_at))}
// </div>
<Spacer y={4} />

// {isLoading ? (
// <div className="flex min-h-[50px] items-center justify-center">
// <Spinner color="teal" size="md" />
// </div>
// ) : (
// <div className="flex space-x-2">
// {data.jobs.map((j) => {
// const currentStatus = j.status === 'completed' ? j.conclusion : j.status;
// return (
// <div
// key={j.id}
// className={`relative has-tooltip rounded-full w-6 h-6 ${jobStatusToBg[currentStatus]} p-1.5`}
// >
// {currentStatus === 'cancelled' && <FaSlash fontSize={12} />}
// {currentStatus === 'in_progress' && <FaCog fontSize={12} />}
// {currentStatus === 'failure' && <ImCross fontSize={12} />}
// {currentStatus === 'success' && <FaCheck fontSize={12} />}
// {currentStatus === 'skipped' && <FaSlash fontSize={12} />}
// <span className="tooltip absolute top-3/4 left-1/2 opacity-0 bg-gray-500 rounded px-4 py-2 min-w-max transition-all">
// {j.name}
// </span>
// </div>
// );
// })}
// </div>
// )}
// </div>
// );
// }
<Link
href={`${props.repository.html_url}/tree/${props.head_branch}`}
className="flex hover:underline hover:underline-offset-2"
>
<FaCodeBranch />
<Spacer x={2} />
<div className="text-mg">{props.head_branch}</div>
</Link>

<Spacer y={1} />

<div className="flex">
<FaClock />
<Spacer x={2} />
<div className="text-mg text-gray-500">
{formatDistanceToNow(parseJSON(props.created_at), {
addSuffix: true,
includeSeconds: true,
})}
</div>
</div>

<Spacer y={4} />

<div className="flex space-x-2">
{data?.jobs.map((j) => {
const currentStatus = j.status === 'completed' ? j.conclusion : j.status;
return (
<Tooltip content={j.name} key={j.id}>
<Chip color={jobStatusToColor[currentStatus]}>
{currentStatus === 'cancelled' && <FaSlash fontSize={12} />}
{currentStatus === 'in_progress' && <FaCog fontSize={12} />}
{currentStatus === 'failure' && <ImCross fontSize={12} />}
{currentStatus === 'success' && <FaCheck fontSize={12} />}
{currentStatus === 'skipped' && <FaSlash fontSize={12} />}
</Chip>
</Tooltip>
);
})}
</div>
</Card>
);
}
27 changes: 13 additions & 14 deletions components/github-actions/GitHubWorkflowGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
// import { SimpleGrid } from '@chakra-ui/react';
// import React from 'react';
// import GitHubWorkflowHandler from './GitHubWorkflowHandler';
import React from 'react';
import GitHubWorkflowHandler from './GitHubWorkflowHandler';

// interface IGitHubWorkflowGridProps {
// githubToken: string;
// }
interface IGitHubWorkflowGridProps {
githubToken: string;
}

// export default function GitHubWorkflowGrid(props: IGitHubWorkflowGridProps) {
// return (
// <GitHubWorkflowHandler
// repositoriesName={['Augora', 'Overseer', 'Nucleus', 'Convey']}
// githubToken={props.githubToken}
// />
// );
// }
export default function GitHubWorkflowGrid(props: IGitHubWorkflowGridProps) {
return (
<GitHubWorkflowHandler
repositoriesName={['Augora', 'Overseer', 'Nucleus', 'Convey']}
githubToken={props.githubToken}
/>
);
}
Loading

0 comments on commit 907c006

Please sign in to comment.