Harry Bayliss
85c44296ac
Rework the dashboard, environment topology view, header navigation, and status rendering, and standardise selects on a shadcn-vue component. Replace the thin database seeder with a SimulatedEnvironmentSeeder that builds a fully wired, mostly-running organisation (ACTIVE server fleet, managed + GHCR registries, Gitea source provider, ClipBin app with production/staging environments, services, slices, endpoints, managed variables, build artifacts, and a completed/in-progress/failed operations history) so the new UI renders against realistic data.
59 lines
2.3 KiB
Vue
59 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { Card } from "@/components/ui/card";
|
|
import ServiceCategory from "@/enums/ServiceCategory";
|
|
import ServiceStatus from "@/enums/ServiceStatus";
|
|
import ServiceType from "@/enums/ServiceType";
|
|
import { DoorOpenIcon } from "lucide-vue-next";
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
icon?: object | Function;
|
|
serviceType?: string;
|
|
serviceCategory?: string;
|
|
status?: string;
|
|
}>(),
|
|
{
|
|
icon: () => DoorOpenIcon,
|
|
serviceType: ServiceType.GATEWAY,
|
|
serviceCategory: ServiceCategory.DATABASE,
|
|
status: ServiceStatus.UNKNOWN,
|
|
},
|
|
);
|
|
</script>
|
|
<template>
|
|
<Card
|
|
class="flex select-none items-center justify-between gap-4 bg-card/30 p-4 backdrop-blur-sm"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<component :is="icon" class="size-4 opacity-50" />
|
|
<div>
|
|
<div class="capitalize">{{ serviceCategory }}</div>
|
|
<div class="text-xs opacity-50">{{ serviceType }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span
|
|
class="inline-block size-1 rounded-full dark:bg-zinc-500"
|
|
:class="{
|
|
'bg-zinc-500 dark:bg-zinc-400':
|
|
status === ServiceStatus.UNKNOWN || status === ServiceStatus.NOT_INSTALLED,
|
|
'bg-green-600 dark:bg-green-400': status === ServiceStatus.RUNNING,
|
|
'bg-red-600 dark:bg-red-400': status === ServiceStatus.STOPPED,
|
|
'bg-yellow-600 dark:bg-yellow-400': status === ServiceStatus.INSTALLING,
|
|
}"
|
|
></span>
|
|
<span
|
|
class="text-xs dark:text-zinc-400"
|
|
:class="{
|
|
'text-zinc-600 dark:text-zinc-400':
|
|
status === ServiceStatus.UNKNOWN || status === ServiceStatus.NOT_INSTALLED,
|
|
'text-green-700 dark:text-green-400': status === ServiceStatus.RUNNING,
|
|
'text-red-700 dark:text-red-400': status === ServiceStatus.STOPPED,
|
|
'text-yellow-700 dark:text-yellow-400': status === ServiceStatus.INSTALLING,
|
|
}"
|
|
>{{ status.replaceAll("-", " ") }}</span
|
|
>
|
|
</div>
|
|
</Card>
|
|
</template>
|