@tak-ps/cloudtak 12.54.0

package/src/components/ETL/Connection/ConnectionFiles.vue

@@ -0,0 +1,182 @@
+<template>
+    <div>
+        <div class='card-header d-flex'>
+            <h3 class='card-title'>
+                Connection Assets
+            </h3>
+
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    title='Upload'
+                    @click='upload = true'
+                >
+                    <IconPlus
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <TablerRefreshButton
+                    title='Refresh'
+                    :loading='loading'
+                    @click='fetchList'
+                />
+            </div>
+        </div>
+
+        <div
+            v-if='!error && !upload && !loading && list.items.length'
+            class='table-responsive'
+        >
+            <table class='table table-hover table-vcenter card-table'>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Size</th>
+                        <th>Updated</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for='asset in list.items'
+                        :key='asset.name'
+                    >
+                        <td>
+                            <div class='d-flex align-items-center'>
+                                <IconFile
+                                    :size='32'
+                                    stroke='1'
+                                />
+
+                                <span
+                                    class='mx-2'
+                                    v-text='asset.name'
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <TablerBytes :bytes='asset.size' />
+                        </td>
+                        <td class='d-flex align-items-center'>
+                            <TablerEpoch :date='asset.updated' />
+                            <div class='ms-auto btn-list'>
+                                <TablerDelete
+                                    v-tooltip='"Delete Asset"'
+                                    displaytype='icon'
+                                    @delete='deleteAsset(asset)'
+                                />
+                                <IconDownload
+                                    v-tooltip='"Download Asset"'
+                                    :size='32'
+                                    stroke='1'
+                                    class='cursor-pointer'
+                                    @click='downloadAsset(asset)'
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div
+            v-else
+            class='card-body'
+        >
+            <template v-if='error'>
+                <TablerAlert
+                    title='Asset Error'
+                    :err='error'
+                    :compact='true'
+                />
+            </template>
+            <TablerLoading v-else-if='loading' />
+            <Upload
+                v-else-if='upload'
+                :url='uploadURL()'
+                :headers='uploadHeaders()'
+                @cancel='upload = false'
+                @done='fetchList'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                :create='false'
+                :compact='true'
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import  { useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue';
+import { std, stdurl } from '../../../std.ts';
+import type { ETLConnectionAssetList } from '../../../types.ts';
+import {
+    IconPlus,
+    IconFile,
+    IconDownload,
+} from '@tabler/icons-vue'
+import Upload from '../../util/Upload.vue';
+import {
+    TablerIconButton,
+    TablerRefreshButton,
+    TablerAlert,
+    TablerNone,
+    TablerDelete,
+    TablerLoading,
+    TablerBytes,
+    TablerEpoch
+} from '@tak-ps/vue-tabler';
+
+const route = useRoute();
+const error = ref<Error | undefined>(undefined);
+const upload = ref(false);
+const loading = ref(true);
+const list = ref<ETLConnectionAssetList>({
+    total: 0,
+    items: []
+});
+
+onMounted(async () => {
+    await fetchList();
+});
+
+function uploadHeaders() {
+    return {
+        Authorization: `Bearer ${localStorage.token}`
+    };
+}
+
+function uploadURL() {
+    return stdurl(`/api/connection/${route.params.connectionid}/asset`);
+}
+
+async function downloadAsset(asset: ETLConnectionAssetList["items"][0]) {
+    const url = stdurl(`/api/connection/${route.params.connectionid}/asset/${asset.name}`);
+    url.searchParams.append('token', localStorage.token);
+    url.searchParams.append('download', String(true));
+    window.open(url, "_blank")
+}
+
+async function deleteAsset(asset: ETLConnectionAssetList["items"][0]) {
+    loading.value = true;
+    await std(`/api/connection/${route.params.connectionid}/asset/${asset.name}`, {
+        method: 'DELETE'
+    });
+
+    await fetchList();
+}
+
+async function fetchList() {
+    upload.value = false;
+
+    try {
+        loading.value = true;
+        error.value = undefined;
+        list.value = await std(`/api/connection/${route.params.connectionid}/asset`) as ETLConnectionAssetList;
+        loading.value = false;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+        loading.value = false;
+    }
+}
+</script>

package/src/components/ETL/Connection/ConnectionGroups.vue

@@ -0,0 +1,181 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h3 class='card-title'>
+                User Groups
+            </h3>
+
+            <div class='ms-auto btn-list'>
+                <TablerRefreshButton
+                    :loading='loading'
+                    @click='fetch'
+                />
+            </div>
+        </div>
+        <div style='min-height: 20vh; margin-bottom: 60px'>
+            <div class='col-12 px-2 py-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    icon='search'
+                    placeholder='Filter'
+                />
+            </div>
+
+            <TablerLoading v-if='loading' />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!Object.keys(processChannels).length'
+                :create='false'
+                label='Channels'
+            />
+            <div
+                v-else
+                class='table-responsive'
+            >
+                <table class='table card-table table-hover table-vcenter'>
+                    <thead>
+                        <tr>
+                            <th>Group Name</th>
+                            <th>Description</th>
+                            <th>Attributes</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr
+                            v-for='group in processChannels'
+                            :key='group.name'
+                        >
+                            <td>
+                                <div class='d-flex align-items-center'>
+                                    <IconEye
+                                        v-if='group.active'
+                                        v-tooltip='"Disable"'
+                                        :size='32'
+                                        stroke='1'
+                                        class='cursor-pointer'
+                                        @click='setStatus(group, false)'
+                                    />
+                                    <IconEyeOff
+                                        v-else
+                                        v-tooltip='"Enable"'
+                                        :size='32'
+                                        stroke='1'
+                                        class='cursor-pointer'
+                                        @click='setStatus(group, true)'
+                                    />
+                                    <span
+                                        class='mx-2'
+                                        v-text='group.name'
+                                    />
+                                </div>
+                            </td>
+                            <td v-text='group.description' />
+                            <td>
+                                <IconLocation
+                                    v-if='group.direction.length === 2'
+                                    v-tooltip='"Bi-Directional"'
+                                    :size='32'
+                                    stroke='1'
+                                />
+                                <IconLocation
+                                    v-else-if='group.direction.includes("IN")'
+                                    v-tooltip='"Location Sharing"'
+                                    :size='32'
+                                    stroke='1'
+                                />
+                                <IconLocationOff
+                                    v-else-if='group.direction.includes("OUT")'
+                                    v-tooltip='"No Location Sharing"'
+                                    :size='32'
+                                    stroke='1'
+                                />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router';
+import { std, stdurl } from '../../../std.ts';
+import {
+    IconEye,
+    IconEyeOff,
+    IconLocation,
+    IconLocationOff,
+} from '@tabler/icons-vue';
+import {
+    TablerNone,
+    TablerInput,
+    TablerAlert,
+    TablerLoading,
+    TablerRefreshButton,
+} from '@tak-ps/vue-tabler';
+
+const route = useRoute();
+
+const error = ref();
+const loading = ref(true);
+const rawChannels = ref([]);
+
+const paging = ref({
+    filter: ''
+})
+
+const processChannels = computed(() => {
+    const channels = {};
+
+    JSON.parse(JSON.stringify(rawChannels.value)).sort((a, b) => {
+        return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0);
+    }).forEach((channel) => {
+        if (channel.name.toLowerCase().includes(paging.value.filter.toLowerCase())) {
+            if (channels[channel.name]) {
+                channels[channel.name].direction.push(channel.direction);
+            } else {
+                channel.direction = [channel.direction];
+                channels[channel.name] = channel;
+            }
+        }
+    });
+
+    return channels;
+});
+
+onMounted(async () => {
+    await fetch();
+});
+
+async function fetch() {
+    loading.value = true;
+    error.value = undefined;
+
+    try {
+        rawChannels.value = (await std(`/api/connection/${route.params.connectionid}/channel`)).data;
+        loading.value = false;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+        loading.value = false;
+    }
+}
+
+async function setStatus(channel, active=false) {
+    rawChannels.value = rawChannels.value.map((ch) => {
+        if (ch.name === channel.name) ch.active = active;
+        return ch;
+    });
+
+    const url = stdurl('/api/marti/group');
+    url.searchParams.append('connection', route.params.connectionid);
+    await std(url, {
+        method: 'PUT',
+        body: rawChannels.value
+    });
+}
+</script>

