ComputerSurge/komodo
3
0
Fork 0
forked from github-starred/komodo
Code Pull Requests 1 Actions Packages Releases Activity

fix notifications, add dynamic listener url

Browse Source
This commit is contained in:
mbecker20
2023-02-28 03:41:25 +00:00
parent 2944ba6ef9
commit 94949291c2
10 changed files with 72 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -17,7 +17,7 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="app"></div>
<div id="root" class="app-bounder"></div>
<script src="/src/index.tsx" type="module"></script>
</body>

4
frontend/src/App.tsx
View File

@@ -14,7 +14,7 @@ const Account = lazy(() => import("./components/Account"));
const App: Component = () => {
const { user } = useUser();
return (
<>
<div class="app">
<Topbar />
<Routes>
<Route path="/" component={Home} />
@@ -27,7 +27,7 @@ const App: Component = () => {
<Route path="/users" component={Users} />
</Show>
</Routes>
</>
</div>
);
};

6
frontend/src/components/build/tabs/config/BuildConfig.tsx
View File

@@ -10,7 +10,7 @@ import Loading from "../../../shared/loading/Loading";
import BuildArgs from "./BuildArgs";
import Version from "./Version";
import Repo from "./Repo";
import ListenerUrl from "./ListenerUrl";
import WebhookUrl from "./WebhookUrl";
const BuildConfig: Component<{}> = (p) => {
const { build, reset, save, userCanUpdate } = useConfig();
@@ -23,7 +23,9 @@ const BuildConfig: Component<{}> = (p) => {
<Docker />
<CliBuild />
<BuildArgs />
<ListenerUrl />
<Show when={userCanUpdate()}>
<WebhookUrl />
</Show>
</Grid>
<Show when={userCanUpdate() && build.updated}>
<Show

37
frontend/src/components/build/tabs/config/ListenerUrl.tsx
View File

@@ -1,37 +0,0 @@
import { Component, Show } from "solid-js";
import { pushNotification, MONITOR_BASE_URL } from "../../../..";
import { copyToClipboard, getId } from "../../../../util/helpers";
import ConfirmButton from "../../../shared/ConfirmButton";
import Icon from "../../../shared/Icon";
import Flex from "../../../shared/layout/Flex";
import Grid from "../../../shared/layout/Grid";
import { useConfig } from "../Provider";
const ListenerUrl: Component<{}> = (p) => {
const { build, userCanUpdate } = useConfig();
const listenerUrl = () => `${MONITOR_BASE_URL}/api/listener/build/${getId(build)}`;
return (
<Show when={userCanUpdate()}>
<Grid class="config-item shadow">
<h1>webhook url</h1>
<Flex justifyContent="space-between" alignItems="center">
<div class="ellipsis" style={{ width: "250px" }}>
{listenerUrl()}
</div>
<ConfirmButton
class="blue"
onFirstClick={() => {
copyToClipboard(listenerUrl());
pushNotification("good", "copied url to clipboard");
}}
confirm={<Icon type="check" />}
>
<Icon type="clipboard" />
</ConfirmButton>
</Flex>
</Grid>
</Show>
);
}
export default ListenerUrl;

49
frontend/src/components/build/tabs/config/WebhookUrl.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { Component, createResource, Show } from "solid-js";
import { pushNotification, MONITOR_BASE_URL, client } from "../../../..";
import { copyToClipboard, getId } from "../../../../util/helpers";
import ConfirmButton from "../../../shared/ConfirmButton";
import Icon from "../../../shared/Icon";
import Flex from "../../../shared/layout/Flex";
import Grid from "../../../shared/layout/Grid";
import Loading from "../../../shared/loading/Loading";
import { useConfig } from "../Provider";
const ListenerUrl: Component<{}> = (p) => {
const { build } = useConfig();
const [github_base_url] = createResource(() =>
client.get_github_webhook_base_url()
);
const listenerUrl = () => {
if (github_base_url()) {
return `${github_base_url()}/api/listener/build/${getId(build)}`;
}
};
return (
<Grid class="config-item shadow">
<h1>webhook url</h1>
<Flex
justifyContent="space-between"
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<Show when={listenerUrl()} fallback={<Loading type="three-dot" />}>
<div class="ellipsis" style={{ width: "250px" }}>
{listenerUrl()}
</div>
</Show>
<ConfirmButton
class="blue"
onFirstClick={() => {
copyToClipboard(listenerUrl() || "");
pushNotification("good", "copied url to clipboard");
}}
confirm={<Icon type="check" />}
>
<Icon type="clipboard" />
</ConfirmButton>
</Flex>
</Grid>
);
};
export default ListenerUrl;

27
frontend/src/components/deployment/tabs/config/Config.tsx
View File

@@ -22,6 +22,7 @@ import { combineClasses, copyToClipboard, getId } from "../../../../util/helpers
import { useAppDimensions } from "../../../../state/DimensionProvider";
import SimpleTabs from "../../../shared/tabs/SimpleTabs";
import ExtraArgs from "./container/ExtraArgs";
import WebhookUrl from "./container/WebhookUrl";
const Config: Component<{}> = () => {
const { deployment, reset, save, userCanUpdate } = useConfig();
@@ -63,31 +64,7 @@ const Config: Component<{}> = () => {
<Grid class="config-items scroller" placeItems="start center">
<Git />
<Show when={userCanUpdate()}>
<Grid class={combineClasses("config-item shadow")}>
<h1>webhook url</h1>
<Flex
justifyContent="space-between"
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<div class="ellipsis" style={{ width: "250px" }}>
{listenerUrl()}
</div>
<ConfirmButton
class="blue"
onFirstClick={() => {
copyToClipboard(listenerUrl());
pushNotification(
"good",
"copied url to clipboard"
);
}}
confirm={<Icon type="check" />}
>
<Icon type="clipboard" />
</ConfirmButton>
</Flex>
</Grid>
<WebhookUrl />
</Show>
<RepoMount />
<OnClone />

2
frontend/src/components/deployment/tabs/config/container/WebhookUrl.tsx
View File

@@ -25,7 +25,7 @@ const WebhookUrl: Component<{}> = (p) => {
style={{ "flex-wrap": "wrap" }}
>
<Show when={listenerUrl()} fallback={<Loading type="three-dot" />}>
<div class="ellipsis" style={{ width: "250px" }}>
<div class="ellipsis" style={{ "max-width": "250px" }}>
{listenerUrl()}
</div>
</Show>

5
frontend/src/components/shared/notification/Notifications.module.css
View File

@@ -1,11 +1,12 @@
.NotificationProvider {
position: absolute;
position: sticky;
left: 50vw;
top: 5px;
top: 0.5rem;
background-color: transparent;
display: flex;
flex-direction: column;
z-index: 9000;
height: 0px;
}
.Notification {

2
frontend/src/index.tsx
View File

@@ -34,6 +34,7 @@ export const { Notifications, pushNotification } = makeNotifications();
client.initialize().then(() => {
render(
() => [
<Notifications />,
<DimensionProvider>
<UserProvider>
<LoginGuard>
@@ -45,7 +46,6 @@ client.initialize().then(() => {
</LoginGuard>
</UserProvider>
</DimensionProvider>,
<Notifications />,
],
document.getElementById("root") as HTMLElement
);

9
frontend/src/style/app.scss
View File

@@ -1,5 +1,14 @@
@use "colors" as c;
.app-bounder {
display: grid;
grid-template-columns: 1fr;
width: 100vw;
max-width: calc(1200px + 2rem);
box-sizing: border-box;
place-items: center;
}
.app {
display: grid;
grid-template-columns: 1fr;