@tak-ps/cloudtak 12.54.0

package/src/components/Admin/Tasks/AdminTasks.vue

@@ -0,0 +1,286 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h1 class='card-title'>
+                Registered Tasks
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <template v-if='!edit'>
+                    <TablerIconButton
+                        title='Register New Task'
+                        @click='edit = {
+                            "name": "",
+                            "prefix": "",
+                            "readme": "",
+                            "repo": ""
+                        }'
+                    >
+                        <IconPlus
+                            :size='32'
+                            stroke='1'
+                        />
+                    </TablerIconButton>
+                    <TablerRefreshButton
+                        title='Refresh'
+                        :loading='loading'
+                        @click='fetchList'
+                    />
+                </template>
+                <template v-else-if='edit.id'>
+                    <TablerDelete
+                        displaytype='icon'
+                        @delete='deleteTask(edit)'
+                    />
+                </template>
+            </div>
+        </div>
+        <div style='min-height: 20vh; margin-bottom: 61px'>
+            <template v-if='edit'>
+                <TablerLoading
+                    v-if='loading'
+                    desc='Saving Tasks'
+                />
+                <template v-else>
+                    <div class='row g-2 py-2 px-2'>
+                        <div class='col-md-6 col-12'>
+                            <TablerInput
+                                v-model='edit.name'
+                                label='Task Name'
+                            />
+                        </div>
+                        <div class='col-md-6 col-12'>
+                            <TablerInput
+                                v-model='edit.prefix'
+                                :disabled='edit.id'
+                                label='Container Prefix'
+                            />
+                        </div>
+                        <div class='col-12'>
+                            <TablerToggle
+                                v-model='edit.favorite'
+                                label='Favorited'
+                            />
+                        </div>
+
+                        <UploadLogo
+                            v-model='edit.logo'
+                            label='Task Logo'
+                        />
+                        <TablerInput
+                            v-model='edit.repo'
+                            label='Task Code Repository URL'
+                        />
+
+                        <TablerInput
+                            v-model='edit.readme'
+                            label='Task Markdown Readme URL'
+                        />
+
+                        <div class='col-12 d-flex py-2'>
+                            <button
+                                class='btn btn-secondary'
+                                @click='edit = false'
+                            >
+                                Cancel
+                            </button>
+                            <div class='ms-auto btn-list mx-3'>
+                                <button
+                                    class='btn btn-primary'
+                                    @click='saveTask'
+                                >
+                                    Save
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </template>
+            <template v-else>
+                <TablerLoading
+                    v-if='loading'
+                    desc='Loading Tasks'
+                />
+                <TablerAlert
+                    v-else-if='error'
+                    :err='error'
+                />
+                <TablerNone
+                    v-else-if='!list.items.length'
+                    label='No Tasks'
+                    :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>
+                            <tr
+                                v-for='layer in list.items'
+                                :key='layer.id'
+                                class='cursor-pointer'
+                                @click='edit = layer'
+                            >
+                                <template v-for='h in header'>
+                                    <template v-if='h.display'>
+                                        <td>
+                                            <template v-if='h.name === "logo"'>
+                                                <img
+                                                    v-if='layer[h.name]'
+                                                    :src='layer[h.name]'
+                                                    alt='Logo Preview'
+                                                    class='img-thumbnail'
+                                                    style='height: 50px;'
+                                                >
+                                                <span v-else>No Logo</span>
+                                            </template>
+                                            <template v-else-if='h.name === "name"'>
+                                                <div class='d-flex align-items-center'>
+                                                    <IconStar
+                                                        v-if='layer.favorite'
+                                                    />
+                                                    <span
+                                                        class='ms-2'
+                                                        v-text='layer[h.name]'
+                                                    />
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <span v-text='layer[h.name]' />
+                                            </template>
+                                        </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>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { std, stdurl } from '/src/std.ts';
+import TableHeader from '../../util/TableHeader.vue'
+import TableFooter from '../../util/TableFooter.vue'
+import UploadLogo from '../../util/UploadLogo.vue';
+import {
+    TablerNone,
+    TablerInput,
+    TablerAlert,
+    TablerToggle,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton,
+    TablerDelete
+} from '@tak-ps/vue-tabler';
+import {
+    IconStar,
+    IconPlus,
+} from '@tabler/icons-vue'
+
+const error = ref();
+const loading = ref(true);
+const header = ref([]);
+const edit = ref();
+const paging = ref({
+    filter: '',
+    sort: 'name',
+    order: 'asc',
+    limit: 100,
+    page: 0
+});
+const list = ref({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await listLayerSchema();
+    await fetchList();
+});
+
+async function listLayerSchema() {
+    const schema = await std('/api/schema?method=GET&url=/task');
+    header.value = ['logo', 'name', 'prefix'].map((h) => {
+        return { name: h, display: true };
+    });
+
+    header.value.push(...schema.query.properties.sort.enum.map((h) => {
+        return {
+            name: h,
+            display: false
+        }
+    }).filter((h) => {
+        for (const hknown of header.value) {
+            if (hknown.name === h.name) return false;
+        }
+        return true;
+    }));
+}
+
+async function saveTask() {
+    loading.value = true;
+
+    if (edit.value.id) {
+        await std(`/api/task/${edit.value.id}`, {
+            method: 'PATCH',
+            body: edit.value
+        });
+    } else {
+        await std('/api/task', {
+            method: 'POST',
+            body: edit.value
+        });
+    }
+
+    edit.value = false
+
+    await fetchList();
+}
+
+async function deleteTask(task) {
+    loading.value = true;
+    const url = stdurl(`/api/task/${task.id}`);
+    await std(url, {
+        method: 'DELETE'
+    });
+
+    edit.value = undefined;
+    await fetchList();
+
+    loading.value = false;
+}
+
+async function fetchList() {
+    loading.value = true;
+    const url = stdurl('/api/task');
+    if (paging.value.filter) url.searchParams.append('filter', paging.value.filter);
+    url.searchParams.append('limit', paging.value.limit);
+    url.searchParams.append('page', paging.value.page);
+    list.value = await std(url);
+    loading.value = false;
+}
+</script>

