@tak-ps/cloudtak 12.54.0

package/src/components/Admin/AdminLayers.vue

@@ -0,0 +1,301 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h1 class='card-title'>
+                Layer Admin
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    title='Create Layer Template'
+                    @click='router.push("/admin/layer/new")'
+                >
+                    <IconPlus
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+                <TablerIconButton
+                    title='Redeploy'
+                    @click='redeploy'
+                >
+                    <IconCloudUpload
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+                <TablerRefreshButton
+                    :loading='loading'
+                    @click='fetchList'
+                />
+            </div>
+        </div>
+        <div style='min-height: 20vh; margin-bottom: 61px'>
+            <div class='row g-0 py-2'>
+                <div class='col-md-6 px-2'>
+                    <TablerInput
+                        v-model='paging.filter'
+                        icon='search'
+                        placeholder='Filter...'
+                    />
+                </div>
+                <div class='col-md-3 px-2'>
+                    <TablerEnum
+                        v-model='paging.task'
+                        default='All Tasks'
+                        :options='taskTypes'
+                    />
+                </div>
+                <div class='col-md-3 px-2'>
+                    <TablerEnum
+                        v-model='paging.template'
+                        default='All Types'
+                        :options='["All Types", "Connection", "Template"]'
+                    />
+                </div>
+            </div>
+
+            <TablerLoading
+                v-if='loading'
+                desc='Loading Layers'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='No Layers'
+                :create='false'
+            />
+            <div
+                v-else
+                class='table-responsive'
+            >
+                <table class='table card-table table-hover table-vcenter datatable'>
+                    <TableHeader
+                        v-model:sort='paging.sort'
+                        v-model:order='paging.order'
+                        v-model:header='header'
+                    />
+                    <tbody
+                        role='menu'
+                    >
+                        <tr
+                            v-for='layer in list.items'
+                            :key='layer.id'
+                            class='cursor-pointer'
+                            role='menuitem'
+                            tabindex='0'
+                            @keyup.enter='external(`/connection/${layer.connection || "template"}/layer/${layer.id}`)'
+                            @click='external(`/connection/${layer.connection || "template"}/layer/${layer.id}`)'
+                        >
+                            <template v-for='h in header'>
+                                <template v-if='h.display && h.name === "name"'>
+                                    <td>
+                                        <div class='d-flex align-items-center'>
+                                            <Status :layer='layer' />
+                                            <div class='mx-2 row'>
+                                                <div
+                                                    class='subheader'
+                                                    v-text='layer.parent ? layer.parent.name : "Template Layer"'
+                                                />
+                                                <div v-text='layer[h.name]' />
+                                            </div>
+                                        </div>
+                                    </td>
+                                </template>
+                                <template v-else-if='h.display && h.name === "task"'>
+                                    <td>
+                                        <div class='d-flex align-items-center'>
+                                            <div class='row'>
+                                                <span
+                                                    v-text='layer.task.replace(/\-v\d+\.\d+\.\d+$/, "")'
+                                                />
+                                                <span
+                                                    class='subheader'
+                                                    v-text='layer.task.replace(/.*-(?=v\d+\.\d+\.\d+)/, "")'
+                                                />
+                                            </div>
+                                            <div class='mx-2 ms-auto'>
+                                                <IconExchange
+                                                    v-if='layer.incoming && layer.outgoing'
+                                                    title='Outgoing/Incoming'
+                                                    size='32'
+                                                    stroke='1'
+                                                />
+                                                <IconStackPop
+                                                    v-else-if='layer.outgoing'
+                                                    title='Outgoing'
+                                                    size='32'
+                                                    stroke='1'
+                                                />
+                                                <IconStackPush
+                                                    v-else-if='layer.incoming'
+                                                    title='Incoming'
+                                                    size='32'
+                                                    stroke='1'
+                                                />
+                                            </div>
+                                        </div>
+                                    </td>
+                                </template>
+                                <template v-else-if='h.display'>
+                                    <td>
+                                        <span v-text='layer[h.name]' />
+                                    </td>
+                                </template>
+                            </template>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div
+                class='position-absolute bottom-0 w-100'
+                style='height: 61px;'
+            >
+                <TableFooter
+                    :limit='paging.limit'
+                    :total='list.total'
+                    @page='paging.page = $event'
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, watch, onMounted } from 'vue'
+import { useRouter } from 'vue-router';
+import { std, stdurl } from '../../std.ts';
+import type { ETLLayerList, ETLLayer } from '../../types.ts';
+import TableHeader from '../util/TableHeader.vue'
+import TableFooter from '../util/TableFooter.vue'
+import Status from '../ETL/Layer/utils/StatusDot.vue';
+import {
+    TablerNone,
+    TablerInput,
+    TablerEnum,
+    TablerLoading,
+    TablerAlert,
+    TablerIconButton,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconPlus,
+    IconExchange,
+    IconStackPop,
+    IconStackPush,
+    IconCloudUpload,
+} from '@tabler/icons-vue'
+
+const router = useRouter();
+const error = ref<Error | undefined>();
+const loading = ref(true);
+
+type Header = { name: keyof ETLLayer, display: boolean };
+const header = ref<Array<Header>>([]);
+
+const paging = ref({
+    filter: '',
+    task: 'All Tasks',
+    template: 'All Types',
+    sort: 'name',
+    order: 'asc',
+    limit: 100,
+    page: 0
+});
+
+const list = ref<ETLLayerList>({
+    total: 0,
+    status: {
+        healthy: 0,
+        alarm: 0,
+        unknown: 0
+    },
+    tasks: [],
+    items: []
+});
+
+const taskTypes = computed(() => {
+    return ["All Tasks"].concat(list.value.tasks)
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await listLayerSchema();
+    await fetchList();
+});
+
+async function redeploy() {
+    loading.value = true;
+
+    await std(`/api/layer/redeploy`, {
+        method: 'POST'
+    });
+
+    loading.value = false;
+}
+
+function external(url: string) {
+    window.open(url, '_blank');
+}
+
+async function listLayerSchema() {
+    const schema = await std('/api/schema?method=GET&url=/layer');
+
+    const defaults: Array<keyof ETLLayer> = ['id', 'name', 'task'];
+    header.value = defaults.map((h) => {
+        return { name: h, display: true };
+    });
+
+    // @ts-expect-error Worth trying to type at some point maybe but not now
+    header.value.push(...schema.query.properties.sort.enum.map((h) => {
+        return {
+            name: h,
+            display: false
+        }
+    }).filter((h: Header) => {
+        for (const hknown of header.value) {
+            if (hknown.name === h.name) return false;
+        }
+        return true;
+    }));
+}
+
+async function fetchList() {
+    loading.value = true;
+    error.value = undefined;
+
+    try {
+        const url = stdurl('/api/layer');
+        url.searchParams.append('alarms', 'true');
+        url.searchParams.append('filter', paging.value.filter);
+        url.searchParams.append('limit', String(paging.value.limit));
+        url.searchParams.append('page', String(paging.value.page));
+        url.searchParams.append('sort', paging.value.sort);
+        url.searchParams.append('order', paging.value.order);
+
+        if (paging.value.task !== 'All Tasks') {
+            url.searchParams.append('task', paging.value.task);
+        }
+
+        if (paging.value.template === 'Connection') {
+            url.searchParams.append('template', String(false));
+        } else if (paging.value.template === 'Template') {
+            url.searchParams.append('template', String(true));
+        }
+
+        list.value = await std(url) as ETLLayerList;
+        loading.value = false;
+    } catch (err) {
+        loading.value = false;
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+}
+</script>

package/src/components/Admin/AdminMissionTemplate.vue

@@ -0,0 +1,259 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h1
+                class='card-title'
+            />
+
+            <h1 class='card-title d-flex align-items-center'>
+                <TablerIconButton
+                    title='Back to List'
+                    @click='router.push(`/admin/templates`)'
+                >
+                    <IconCircleArrowLeft
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+
+                <span
+                    class='ms-2'
+                    v-text='route.params.template === "new" ? "New Template": template.name'
+                />
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <TablerDelete
+                    v-if='route.params.template !== "new" && disabled'
+                    displaytype='icon'
+                    @delete='deleteTemplate'
+                />
+                <TablerIconButton
+                    v-if='disabled'
+                    title='Edit Template'
+                    @click='disabled = false'
+                >
+                    <IconPencil
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </div>
+        <div class='card-body'>
+            <TablerLoading
+                v-if='loading'
+                desc='Loading Template'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <template v-else-if='!disabled'>
+                <div class='row g-2'>
+                    <div class='col-12'>
+                        <TablerInput
+                            v-model='template.name'
+                            label='Name'
+                        />
+                    </div>
+                    <div class='col-12'>
+                        <TablerInput
+                            v-model='template.description'
+                            label='Description'
+                        />
+                    </div>
+                    <div class='col-12'>
+                        <UploadLogo
+                            v-model='template.icon'
+                            label='Template Logo'
+                        />
+                    </div>
+                    <div class='col-12 d-flex'>
+                        <div class='ms-auto'>
+                            <button
+                                class='btn btn-primary'
+                                @click='saveTemplate'
+                            >
+                                Save
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div class='d-flex'>
+                    <div
+                        v-if='template.icon'
+                        class='me-4'
+                    >
+                        <img
+                            :src='template.icon'
+                            class='rounded border p-2 bg-white shadow-sm'
+                            style='width: 128px; height: 128px; object-fit: contain;'
+                        >
+                    </div>
+                    <div class='flex-fill'>
+                        <label class='form-label'>Description</label>
+                        <div class='text-muted'>
+                            {{ template.description || 'No description provided.' }}
+                        </div>
+                    </div>
+                </div>
+
+                <div class='mt-3'>
+                    <div class='d-flex align-items-center mb-2'>
+                        <label class='form-label m-0'>Mission Template Logs</label>
+                        <div class='ms-auto'>
+                            <TablerIconButton
+                                title='Create Log'
+                                @click='router.push(`/admin/template/${route.params.template}/log/new`)'
+                            >
+                                <IconPlus
+                                    :size='20'
+                                    stroke='1'
+                                />
+                            </TablerIconButton>
+                        </div>
+                    </div>
+                    <TablerNone
+                        v-if='!template.logs || !template.logs.length'
+                        label='No Mission Template Logs'
+                        :create='false'
+                    />
+                    <div
+                        v-else
+                        class='card'
+                    >
+                        <div class='table-responsive'>
+                            <table class='table table-vcenter card-table table-hover'>
+                                <thead>
+                                    <tr>
+                                        <th>Name</th>
+                                        <th>Created</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr
+                                        v-for='log in template.logs'
+                                        :key='log.id'
+                                        class='cursor-pointer'
+                                        @click='router.push(`/admin/template/${route.params.template}/log/${log.id}`)'
+                                    >
+                                        <td v-text='log.name' />
+                                        <td>
+                                            <TablerEpoch :date='log.created' />
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { v4 as randomUUID } from 'uuid';
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { std } from '../../../src/std.ts';
+import type { MissionTemplate } from '../../../src/types.ts';
+import {
+    TablerInput,
+    TablerAlert,
+    TablerDelete,
+    TablerIconButton,
+    TablerLoading,
+    TablerEpoch,
+    TablerNone
+} from '@tak-ps/vue-tabler';
+import {
+    IconCircleArrowLeft,
+    IconPencil,
+    IconPlus
+} from '@tabler/icons-vue'
+import UploadLogo from '../util/UploadLogo.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const error = ref<Error | undefined>();
+const disabled = ref(true);
+const loading = ref(true);
+
+const template = ref<MissionTemplate>({
+    id: randomUUID(),
+    created: new Date().toISOString(),
+    updated: new Date().toISOString(),
+    name: '',
+    icon: '',
+    description: '',
+    logs: []
+});
+
+onMounted(async () => {
+    if (route.params.template !== "new") {
+        await fetchTemplate();
+    } else {
+        disabled.value = false
+        loading.value = false;
+    }
+});
+
+async function saveTemplate() {
+    loading.value = true;
+
+    try {
+        if (route.params.template === "new") {
+            template.value = await std(`/api/template/mission`, {
+                method: 'POST',
+                body: template.value
+            }) as MissionTemplate
+
+            disabled.value = true;
+            router.push(`/admin/template/${template.value.id}`);
+        } else {
+            template.value = await std(`/api/template/mission/${route.params.template}`, {
+                method: 'PATCH',
+                body: template.value
+            }) as MissionTemplate
+
+            disabled.value = true;
+        }
+        loading.value = false;
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+
+async function deleteTemplate() {
+    loading.value = true;
+
+    try {
+        await std(`/api/template/mission/${route.params.template}`, {
+            method: 'DELETE'
+        })
+
+        router.push('/admin/templates');
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+
+async function fetchTemplate() {
+    loading.value = true;
+    try {
+        template.value = await std(`/api/template/mission/${route.params.template}`) as MissionTemplate;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+        loading.value = false;
+    }
+}
+</script>