mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-06-22 23:55:22 +02:00
Compare commits
2 Commits
feat/tailw
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
b3c2e1e5af | ||
|
60867d0b60 |
@@ -1,42 +0,0 @@
|
||||
---
|
||||
name: frontend-design
|
||||
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
|
||||
license: Complete terms in LICENSE.txt
|
||||
---
|
||||
|
||||
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
|
||||
|
||||
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
|
||||
|
||||
## Design Thinking
|
||||
|
||||
Before coding, understand the context and commit to a BOLD aesthetic direction:
|
||||
- **Purpose**: What problem does this interface solve? Who uses it?
|
||||
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
|
||||
- **Constraints**: Technical requirements (framework, performance, accessibility).
|
||||
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
|
||||
|
||||
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
|
||||
|
||||
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
|
||||
- Production-grade and functional
|
||||
- Visually striking and memorable
|
||||
- Cohesive with a clear aesthetic point-of-view
|
||||
- Meticulously refined in every detail
|
||||
|
||||
## Frontend Aesthetics Guidelines
|
||||
|
||||
Focus on:
|
||||
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
|
||||
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
|
||||
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
|
||||
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
|
||||
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
|
||||
|
||||
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
|
||||
|
||||
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
|
||||
|
||||
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
|
||||
|
||||
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
|
||||
@@ -1,148 +0,0 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
const hasValidLicense = vi.fn();
|
||||
const getWebServerSettings = vi.fn();
|
||||
const findFirstOrg = vi.fn();
|
||||
const findFirstServer = vi.fn();
|
||||
|
||||
vi.mock("@dokploy/server/db", () => ({
|
||||
db: {
|
||||
query: {
|
||||
organization: {
|
||||
findFirst: (...args: unknown[]) => findFirstOrg(...args),
|
||||
},
|
||||
server: {
|
||||
findFirst: (...args: unknown[]) => findFirstServer(...args),
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@dokploy/server/db/schema", () => ({
|
||||
organization: {},
|
||||
server: {},
|
||||
}));
|
||||
|
||||
vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
|
||||
hasValidLicense: (...args: unknown[]) => hasValidLicense(...args),
|
||||
}));
|
||||
|
||||
vi.mock("@dokploy/server/services/web-server-settings", () => ({
|
||||
getWebServerSettings: (...args: unknown[]) => getWebServerSettings(...args),
|
||||
}));
|
||||
|
||||
vi.mock("drizzle-orm", () => ({ eq: vi.fn() }));
|
||||
|
||||
import {
|
||||
assertBuildsConcurrencyAllowed,
|
||||
resolveBuildsConcurrency,
|
||||
} from "../../server/queues/concurrency";
|
||||
import { LOCAL_PARTITION } from "../../server/queues/in-memory-queue";
|
||||
|
||||
describe("resolveBuildsConcurrency (enterprise gating)", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
findFirstOrg.mockResolvedValue({ id: "org-1" });
|
||||
});
|
||||
|
||||
describe("local web server partition", () => {
|
||||
it("returns the configured concurrency when licensed", async () => {
|
||||
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 5 });
|
||||
hasValidLicense.mockResolvedValue(true);
|
||||
|
||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(5);
|
||||
});
|
||||
|
||||
it("clamps to the free max (2) when there is no valid license", async () => {
|
||||
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 10 });
|
||||
hasValidLicense.mockResolvedValue(false);
|
||||
|
||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(2);
|
||||
});
|
||||
|
||||
it("allows the free max (2) without a license", async () => {
|
||||
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 2 });
|
||||
hasValidLicense.mockResolvedValue(false);
|
||||
|
||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(2);
|
||||
});
|
||||
|
||||
it("does not cap the value when licensed (N allowed)", async () => {
|
||||
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 999 });
|
||||
hasValidLicense.mockResolvedValue(true);
|
||||
|
||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(
|
||||
999,
|
||||
);
|
||||
});
|
||||
|
||||
it("defaults to 1 when settings are missing", async () => {
|
||||
getWebServerSettings.mockResolvedValue(undefined);
|
||||
hasValidLicense.mockResolvedValue(true);
|
||||
|
||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("remote server partition", () => {
|
||||
it("returns the server concurrency when its org is licensed", async () => {
|
||||
findFirstServer.mockResolvedValue({
|
||||
buildsConcurrency: 4,
|
||||
organizationId: "org-1",
|
||||
});
|
||||
hasValidLicense.mockResolvedValue(true);
|
||||
|
||||
await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(4);
|
||||
expect(hasValidLicense).toHaveBeenCalledWith("org-1");
|
||||
});
|
||||
|
||||
it("clamps to the free max (2) when the server org is not licensed", async () => {
|
||||
findFirstServer.mockResolvedValue({
|
||||
buildsConcurrency: 8,
|
||||
organizationId: "org-1",
|
||||
});
|
||||
hasValidLicense.mockResolvedValue(false);
|
||||
|
||||
await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(2);
|
||||
});
|
||||
|
||||
it("defaults to 1 for an unknown server", async () => {
|
||||
findFirstServer.mockResolvedValue(undefined);
|
||||
|
||||
await expect(resolveBuildsConcurrency("ghost")).resolves.toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
it("falls back to 1 if resolution throws", async () => {
|
||||
getWebServerSettings.mockRejectedValue(new Error("db down"));
|
||||
|
||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("assertBuildsConcurrencyAllowed", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("allows up to the free max (2) without checking the license", async () => {
|
||||
await expect(
|
||||
assertBuildsConcurrencyAllowed(2, "org-1"),
|
||||
).resolves.toBeUndefined();
|
||||
expect(hasValidLicense).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("allows more than 2 when licensed", async () => {
|
||||
hasValidLicense.mockResolvedValue(true);
|
||||
await expect(
|
||||
assertBuildsConcurrencyAllowed(5, "org-1"),
|
||||
).resolves.toBeUndefined();
|
||||
});
|
||||
|
||||
it("rejects more than 2 without a license", async () => {
|
||||
hasValidLicense.mockResolvedValue(false);
|
||||
await expect(assertBuildsConcurrencyAllowed(3, "org-1")).rejects.toThrow(
|
||||
/enterprise license/i,
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,337 +0,0 @@
|
||||
import { beforeEach, describe, expect, it } from "vitest";
|
||||
import {
|
||||
getGroup,
|
||||
getPartition,
|
||||
InMemoryQueue,
|
||||
LOCAL_PARTITION,
|
||||
} from "../../server/queues/in-memory-queue";
|
||||
import type { DeploymentJob } from "../../server/queues/queue-types";
|
||||
|
||||
const appJob = (applicationId: string, serverId?: string): DeploymentJob => ({
|
||||
applicationId,
|
||||
titleLog: "deploy",
|
||||
descriptionLog: "",
|
||||
type: "deploy",
|
||||
applicationType: "application",
|
||||
serverId,
|
||||
});
|
||||
|
||||
const composeJob = (composeId: string, serverId?: string): DeploymentJob => ({
|
||||
composeId,
|
||||
titleLog: "deploy",
|
||||
descriptionLog: "",
|
||||
type: "deploy",
|
||||
applicationType: "compose",
|
||||
serverId,
|
||||
});
|
||||
|
||||
/** A controllable async task: resolves only when `release()` is called. */
|
||||
const deferred = () => {
|
||||
let resolve!: () => void;
|
||||
const promise = new Promise<void>((r) => {
|
||||
resolve = r;
|
||||
});
|
||||
return { promise, release: resolve };
|
||||
};
|
||||
|
||||
const flush = () => new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
describe("getPartition / getGroup", () => {
|
||||
it("partitions by serverId, falling back to the local partition", () => {
|
||||
expect(getPartition(appJob("a"))).toBe(LOCAL_PARTITION);
|
||||
expect(getPartition(appJob("a", "server-1"))).toBe("server-1");
|
||||
});
|
||||
|
||||
it("groups applications and compose by their id", () => {
|
||||
expect(getGroup(appJob("a"))).toBe("application:a");
|
||||
expect(getGroup(composeJob("c"))).toBe("compose:c");
|
||||
});
|
||||
});
|
||||
|
||||
describe("InMemoryQueue concurrency", () => {
|
||||
let nowValue = 0;
|
||||
const now = () => ++nowValue;
|
||||
|
||||
beforeEach(() => {
|
||||
nowValue = 0;
|
||||
});
|
||||
|
||||
it("runs different applications concurrently up to the limit", async () => {
|
||||
const tasks = new Map<string, ReturnType<typeof deferred>>();
|
||||
const started: string[] = [];
|
||||
|
||||
const queue = new InMemoryQueue({ resolveConcurrency: () => 2, now });
|
||||
queue.process(async (job) => {
|
||||
const id = (job.data as any).applicationId;
|
||||
started.push(id);
|
||||
const d = deferred();
|
||||
tasks.set(id, d);
|
||||
await d.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("a"));
|
||||
await queue.add(appJob("b"));
|
||||
await queue.add(appJob("c"));
|
||||
await flush();
|
||||
|
||||
// Concurrency 2 -> only a and b start, c waits.
|
||||
expect(started).toEqual(["a", "b"]);
|
||||
|
||||
tasks.get("a")!.release();
|
||||
await flush();
|
||||
|
||||
// A slot freed -> c starts.
|
||||
expect(started).toEqual(["a", "b", "c"]);
|
||||
});
|
||||
|
||||
it("serializes jobs of the same application (per-group FIFO)", async () => {
|
||||
const tasks: Array<ReturnType<typeof deferred>> = [];
|
||||
const started: number[] = [];
|
||||
let counter = 0;
|
||||
|
||||
const queue = new InMemoryQueue({ resolveConcurrency: () => 5, now });
|
||||
queue.process(async () => {
|
||||
started.push(++counter);
|
||||
const d = deferred();
|
||||
tasks.push(d);
|
||||
await d.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
// Two deploys of the SAME app, even with concurrency 5.
|
||||
await queue.add(appJob("same"));
|
||||
await queue.add(appJob("same"));
|
||||
await flush();
|
||||
|
||||
// Only the first one runs; the second waits for the group to free.
|
||||
expect(started).toEqual([1]);
|
||||
|
||||
tasks[0]!.release();
|
||||
await flush();
|
||||
|
||||
expect(started).toEqual([1, 2]);
|
||||
});
|
||||
|
||||
it("isolates concurrency per server partition", async () => {
|
||||
const started: string[] = [];
|
||||
const tasks = new Map<string, ReturnType<typeof deferred>>();
|
||||
|
||||
// server-1 allows 1, server-2 allows 1, but they are independent.
|
||||
const queue = new InMemoryQueue({
|
||||
resolveConcurrency: () => 1,
|
||||
now,
|
||||
});
|
||||
queue.process(async (job) => {
|
||||
const id = `${job.data.serverId}:${(job.data as any).applicationId}`;
|
||||
started.push(id);
|
||||
const d = deferred();
|
||||
tasks.set(id, d);
|
||||
await d.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("a", "server-1"));
|
||||
await queue.add(appJob("b", "server-2"));
|
||||
await flush();
|
||||
|
||||
// One per partition runs in parallel despite concurrency 1 each.
|
||||
expect(started.sort()).toEqual(["server-1:a", "server-2:b"]);
|
||||
});
|
||||
|
||||
it("honors a different concurrency per server", async () => {
|
||||
const started: string[] = [];
|
||||
const tasks = new Map<string, ReturnType<typeof deferred>>();
|
||||
|
||||
// server-fast allows 2, server-slow allows 1.
|
||||
const queue = new InMemoryQueue({
|
||||
resolveConcurrency: (partition) => (partition === "server-fast" ? 2 : 1),
|
||||
now,
|
||||
});
|
||||
queue.process(async (job) => {
|
||||
const id = `${job.data.serverId}:${(job.data as any).applicationId}`;
|
||||
started.push(id);
|
||||
const d = deferred();
|
||||
tasks.set(id, d);
|
||||
await d.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("a", "server-fast"));
|
||||
await queue.add(appJob("b", "server-fast"));
|
||||
await queue.add(appJob("c", "server-slow"));
|
||||
await queue.add(appJob("d", "server-slow"));
|
||||
await flush();
|
||||
|
||||
// server-fast runs 2 in parallel; server-slow only 1.
|
||||
expect(started.sort()).toEqual([
|
||||
"server-fast:a",
|
||||
"server-fast:b",
|
||||
"server-slow:c",
|
||||
]);
|
||||
|
||||
// Free a server-slow slot -> its queued app starts.
|
||||
tasks.get("server-slow:c")!.release();
|
||||
await flush();
|
||||
expect(started).toContain("server-slow:d");
|
||||
});
|
||||
|
||||
it("serializes the same app on a server even with spare concurrency", async () => {
|
||||
const started: number[] = [];
|
||||
const tasks: Array<ReturnType<typeof deferred>> = [];
|
||||
let counter = 0;
|
||||
|
||||
// Plenty of room (concurrency 2) but two deploys of the SAME app.
|
||||
const queue = new InMemoryQueue({ resolveConcurrency: () => 2, now });
|
||||
queue.process(async () => {
|
||||
started.push(++counter);
|
||||
const d = deferred();
|
||||
tasks.push(d);
|
||||
await d.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("app-x", "server-1"));
|
||||
await queue.add(appJob("app-x", "server-1"));
|
||||
await flush();
|
||||
|
||||
// Only one build of app-x runs despite 2 free slots.
|
||||
expect(started).toEqual([1]);
|
||||
|
||||
tasks[0]!.release();
|
||||
await flush();
|
||||
expect(started).toEqual([1, 2]);
|
||||
});
|
||||
|
||||
it("clamps concurrency below 1 up to 1 (license-disabled behaviour)", async () => {
|
||||
const started: string[] = [];
|
||||
const tasks = new Map<string, ReturnType<typeof deferred>>();
|
||||
|
||||
// Simulate a non-licensed resolver returning 0 — must still run 1.
|
||||
const queue = new InMemoryQueue({ resolveConcurrency: () => 0, now });
|
||||
queue.process(async (job) => {
|
||||
const id = (job.data as any).applicationId;
|
||||
started.push(id);
|
||||
const d = deferred();
|
||||
tasks.set(id, d);
|
||||
await d.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("a"));
|
||||
await queue.add(appJob("b"));
|
||||
await flush();
|
||||
|
||||
expect(started).toEqual(["a"]);
|
||||
});
|
||||
|
||||
it("picks up concurrency changes between scheduling ticks", async () => {
|
||||
const started: string[] = [];
|
||||
const tasks = new Map<string, ReturnType<typeof deferred>>();
|
||||
let limit = 1;
|
||||
|
||||
const queue = new InMemoryQueue({
|
||||
resolveConcurrency: () => limit,
|
||||
now,
|
||||
});
|
||||
queue.process(async (job) => {
|
||||
const id = (job.data as any).applicationId;
|
||||
started.push(id);
|
||||
const d = deferred();
|
||||
tasks.set(id, d);
|
||||
await d.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("a"));
|
||||
await queue.add(appJob("b"));
|
||||
await flush();
|
||||
expect(started).toEqual(["a"]);
|
||||
|
||||
// Raise the limit (e.g. license activated) and release the running job
|
||||
// so a new tick observes the new concurrency.
|
||||
limit = 2;
|
||||
tasks.get("a")!.release();
|
||||
await flush();
|
||||
|
||||
expect(started).toContain("b");
|
||||
});
|
||||
});
|
||||
|
||||
describe("InMemoryQueue job management", () => {
|
||||
it("lists waiting jobs and removes them by predicate", async () => {
|
||||
const block = deferred();
|
||||
const queue = new InMemoryQueue({ resolveConcurrency: () => 1 });
|
||||
queue.process(async () => {
|
||||
await block.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("running"));
|
||||
await queue.add(appJob("waiting-1"));
|
||||
await queue.add(composeJob("waiting-2"));
|
||||
await flush();
|
||||
|
||||
const waiting = await queue.getJobs(["waiting"]);
|
||||
expect(waiting.map((j) => j.data)).toHaveLength(2);
|
||||
|
||||
const removed = queue.removeWaiting(
|
||||
(data) => (data as any).applicationId === "waiting-1",
|
||||
);
|
||||
expect(removed).toBe(1);
|
||||
|
||||
const after = await queue.getJobs(["waiting"]);
|
||||
expect(after).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("clears all waiting jobs", async () => {
|
||||
const block = deferred();
|
||||
const queue = new InMemoryQueue({ resolveConcurrency: () => 1 });
|
||||
queue.process(async () => {
|
||||
await block.promise;
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("running"));
|
||||
await queue.add(appJob("waiting-1"));
|
||||
await queue.add(appJob("waiting-2"));
|
||||
await flush();
|
||||
|
||||
expect(queue.clearWaiting()).toBe(2);
|
||||
expect(await queue.getJobs(["waiting"])).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("starts processing as soon as a processor is registered", async () => {
|
||||
const started: string[] = [];
|
||||
const queue = new InMemoryQueue({ resolveConcurrency: () => 5 });
|
||||
|
||||
// No processor yet -> jobs queue but do not run.
|
||||
await queue.add(appJob("a"));
|
||||
await flush();
|
||||
expect(started).toEqual([]);
|
||||
|
||||
// Registering the processor auto-starts the queue (no separate run()).
|
||||
queue.process(async (job) => {
|
||||
started.push((job.data as any).applicationId);
|
||||
});
|
||||
await flush();
|
||||
expect(started).toEqual(["a"]);
|
||||
});
|
||||
|
||||
it("continues scheduling after a job throws", async () => {
|
||||
const started: string[] = [];
|
||||
const queue = new InMemoryQueue({ resolveConcurrency: () => 1 });
|
||||
queue.process(async (job) => {
|
||||
const id = (job.data as any).applicationId;
|
||||
started.push(id);
|
||||
if (id === "a") throw new Error("boom");
|
||||
});
|
||||
await queue.run();
|
||||
|
||||
await queue.add(appJob("a"));
|
||||
await queue.add(appJob("b"));
|
||||
await flush();
|
||||
|
||||
expect(started).toEqual(["a", "b"]);
|
||||
});
|
||||
});
|
||||
@@ -25,7 +25,6 @@ const baseSettings: WebServerSettings = {
|
||||
letsEncryptEmail: null,
|
||||
sshPrivateKey: null,
|
||||
enableDockerCleanup: false,
|
||||
buildsConcurrency: 1,
|
||||
logCleanupCron: null,
|
||||
metricsConfig: {
|
||||
containers: {
|
||||
|
||||
@@ -1,22 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "radix-nova",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "styles/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "default",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.ts",
|
||||
"css": "styles/globals.css",
|
||||
"baseColor": "zinc",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -156,7 +156,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
|
||||
|
||||
<div className="flex gap-4 h-[60vh] py-4">
|
||||
{/* Left Column - Menu */}
|
||||
<div className="w-64 shrink-0 border-r pr-4 overflow-y-auto">
|
||||
<div className="w-64 flex-shrink-0 border-r pr-4 overflow-y-auto">
|
||||
<nav className="space-y-1">
|
||||
<TooltipProvider>
|
||||
{menuItems.map((item) => (
|
||||
|
||||
@@ -229,7 +229,7 @@ export const ShowImport = ({ composeId }: Props) => {
|
||||
(domain, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-lg border bg-card p-3 text-card-foreground shadow-xs"
|
||||
className="rounded-lg border bg-card p-3 text-card-foreground shadow-sm"
|
||||
>
|
||||
<div className="font-medium">
|
||||
{domain.serviceName}
|
||||
|
||||
@@ -246,7 +246,7 @@ export const HandleRedirect = ({
|
||||
control={form.control}
|
||||
name="permanent"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Permanent</FormLabel>
|
||||
<FormDescription>
|
||||
|
||||
@@ -53,7 +53,7 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col pt-2 relative">
|
||||
<div className="flex flex-col gap-6 max-h-140 min-h-40 overflow-y-auto">
|
||||
<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
|
||||
<CodeEditor
|
||||
lineWrapping
|
||||
value={data || "Empty"}
|
||||
|
||||
@@ -155,7 +155,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
|
||||
<FormControl>
|
||||
<CodeEditor
|
||||
lineWrapping
|
||||
wrapperClassName="h-140 font-mono"
|
||||
wrapperClassName="h-[35rem] font-mono"
|
||||
placeholder={`http:
|
||||
routers:
|
||||
router-name:
|
||||
|
||||
@@ -220,7 +220,7 @@ export const AddVolumes = ({
|
||||
/>
|
||||
<Label
|
||||
htmlFor="bind"
|
||||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
|
||||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
|
||||
>
|
||||
Bind Mount
|
||||
</Label>
|
||||
@@ -240,7 +240,7 @@ export const AddVolumes = ({
|
||||
/>
|
||||
<Label
|
||||
htmlFor="volume"
|
||||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
|
||||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
|
||||
>
|
||||
Volume Mount
|
||||
</Label>
|
||||
@@ -264,7 +264,7 @@ export const AddVolumes = ({
|
||||
/>
|
||||
<Label
|
||||
htmlFor="file"
|
||||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
|
||||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
|
||||
>
|
||||
File Mount
|
||||
</Label>
|
||||
@@ -324,7 +324,7 @@ export const AddVolumes = ({
|
||||
control={form.control}
|
||||
name="content"
|
||||
render={({ field }) => (
|
||||
<FormItem className="max-w-full max-w-180">
|
||||
<FormItem className="max-w-full max-w-[45rem]">
|
||||
<FormLabel>Content</FormLabel>
|
||||
<FormControl>
|
||||
<FormControl>
|
||||
|
||||
@@ -111,7 +111,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
|
||||
{mount.type === "file" && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium">Content</span>
|
||||
<span className="text-sm text-muted-foreground line-clamp-10 whitespace-break-spaces">
|
||||
<span className="text-sm text-muted-foreground line-clamp-[10] whitespace-break-spaces">
|
||||
{mount.content}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -253,7 +253,7 @@ export const UpdateVolume = ({
|
||||
control={form.control}
|
||||
name="content"
|
||||
render={({ field }) => (
|
||||
<FormItem className="w-full max-w-180">
|
||||
<FormItem className="w-full max-w-[45rem]">
|
||||
<FormLabel>Content</FormLabel>
|
||||
<FormControl>
|
||||
<FormControl>
|
||||
|
||||
@@ -191,7 +191,7 @@ export const ShowDeployment = ({
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={handleScroll}
|
||||
className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-background rounded custom-logs-scrollbar"
|
||||
className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
|
||||
>
|
||||
{" "}
|
||||
{filteredLogs.length > 0 ? (
|
||||
|
||||
@@ -147,7 +147,7 @@ export const ShowDeployments = ({
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card className="bg-background border-0">
|
||||
<Card className="bg-background border-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<CardTitle className="text-xl">Deployments</CardTitle>
|
||||
@@ -233,6 +233,7 @@ export const ShowDeployments = ({
|
||||
<span>Webhook URL: </span>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<Badge
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="Copy webhook URL to clipboard"
|
||||
className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer whitespace-normal break-all"
|
||||
@@ -300,7 +301,7 @@ export const ShowDeployments = ({
|
||||
</span>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="wrap-break-word text-sm text-muted-foreground whitespace-pre-wrap">
|
||||
<span className="break-words text-sm text-muted-foreground whitespace-pre-wrap">
|
||||
{isExpanded || !needsTruncation
|
||||
? titleText
|
||||
: truncateDescription(titleText)}
|
||||
|
||||
@@ -148,7 +148,7 @@ export const createColumns = ({
|
||||
cell: ({ row }) => {
|
||||
const https = row.getValue("https") as boolean;
|
||||
return (
|
||||
<Badge variant={https ? "outline-solid" : "secondary"}>
|
||||
<Badge variant={https ? "outline" : "secondary"}>
|
||||
{https ? "HTTPS" : "HTTP"}
|
||||
</Badge>
|
||||
);
|
||||
|
||||
@@ -351,7 +351,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
{errorServices && (
|
||||
<AlertBlock
|
||||
type="warning"
|
||||
className="wrap-anywhere"
|
||||
className="[overflow-wrap:anywhere]"
|
||||
>
|
||||
{errorServices?.message}
|
||||
</AlertBlock>
|
||||
@@ -420,7 +420,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Fetch: Will clone the repository and
|
||||
@@ -450,7 +450,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Cache: If you previously deployed this
|
||||
@@ -488,7 +488,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
{isManualInput
|
||||
@@ -565,7 +565,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>Generate sslip.io domain</p>
|
||||
</TooltipContent>
|
||||
@@ -618,7 +618,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
control={form.control}
|
||||
name="stripPath"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-xs">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Strip Path</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -662,7 +662,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
control={form.control}
|
||||
name="useCustomEntrypoint"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Custom Entrypoint</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -711,7 +711,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
control={form.control}
|
||||
name="https"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>HTTPS</FormLabel>
|
||||
<FormDescription>
|
||||
|
||||
@@ -537,7 +537,7 @@ export const ShowDomains = ({ id, type }: Props) => {
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge
|
||||
variant={item.https ? "outline-solid" : "secondary"}
|
||||
variant={item.https ? "outline" : "secondary"}
|
||||
>
|
||||
{item.https ? "HTTPS" : "HTTP"}
|
||||
</Badge>
|
||||
|
||||
@@ -189,7 +189,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
control={form.control}
|
||||
name="createEnvFile"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-xs">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Create Environment File</FormLabel>
|
||||
<FormDescription>
|
||||
|
||||
@@ -245,7 +245,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -333,7 +333,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
" w-full justify-between bg-input!",
|
||||
" w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -498,7 +498,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -305,7 +305,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -258,7 +258,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -353,7 +353,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
" w-full justify-between bg-input!",
|
||||
" w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -525,7 +525,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -233,7 +233,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -320,7 +320,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
" w-full justify-between bg-input!",
|
||||
" w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -531,7 +531,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -254,7 +254,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -351,7 +351,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
" w-full justify-between bg-input!",
|
||||
" w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -518,7 +518,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -154,10 +154,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row items-center justify-between w-full overflow-auto">
|
||||
<TabsList
|
||||
variant="line"
|
||||
className="flex gap-4 justify-start bg-transparent"
|
||||
>
|
||||
<TabsList className="flex gap-4 justify-start bg-transparent">
|
||||
<TabsTrigger
|
||||
value="github"
|
||||
className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import {
|
||||
Ban,
|
||||
CheckCircle2,
|
||||
@@ -94,7 +94,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Downloads the source code and performs a complete
|
||||
build
|
||||
@@ -137,7 +137,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Reload the application without rebuilding it</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -176,7 +176,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Only rebuilds the application without downloading new
|
||||
code
|
||||
@@ -219,7 +219,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Start the application (requires a previous successful
|
||||
build)
|
||||
@@ -259,7 +259,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Stop the currently running application</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
|
||||
@@ -200,7 +200,7 @@ export const AddPreviewDomain = ({
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>Generate sslip.io domain</p>
|
||||
</TooltipContent>
|
||||
@@ -249,7 +249,7 @@ export const AddPreviewDomain = ({
|
||||
control={form.control}
|
||||
name="https"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>HTTPS</FormLabel>
|
||||
<FormDescription>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import {
|
||||
ExternalLink,
|
||||
FileText,
|
||||
@@ -132,7 +132,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<GitPullRequest className="size-5 text-muted-foreground mt-1 shrink-0" />
|
||||
<GitPullRequest className="size-5 text-muted-foreground mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<div className="font-medium text-sm">
|
||||
{deployment.pullRequestTitle}
|
||||
@@ -152,7 +152,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
|
||||
</div>
|
||||
|
||||
<div className="pl-8 space-y-3">
|
||||
<div className="relative grow">
|
||||
<div className="relative flex-grow">
|
||||
<Input
|
||||
value={deploymentUrl}
|
||||
readOnly
|
||||
@@ -244,7 +244,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent
|
||||
sideOffset={5}
|
||||
className="z-60"
|
||||
className="z-[60]"
|
||||
>
|
||||
<p>
|
||||
Rebuild the preview deployment without
|
||||
|
||||
@@ -325,7 +325,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
|
||||
control={form.control}
|
||||
name="previewHttps"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>HTTPS</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -431,7 +431,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
|
||||
control={form.control}
|
||||
name="previewRequireCollaboratorPermissions"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs col-span-2">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm col-span-2">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>
|
||||
Require Collaborator Permissions
|
||||
|
||||
@@ -357,7 +357,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
|
||||
{errorServices && (
|
||||
<AlertBlock
|
||||
type="warning"
|
||||
className="wrap-anywhere"
|
||||
className="[overflow-wrap:anywhere]"
|
||||
>
|
||||
{errorServices?.message}
|
||||
</AlertBlock>
|
||||
@@ -414,7 +414,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Fetch: Will clone the repository and load the
|
||||
@@ -444,7 +444,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Cache: If you previously deployed this compose,
|
||||
@@ -534,7 +534,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -73,7 +73,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className=" px-6 shadow-none bg-transparent h-full min-h-[50vh]">
|
||||
<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
|
||||
<CardHeader className="px-0">
|
||||
<div className="flex justify-between items-center gap-y-2 flex-wrap">
|
||||
<div className="flex flex-col gap-2">
|
||||
@@ -110,12 +110,12 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
|
||||
className="flex flex-col sm:flex-row sm:items-center flex-wrap sm:flex-nowrap gap-y-2 justify-between rounded-lg border p-3 transition-colors bg-muted/50 w-full"
|
||||
>
|
||||
<div className="flex items-start gap-3 w-full sm:w-auto">
|
||||
<div className="flex shrink-0 h-9 w-9 items-center justify-center rounded-full bg-primary/5">
|
||||
<div className="flex flex-shrink-0 h-9 w-9 items-center justify-center rounded-full bg-primary/5">
|
||||
<Clock className="size-4 text-primary/70" />
|
||||
</div>
|
||||
<div className="space-y-1.5 w-full sm:w-auto">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="text-sm font-medium leading-none wrap-anywhere line-clamp-3">
|
||||
<h3 className="text-sm font-medium leading-none [overflow-wrap:anywhere] line-clamp-3">
|
||||
{schedule.name}
|
||||
</h3>
|
||||
<Badge
|
||||
@@ -126,7 +126,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
|
||||
</Badge>
|
||||
</div>
|
||||
{schedule.description && (
|
||||
<p className="text-xs text-muted-foreground/70 wrap-anywhere line-clamp-2">
|
||||
<p className="text-xs text-muted-foreground/70 [overflow-wrap:anywhere] line-clamp-2">
|
||||
{schedule.description}
|
||||
</p>
|
||||
)}
|
||||
@@ -154,7 +154,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
|
||||
</div>
|
||||
{schedule.command && (
|
||||
<div className="flex items-start gap-2 max-w-full">
|
||||
<Terminal className="size-3.5 text-muted-foreground/70 shrink-0 mt-0.5" />
|
||||
<Terminal className="size-3.5 text-muted-foreground/70 flex-shrink-0 mt-0.5" />
|
||||
<code className="font-mono text-[10px] text-muted-foreground/70 break-all max-w-[calc(100%-20px)]">
|
||||
{schedule.command}
|
||||
</code>
|
||||
|
||||
@@ -351,7 +351,7 @@ export const HandleVolumeBackups = ({
|
||||
{errorServices && (
|
||||
<AlertBlock
|
||||
type="warning"
|
||||
className="wrap-anywhere"
|
||||
className="[overflow-wrap:anywhere]"
|
||||
>
|
||||
{errorServices?.message}
|
||||
</AlertBlock>
|
||||
@@ -408,7 +408,7 @@ export const HandleVolumeBackups = ({
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Fetch: Will clone the repository and load the
|
||||
@@ -438,7 +438,7 @@ export const HandleVolumeBackups = ({
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Cache: If you previously deployed this
|
||||
|
||||
@@ -181,7 +181,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -263,7 +263,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -77,7 +77,7 @@ export const ShowVolumeBackups = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className=" px-6 shadow-none bg-transparent h-full min-h-[50vh]">
|
||||
<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
|
||||
<CardHeader className="px-0">
|
||||
<div className="flex justify-between items-center flex-wrap gap-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
|
||||
@@ -160,7 +160,7 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
|
||||
control={form.control}
|
||||
name="isolatedDeployment"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs">
|
||||
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>
|
||||
Enable Isolated Deployment ({data?.appName})
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { toast } from "sonner";
|
||||
@@ -72,7 +72,7 @@ export const ComposeActions = ({ composeId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Downloads the source code and performs a complete build
|
||||
</p>
|
||||
@@ -113,7 +113,7 @@ export const ComposeActions = ({ composeId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Reload the compose without rebuilding it</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -154,7 +154,7 @@ export const ComposeActions = ({ composeId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Start the compose (requires a previous successful build)
|
||||
</p>
|
||||
@@ -193,7 +193,7 @@ export const ComposeActions = ({ composeId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Stop the currently running compose</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
|
||||
@@ -135,7 +135,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
|
||||
render={({ field }) => (
|
||||
<FormItem className="overflow-auto">
|
||||
<FormControl className="">
|
||||
<div className="flex flex-col gap-4 w-full outline-hidden focus:outline-hidden overflow-auto">
|
||||
<div className="flex flex-col gap-4 w-full outline-none focus:outline-none overflow-auto">
|
||||
<CodeEditor
|
||||
// disabled
|
||||
language="yaml"
|
||||
|
||||
@@ -247,7 +247,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -335,7 +335,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
" w-full justify-between bg-input!",
|
||||
" w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -502,7 +502,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -313,7 +313,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -244,7 +244,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -331,7 +331,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -491,7 +491,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -234,7 +234,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -321,7 +321,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
" w-full justify-between bg-input!",
|
||||
" w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -534,7 +534,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -256,7 +256,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -353,7 +353,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
" w-full justify-between bg-input!",
|
||||
" w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -520,7 +520,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel className="!mt-0">Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -143,10 +143,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row items-center justify-between w-full overflow-auto">
|
||||
<TabsList
|
||||
variant="line"
|
||||
className="flex gap-4 justify-start bg-transparent"
|
||||
>
|
||||
<TabsList className="flex gap-4 justify-start bg-transparent">
|
||||
<TabsTrigger
|
||||
value="github"
|
||||
className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
|
||||
|
||||
@@ -160,7 +160,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
|
||||
control={form.control}
|
||||
name="randomize"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs">
|
||||
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Apply Randomize</FormLabel>
|
||||
<FormDescription>
|
||||
|
||||
@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
||||
Preview Compose
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-6xl max-h-200">
|
||||
<DialogContent className="sm:max-w-6xl max-h-[50rem]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Converted Compose</DialogTitle>
|
||||
<DialogDescription>
|
||||
@@ -67,11 +67,11 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
||||
one domain must be specified for this conversion to take effect.
|
||||
</AlertBlock>
|
||||
{isPending ? (
|
||||
<div className="flex flex-row items-center justify-center min-h-100 border p-4 rounded-md">
|
||||
<div className="flex flex-row items-center justify-center min-h-[25rem] border p-4 rounded-md">
|
||||
<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
|
||||
</div>
|
||||
) : compose?.length === 5 ? (
|
||||
<div className="border p-4 rounded-md flex flex-col items-center justify-center min-h-100">
|
||||
<div className="border p-4 rounded-md flex flex-col items-center justify-center min-h-[25rem]">
|
||||
<Puzzle className="h-8 w-8 text-muted-foreground mb-2" />
|
||||
<span className="text-muted-foreground">
|
||||
No converted compose data available.
|
||||
|
||||
@@ -364,7 +364,7 @@ export const HandleBackup = ({
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{errorServices && (
|
||||
<AlertBlock type="warning" className="wrap-anywhere">
|
||||
<AlertBlock type="warning" className="[overflow-wrap:anywhere]">
|
||||
{errorServices?.message}
|
||||
</AlertBlock>
|
||||
)}
|
||||
@@ -409,7 +409,7 @@ export const HandleBackup = ({
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -528,7 +528,7 @@ export const HandleBackup = ({
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Fetch: Will clone the repository and load the
|
||||
@@ -558,7 +558,7 @@ export const HandleBackup = ({
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Cache: If you previously deployed this
|
||||
|
||||
@@ -345,7 +345,7 @@ export const RestoreBackup = ({
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -427,7 +427,7 @@ export const RestoreBackup = ({
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-between bg-input!",
|
||||
"w-full justify-between !bg-input",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -622,7 +622,7 @@ export const RestoreBackup = ({
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Fetch: Will clone the repository and load the
|
||||
@@ -652,7 +652,7 @@ export const RestoreBackup = ({
|
||||
<TooltipContent
|
||||
side="left"
|
||||
sideOffset={5}
|
||||
className="max-w-40"
|
||||
className="max-w-[10rem]"
|
||||
>
|
||||
<p>
|
||||
Cache: If you previously deployed this compose,
|
||||
|
||||
@@ -53,7 +53,7 @@ const statusVariants: Record<
|
||||
| "default"
|
||||
| "secondary"
|
||||
| "destructive"
|
||||
| "outline-solid"
|
||||
| "outline"
|
||||
| "yellow"
|
||||
| "green"
|
||||
| "red"
|
||||
@@ -61,7 +61,7 @@ const statusVariants: Record<
|
||||
running: "yellow",
|
||||
done: "green",
|
||||
error: "red",
|
||||
cancelled: "outline-solid",
|
||||
cancelled: "outline",
|
||||
};
|
||||
|
||||
function getServiceInfo(d: DeploymentRow) {
|
||||
|
||||
@@ -24,7 +24,7 @@ const stateVariants: Record<
|
||||
| "default"
|
||||
| "secondary"
|
||||
| "destructive"
|
||||
| "outline-solid"
|
||||
| "outline"
|
||||
| "yellow"
|
||||
| "green"
|
||||
| "red"
|
||||
@@ -32,11 +32,11 @@ const stateVariants: Record<
|
||||
pending: "secondary",
|
||||
waiting: "secondary",
|
||||
active: "yellow",
|
||||
delayed: "outline-solid",
|
||||
delayed: "outline",
|
||||
completed: "green",
|
||||
failed: "destructive",
|
||||
cancelled: "outline-solid",
|
||||
paused: "outline-solid",
|
||||
cancelled: "outline",
|
||||
paused: "outline",
|
||||
};
|
||||
|
||||
function formatTs(ts?: number): string {
|
||||
@@ -127,7 +127,7 @@ export function ShowQueueTable(props: { embedded?: boolean }) {
|
||||
</TableCell>
|
||||
<TableCell>{appType ?? row.name ?? "—"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={stateVariants[row.state] ?? "outline-solid"}>
|
||||
<Badge variant={stateVariants[row.state] ?? "outline"}>
|
||||
{row.state}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
|
||||
@@ -44,7 +44,7 @@ export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
|
||||
</DialogHeader>
|
||||
<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
|
||||
<code>
|
||||
<pre className="whitespace-pre-wrap wrap-break-word">
|
||||
<pre className="whitespace-pre-wrap break-words">
|
||||
<CodeEditor
|
||||
language="json"
|
||||
lineWrapping
|
||||
|
||||
@@ -165,7 +165,7 @@ export function AnalyzeLogs({ logs, context }: Props) {
|
||||
) : (
|
||||
<>
|
||||
<div className="max-h-[400px] overflow-y-auto">
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none text-sm wrap-break-word">
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none text-sm break-words">
|
||||
<ReactMarkdown>{data.analysis}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -119,7 +119,7 @@ export function LineCountFilter({
|
||||
placeholder="Number of lines"
|
||||
value={inputValue}
|
||||
onValueChange={handleInputChange}
|
||||
className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
||||
className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
@@ -146,7 +146,7 @@ export function LineCountFilter({
|
||||
<CommandPrimitive.Item
|
||||
key={option.value}
|
||||
onSelect={() => handleSelect(option.label)}
|
||||
className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground"
|
||||
className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipPortal,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
@@ -64,20 +65,22 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
|
||||
|
||||
const tooltip = (color: string, timestamp: string | null) => {
|
||||
const square = (
|
||||
<div className={cn("w-2 h-full shrink-0 rounded-[3px]", color)} />
|
||||
<div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
|
||||
);
|
||||
return timestamp ? (
|
||||
<TooltipProvider delayDuration={0} disableHoverableContent>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{square}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
sideOffset={5}
|
||||
className="bg-popover border-border z-99999"
|
||||
>
|
||||
<p className="text text-xs text-muted-foreground break-all max-w-md">
|
||||
<pre>{timestamp}</pre>
|
||||
</p>
|
||||
</TooltipContent>
|
||||
<TooltipPortal>
|
||||
<TooltipContent
|
||||
sideOffset={5}
|
||||
className="bg-popover border-border z-[99999]"
|
||||
>
|
||||
<p className="text text-xs text-muted-foreground break-all max-w-md">
|
||||
<pre>{timestamp}</pre>
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</TooltipPortal>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
@@ -104,7 +107,7 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
|
||||
{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
|
||||
{tooltip(color, rawTimestamp)}
|
||||
{!noTimestamp && (
|
||||
<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 shrink-0">
|
||||
<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
|
||||
{formattedTime}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -26,7 +26,7 @@ export const RemoveContainerDialog = ({ containerId, serverId }: Props) => {
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<DropdownMenuItem
|
||||
className="w-full cursor-pointer text-red-500 hover:text-red-600!"
|
||||
className="w-full cursor-pointer text-red-500 hover:!text-red-600"
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
>
|
||||
Remove Container
|
||||
|
||||
@@ -100,7 +100,7 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="w-full relative z-5"
|
||||
className="w-full relative z-[5]"
|
||||
>
|
||||
<div className="flex flex-col overflow-auto">
|
||||
{isLoadingFile ? (
|
||||
@@ -123,7 +123,7 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
|
||||
<FormControl>
|
||||
<CodeEditor
|
||||
lineWrapping
|
||||
wrapperClassName="h-140 font-mono"
|
||||
wrapperClassName="h-[35rem] font-mono"
|
||||
placeholder={`http:
|
||||
routers:
|
||||
router-name:
|
||||
@@ -143,7 +143,7 @@ routers:
|
||||
</pre>
|
||||
<div className="flex justify-end absolute z-50 right-6 top-8">
|
||||
<Button
|
||||
className="shadow-xs"
|
||||
className="shadow-sm"
|
||||
variant="secondary"
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
import {
|
||||
FileIcon,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
Loader2,
|
||||
MousePointerClick,
|
||||
Workflow,
|
||||
} from "lucide-react";
|
||||
import { FileIcon, Folder, Loader2, Workflow } from "lucide-react";
|
||||
import React from "react";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import {
|
||||
@@ -75,29 +68,19 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
|
||||
</div>
|
||||
)}
|
||||
{directories?.length === 0 && (
|
||||
<div className="w-full flex-col gap-4 flex items-center justify-center h-[55vh] border border-dashed rounded-lg">
|
||||
<div className="flex items-center justify-center size-14 rounded-full bg-muted">
|
||||
<FolderOpen className="size-7 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1 text-center px-4">
|
||||
<span className="text-base font-medium">
|
||||
No configuration files found
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
There are no directories or files in{" "}
|
||||
<code className="bg-muted px-1.5 py-0.5 rounded text-xs">
|
||||
/etc/dokploy/traefik
|
||||
</code>{" "}
|
||||
on this server yet.
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
|
||||
<span className="text-muted-foreground text-lg font-medium">
|
||||
No directories or files detected in{" "}
|
||||
{"'/etc/dokploy/traefik'"}
|
||||
</span>
|
||||
<Folder className="size-8 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
{directories && directories?.length > 0 && (
|
||||
<>
|
||||
<Tree
|
||||
data={directories}
|
||||
className="lg:max-w-76 w-full lg:h-[660px] border rounded-lg"
|
||||
className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
|
||||
onSelectChange={(item) => setFile(item?.id || null)}
|
||||
folderIcon={Folder}
|
||||
itemIcon={Workflow}
|
||||
@@ -106,19 +89,11 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
|
||||
{file ? (
|
||||
<ShowTraefikFile path={file} serverId={serverId} />
|
||||
) : (
|
||||
<div className="h-full min-h-[300px] w-full flex-col gap-4 flex items-center justify-center border border-dashed rounded-lg">
|
||||
<div className="flex items-center justify-center size-14 rounded-full bg-muted">
|
||||
<MousePointerClick className="size-7 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1 text-center px-4">
|
||||
<span className="text-base font-medium">
|
||||
Select a file to edit
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Choose a file from the tree on the left to view
|
||||
and edit its contents.
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-full w-full flex-col gap-2 flex items-center justify-center">
|
||||
<span className="text-muted-foreground text-lg font-medium">
|
||||
No file selected
|
||||
</span>
|
||||
<FileIcon className="size-8 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -197,7 +197,7 @@ export const ImpersonationBar = () => {
|
||||
>
|
||||
{selectedUser ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<UserIcon className="mr-2 h-4 w-4 shrink-0" />
|
||||
<UserIcon className="mr-2 h-4 w-4 flex-shrink-0" />
|
||||
<span className="truncate flex flex-col items-start">
|
||||
<span className="text-sm font-medium">
|
||||
{`${selectedUser.name} ${selectedUser.lastName}`.trim() ||
|
||||
@@ -245,7 +245,7 @@ export const ImpersonationBar = () => {
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center gap-2 flex-1">
|
||||
<UserIcon className="h-4 w-4 shrink-0" />
|
||||
<UserIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-sm font-medium">
|
||||
{`${user.name} ${user.lastName}`.trim() ||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
@@ -96,7 +96,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Downloads and sets up the Libsql database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -136,7 +136,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Restart the Libsql service without rebuilding</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -176,7 +176,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Start the Libsql database (requires a previous
|
||||
successful setup)
|
||||
@@ -218,7 +218,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Stop the currently running Libsql database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -243,7 +243,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Open a terminal to the Libsql container</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { SelectGroup } from "@radix-ui/react-select";
|
||||
import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
@@ -99,7 +99,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Downloads and sets up the MariaDB database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -141,7 +141,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Restart the MariaDB service without rebuilding</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -183,7 +183,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Start the MariaDB database (requires a previous
|
||||
successful setup)
|
||||
@@ -225,7 +225,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Stop the currently running MariaDB database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -250,7 +250,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Open a terminal to the MariaDB container</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
@@ -99,7 +99,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Downloads and sets up the MongoDB database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -139,7 +139,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Restart the MongoDB service without rebuilding</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -179,7 +179,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Start the MongoDB database (requires a previous
|
||||
successful setup)
|
||||
@@ -219,7 +219,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Stop the currently running MongoDB database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -244,7 +244,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Open a terminal to the MongoDB container</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
|
||||
@@ -34,7 +34,7 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
|
||||
}));
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
|
||||
<AreaChart
|
||||
data={transformedData}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||
|
||||
@@ -29,7 +29,7 @@ export const DockerCpuChart = ({ accumulativeData }: Props) => {
|
||||
}));
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
|
||||
<AreaChart
|
||||
data={transformedData}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||
|
||||
@@ -29,7 +29,7 @@ export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
|
||||
}));
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
|
||||
<AreaChart
|
||||
data={transformedData}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||
|
||||
@@ -78,7 +78,7 @@ export const DockerDiskUsageChart = () => {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="flex items-center justify-center h-[16rem]">
|
||||
<Loader2 className="size-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -35,7 +35,7 @@ export const DockerMemoryChart = ({
|
||||
}));
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
|
||||
<AreaChart
|
||||
data={transformedData}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||
|
||||
@@ -34,7 +34,7 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
|
||||
}));
|
||||
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
|
||||
<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
|
||||
<AreaChart
|
||||
data={transformedData}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||
|
||||
@@ -227,7 +227,7 @@ export const ContainerFreeMonitoring = ({
|
||||
String(currentData.cpu.value ?? "0%").replace("%", ""),
|
||||
10,
|
||||
)}
|
||||
className="w-full"
|
||||
className="w-[100%]"
|
||||
/>
|
||||
<DockerCpuChart accumulativeData={accumulativeData.cpu} />
|
||||
</div>
|
||||
@@ -250,7 +250,7 @@ export const ContainerFreeMonitoring = ({
|
||||
convertMemoryToBytes(currentData.memory.value.total)) *
|
||||
100
|
||||
}
|
||||
className="w-full"
|
||||
className="w-[100%]"
|
||||
/>
|
||||
<DockerMemoryChart
|
||||
accumulativeData={accumulativeData.memory}
|
||||
@@ -275,7 +275,7 @@ export const ContainerFreeMonitoring = ({
|
||||
</span>
|
||||
<Progress
|
||||
value={currentData.disk.value.diskUsedPercentage}
|
||||
className="w-full"
|
||||
className="w-[100%]"
|
||||
/>
|
||||
<DockerDiskChart
|
||||
accumulativeData={accumulativeData.disk}
|
||||
|
||||
@@ -115,7 +115,7 @@ export const ContainerBlockChart = ({ data }: Props) => {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload?.[0]?.payload;
|
||||
return (
|
||||
<div className="rounded-lg border bg-background p-2 shadow-xs">
|
||||
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||
|
||||
@@ -84,7 +84,7 @@ export const ContainerCPUChart = ({ data }: Props) => {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload?.[0]?.payload;
|
||||
return (
|
||||
<div className="rounded-lg border bg-background p-2 shadow-xs">
|
||||
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||
|
||||
@@ -99,7 +99,7 @@ export const ContainerMemoryChart = ({ data }: Props) => {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload?.[0]?.payload;
|
||||
return (
|
||||
<div className="rounded-lg border bg-background p-2 shadow-xs">
|
||||
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||
|
||||
@@ -122,7 +122,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload?.[0]?.payload;
|
||||
return (
|
||||
<div className="rounded-lg border bg-background p-2 shadow-xs">
|
||||
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||
|
||||
@@ -71,7 +71,7 @@ export function CPUChart({ data }: CPUChartProps) {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload?.[0]?.payload;
|
||||
return (
|
||||
<div className="rounded-lg border bg-background p-2 shadow-xs">
|
||||
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||
|
||||
@@ -86,7 +86,7 @@ export function MemoryChart({ data }: MemoryChartProps) {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload?.[0]?.payload;
|
||||
return (
|
||||
<div className="rounded-lg border bg-background p-2 shadow-xs">
|
||||
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||
|
||||
@@ -90,7 +90,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload?.[0]?.payload;
|
||||
return (
|
||||
<div className="rounded-lg border bg-background p-2 shadow-xs">
|
||||
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||
|
||||
@@ -202,7 +202,7 @@ export const ShowPaidMonitoring = ({
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="rounded-lg border text-card-foreground shadow-xs p-6">
|
||||
<div className="rounded-lg border text-card-foreground shadow-sm p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
<h3 className="text-sm font-medium">Uptime</h3>
|
||||
@@ -212,7 +212,7 @@ export const ShowPaidMonitoring = ({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border text-card-foreground shadow-xs p-6">
|
||||
<div className="rounded-lg border text-card-foreground shadow-sm p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="h-4 w-4 text-muted-foreground" />
|
||||
<h3 className="text-sm font-medium">CPU Usage</h3>
|
||||
@@ -220,7 +220,7 @@ export const ShowPaidMonitoring = ({
|
||||
<p className="mt-2 text-2xl font-bold">{metrics.cpu}%</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border text-card-foreground bg-transparent shadow-xs p-6">
|
||||
<div className="rounded-lg border text-card-foreground bg-transparent shadow-sm p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<MemoryStick className="h-4 w-4 text-muted-foreground" />
|
||||
<h3 className="text-sm font-medium">Memory Usage</h3>
|
||||
@@ -230,7 +230,7 @@ export const ShowPaidMonitoring = ({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border text-card-foreground shadow-xs p-6">
|
||||
<div className="rounded-lg border text-card-foreground shadow-sm p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
<h3 className="text-sm font-medium">Disk Usage</h3>
|
||||
@@ -240,7 +240,7 @@ export const ShowPaidMonitoring = ({
|
||||
</div>
|
||||
|
||||
{/* System Information */}
|
||||
<div className="rounded-lg border text-card-foreground shadow-xs p-6">
|
||||
<div className="rounded-lg border text-card-foreground shadow-sm p-6">
|
||||
<h3 className="text-lg font-medium mb-4">System Information</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
@@ -97,7 +97,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Downloads and sets up the MySQL database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -137,7 +137,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Restart the MySQL service without rebuilding</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -177,7 +177,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Start the MySQL database (requires a previous
|
||||
successful setup)
|
||||
@@ -217,7 +217,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Stop the currently running MySQL database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -242,7 +242,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Open a terminal to the MySQL container</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
@@ -99,7 +99,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Downloads and sets up the PostgreSQL database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -139,7 +139,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Restart the PostgreSQL service without rebuilding
|
||||
</p>
|
||||
@@ -181,7 +181,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Start the PostgreSQL database (requires a previous
|
||||
successful setup)
|
||||
@@ -221,7 +221,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Stop the currently running PostgreSQL database
|
||||
</p>
|
||||
@@ -248,7 +248,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Open a terminal to the PostgreSQL container</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
|
||||
@@ -180,7 +180,7 @@ export const AddApplication = ({ environmentId, projectName }: Props) => {
|
||||
</FormLabel>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
className="z-999 w-[300px]"
|
||||
className="z-[999] w-[300px]"
|
||||
align="start"
|
||||
side="top"
|
||||
>
|
||||
|
||||
@@ -191,7 +191,7 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
|
||||
</FormLabel>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
className="z-999 w-[300px]"
|
||||
className="z-[999] w-[300px]"
|
||||
align="start"
|
||||
side="top"
|
||||
>
|
||||
|
||||
@@ -412,7 +412,7 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
|
||||
/>
|
||||
<Label
|
||||
htmlFor={key}
|
||||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
|
||||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
|
||||
>
|
||||
{value.icon}
|
||||
{value.label}
|
||||
@@ -765,7 +765,7 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
|
||||
name="replicaSets"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Use Replica Sets</FormLabel>
|
||||
</div>
|
||||
|
||||
@@ -231,7 +231,7 @@ export const AddImport = ({ environmentId, projectName }: Props) => {
|
||||
</FormLabel>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
className="z-999 w-[300px]"
|
||||
className="z-[999] w-[300px]"
|
||||
align="start"
|
||||
side="top"
|
||||
>
|
||||
@@ -386,7 +386,7 @@ export const AddImport = ({ environmentId, projectName }: Props) => {
|
||||
{templateInfo.template.domains.map((domain, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-lg border bg-card p-3 text-card-foreground shadow-xs"
|
||||
className="rounded-lg border bg-card p-3 text-card-foreground shadow-sm"
|
||||
>
|
||||
<div className="font-medium">
|
||||
{domain.serviceName}
|
||||
|
||||
@@ -236,7 +236,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full sm:w-[200px] justify-between bg-input!",
|
||||
"w-full sm:w-[200px] justify-between !bg-input",
|
||||
)}
|
||||
>
|
||||
{isLoadingTags
|
||||
@@ -293,10 +293,10 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Button
|
||||
variant={showBookmarksOnly ? "default" : "outline-solid"}
|
||||
variant={showBookmarksOnly ? "default" : "outline"}
|
||||
size="icon"
|
||||
onClick={() => setShowBookmarksOnly(!showBookmarksOnly)}
|
||||
className="h-9 w-9 shrink-0"
|
||||
className="h-9 w-9 flex-shrink-0"
|
||||
disabled={isLoadingBookmarks}
|
||||
>
|
||||
<Bookmark
|
||||
@@ -311,7 +311,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === "detailed" ? "icon" : "detailed")
|
||||
}
|
||||
className="h-9 w-9 shrink-0"
|
||||
className="h-9 w-9 flex-shrink-0"
|
||||
>
|
||||
{viewMode === "detailed" ? (
|
||||
<LayoutGrid className="size-4" />
|
||||
@@ -398,7 +398,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 bg-background/80 backdrop-blur-xs hover:bg-background"
|
||||
className="h-8 w-8 bg-background/80 backdrop-blur-sm hover:bg-background"
|
||||
onClick={(e) => handleToggleBookmark(e, template.id)}
|
||||
>
|
||||
<Bookmark
|
||||
@@ -451,7 +451,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
|
||||
|
||||
{/* Template Content */}
|
||||
{viewMode === "detailed" && (
|
||||
<ScrollArea className="min-h-0 flex-1 p-6">
|
||||
<ScrollArea className="flex-1 p-6">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{template?.description}
|
||||
</div>
|
||||
@@ -534,7 +534,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
|
||||
</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
className="z-999 w-[300px]"
|
||||
className="z-[999] w-[300px]"
|
||||
align="start"
|
||||
side="top"
|
||||
>
|
||||
|
||||
@@ -297,7 +297,7 @@ export const AdvancedEnvironmentSelector = ({
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
@@ -306,7 +306,7 @@ export const AdvancedEnvironmentSelector = ({
|
||||
placeholder="Environment name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="description">Description (optional)</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
|
||||
@@ -5,7 +5,7 @@ import type { StepProps } from "./step-two";
|
||||
export const StepThree = ({ templateInfo }: StepProps) => {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow">
|
||||
<div className="flex-grow">
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-semibold">Step 3: Review and Finalize</h2>
|
||||
<div className="space-y-4">
|
||||
|
||||
@@ -201,7 +201,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-6">
|
||||
<div className="grow overflow-auto pb-8">
|
||||
<div className="flex-grow overflow-auto pb-8">
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-semibold">Step 2: Choose a Variant</h2>
|
||||
{!selectedVariant && (
|
||||
|
||||
@@ -184,7 +184,7 @@ export const TemplateGenerator = ({ environmentId }: Props) => {
|
||||
>
|
||||
{stepper.all.map((step, index, array) => (
|
||||
<React.Fragment key={step.id}>
|
||||
<li className="flex items-center gap-4 shrink-0">
|
||||
<li className="flex items-center gap-4 flex-shrink-0">
|
||||
<Button
|
||||
type="button"
|
||||
role="tab"
|
||||
|
||||
@@ -154,7 +154,7 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
|
||||
lineWrapping
|
||||
language="properties"
|
||||
readOnly={!canWrite}
|
||||
wrapperClassName="h-140 font-mono"
|
||||
wrapperClassName="h-[35rem] font-mono"
|
||||
placeholder={`NODE_ENV=development
|
||||
DATABASE_URL=postgresql://localhost:5432/mydb
|
||||
API_KEY=your-api-key-here
|
||||
|
||||
@@ -152,7 +152,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
|
||||
lineWrapping
|
||||
language="properties"
|
||||
readOnly={!canWrite}
|
||||
wrapperClassName="h-140 font-mono"
|
||||
wrapperClassName="h-[35rem] font-mono"
|
||||
placeholder={`NODE_ENV=production
|
||||
PORT=3000
|
||||
|
||||
|
||||
@@ -207,7 +207,7 @@ export const ShowProjects = () => {
|
||||
<Card className="h-full bg-sidebar p-2.5 rounded-xl ">
|
||||
<div className="rounded-xl bg-background shadow-md ">
|
||||
<div className="flex justify-between gap-4 w-full items-center flex-wrap p-6">
|
||||
<CardHeader className="flex-1 p-0">
|
||||
<CardHeader className="p-0">
|
||||
<CardTitle className="text-xl flex flex-row gap-2">
|
||||
<FolderInput className="size-6 text-muted-foreground self-center" />
|
||||
Projects
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
@@ -98,7 +98,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Downloads and sets up the Redis database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -138,7 +138,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Restart the Redis service without rebuilding</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -178,7 +178,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>
|
||||
Start the Redis database (requires a previous
|
||||
successful setup)
|
||||
@@ -218,7 +218,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Stop the currently running Redis database</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
@@ -243,7 +243,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<TooltipContent sideOffset={5} className="z-[60]">
|
||||
<p>Open a terminal to the Redis container</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
|
||||
@@ -10,13 +10,13 @@ export const getStatusColor = (status: number) => {
|
||||
return "secondary";
|
||||
}
|
||||
if (status >= 100 && status < 200) {
|
||||
return "outline-solid";
|
||||
return "outline";
|
||||
}
|
||||
if (status >= 200 && status < 300) {
|
||||
return "default";
|
||||
}
|
||||
if (status >= 300 && status < 400) {
|
||||
return "outline-solid";
|
||||
return "outline";
|
||||
}
|
||||
if (status >= 400 && status < 500) {
|
||||
return "destructive";
|
||||
|
||||
@@ -335,14 +335,14 @@ export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
|
||||
Details of the request log entry.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<ScrollArea className="grow mt-4 pr-4">
|
||||
<ScrollArea className="flex-grow mt-4 pr-4">
|
||||
<div className="border rounded-md">
|
||||
<Table>
|
||||
<TableBody>
|
||||
{Object.entries(selectedRow || {}).map(([key, value]) => (
|
||||
<TableRow key={key}>
|
||||
<TableCell className="font-medium">{key}</TableCell>
|
||||
<TableCell className="truncate wrap-break-word break-before-all whitespace-pre-wrap">
|
||||
<TableCell className="truncate break-words break-before-all whitespace-pre-wrap">
|
||||
{key === "RequestAddr" ? (
|
||||
<div className="flex items-center gap-2 bg-muted p-1 rounded">
|
||||
<span>{value}</span>
|
||||
|
||||
@@ -150,7 +150,7 @@ export const SearchCommand = () => {
|
||||
{application.type === "compose" && (
|
||||
<CircuitBoard className="h-6 w-6 mr-2" />
|
||||
)}
|
||||
<span className="grow">
|
||||
<span className="flex-grow">
|
||||
{project.name} / {application.environmentName} /{" "}
|
||||
{application.name}{" "}
|
||||
<div style={{ display: "none" }}>{application.id}</div>
|
||||
|
||||
@@ -315,17 +315,17 @@ export const ShowBilling = () => {
|
||||
</span>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
variant={!updateFormAnnual ? "default" : "outline-solid"}
|
||||
variant={!updateFormAnnual ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="min-w-24"
|
||||
className="min-w-[6rem]"
|
||||
onClick={() => setUpdateFormAnnual(false)}
|
||||
>
|
||||
Monthly
|
||||
</Button>
|
||||
<Button
|
||||
variant={updateFormAnnual ? "default" : "outline-solid"}
|
||||
variant={updateFormAnnual ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="min-w-24"
|
||||
className="min-w-[6rem]"
|
||||
onClick={() => setUpdateFormAnnual(true)}
|
||||
>
|
||||
Annual (20% off)
|
||||
@@ -336,20 +336,20 @@ export const ShowBilling = () => {
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
variant={
|
||||
upgradeTier === "hobby" ? "default" : "outline-solid"
|
||||
upgradeTier === "hobby" ? "default" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
className="min-w-24"
|
||||
className="min-w-[6rem]"
|
||||
onClick={() => setUpgradeTier("hobby")}
|
||||
>
|
||||
Hobby
|
||||
</Button>
|
||||
<Button
|
||||
variant={
|
||||
upgradeTier === "startup" ? "default" : "outline-solid"
|
||||
upgradeTier === "startup" ? "default" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
className="min-w-24"
|
||||
className="min-w-[6rem]"
|
||||
onClick={() => setUpgradeTier("startup")}
|
||||
>
|
||||
Startup
|
||||
@@ -530,17 +530,17 @@ export const ShowBilling = () => {
|
||||
</span>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
variant={!updateFormAnnual ? "default" : "outline-solid"}
|
||||
variant={!updateFormAnnual ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="min-w-24"
|
||||
className="min-w-[6rem]"
|
||||
onClick={() => setUpdateFormAnnual(false)}
|
||||
>
|
||||
Monthly
|
||||
</Button>
|
||||
<Button
|
||||
variant={updateFormAnnual ? "default" : "outline-solid"}
|
||||
variant={updateFormAnnual ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="min-w-24"
|
||||
className="min-w-[6rem]"
|
||||
onClick={() => setUpdateFormAnnual(true)}
|
||||
>
|
||||
Annual (20% off)
|
||||
@@ -551,20 +551,20 @@ export const ShowBilling = () => {
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
variant={
|
||||
upgradeTier === "hobby" ? "default" : "outline-solid"
|
||||
upgradeTier === "hobby" ? "default" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
className="min-w-24"
|
||||
className="min-w-[6rem]"
|
||||
onClick={() => setUpgradeTier("hobby")}
|
||||
>
|
||||
Hobby
|
||||
</Button>
|
||||
<Button
|
||||
variant={
|
||||
upgradeTier === "startup" ? "default" : "outline-solid"
|
||||
upgradeTier === "startup" ? "default" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
className="min-w-24"
|
||||
className="min-w-[6rem]"
|
||||
onClick={() => setUpgradeTier("startup")}
|
||||
>
|
||||
Startup
|
||||
@@ -768,7 +768,7 @@ export const ShowBilling = () => {
|
||||
</Tabs>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Hobby */}
|
||||
<section className="flex flex-col rounded-2xl border border-border px-5 py-6 shadow-xs">
|
||||
<section className="flex flex-col rounded-2xl border border-border px-5 py-6 shadow-sm">
|
||||
{isAnnual && (
|
||||
<Badge className="mb-3 w-fit" variant="secondary">
|
||||
20% off
|
||||
@@ -892,7 +892,7 @@ export const ShowBilling = () => {
|
||||
</section>
|
||||
|
||||
{/* Startup - Recommended */}
|
||||
<section className="flex flex-col rounded-2xl border-2 border-primary px-5 py-6 shadow-xs">
|
||||
<section className="flex flex-col rounded-2xl border-2 border-primary px-5 py-6 shadow-sm">
|
||||
<div className="mb-3 flex flex-wrap gap-2">
|
||||
<Badge className="w-fit" variant="default">
|
||||
Recommended
|
||||
@@ -1043,7 +1043,7 @@ export const ShowBilling = () => {
|
||||
</section>
|
||||
|
||||
{/* Enterprise */}
|
||||
<section className="flex flex-col rounded-2xl border border-border px-5 py-6 shadow-xs">
|
||||
<section className="flex flex-col rounded-2xl border border-border px-5 py-6 shadow-sm">
|
||||
<h3 className="text-xl font-bold tracking-tight text-foreground">
|
||||
Enterprise
|
||||
</h3>
|
||||
@@ -1097,7 +1097,7 @@ export const ShowBilling = () => {
|
||||
className="w-full"
|
||||
onValueChange={(e) => setIsAnnual(e === "annual")}
|
||||
>
|
||||
<TabsList className="grid w-full max-w-56 grid-cols-2">
|
||||
<TabsList className="grid w-full max-w-[14rem] grid-cols-2">
|
||||
<TabsTrigger value="monthly">Monthly</TabsTrigger>
|
||||
<TabsTrigger value="annual">Annual (20% off)</TabsTrigger>
|
||||
</TabsList>
|
||||
@@ -1110,7 +1110,7 @@ export const ShowBilling = () => {
|
||||
className={clsx(
|
||||
"flex flex-col rounded-3xl border-dashed border-2 px-4 max-w-sm",
|
||||
featured
|
||||
? "order-first border py-8 lg:order-0"
|
||||
? "order-first border py-8 lg:order-none"
|
||||
: "lg:py-8",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -160,7 +160,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{certificateId ? "Update" : "Add New"} Certificate
|
||||
@@ -200,7 +200,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
|
||||
<FormLabel>Certificate Data</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
className="h-32 max-h-32 resize-none overflow-y-auto field-sizing-fixed"
|
||||
className="h-32"
|
||||
placeholder={certificateDataHolder}
|
||||
{...field}
|
||||
/>
|
||||
@@ -217,7 +217,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
|
||||
<FormLabel>Private Key</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
className="h-32 max-h-32 resize-none overflow-y-auto field-sizing-fixed"
|
||||
className="h-32"
|
||||
placeholder={privateKeyDataHolder}
|
||||
{...field}
|
||||
/>
|
||||
@@ -292,7 +292,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
|
||||
)}
|
||||
</form>
|
||||
|
||||
<DialogFooter className="flex w-full flex-row justify-end!">
|
||||
<DialogFooter className="flex w-full flex-row !justify-end">
|
||||
<Button
|
||||
isLoading={isPending}
|
||||
form="hook-form-handle-certificate"
|
||||
|
||||
@@ -31,9 +31,9 @@ export const ShowNodeData = ({ data }: Props) => {
|
||||
See in detail the metadata of this node
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-236 bg-card">
|
||||
<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem] bg-card">
|
||||
<code>
|
||||
<pre className="whitespace-pre-wrap wrap-break-word">
|
||||
<pre className="whitespace-pre-wrap break-words">
|
||||
<CodeEditor
|
||||
language="json"
|
||||
lineWrapping
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useState } from "react";
|
||||
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
|
||||
import { ShowNodes } from "./show-nodes";
|
||||
|
||||
interface Props {
|
||||
serverId: string;
|
||||
}
|
||||
|
||||
export const ShowNodesModal = ({ serverId }: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<DropdownMenuItem
|
||||
className="w-full cursor-pointer "
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
>
|
||||
Show Swarm Nodes
|
||||
</DropdownMenuItem>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="min-w-[70vw]">
|
||||
<div className="grid w-full gap-1">
|
||||
<ShowNodes serverId={serverId} />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -434,8 +434,8 @@ export const HandleDestinations = ({ destinationId }: Props) => {
|
||||
|
||||
<DialogFooter
|
||||
className={cn(
|
||||
isCloud ? "flex-col!" : "flex-row",
|
||||
"flex w-full justify-between! gap-4",
|
||||
isCloud ? "!flex-col" : "flex-row",
|
||||
"flex w-full !justify-between gap-4",
|
||||
)}
|
||||
>
|
||||
{isCloud ? (
|
||||
|
||||
@@ -890,7 +890,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
/>
|
||||
<Label
|
||||
htmlFor={key}
|
||||
className="h-24 flex flex-col gap-2 items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
|
||||
className="h-24 flex flex-col gap-2 items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
|
||||
>
|
||||
{value.icon}
|
||||
{value.label}
|
||||
@@ -1051,7 +1051,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
name="decoration"
|
||||
defaultValue={true}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-xs">
|
||||
<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Decoration</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1383,7 +1383,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
name="decoration"
|
||||
defaultValue={true}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-xs">
|
||||
<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Decoration</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1591,7 +1591,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name={`headers.${index}.value` as never}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-2">
|
||||
<FormItem className="flex-[2]">
|
||||
<FormControl>
|
||||
<Input placeholder="Value" {...field} />
|
||||
</FormControl>
|
||||
@@ -1824,7 +1824,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name="appDeploy"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs gap-2">
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
|
||||
<div className="">
|
||||
<FormLabel>App Deploy</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1844,7 +1844,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name="appBuildError"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs gap-2">
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>App Build Error</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1865,7 +1865,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name="databaseBackup"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs gap-2">
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Database Backup</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1886,7 +1886,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name="dokployBackup"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs gap-2">
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Dokploy Backup</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1907,7 +1907,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name="volumeBackup"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs gap-2">
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Volume Backup</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1928,7 +1928,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name="dockerCleanup"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs gap-2">
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Docker Cleanup</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1951,7 +1951,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name="dokployRestart"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs gap-2">
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Dokploy Restart</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1974,7 +1974,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
control={form.control}
|
||||
name="serverThreshold"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs gap-2">
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Server Threshold</FormLabel>
|
||||
<FormDescription>
|
||||
@@ -1996,7 +1996,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<DialogFooter className="flex flex-row gap-2 justify-between! w-full">
|
||||
<DialogFooter className="flex flex-row gap-2 !justify-between w-full">
|
||||
<Button
|
||||
isLoading={
|
||||
isLoadingSlack ||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user