package/src/components/Admin/Videos/AdminVideoLeases.vue

@@ -0,0 +1,198 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h1 class='card-title'>
+                Video Lease
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <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-12 px-2'>
+                    <TablerInput
+                        v-model='paging.filter'
+                        icon='search'
+                        placeholder='Filter...'
+                    />
+                </div>
+            </div>
+
+            <TablerLoading
+                v-if='loading'
+                desc='Loading Video Leases'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='No Video Leases'
+                :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>
+                        <tr
+                            v-for='lease in list.items'
+                            :key='lease.id'
+                            class='cursor-pointer'
+                            @click='modal = lease'
+                        >
+                            <template v-for='h in header'>
+                                <template v-if='h.display'>
+                                    <td>
+                                        <template v-if='h.name === "expiration"'>
+                                            <span
+                                                v-if='expired(lease.expiration)'
+                                                class='badge bg-red text-white'
+                                            >Expired</span>
+                                            <span
+                                                v-else-if='lease.expiration === null'
+                                                class='badge bg-blue text-white'
+                                            >Permanent</span>
+                                            <span
+                                                v-else
+                                                class='subheader'
+                                                v-text='lease.expiration'
+                                            />
+                                        </template>
+                                        <template v-else>
+                                            <span v-text='lease[h.name]' />
+                                        </template>
+                                    </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>
+
+    <VideoLeaseModal
+        v-if='modal'
+        :lease='modal'
+        :is-system-admin='true'
+        @close='modal = undefined'
+        @refresh='fetchList'
+    />
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, onMounted } from 'vue';
+import { std, stdurl } from '../../../../src/std.ts';
+import type { VideoLease, VideoLeaseList } from '../../../../src/types.ts';
+import TableHeader from '../../util/TableHeader.vue';
+import TableFooter from '../../util/TableFooter.vue';
+import VideoLeaseModal from '../../CloudTAK/Menu/Videos/VideoLeaseModal.vue';
+import {
+    TablerNone,
+    TablerInput,
+    TablerAlert,
+    TablerLoading,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+
+type Header = { name: keyof VideoLease, display: boolean };
+
+const error = ref<Error | undefined>();
+const loading = ref(true);
+const header = ref<Array<Header>>([]);
+const modal = ref<VideoLease | undefined>()
+const paging = ref({
+    filter: '',
+    sort: 'name',
+    order: 'asc',
+    limit: 100,
+    page: 0
+});
+
+const list = ref<VideoLeaseList>({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await listLayerSchema();
+    await fetchList();
+});
+
+async function listLayerSchema() {
+    const schema = await std('/api/schema?method=GET&url=/video/lease');
+
+    const defaults: Array<keyof VideoLease> = ['id', 'name', 'username', 'channel', 'path', 'expiration'];
+    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
+        } as Header
+    }).filter((h: Header) => {
+        for (const hknown of header.value) {
+            if (hknown.name === h.name) return false;
+        }
+        return true;
+    }));
+}
+
+function expired(expiration: string | null): boolean {
+    if (!expiration) return false;
+    return +new Date(expiration) < +new Date();
+}
+
+async function fetchList() {
+    error.value = undefined;
+    modal.value = undefined;
+    loading.value = true;
+
+    try {
+        const url = stdurl('/api/video/lease');
+        url.searchParams.append('impersonate', String(true));
+        url.searchParams.append('expired', 'all');
+        url.searchParams.append('filter', paging.value.filter);
+        url.searchParams.append('limit', String(paging.value.limit));
+        url.searchParams.append('sort', paging.value.sort);
+        url.searchParams.append('order', paging.value.order);
+        url.searchParams.append('page', String(paging.value.page));
+
+        list.value = await std(url) as VideoLeaseList;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value = false;
+}
+</script>

package/src/components/Admin/Videos/AdminVideoService.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class='card-header'>
+        <div class='card-title'>
+            Video Service
+        </div>
+        <div class='ms-auto btn-list'>
+            <TablerRefreshButton
+                title='Refresh'
+                :loading='loading'
+                @click='fetchService'
+            />
+        </div>
+    </div>
+    <div class='card-body'>
+        <TablerLoading v-if='loading' />
+        <TablerAlert
+            v-else-if='error'
+            :err='error'
+        />
+        <TablerNone
+            v-else-if='!service'
+            label='No Video ECS Service'
+            :create='false'
+        />
+        <VideoConfig
+            v-else
+            :service='service'
+        />
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import type { VideoService } from '../../../types.ts';
+import { std, stdurl } from '../../../std.ts';
+import VideoConfig from './VideoConfig.vue';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerLoading,
+    TablerRefreshButton,
+} from '@tak-ps/vue-tabler';
+
+const error = ref<Error | undefined>();
+const loading = ref(true);
+
+const service = ref<VideoService | undefined>();
+
+onMounted(async () => {
+    loading.value = true;
+    await fetchService()
+    loading.value = false;
+});
+
+async function fetchService() {
+    loading.value = true;
+
+    try {
+        const url = stdurl('/api/video/service');
+        service.value = await std(url) as VideoService;
+        loading.value = false;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+        loading.value = false;
+    }
+}
+</script>

