wowowowowo
This commit is contained in:
98
resources/js/pages/operations/Index.vue
Normal file
98
resources/js/pages/operations/Index.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, Link, router, usePage, usePoll } from "@inertiajs/vue3";
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
operations: Record<string, any>;
|
||||
filters: Record<string, string>;
|
||||
operationKinds: Record<string, string>;
|
||||
operationStatuses: Record<string, string>;
|
||||
}>();
|
||||
|
||||
const operationRows = computed(() => props.operations.data ?? []);
|
||||
const page = usePage();
|
||||
|
||||
usePoll(5000, {}, { keepAlive: true });
|
||||
|
||||
const setFilter = (key: string, value: string | null): void => {
|
||||
router.get(
|
||||
route("operations.index", { organisation: page.props.organisation.id }),
|
||||
{ ...props.filters, [key]: value || undefined },
|
||||
{ preserveState: true, replace: true },
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Operations" />
|
||||
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: 'Operations',
|
||||
href: route('operations.index', { organisation: $page.props.organisation.id }),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 p-4">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Operations</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Organisation-wide execution history and logs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Filters</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="flex flex-wrap gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
:variant="!filters.kind ? 'default' : 'secondary'"
|
||||
@click="setFilter('kind', null)"
|
||||
>
|
||||
All kinds
|
||||
</Button>
|
||||
<Button
|
||||
v-for="kind in operationKinds"
|
||||
:key="kind"
|
||||
size="sm"
|
||||
:variant="filters.kind === kind ? 'default' : 'secondary'"
|
||||
@click="setFilter('kind', kind)"
|
||||
>
|
||||
{{ kind.replace('_', ' ') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-for="status in operationStatuses"
|
||||
:key="status"
|
||||
size="sm"
|
||||
:variant="filters.status === status ? 'default' : 'outline'"
|
||||
@click="setFilter('status', filters.status === status ? null : status)"
|
||||
>
|
||||
{{ status.replace('-', ' ') }}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<OperationTimeline :operations="operationRows" show-target />
|
||||
|
||||
<div v-if="operations.links?.length > 3" class="flex flex-wrap gap-2">
|
||||
<Button
|
||||
v-for="link in operations.links"
|
||||
:key="link.label"
|
||||
:as="link.url ? Link : 'button'"
|
||||
:href="link.url ?? undefined"
|
||||
size="sm"
|
||||
:variant="link.active ? 'default' : 'secondary'"
|
||||
:disabled="!link.url"
|
||||
v-html="link.label"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
116
resources/js/pages/operations/Show.vue
Normal file
116
resources/js/pages/operations/Show.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, Link, router, usePoll } from "@inertiajs/vue3";
|
||||
|
||||
defineProps<{
|
||||
operation: Record<string, any>;
|
||||
}>();
|
||||
|
||||
const label = (value?: string | null): string => value?.replaceAll("_", " ").replaceAll("-", " ") ?? "";
|
||||
|
||||
usePoll(5000, {}, { keepAlive: true });
|
||||
|
||||
const retryOperation = (operation: Record<string, any>): void => {
|
||||
router.post(
|
||||
route("operations.retry", {
|
||||
organisation: route().params.organisation,
|
||||
operation: operation.id,
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const cancelOperation = (operation: Record<string, any>): void => {
|
||||
router.post(
|
||||
route("operations.cancel", {
|
||||
organisation: route().params.organisation,
|
||||
operation: operation.id,
|
||||
}),
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="`Operation ${operation.hash}`" />
|
||||
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: 'Operations',
|
||||
href: route('operations.index', { organisation: $page.props.organisation.id }),
|
||||
},
|
||||
{ title: operation.hash },
|
||||
]"
|
||||
>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 p-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<h2 class="text-3xl font-bold tracking-tight">{{ label(operation.kind) }}</h2>
|
||||
<Badge variant="outline">{{ operation.hash }}</Badge>
|
||||
<Badge :variant="operation.status === 'completed' ? 'success' : 'secondary'">
|
||||
{{ label(operation.status) }}
|
||||
</Badge>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Started {{ operation.started_at ?? "not yet" }} · Finished
|
||||
{{ operation.finished_at ?? "not yet" }}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
v-if="operation.status === 'failed'"
|
||||
variant="secondary"
|
||||
@click="retryOperation(operation)"
|
||||
>
|
||||
Re-run
|
||||
</Button>
|
||||
<Button
|
||||
v-if="['pending', 'in-progress'].includes(operation.status)"
|
||||
variant="secondary"
|
||||
@click="cancelOperation(operation)"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
:as="Link"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('operations.logs', {
|
||||
organisation: $page.props.organisation.id,
|
||||
operation: operation.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Download logs
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Target</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-2 text-sm">
|
||||
<div>{{ operation.target?.name ?? `#${operation.target_id}` }}</div>
|
||||
<div class="text-muted-foreground">{{ operation.target_type }}</div>
|
||||
<Link
|
||||
v-if="operation.parent"
|
||||
:href="
|
||||
route('operations.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
operation: operation.parent.id,
|
||||
})
|
||||
"
|
||||
class="hover:underline"
|
||||
>
|
||||
Parent: {{ operation.parent.hash }}
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<OperationTimeline :operations="[operation]" />
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user