Skip to content
This repository has been archived by the owner on Jul 20, 2024. It is now read-only.

Commit

Permalink
botway(core): upgrade project page, update packages
Browse files Browse the repository at this point in the history
  • Loading branch information
@abdfnx
abdfnx committed Jun 27, 2023
1 parent df51d55 commit a2c30f4
Show file tree
Hide file tree
Showing 10 changed files with 241 additions and 113 deletions.
2 changes: 1 addition & 1 deletion ce
Submodule ce updated 3 files
+3 −0 .github/workflows/docker-image.yml
+1 −17 coder.Dockerfile
+17 −0 packages.Dockerfile
11 changes: 11 additions & 0 deletions core/app/api/projects/services/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,16 @@ export async function POST(request: Request) {
}
plugins {
edges {
node {
id
friendlyName
name
}
}
}
volumes {
edges {
node {
id
Expand All @@ -84,5 +94,6 @@ export async function POST(request: Request) {
message: "Success",
services: projectData.data.project.services.edges,
plugins: projectData.data.project.plugins.edges,
volumes: projectData.data.project.volumes.edges,
});
}
Empty file added core/app/project/[id]/envs/page.tsx
View file
Empty file.
183 changes: 170 additions & 13 deletions core/app/project/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { fetcher } from "@/tools/fetch";
import {
CheckIcon,
DatabaseIcon,
GearIcon,
MarkGithubIcon,
XCircleIcon,
Expand All @@ -26,6 +27,8 @@ export const revalidate = 0;
const queryClient = new QueryClient();

const Project = ({ user, projectId }: any) => {
const data: { type: string; name: any; friendlyName?: any }[] = [];

const fetchServices = async () => {
const services = await fetcher(`/api/projects/services`, {
method: "POST",
Expand All @@ -48,18 +51,27 @@ const Project = ({ user, projectId }: any) => {
}
);

services?.services.map((node: any, index: any) => {
// initNodes.push({
// id: `"${index + 1}"`,
// type: "custom",
// data: {
// name: node.node.name,
// },
// position,
// });
services?.services.map((node: any) => {
data.push({
type: "service",
name: node.node.name,
});
});

services?.plugins.map((node: any) => {
data.push({
type: "plugin",
name: node.node.name,
friendlyName: node.node.friendlyName,
});
});

services?.plugins.map((node: any, index: any) => {});
services?.volumes.map((node: any) => {
data.push({
type: "volume",
name: node.node.name,
});
});

const fetchProject = async () => {
const { data: project } = await supabase
Expand Down Expand Up @@ -94,13 +106,14 @@ const Project = ({ user, projectId }: any) => {
projectRWID={project?.railway_project_id}
grid={true}
>
<h1 className="mx-6 my-16 text-3xl text-white">My Bot</h1>
<div className="mx-6 mt-16 flex items-center space-x-6">
<div className="">
<img src="https://cdn-botway.deno.dev/icons/bot.svg" width={67} />
<img src="https://cdn-botway.deno.dev/icons/bot.svg" width={55} />
</div>
<div>
<h1 className="text-lg text-white">{project?.name}</h1>
<h1 className="text-base text-gray-400">Bot Project</h1>
<h1 className="text-base text-white">{project?.name}</h1>
<h1 className="text-sm text-gray-400">Bot Project</h1>
</div>
</div>
<div className="mx-6 bg-secondary justify-between flex border border-gray-800 rounded-lg p-4">
Expand Down Expand Up @@ -133,6 +146,150 @@ const Project = ({ user, projectId }: any) => {
</a>
</div>
</div>
<div className="mx-6">
<div className="my-4 max-w-full space-y-8">
<div className="overflow-x-auto flex-grow rounded-lg border border-gray-800">
<table className="w-full border-collapse select-auto bg-bwdefualt">
<thead>
<tr className="bg-secondary border-b border-gray-800">
<th className="py-3 px-4" />
<th className="py-3 px-4 text-left font-semibold text-xs text-gray-400">
Name
</th>
<th className="py-3 px-4 text-left hidden md:block font-semibold text-xs text-gray-400">
Type
</th>
<th className="py-3 px-4 text-left font-semibold text-xs text-gray-400">
Actions
</th>
<th className="py-3 px-4 text-left font-semibold text-xs text-gray-400" />
</tr>
</thead>
<tbody>
{servicesIsLoading ? (
<tr>
<td
className="py-3 px-4 overflow-hidden overflow-ellipsis whitespace-nowrap"
style={{ minWidth: "64px", maxWidth: "400px" }}
>
<div className="flex space-x-2 items-center">
<LoadingDots className="fixed flex items-center justify-center" />
</div>
</td>
</tr>
) : (
data.map((node: any) => (
<tr>
<td
className="py-3 px-4 overflow-hidden overflow-ellipsis whitespace-nowrap"
style={{ minWidth: "64px", maxWidth: "100px" }}
>
<div className="flex space-x-2 items-center">
{node.type === "plugin" ? (
<img
src={`https://cdn-botway.deno.dev/icons/${node.name}.svg`}
width={20}
/>
) : node.type === "volume" ? (
<img
src={`https://cdn-botway.deno.dev/icons/volume.svg`}
width={17}
/>
) : (
<img
src={`https://cdn-botway.deno.dev/icons/github.svg`}
width={20}
/>
)}
</div>
</td>
<td
className="py-3 px-4 overflow-hidden hidden md:table-cell overflow-ellipsis whitespace-nowrap"
style={{ minWidth: "64px", maxWidth: "250px" }}
>
<div className="flex space-x-2 mt-0.5 items-center">
<p className="text-sm text-white">
{node.type === "plugin"
? node.friendlyName
: node.name}
</p>
</div>
</td>
<td
className="py-3 px-4 overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500"
style={{ minWidth: "64px", maxWidth: "400px" }}
>
<span className="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
{node.type}
</span>
</td>
<td
className="py-3 px-4 overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500"
style={{ minWidth: "64px", maxWidth: "200px" }}
>
<div className="bg-secondary rounded-lg p-1 items-center justify-center"></div>
</td>
</tr>
))
)}
</tbody>
</table>
</div>
</div>
</div>
<div className="mx-6">
<div className="my-6">
<h3 className="text-white text-xl">Infrastructure</h3>
</div>
<div className="overflow-hidden shadow">
<div className="flex flex-col gap-0">
<div className="grid lg:grid-cols-2 sm:grid-cols-2 lt-md:!grid-cols-1 gap-3">
<a
href="https://docker.com"
target="_blank"
className="border border-gray-800 transition-all bg-[#00084d] hover:bg-[#00124d] duration-200 rounded-2xl p-4 flex flex-col items-center"
>
<div aria-hidden="true">
<img
src="https://cdn-botway.deno.dev/icons/docker.svg"
width={35}
/>
</div>
<div className="space-y-2 mt-3 sm:space-y-4 flex flex-col items-center">
<h1 className="text-white text-xs md:text-sm font-bold">
Docker is your Container Builder
</h1>
<p className="text-xs md:text-sm text-gray-400 text-center">
Docker is a platform for developing, shipping, and
running applications 🐳
</p>
</div>
</a>
<a
href="https://railway.app"
target="_blank"
className="border border-gray-800 transition-all bg-[#181622] hover:bg-[#1f132a] duration-200 rounded-2xl p-4 flex flex-col items-center"
>
<div aria-hidden="true">
<img
src="https://cdn-botway.deno.dev/icons/railway.svg"
width={30}
/>
</div>
<div className="space-y-2 mt-3 sm:space-y-4 flex flex-col items-center">
<h1 className="text-white text-xs md:text-sm font-bold">
Railway is your Host Service
</h1>
<p className="text-xs md:text-sm text-gray-400 text-center">
Railway is a canvas for shipping your apps, databases,
and more 🚄
</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div className="mx-6"></div>
</ProjectLayout>
)}
Expand Down
Empty file added core/app/project/[id]/resources/page.tsx
View file
Empty file.
54 changes: 0 additions & 54 deletions core/app/project/[id]/settings/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,60 +466,6 @@ const Project = ({ user, projectId }: any) => {
)}
</Formik>

<div>
<div className="my-6">
<h3 className="text-white text-xl">Infrastructure</h3>
</div>
<div className="overflow-hidden shadow">
<div className="flex flex-col gap-0">
<div className="grid lg:grid-cols-2 sm:grid-cols-2 lt-md:!grid-cols-1 gap-3">
<a
href="https://docker.com"
target="_blank"
className="border border-gray-800 transition-all bg-[#00084d] hover:bg-[#00124d] duration-200 rounded-2xl p-4 flex flex-col items-center"
>
<div aria-hidden="true">
<img
src="https://cdn-botway.deno.dev/icons/docker.svg"
width={35}
/>
</div>
<div className="space-y-2 mt-3 sm:space-y-4 flex flex-col items-center">
<h1 className="text-white text-xs md:text-sm font-bold">
Docker is your Container Builder
</h1>
<p className="text-xs md:text-sm text-gray-400 text-center">
Docker is a platform for developing, shipping, and
running applications 🐳
</p>
</div>
</a>
<a
href="https://railway.app"
target="_blank"
className="border border-gray-800 transition-all bg-[#181622] hover:bg-[#1f132a] duration-200 rounded-2xl p-4 flex flex-col items-center"
>
<div aria-hidden="true">
<img
src="https://cdn-botway.deno.dev/icons/railway.svg"
width={30}
/>
</div>
<div className="space-y-2 mt-3 sm:space-y-4 flex flex-col items-center">
<h1 className="text-white text-xs md:text-sm font-bold">
Railway is your Host Service
</h1>
<p className="text-xs md:text-sm text-gray-400 text-center">
Railway is a canvas for shipping your apps,
databases, and more 🚄
</p>
</div>
</a>
</div>
</div>
</div>
</div>

<div>
<div className="my-6">
<h3 className="text-white text-xl">Bot Configuration</h3>
Expand Down
24 changes: 23 additions & 1 deletion core/components/Layout/project.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import {
AppsIcon,
CodespacesIcon,
DatabaseIcon,
GearIcon,
HomeIcon,
ListUnorderedIcon,
PackageIcon,
ServerIcon,
SlidersIcon,
} from "@primer/octicons-react";
import { UserAvatar } from "../UserAvatar";
import { CMDK } from "./cmdk";
Expand Down Expand Up @@ -153,6 +155,16 @@ export const ProjectLayout = ({
</a>
</Tooltip>
</button>
<button className="place-content-center">
<Tooltip content="Resources" arrow={false} placement="right">
<a
className="transition-colors duration-200 flex items-center justify-center h-10 w-10 rounded hover:bg-bwdefualt"
href={`/project/${projectId}/resources`}
>
<DatabaseIcon className="fill-white" size={18} />
</a>
</Tooltip>
</button>
<button>
<Tooltip content="Deployments" arrow={false} placement="right">
<a
Expand All @@ -174,6 +186,16 @@ export const ProjectLayout = ({
</a>
</Tooltip>
</button>
<button>
<Tooltip content="Environment" arrow={false} placement="right">
<a
className="transition-colors duration-200 flex items-center justify-center h-10 w-10 rounded hover:bg-bwdefualt"
href={`/project/${projectId}/deployments`}
>
<SlidersIcon className="fill-white" size={18} />
</a>
</Tooltip>
</button>
<button>
<Tooltip content="Settings" arrow={false} placement="right">
<a
Expand Down Expand Up @@ -265,7 +287,7 @@ export const ProjectLayout = ({
<div
className={`${
!noMargin ? "mx-auto" : ""
} w-full max-w-7xl space-y-16`}
} w-full max-w-7xl space-y-8`}
>
{children}
</div>
Expand Down
4 changes: 2 additions & 2 deletions core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@primer/octicons-react": "^19.4.0",
"@supabase/auth-helpers-nextjs": "^0.7.2",
"@supabase/supabase-js": "^2.26.0",
"@tanstack/react-query": "^4.29.17",
"@tanstack/react-query": "^4.29.18",
"ajv": "^8.12.0",
"autoprefixer": "10.4.14",
"bcryptjs": "^2.4.3",
Expand Down Expand Up @@ -48,7 +48,7 @@
"@tailwindcss/typography": "^0.5.9",
"@types/bcryptjs": "^2.4.2",
"@types/marked": "^5.0.0",
"@types/node": "^20.3.1",
"@types/node": "^20.3.2",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
"@types/slug": "^5.0.3",
Expand Down
2 changes: 1 addition & 1 deletion packages/botway.js/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
"devDependencies": {
"@types/js-yaml": "^4.0.5",
"@types/node": "^20.2.5",
"@types/node": "^20.3.2",
"typescript": "^5.1.3"
},
"engines": {
Expand Down
Loading

0 comments on commit a2c30f4

Please sign in to comment.