fixing deploy

This commit is contained in:
Rizky 2024-08-26 19:18:38 +07:00
parent edc67f1c46
commit 9d501537b0
9 changed files with 358 additions and 168 deletions

View File

@ -126,7 +126,9 @@ model site {
responsive String @default("all")
npm_cache String @default(" ") @db.VarChar
code_mode String @default("old") @db.VarChar(5)
deploy_name String @default("DEV")
component_site component_site[]
deploy_target deploy_target[]
npm_site npm_site[]
page page[]
page_folder page_folder[]
@ -167,8 +169,9 @@ model page_history {
model deploy_target {
id String @id(map: "deploy_target_id") @default(dbgenerated("gen_random_uuid()")) @db.Uuid
id_site Int
name String
api_url String
domain String
id_site String @db.Uuid
site site @relation(fields: [id_site], references: [id], onDelete: NoAction, onUpdate: NoAction)
}

View File

@ -640,6 +640,10 @@ video {
top: 0px;
}
.top-2 {
top: 0.5rem;
}
.top-\[0\.2rem\] {
top: 0.2rem;
}
@ -824,10 +828,6 @@ video {
margin-left: 2rem;
}
.mr-0 {
margin-right: 0px;
}
.mr-1 {
margin-right: 0.25rem;
}
@ -1072,6 +1072,10 @@ video {
min-height: 28px;
}
.min-h-\[300px\] {
min-height: 300px;
}
.min-h-\[30px\] {
min-height: 30px;
}
@ -1611,6 +1615,10 @@ video {
border-bottom-width: 1px;
}
.border-b-0 {
border-bottom-width: 0px;
}
.border-b-2 {
border-bottom-width: 2px;
}
@ -1639,10 +1647,6 @@ video {
border-top-width: 1px;
}
.border-t-0 {
border-top-width: 0px;
}
.border-\[\#d1d5db\] {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
@ -2155,6 +2159,10 @@ video {
padding-bottom: 6px;
}
.pb-0 {
padding-bottom: 0px;
}
.pb-1 {
padding-bottom: 0.25rem;
}
@ -2632,11 +2640,6 @@ body {
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.hover\:border-green-700:hover {
--tw-border-opacity: 1;
border-color: rgb(21 128 61 / var(--tw-border-opacity));
}
.hover\:border-orange-500:hover {
--tw-border-opacity: 1;
border-color: rgb(249 115 22 / var(--tw-border-opacity));
@ -2735,11 +2738,6 @@ body {
background-color: rgb(134 239 172 / var(--tw-bg-opacity));
}
.hover\:bg-green-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}
.hover\:bg-green-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@ -2790,6 +2788,11 @@ body {
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.hover\:bg-red-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}
.hover\:bg-slate-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
@ -2819,11 +2822,6 @@ body {
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.hover\:text-green-700:hover {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity));
}
.hover\:text-green-900:hover {
--tw-text-opacity: 1;
color: rgb(20 83 45 / var(--tw-text-opacity));

File diff suppressed because one or more lines are too long

View File

@ -50,6 +50,7 @@ export const site_load: SAction["site"]["load"] = async function (
name: site.name,
config: config as ESite["config"],
domain: site.domain,
deploy_name: site.deploy_name,
js: site.js || "",
responsive: site.responsive as ESite["responsive"],
js_compiled: site.js_compiled || "",

View File

@ -16,6 +16,7 @@ export const EmptySite = {
name: "",
domain: "",
config: { api_url: "" },
deploy_name:"",
js: "",
js_compiled: "",
responsive: "" as "desktop-only" | "mobile-only" | "responsive",
@ -324,7 +325,7 @@ export const EDGlobal = {
on_pick?: (group_id: string) => void | Promise<void>;
on_close?: () => void | Promise<void>;
},
api: { open: false },
api: { open: true },
},
},
};

View File

@ -8,14 +8,21 @@ export const EdApiDB = ({
db,
render,
update,
api_url,
}: {
db: { url: string };
api_url: string;
render: () => void;
update: () => void;
}) => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ url: db.url, has_prisma: false });
const api = apiRef[apiUrl(p)];
const api = apiRef[api_url];
let is_main = true;
if (apiUrl(p) !== api_url) {
is_main = false;
}
useEffect(() => {
_api.local_prisma("check", p.site.id).then((res: any) => {
@ -69,19 +76,6 @@ export const EdApiDB = ({
url: `${location.protocol}//${location.host}/local-prisma/src/${p.site.id}`,
});
server.status = "ready";
render();
alert("Prisma Schema Synchronized");
}}
>
Sync prisma.schema
</div>
<div
className="border rounded-sm px-2 text-[12px] hover:bg-blue-100 cursor-pointer"
onClick={async () => {
server.status = "restarting";
render();
await api._deploy({
type: "db-gen",
id_site: p.site.id,
@ -90,14 +84,16 @@ export const EdApiDB = ({
render();
alert("DB GENERATE: OK\nRESTART: OK");
if (is_main) {
localStorage.removeItem(`schema-md-${p.site.id}`);
_api.clear_route_cache(p.site.id);
_api.type_rebuild(p.site.id);
location.reload();
}
}}
>
Generate
Sync & Generate prisma.schema
</div>
</>
) : (
@ -114,10 +110,12 @@ export const EdApiDB = ({
render();
alert("DB PULL & GENERATE: OK\nRESTART: OK");
if (is_main) {
localStorage.removeItem(`schema-md-${p.site.id}`);
_api.clear_route_cache(p.site.id);
_api.type_rebuild(p.site.id);
location.reload();
}
}}
>
DB Pull
@ -137,10 +135,11 @@ export const EdApiDB = ({
server.status = "ready";
render();
alert("RESTART: OK");
_api.clear_route_cache(p.site.id);
console.warn("reload 8");
if (is_main) {
_api.clear_route_cache(p.site.id);
location.reload();
}
}}
>
Restart Server

View File

@ -5,7 +5,9 @@ import { apiRef, apiUrl, server } from "./api-utils";
export const EdApiDeploy = ({
deploy,
api_url,
}: {
api_url: string;
deploy: {
current: number;
now: number;
@ -13,12 +15,12 @@ export const EdApiDeploy = ({
};
}) => {
const p = useGlobal(EDGlobal, "EDITOR");
const api = apiRef[apiUrl(p)];
const api = apiRef[api_url];
const local = deploy;
const deploys = local.deploys;
return (
<div className="flex border-slate-200 boxed flex flex-col items-stretch">
<div className="flex border-slate-200 boxed flex-col items-stretch">
<div className="flex justify-between py-2 px-2 ">
<div>History:</div>
<div

View File

@ -1,9 +1,12 @@
import { forwardRef } from "react";
import { useGlobal } from "web-utils";
import { useGlobal, useLocal } from "web-utils";
import { Modal } from "../../../../../utils/ui/modal";
import { EDGlobal } from "../../../logic/ed-global";
import { EdApiTab } from "./api-tab";
import trim from "lodash.trim";
import { Popover } from "../../../../../utils/ui/popover";
import { deploy_target } from "../../../../../../../db/db";
import { apiRef, apiUrl } from "./api-utils";
export const EdPopApi = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -35,43 +38,215 @@ export const EdApiServer = forwardRef<
}
>(({ popover }, ref) => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal(
{
tabs: [{ name: p.site.deploy_name, id: "" }] as deploy_target[],
active: 0,
open: false,
},
async () => {
const targets = await _db.deploy_target.findMany({
where: { id_site: p.site.id },
});
for (const t of targets) {
local.tabs.push(t);
}
local.render();
}
);
return (
<div
ref={ref}
className="flex flex-col w-[400px] items-stretch bg-white -mx-[8px] -my-[3px] text-[14px]"
className="flex flex-col w-[400px] min-h-[400px] items-stretch bg-white -mx-[8px] -my-[3px] text-[14px]"
>
<div className="flex bg-slate-100 p-1 border-b pb-0 select-none">
{local.tabs.map((e, idx) => {
return (
<div
key={idx}
className={cx(
"px-2 border border-b-0 flex cursor-pointer items-center space-x-2",
local.active === idx
? "bg-white hover:bg-blue-100"
: "px-2 border border-b-0 hover:bg-blue-100",
css`
margin-bottom: -1px;
`,
idx > 0 && `ml-1`
)}
onClick={() => {
local.active = idx;
local.render();
}}
>
<div>{e.name}</div>
{local.active === idx && (
<Popover
open={local.open}
backdrop={false}
onOpenChange={(open) => {
local.open = open;
local.render();
}}
content={
<div className="px-2 pb-2 flex flex-col space-y-2 items-center">
<svg
className="absolute top-2 right-2 cursor-pointer"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
onClick={() => {
local.open = false;
local.render();
}}
>
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
<label>
<div>Deploy Name:</div>
<input
defaultValue={e.name}
autoFocus
spellCheck={false}
className="border p-1"
onKeyUp={(ev) => {
if (ev.key === "Enter") {
ev.currentTarget.blur();
}
}}
onBlur={async (ev) => {
const name = ev.currentTarget.value;
if (name !== e.name) {
if (confirm(`Rename ${e.name} to ${name}?`)) {
if (idx === 0) {
await _db.site.update({
where: { id: p.site.id },
data: { deploy_name: name },
});
} else {
const target = local.tabs[
idx
] as deploy_target;
await _db.deploy_target.update({
where: { id: target.id },
data: { name },
});
}
e.name = name;
local.open = false;
local.render();
}
}
}}
/>
</label>
{idx > 0 && (
<div
onClick={async () => {
if (
confirm(
"Are you sure to delete this deploy target ? This is cannot be reversed."
)
) {
const target = local.tabs[idx] as deploy_target;
await _db.deploy_target.delete({
where: { id: target.id },
});
local.active -= 1;
local.tabs.splice(idx, 1);
local.render();
}
}}
className="mt-2 rounded bg-red-500 text-white px-2 py-1 cursor-pointer hover:bg-red-700"
>
Delete
</div>
)}
</div>
}
>
<svg
onClick={() => {
local.open = true;
local.render();
}}
xmlns="http://www.w3.org/2000/svg"
width="9"
height="9"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1"
>
<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
<path d="m15 5 4 4" />
</svg>
</Popover>
)}
</div>
);
})}
<div
onClick={async () => {
const new_name = prompt("New Deploy Target Name:");
if (new_name) {
const new_target = await _db.deploy_target.create({
data: {
api_url: "",
domain: "",
id_site: p.site.id,
name: new_name,
},
});
local.tabs.push(new_target);
local.render();
}
}}
className="mb-1 ml-1 bg-white px-1 cursor-pointer hover:bg-blue-100 border flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
</div>
</div>
<EdApiTab
onRender={(update) => {
popover.onClose = update;
}}
target={local.active > 0 ? local.tabs[local.active] : undefined}
id_site={p.site.id}
api_url={p.site.config.api_url}
onUpdate={async ({ api_url }) => {
if (local.active === 0) {
p.render();
p.site.config.api_url = trim(api_url, "/");
await p.sync?.site.update(p.site.id, {
config: { api_url: api_url },
});
// if (local.hasDB && local.oldDB.url !== local.db.url) {
// server.status = "saving";
// p.render();
// await apiRef[apiUrl(p)]._deploy({
// type: "db-update",
// id_site: p.site.id,
// url: local.db.url,
// });
// local.oldDB.url = local.db.url;
// p.render();
// }
// if (server.status === "saving") {
// await check();
// server.status = "ready";
// p.render();
// }
} else {
const target = local.tabs[local.active];
await _db.deploy_target.update({
where: { id: target.id },
data: { api_url },
});
}
}}
/>
</div>

View File

@ -1,20 +1,21 @@
import trim from "lodash.trim";
import { FC } from "react";
import { FC, useEffect } from "react";
import { deepClone, useLocal } from "web-utils";
import { deploy_target } from "../../../../../../../db/db";
import { EdApiDB } from "./api-db";
import { EdApiDeploy } from "./api-deploy";
import { apiRef, checkAPI, dev, server } from "./api-utils";
import { checkAPI, dev, server } from "./api-utils";
export const EdApiTab: FC<{
onRender: (fn: () => void) => void;
target?: deploy_target;
api_url: string;
id_site: string;
onUpdate: (arg: { api_url: string }) => {};
}> = ({ onRender, api_url, id_site, onUpdate }) => {
const local = useLocal(
{
}> = ({ onRender, api_url, id_site, onUpdate, target }) => {
const local = useLocal({
api_url,
status: "checking" as "online" | "error" | "offline" | "checking",
status: "init" as "init" | "online" | "error" | "offline" | "checking",
deployable: false,
db: { url: "" },
oldDB: { url: "" },
@ -25,28 +26,29 @@ export const EdApiTab: FC<{
current: 0,
deploys: [] as number[],
},
},
() => {
try {
if (dev) {
const vdev = JSON.parse(localStorage.getItem("prasi-dev") || "{}");
});
if (vdev && Object.keys(vdev).length > 0) {
dev.url = vdev.url;
dev.enabled = vdev.enabled;
}
}
} catch (e) {}
useEffect(() => {
check();
}
);
const url = api_url;
}, [target]);
const check = async () => {
if (local.status === "checking") return;
local.status = "checking";
local.render();
const res = await checkAPI(api_url, id_site);
let url = target ? target.api_url : api_url;
const res = await checkAPI(url, id_site);
local.api_url = url;
local.status = "online";
if (typeof res === "object") {
// await apiRef[apiUrl(p)]._deploy({
// type: "db-update",
// id_site: p.site.id,
// url: local.db.url,
// });
local.db = res.db;
local.domains = res.domains;
local.oldDB = deepClone(res.db);
@ -73,7 +75,7 @@ export const EdApiTab: FC<{
}
};
const update = async () => {
if (local.api_url !== api_url) {
if (local.api_url !== api_url && local.status !== "checking") {
server.status = "saving";
onUpdate({ api_url: local.api_url });
}
@ -85,7 +87,7 @@ export const EdApiTab: FC<{
<>
<div className="flex justify-between items-center pr-1">
<div className="p-1">Server URL:</div>
{url && (
{local.api_url && (
<div className="text-[12px]">
{local.status === "online" && (
<div className="bg-green-700 px-2 text-white">ONLINE</div>
@ -101,12 +103,14 @@ export const EdApiTab: FC<{
)}
</div>
)}
{!url && (
{!local.api_url && (
<div className="text-[12px] text-slate-500">INVALID SERVER</div>
)}
</div>
{local.status !== "checking" && (
<>
<div className="flex border-y">
<div className="flex flex-1 p-1 ">
<div className="flex flex-1 ">
<input
spellCheck={false}
value={local.api_url}
@ -130,7 +134,7 @@ export const EdApiTab: FC<{
}}
type="text"
className={cx(
"outline-none focus:border-blue-500 flex-1",
" flex-1 p-1",
dev.enabled && "line-through opacity-30"
)}
onKeyDown={(e) => {
@ -155,11 +159,18 @@ export const EdApiTab: FC<{
</>
)}
{local.hasDB && (
<EdApiDB db={local.db} render={local.render} update={update} />
<EdApiDB
api_url={local.api_url}
db={local.db}
render={local.render}
update={update}
/>
)}
{local.deployable && (
<>
<EdApiDeploy deploy={local.deploy} />
<EdApiDeploy api_url={local.api_url} deploy={local.deploy} />
</>
)}
</>
)}
</>