starred/komodo
1
0
Fork 0
mirror of https://github.com/moghtech/komodo.git synced 2026-09-10 16:01:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

deployment tabs and updates

Browse Source
This commit is contained in:
mbecker20
2022-03-23 22:06:29 -07:00
parent ca9678b346
commit 02cd1379a0
11 changed files with 78 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/deployment/Actions.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import s from "./deployment.module.css";
const Actions: Component<{ deployment: Deployment }> = (p) => {
return (
<Grid class={s.Actions}>
<div class={s.Header}>actions</div>
<div class={s.ItemHeader}>actions</div>
<Flex alignItems="center" class={s.Action}>
deploy:{" "}
<button>
frontend/src/components/deployment/Deployment.module.css
+16 -1
View File
@@ -1,6 +1,6 @@
.Deployment {
grid-area: content;
grid-template-columns: 2fr 3fr;
grid-template-columns: 1fr 2fr;
background-color: rgb(49, 78, 112);
padding: 1rem;
}
@@ -10,7 +10,13 @@
}
.Header {
background-color: rgb(35, 73, 115);
padding: 0.5rem;
}
.ItemHeader {
font-size: 1.5rem;
font-weight: 500;
}
.Actions {
@@ -20,4 +26,13 @@
.Action {
background-color: rgb(35, 73, 115);
}
.Updates {
background-color: rgb(35, 73, 115);
padding: 0.5rem;
}
.Update {
background-color: rgb(35, 73, 115);
}
frontend/src/components/deployment/Deployment.tsx
+8 -4
View File
@@ -5,23 +5,27 @@ import Grid from "../util/layout/Grid";
import Actions from "./Actions";
import s from "./deployment.module.css";
import DeploymentTabs from "./tabs/DeploymentTabs";
import Updates from "./updates/Updates";
const Deployment: Component<{ id: string }> = (p) => {
const { servers, deployments } = useAppState();
const deployment = () => deployments.get(p.id);
const server = () => deployment() && servers.get(deployment()?.serverID!);
return (
<Show when={deployment()}>
<Show when={deployment() && server()}>
<Grid class={s.Deployment}>
{/* left / actions */}
<Grid class={s.Left}>
<Flex class={s.Header}>
name:{" "}
<div style={{ "font-weight": "bold" }}>{deployment()!.name}</div>
<Grid gap="0.1rem">
<div class={s.ItemHeader}>{deployment()!.name}</div>
<div>{server()!.name}</div>
</Grid>
</Flex>
<Actions deployment={deployment()!} />
<Updates deploymentID={p.id} />
</Grid>
{/* right / tabs */}
<DeploymentTabs />
</Grid>
frontend/src/components/deployment/tabs/Config.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { useToggle } from "../../../util/hooks";
const Config: Component<{}> = (p) => {
const [editing, toggleEditing] = useToggle();
return <div class={s.Config}></div>;
return <div class={s.Config}>config</div>;
};
export default Config;
frontend/src/components/deployment/tabs/DeploymentTabs.tsx
+25 -9
View File
@@ -1,13 +1,29 @@
import { Component } from "solid-js";
import Grid from "../../util/layout/Grid";
import s from "../deployment.module.css";
import Tabs from "../../util/tabs/Tabs";
import Config from "./Config";
import ErrorLog from "./ErrorLog";
import Log from "./Log";
const DeploymentTabs: Component<{}> = (p) => {
return (
<Grid class={s.DeploymentTabs} >
tabs
</Grid>
);
}
return (
<Tabs
tabs={[
{
title: "log",
element: <Log />,
},
{
title: "error log",
element: <ErrorLog />,
},
{
title: "config",
element: <Config />,
},
]}
localStorageKey="deployment-tab"
/>
);
};
export default DeploymentTabs;
export default DeploymentTabs;
frontend/src/components/deployment/tabs/ErrorLog.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import s from "../deployment.module.css";
const ErrorLog: Component<{}> = (p) => {
return (
<div class={s.ErrorLog} >
error log
</div>
);
}
frontend/src/components/deployment/tabs/Log.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import s from "../deployment.module.css";
const Log: Component<{}> = (p) => {
return (
<div class={s.Log} >
log
</div>
);
}
frontend/src/components/deployment/updates/Update.tsx
+5 -4
View File
@@ -1,12 +1,13 @@
import { Update } from "@monitor/types";
import { Update as UpdateType } from "@monitor/types";
import { Component } from "solid-js";
import Grid from "../../util/layout/Grid";
import s from "../deployment.module.css";
const Update: Component<{ update: Update }> = (p) => {
const Update: Component<{ update: UpdateType }> = (p) => {
return (
<div class={s.Update}>
<Grid class={s.Update}>
</div>
</Grid>
);
}
frontend/src/components/deployment/updates/Updates.tsx
+18 -11
View File
@@ -1,17 +1,24 @@
import { Component } from "solid-js";
import { Component, For, Show } from "solid-js";
import { useUpdates } from "../../../state/hooks";
import { useAppState } from "../../../state/StateProvider";
import Grid from "../../util/layout/Grid";
import s from "../deployment.module.css";
import Update from "./Update";
const Updates: Component<{ deploymentID: string }> = (p) => {
const { updates, ws } = useAppState();
const selectedUpdates = useUpdates({ deploymentID: p.deploymentID });
return (
<div class={s.Updates} >
</div>
);
}
const { updates, ws } = useAppState();
const selectedUpdates = useUpdates({ deploymentID: p.deploymentID });
export default Updates;
return (
<Grid class={s.Updates}>
<div class={s.ItemHeader}>updates</div>
<Show when={selectedUpdates.loaded()}>
<For each={selectedUpdates.collection()}>
{(update) => <Update update={update} />}
</For>
</Show>
</Grid>
);
};
export default Updates;
frontend/src/components/topbar/Account.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const Account: Component<{}> = (p) => {
const { logout } = useAppState();
const { user, username } = useUser();
return (
<Grid class={s.Account}>
<Grid class={s.Account} placeItems="center end">
<div>{username()}</div>
<div>permissions: {readablePermissions(user()!.permissions!)}</div>
<ConfirmButton onConfirm={logout} color="red">
frontend/src/components/topbar/updates/Updates.tsx
+1
View File
@@ -9,6 +9,7 @@ const Updates: Component<{}> = (p) => {
return (
<Show when={updates.loaded()}>
<Grid class={s.Updates}>
<div style={{ "font-size": "1.5rem", "font-weight": 500, "place-self": "center end" }}>updates</div>
<For each={updates.collection()!}>
{(update) => <Update update={update} />}
</For>