package/src/components/Admin/Videos/VideoConfig.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class='col-12 py-2 g-2'>
+        <TablerLoading v-if='loading' />
+        <template v-else>
+            <div class='row pb-3 g-3 d-flex align-items-center justify-content-center'>
+                <VideoConfigPort
+                    name='API'
+                    :enabled='config.api'
+                    :port='config.apiAddress'
+                />
+
+                <VideoConfigPort
+                    name='Metrics'
+                    :enabled='config.metrics'
+                    :port='config.metricsAddress'
+                />
+
+                <VideoConfigPort
+                    name='Perf'
+                    :enabled='config.pprof'
+                    :port='config.pprofAddress'
+                />
+
+                <VideoConfigPort
+                    name='Playback'
+                    :enabled='config.playback'
+                    :port='config.playbackAddress'
+                />
+            </div>
+
+            <div class='row g-3 d-flex align-items-center justify-content-center'>
+                <VideoConfigPort
+                    name='RTMP'
+                    :enabled='config.rtmp'
+                    :port='config.rtmpAddress'
+                />
+
+                <VideoConfigPort
+                    name='RTSP'
+                    :enabled='config.rtsp'
+                    :port='config.rtspAddress'
+                />
+
+                <VideoConfigPort
+                    name='HLS'
+                    :enabled='config.hls'
+                    :port='config.hlsAddress'
+                />
+
+                <VideoConfigPort
+                    name='WebRTC'
+                    :enabled='config.webrtc'
+                    :port='config.webrtcAddress'
+                />
+
+                <VideoConfigPort
+                    name='SRT'
+                    :enabled='config.srt'
+                    :port='config.srtAddress'
+                />
+            </div>
+        </template>
+
+        <div class='row g-0 py-3'>
+            <label class='subheader mx-2'>Server Paths</label>
+            <div class='col-12 border rounded mx-2'>
+                <TablerNone
+                    v-if='(service.paths || []).length === 0'
+                    :create='false'
+                    :compact='true'
+                    label='No Server Paths'
+                />
+                <template v-else>
+                    <div
+                        v-for='path in service.paths'
+                        class='hover px-2 py-2 cursor-pointer d-flex align-items-center'
+                        @click='pathid = path.name'
+                    >
+                        <StatusDot
+                            :title='path.ready ? "Streaming" : "Not Streaming"'
+                            :status='path.ready ? "success" : "fail"'
+                        />
+                        <span
+                            class='mx-2'
+                            v-text='path.name'
+                        />
+
+                        <div class='ms-auto'>
+                            <IconUsersGroup
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span
+                                class='mx-2'
+                                v-text='`${path.readers.length} Viewers`'
+                            />
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+
+    <VideoConfigPath
+        v-if='pathid'
+        :pathid='pathid'
+        @close='pathid = undefined'
+    />
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue';
+import type { VideoService } from '../../../types.ts';
+import VideoConfigPath from './VideoConfigPath.vue';
+import VideoConfigPort from './VideoConfigPort.vue';
+import StatusDot from '../../util/StatusDot.vue';
+import {
+    TablerNone,
+    TablerLoading,
+} from '@tak-ps/vue-tabler';
+import {
+    IconUsersGroup
+} from '@tabler/icons-vue'
+
+const props = defineProps<{
+    service: VideoService,
+}>()
+
+const loading = ref(false);
+const pathid = ref<string | undefined>();
+const config = ref(JSON.parse(JSON.stringify(props.service.config)))
+</script>