package/src/components/ETL/Connection/ConnectionLayer.vue

@@ -0,0 +1,180 @@
+<template>
+    <div>
+        <div class='card-header d-flex'>
+            <h2 class='card-title'>
+                Layers
+            </h2>
+
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    title='Create Layer'
+                    @click='router.push(`/connection/${route.params.connectionid}/layer/new`)'
+                >
+                    <IconPlus
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+                <TablerRefreshButton
+                    :loading='loading'
+                    @click='listLayers'
+                />
+            </div>
+        </div>
+
+        <div style='min-height: 20vh; margin-bottom: 60px'>
+            <div class='col-12 px-2 py-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    icon='search'
+                    placeholder='Filter'
+                />
+            </div>
+
+            <TablerAlert
+                v-if='err'
+                title='ETL Server Error'
+                :err='err'
+            />
+            <TablerLoading v-else-if='loading' />
+            <TablerNone
+                v-else-if='!list.items.length'
+                :create='false'
+                label='Layers'
+            />
+            <div
+                v-else
+                class='table-resposive'
+            >
+                <table class='table card-table table-vcenter datatable table-hover'>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                        </tr>
+                    </thead>
+                    <tbody class='table-tbody'>
+                        <tr
+                            v-for='layer of list.items'
+                            :key='layer.id'
+                            class='cursor-pointer'
+                            @click='router.push(`/connection/${route.params.connectionid}/layer/${layer.id}`)'
+                        >
+                            <td>
+                                <div class='d-flex align-items-center'>
+                                    <LayerStatus :layer='layer' /><div
+                                        class='mx-2'
+                                        v-text='layer.name'
+                                    />
+
+                                    <div class='ms-auto btn-list'>
+                                        <IconDatabase
+                                            v-if='layer.incoming && layer.incoming.data'
+                                            v-tooltip='`Pushing to Data Sync`'
+                                            :size='32'
+                                            stroke='1'
+                                            @click.stop.prevent='router.push(`/connection/${route.params.connectionid}/data/${layer.incoming.data}`)'
+                                        />
+
+                                        <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>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div
+            class='position-absolute bottom-0 w-100'
+            style='height: 60px;'
+        >
+            <TableFooter
+                :limit='paging.limit'
+                :total='list.total'
+                @page='paging.page = $event'
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router'
+import { std, stdurl } from '../../../std.ts';
+import TableFooter from '../../util/TableFooter.vue';
+import {
+    IconPlus,
+    IconExchange,
+    IconStackPop,
+    IconStackPush,
+    IconDatabase
+} from '@tabler/icons-vue';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerInput,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton,
+} from '@tak-ps/vue-tabler'
+import LayerStatus from '../Layer/utils/StatusDot.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(true);
+const error = ref();
+
+const paging = ref({
+    filter: '',
+    limit: 10,
+    page: 0
+})
+
+const list = ref({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async () => {
+    await listLayers();
+});
+
+onMounted(async () => {
+    await listLayers();
+});
+
+async function listLayers() {
+    loading.value = true;
+    try {
+        const url = stdurl(`/api/connection/${route.params.connectionid}/layer`);
+        url.searchParams.append('alarms', String(true));
+        url.searchParams.append('limit', paging.value.limit);
+        url.searchParams.append('page', paging.value.page);
+        url.searchParams.append('filter', paging.value.filter);
+        list.value = await std(url);
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value = false
+}
+</script>

package/src/components/ETL/Connection/ConnectionTokens.vue

@@ -0,0 +1,147 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h3 class='card-title'>
+                API Tokens
+            </h3>
+
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    title='New Token'
+                    @click='token = true'
+                >
+                    <IconPlus
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <TablerRefreshButton
+                    title='Refresh'
+                    :loading='loading'
+                    @click='fetch'
+                />
+            </div>
+        </div>
+
+        <div style='min-height: 20vh; margin-bottom: 60px'>
+            <div class='col-12 px-2 py-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    icon='search'
+                    placeholder='Filter'
+                />
+            </div>
+
+            <TablerLoading v-if='loading' />
+            <TablerNone
+                v-else-if='!list.items.length'
+                :create='false'
+                label='Tokens'
+            />
+            <div
+                v-else
+                class='table-responsive'
+            >
+                <table class='table table-hover card-table table-vcenter cursor-pointer'>
+                    <thead>
+                        <tr>
+                            <th>Token Name</th>
+                            <th>Created</th>
+                            <th>Updated</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr
+                            v-for='t in list.items'
+                            :key='t.id'
+                            @click='token = t'
+                        >
+                            <td v-text='t.name' />
+                            <td><TablerEpoch :date='+new Date(t.created)' /></td>
+                            <td><TablerEpoch :date='+new Date(t.updated)' /></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div
+            class='position-absolute bottom-0 w-100'
+            style='height: 60px;'
+        >
+            <TableFooter
+                :limit='paging.limit'
+                :total='list.total'
+                @page='paging.page = $event'
+            />
+        </div>
+
+        <TokenModal
+            v-if='token'
+            :token='token'
+            @close='token = undefined'
+            @refresh='fetch'
+        />
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { std, stdurl } from '../../../std.ts';
+import type { ETLConnectionTokenList, ETLConnectionToken } from '../../../types.ts';
+import TokenModal from './TokenModal.vue';
+import TableFooter from '../../util/TableFooter.vue';
+import {
+    IconPlus,
+} from '@tabler/icons-vue';
+import {
+    TablerInput,
+    TablerEpoch,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+
+const route = useRoute();
+
+const loading = ref(true);
+const token = ref<ETLConnectionToken | true | undefined>();
+const error = ref<Error | undefined>();
+const paging = ref({
+    filter: '',
+    limit: 10,
+    page: 0
+});
+
+const list = ref<ETLConnectionTokenList> ({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async () => {
+    await fetch();
+});
+
+onMounted(async () => {
+    await fetch();
+});
+
+async function fetch() {
+    token.value = undefined;
+    error.value = undefined;
+    loading.value = true;
+
+    try {
+        const url = stdurl(`/api/connection/${route.params.connectionid}/token`);
+        url.searchParams.append('limit', String(paging.value.limit));
+        url.searchParams.append('page', String(paging.value.page));
+        url.searchParams.append('filter', paging.value.filter);
+        list.value = await std(url) as ETLConnectionTokenList;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+        loading.value = false;
+    }
+}
+</script>