wowowowowo
This commit is contained in:
@@ -1,14 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, Link, WhenVisible } from "@inertiajs/vue3";
|
||||
import { Head, Link, router, WhenVisible } from "@inertiajs/vue3";
|
||||
import {
|
||||
AppWindowIcon,
|
||||
GitBranchIcon,
|
||||
PencilIcon,
|
||||
ServerIcon,
|
||||
ShieldCheckIcon,
|
||||
Trash2Icon,
|
||||
UserIcon,
|
||||
} from "lucide-vue-next";
|
||||
import { ref, watch } from "vue";
|
||||
@@ -30,6 +32,10 @@ defineProps({
|
||||
type: Array,
|
||||
required: false,
|
||||
},
|
||||
health: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const tabValue = ref(new URL(window.location.href).hash?.replace("#", "") || "dashboard");
|
||||
@@ -44,6 +50,14 @@ watch(
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const destroyResource = (url: string, label: string): void => {
|
||||
if (!window.confirm(`Delete ${label}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.delete(url, { preserveScroll: true });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -51,7 +65,22 @@ watch(
|
||||
|
||||
<AppLayout>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
|
||||
<h2 class="text-3xl font-bold tracking-tight">{{ organisation.name }}</h2>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<h2 class="text-3xl font-bold tracking-tight">{{ organisation.name }}</h2>
|
||||
<Button
|
||||
v-if="
|
||||
organisation.providers_count === 0 ||
|
||||
organisation.source_providers_count === 0 ||
|
||||
organisation.registries_count === 0 ||
|
||||
organisation.servers_count === 0 ||
|
||||
organisation.applications_count === 0
|
||||
"
|
||||
:as="Link"
|
||||
:href="route('onboarding.show', { organisation: organisation.id })"
|
||||
>
|
||||
Continue onboarding
|
||||
</Button>
|
||||
</div>
|
||||
<Tabs v-model="tabValue" :unmount-on-hide="false">
|
||||
<TabsList>
|
||||
<TabsTrigger value="dashboard"> Dashboard </TabsTrigger>
|
||||
@@ -121,6 +150,63 @@ watch(
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Card class="mt-4">
|
||||
<CardHeader>
|
||||
<CardTitle>Health</CardTitle>
|
||||
<CardDescription>Aggregate signals across this organisation.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-3 md:grid-cols-3">
|
||||
<div class="rounded-md border p-3">
|
||||
<div class="text-2xl font-semibold">{{ health.unhealthy_services }}</div>
|
||||
<div class="text-sm text-muted-foreground">Unhealthy services</div>
|
||||
</div>
|
||||
<div class="rounded-md border p-3">
|
||||
<div class="text-2xl font-semibold">{{ health.failed_operations }}</div>
|
||||
<div class="text-sm text-muted-foreground">Failed operations</div>
|
||||
</div>
|
||||
<div class="rounded-md border p-3">
|
||||
<div class="text-2xl font-semibold">{{ health.locked_variables }}</div>
|
||||
<div class="text-sm text-muted-foreground">Environments with locked variables</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card class="mt-4">
|
||||
<CardHeader>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<CardTitle>Members</CardTitle>
|
||||
<CardDescription>Current organisation roster.</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('organisation-members.index', {
|
||||
organisation: organisation.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Manage
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-2">
|
||||
<div
|
||||
v-for="member in organisation.members"
|
||||
:key="member.id"
|
||||
class="flex items-center justify-between rounded-md border p-3 text-sm"
|
||||
>
|
||||
<div>
|
||||
<div class="font-medium">{{ member.name }}</div>
|
||||
<div class="text-muted-foreground">{{ member.email }}</div>
|
||||
</div>
|
||||
<span class="text-xs uppercase text-muted-foreground">
|
||||
{{ member.membership?.role ?? "member" }}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
<TabsContent value="settings">
|
||||
<WhenVisible data="registries">
|
||||
@@ -147,10 +233,48 @@ watch(
|
||||
class="flex items-center gap-2 px-2 py-1"
|
||||
>
|
||||
<ShieldCheckIcon class="size-4 text-muted-foreground" />
|
||||
{{ registry.name }}
|
||||
<Link
|
||||
:href="
|
||||
route('registries.show', {
|
||||
organisation: organisation.id,
|
||||
registry: registry.id,
|
||||
})
|
||||
"
|
||||
class="hover:underline"
|
||||
>
|
||||
{{ registry.name }}
|
||||
</Link>
|
||||
<span class="ml-auto text-xs uppercase text-muted-foreground">{{
|
||||
registry.type
|
||||
}}</span>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="iconxs"
|
||||
variant="ghost"
|
||||
:href="
|
||||
route('registries.edit', {
|
||||
organisation: organisation.id,
|
||||
registry: registry.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<PencilIcon class="size-3" />
|
||||
</Button>
|
||||
<Button
|
||||
size="iconxs"
|
||||
variant="ghost"
|
||||
@click="
|
||||
destroyResource(
|
||||
route('registries.destroy', {
|
||||
organisation: organisation.id,
|
||||
registry: registry.id,
|
||||
}),
|
||||
registry.name,
|
||||
)
|
||||
"
|
||||
>
|
||||
<Trash2Icon class="size-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
v-if="!registries?.length"
|
||||
@@ -185,10 +309,35 @@ watch(
|
||||
class="flex items-center gap-2 px-2 py-1"
|
||||
>
|
||||
<GitBranchIcon class="size-4 text-muted-foreground" />
|
||||
{{ sourceProvider.name }}
|
||||
<Link
|
||||
:href="
|
||||
route('source-providers.edit', {
|
||||
organisation: organisation.id,
|
||||
source_provider: sourceProvider.id,
|
||||
})
|
||||
"
|
||||
class="hover:underline"
|
||||
>
|
||||
{{ sourceProvider.name }}
|
||||
</Link>
|
||||
<span class="ml-auto text-xs uppercase text-muted-foreground">{{
|
||||
sourceProvider.type
|
||||
}}</span>
|
||||
<Button
|
||||
size="iconxs"
|
||||
variant="ghost"
|
||||
@click="
|
||||
destroyResource(
|
||||
route('source-providers.destroy', {
|
||||
organisation: organisation.id,
|
||||
source_provider: sourceProvider.id,
|
||||
}),
|
||||
sourceProvider.name,
|
||||
)
|
||||
"
|
||||
>
|
||||
<Trash2Icon class="size-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
v-if="!sourceProviders?.length"
|
||||
@@ -201,21 +350,53 @@ watch(
|
||||
</WhenVisible>
|
||||
<WhenVisible data="providers">
|
||||
<template #fallback> Loading... </template>
|
||||
<h3 class="mt-4 text-2xl font-bold tracking-tight">Server Providers</h3>
|
||||
<p class="mb-4 text-sm text-muted-foreground">
|
||||
Manage your server providers.
|
||||
</p>
|
||||
<div class="mt-4 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold tracking-tight">Server Providers</h3>
|
||||
<p class="mb-4 text-sm text-muted-foreground">
|
||||
Manage your server providers.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
:as="Link"
|
||||
:href="route('providers.create', { organisation: organisation.id })"
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="border-muted-background divide-y-muted-background max-w-80 divide-y rounded-md border"
|
||||
>
|
||||
<div
|
||||
v-for="provider in providers"
|
||||
:key="provider.id"
|
||||
class="flex items-center gap-2 px-2 py-1"
|
||||
>
|
||||
{{ provider.name }}
|
||||
<span class="ml-auto text-xs uppercase text-muted-foreground">{{
|
||||
provider.type
|
||||
}}</span>
|
||||
<Button
|
||||
size="iconxs"
|
||||
variant="ghost"
|
||||
@click="
|
||||
destroyResource(
|
||||
route('providers.destroy', {
|
||||
organisation: organisation.id,
|
||||
provider: provider.id,
|
||||
}),
|
||||
provider.name,
|
||||
)
|
||||
"
|
||||
>
|
||||
<Trash2Icon class="size-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
v-if="!providers?.length"
|
||||
class="px-2 py-1 text-sm text-muted-foreground"
|
||||
>
|
||||
No server providers configured
|
||||
</div>
|
||||
</div>
|
||||
</WhenVisible>
|
||||
|
||||
Reference in New Issue
Block a user