wip checkpoint api server
This commit is contained in:
Rizky
parent
2565814775
commit
058c84ad23
|
|
@ -1,17 +1,66 @@
|
|||
import { forwardRef } from "react";
|
||||
import { useGlobal, useLocal } from "web-utils";
|
||||
import { EDGlobal } from "../../../logic/ed-global";
|
||||
import { EDGlobal, PG } from "../../../logic/ed-global";
|
||||
import { checkAPI, dev } from "./api-utils";
|
||||
|
||||
export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
const local = useLocal({ api_url: p.site.config.api_url });
|
||||
const local = useLocal(
|
||||
{
|
||||
api_url: p.site.config.api_url,
|
||||
status: "offline" as "online" | "offline" | "checking",
|
||||
deployable: false,
|
||||
hasDB: false,
|
||||
},
|
||||
() => {
|
||||
try {
|
||||
if (dev) {
|
||||
const vdev = JSON.parse(localStorage.getItem("prasi-dev") || "{}");
|
||||
if (vdev) {
|
||||
dev.url = vdev.url;
|
||||
dev.enabled = vdev.enabled;
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
check();
|
||||
}
|
||||
);
|
||||
|
||||
const check = () => {
|
||||
local.status = "checking";
|
||||
local.render();
|
||||
const res = checkAPI(p);
|
||||
if (res) {
|
||||
local.hasDB = res.hasDB;
|
||||
local.status = "online";
|
||||
local.deployable = res.deployable;
|
||||
local.render();
|
||||
} else {
|
||||
local.hasDB = false;
|
||||
local.status = "offline";
|
||||
local.deployable = false;
|
||||
local.render();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex flex-col w-[400px] items-stretch bg-white min-h-[200px] -mx-[8px] -my-[3px] text-[14px]"
|
||||
className="flex flex-col w-[400px] items-stretch bg-white -mx-[8px] -my-[3px] text-[14px]"
|
||||
>
|
||||
<div className="flex justify-between items-center pr-1">
|
||||
<div className="p-1">Server URL:</div>
|
||||
<div className="text-[12px]">
|
||||
{local.status === "online" && (
|
||||
<div className="bg-green-700 px-2 text-white">ONLINE</div>
|
||||
)}
|
||||
{local.status === "offline" && (
|
||||
<div className="text-white px-2 bg-slate-500">OFFLINE</div>
|
||||
)}
|
||||
{local.status === "checking" && (
|
||||
<div className="text-blue-500">Checking...</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex border-y">
|
||||
<div className="flex flex-1 p-1 ">
|
||||
<input
|
||||
|
|
@ -27,18 +76,74 @@ export const EdApiServer = forwardRef<HTMLDivElement>((arg, ref) => {
|
|||
}
|
||||
}}
|
||||
type="text"
|
||||
className="outline-none focus:border-blue-500 flex-1"
|
||||
className={cx(
|
||||
"outline-none focus:border-blue-500 flex-1",
|
||||
dev.enabled && "line-through opacity-30"
|
||||
)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
onBlur={check}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
{local.api_url !== p.site.config.api_url && (
|
||||
<div className="p-1 flex w-[80px] border-l">
|
||||
<div className="bg-blue-500 hover:bg-blue-300 cursor-pointer flex-1 flex items-center justify-center text-white">
|
||||
Check
|
||||
</div>
|
||||
<div
|
||||
className={cx(
|
||||
"flex items-stretch h-[30px] border border-t-0",
|
||||
dev.enabled ? " bg-green-50" : ""
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cx(
|
||||
"border cursor-pointer m-1 flex items-center px-2 space-x-1 w-[70px] justify-center",
|
||||
!dev.enabled
|
||||
? "hover:bg-green-50 hover:border-green-700 hover:text-green-700 text-slate-500 "
|
||||
: "bg-green-700 text-white border-green-700"
|
||||
)}
|
||||
onClick={async () => {
|
||||
dev.enabled = !dev.enabled;
|
||||
localStorage.setItem("prasi-dev", JSON.stringify(dev));
|
||||
local.render();
|
||||
}}
|
||||
>
|
||||
<span>DEV</span>{" "}
|
||||
{dev.enabled && <span className="text-white">ON</span>}
|
||||
{!dev.enabled && <span className="text-slate-300">OFF</span>}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
className={cx(
|
||||
"px-1 m-1 border flex-1 font-mono text-[11px] outline-none focus:border-blue-500",
|
||||
dev.enabled && "border-green-700"
|
||||
)}
|
||||
value={dev.url}
|
||||
onChange={(e) => {
|
||||
dev.url = e.currentTarget.value;
|
||||
localStorage.setItem("prasi-dev", JSON.stringify(dev));
|
||||
local.render();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
onBlur={check}
|
||||
/>
|
||||
</div>
|
||||
{local.status === "online" && (
|
||||
<>
|
||||
{!local.deployable && !local.hasDB && (
|
||||
<div className="h-[50px] flex items-center justify-center text-slate-400 text-center">
|
||||
This server is not deployable <br />
|
||||
and do not have DB
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import { PG } from "../../../logic/ed-global";
|
||||
|
||||
export const dev = JSON.parse(localStorage.getItem("prasi-dev") || "{}") as {
|
||||
enabled: boolean;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export const apiUrl = function (p: PG): string {
|
||||
if (dev.enabled) {
|
||||
return dev.url;
|
||||
}
|
||||
return p.site.config.api_url;
|
||||
};
|
||||
|
||||
export const checkAPI = (p: PG) => {
|
||||
const url = apiUrl(p);
|
||||
if (!url) return null;
|
||||
|
||||
return { deployable: false, hasDB: false };
|
||||
};
|
||||
|
|
@ -9,17 +9,20 @@ export const EdSiteHead = ({
|
|||
reload,
|
||||
orglen,
|
||||
conf,
|
||||
local,
|
||||
}: {
|
||||
orglen: number;
|
||||
group: NodeModel<SiteGroupItem>[];
|
||||
update: (val: NodeModel<SiteGroupItem>[]) => void;
|
||||
reload: (id?: string) => Promise<void>;
|
||||
conf: { group: any };
|
||||
local: { search: string; render: () => void };
|
||||
}) => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
|
||||
return (
|
||||
<div className="border-b text-[20px] pt-[10px] pb-[5px] pl-1 flex items-center">
|
||||
<div className="border-b text-[20px] pt-[10px] pb-[5px] pl-1 flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div>
|
||||
{orglen} Organization{orglen > 1 ? "s" : ""}
|
||||
</div>
|
||||
|
|
@ -65,5 +68,16 @@ export const EdSiteHead = ({
|
|||
Refresh
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="search"
|
||||
value={local.search}
|
||||
placeholder="Search..."
|
||||
className="outline-none mr-2 border focus:border-blue-500 "
|
||||
onChange={(e) => {
|
||||
local.search = e.currentTarget.value;
|
||||
local.render();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -161,7 +161,9 @@ const SitePicker = ({
|
|||
update: (val: NodeModel<SiteGroupItem>[]) => void;
|
||||
reload: (id?: string) => Promise<void>;
|
||||
}) => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
const local = useLocal({
|
||||
search: "",
|
||||
});
|
||||
const orglen = group.filter((e) => e.parent === "site-root").length;
|
||||
return (
|
||||
<div className="flex flex-1 flex-col">
|
||||
|
|
@ -171,6 +173,7 @@ const SitePicker = ({
|
|||
reload={reload}
|
||||
orglen={orglen}
|
||||
conf={conf}
|
||||
local={local}
|
||||
/>
|
||||
<EdSiteTree
|
||||
group={group}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import get from "lodash.get";
|
||||
import { FC } from "react";
|
||||
import { useGlobal, useLocal } from "web-utils";
|
||||
import { initApi } from "../../../../../../utils/script/init-api";
|
||||
import { Loading } from "../../../../../../utils/ui/loading";
|
||||
import { EditorGlobal } from "../../../../logic/global";
|
||||
import { ExternalAPI } from "./External";
|
||||
|
|
|
|||
Loading…
Reference in New Issue