408 lines
20 KiB
Vue
408 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from "@/components/ui/button";
|
|
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, router, WhenVisible } from "@inertiajs/vue3";
|
|
import {
|
|
AppWindowIcon,
|
|
GitBranchIcon,
|
|
PencilIcon,
|
|
ServerIcon,
|
|
ShieldCheckIcon,
|
|
Trash2Icon,
|
|
UserIcon,
|
|
} from "lucide-vue-next";
|
|
import { ref, watch } from "vue";
|
|
|
|
defineProps({
|
|
organisation: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
providers: {
|
|
type: Array,
|
|
required: false,
|
|
},
|
|
registries: {
|
|
type: Array,
|
|
required: false,
|
|
},
|
|
sourceProviders: {
|
|
type: Array,
|
|
required: false,
|
|
},
|
|
health: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const tabValue = ref(new URL(window.location.href).hash?.replace("#", "") || "dashboard");
|
|
watch(tabValue, () => {
|
|
window.history.pushState({}, "", `#${tabValue.value}`);
|
|
});
|
|
watch(
|
|
() => window.location.hash,
|
|
(newHash) => {
|
|
if (newHash) {
|
|
tabValue.value = newHash.replace("#", "");
|
|
}
|
|
},
|
|
);
|
|
|
|
const destroyResource = (url: string, label: string): void => {
|
|
if (!window.confirm(`Delete ${label}?`)) {
|
|
return;
|
|
}
|
|
|
|
router.delete(url, { preserveScroll: true });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="organisation.name" />
|
|
|
|
<AppLayout>
|
|
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
|
|
<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>
|
|
<TabsTrigger value="settings"> Settings </TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="dashboard">
|
|
<h3 class="mt-4 text-2xl font-bold tracking-tight">Your Resources</h3>
|
|
<p class="mb-4 text-sm text-muted-foreground">
|
|
Your organisation, at a glance.
|
|
</p>
|
|
<div class="grid w-full gap-4 md:grid-cols-3">
|
|
<Card class="relative">
|
|
<Link
|
|
:href="
|
|
route('applications.index', {
|
|
organisation: organisation.id,
|
|
})
|
|
"
|
|
class="absolute inset-0"
|
|
/>
|
|
<CardContent class="flex items-center gap-4 p-4">
|
|
<AppWindowIcon class="size-6 text-muted-foreground" />
|
|
<div>
|
|
<h4 class="mb-1 text-3xl font-medium leading-none">
|
|
{{ organisation.applications_count }}
|
|
</h4>
|
|
<p class="text-sm text-muted-foreground">
|
|
Application{{
|
|
organisation.applications_count === 1 ? "" : "s"
|
|
}}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card class="relative">
|
|
<Link
|
|
class="absolute inset-0"
|
|
:href="
|
|
route('servers.index', {
|
|
organisation: organisation.id,
|
|
})
|
|
"
|
|
/>
|
|
<CardContent class="flex items-center gap-4 p-4">
|
|
<ServerIcon class="size-6 text-muted-foreground" />
|
|
<div>
|
|
<h4 class="mb-1 text-3xl font-medium leading-none">
|
|
{{ organisation.servers_count }}
|
|
</h4>
|
|
<p class="text-sm text-muted-foreground">
|
|
Server{{ organisation.servers_count === 1 ? "" : "s" }}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card class="relative">
|
|
<CardContent class="flex items-center gap-4 p-4">
|
|
<UserIcon class="size-6 text-muted-foreground" />
|
|
<div>
|
|
<h4 class="mb-1 text-3xl font-medium leading-none">
|
|
{{ organisation.members_count }}
|
|
</h4>
|
|
<p class="text-sm text-muted-foreground">
|
|
Member{{ organisation.members_count === 1 ? "" : "s" }}
|
|
</p>
|
|
</div>
|
|
</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">
|
|
<template #fallback> Loading... </template>
|
|
<div class="mt-4 flex items-center justify-between gap-3">
|
|
<h3 class="text-2xl font-bold tracking-tight">Registries</h3>
|
|
<Button
|
|
:as="Link"
|
|
:href="
|
|
route('registries.create', {
|
|
organisation: organisation.id,
|
|
})
|
|
"
|
|
>
|
|
Add
|
|
</Button>
|
|
</div>
|
|
<div
|
|
class="border-muted-background divide-y-muted-background mb-6 max-w-96 divide-y rounded-md border"
|
|
>
|
|
<div
|
|
v-for="registry in registries"
|
|
:key="registry.id"
|
|
class="flex items-center gap-2 px-2 py-1"
|
|
>
|
|
<ShieldCheckIcon class="size-4 text-muted-foreground" />
|
|
<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"
|
|
class="px-2 py-1 text-sm text-muted-foreground"
|
|
>
|
|
No registries configured
|
|
</div>
|
|
</div>
|
|
</WhenVisible>
|
|
<WhenVisible data="sourceProviders">
|
|
<template #fallback> Loading... </template>
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h3 class="text-2xl font-bold tracking-tight">Source Providers</h3>
|
|
<Button
|
|
:as="Link"
|
|
:href="
|
|
route('source-providers.create', {
|
|
organisation: organisation.id,
|
|
})
|
|
"
|
|
>
|
|
Add
|
|
</Button>
|
|
</div>
|
|
<div
|
|
class="border-muted-background divide-y-muted-background max-w-96 divide-y rounded-md border"
|
|
>
|
|
<div
|
|
v-for="sourceProvider in sourceProviders"
|
|
:key="sourceProvider.id"
|
|
class="flex items-center gap-2 px-2 py-1"
|
|
>
|
|
<GitBranchIcon class="size-4 text-muted-foreground" />
|
|
<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"
|
|
class="px-2 py-1 text-sm text-muted-foreground"
|
|
>
|
|
No source providers configured
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WhenVisible>
|
|
<WhenVisible data="providers">
|
|
<template #fallback> Loading... </template>
|
|
<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>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|