@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,75 @@
+<template>
+    <div class='card mx-2 px-0'>
+        <div class='card-body'>
+            <TablerLoading
+                v-if='loading.generate'
+                desc='Generating Certificate'
+            />
+            <template v-else>
+                <div class='col-12'>
+                    <TablerInput
+                        v-model='body.username'
+                        icon='user'
+                        label='Username'
+                        @keyup.enter='generate'
+                    />
+                </div>
+                <div class='col-12 mt-3'>
+                    <TablerInput
+                        v-model='body.password'
+                        icon='lock'
+                        label='Password'
+                        type='password'
+                        @keyup.enter='generate'
+                    />
+                </div>
+            </template>
+        </div>
+        <div
+            v-if='!loading.generate'
+            class='card-footer'
+        >
+            <button
+                class='cursor-pointer btn btn-primary w-100'
+                @click='generate'
+            >
+                Generate Certificate
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { std } from '../../../std.ts';
+import {
+    TablerInput,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+
+const emit = defineEmits(['certs']);
+
+const loading = reactive({
+    generate: false
+});
+
+const body = reactive({
+    username: '',
+    password: '',
+});
+
+const generate = async () => {
+    loading.generate = true;
+    try {
+        const res = await std('/api/marti/signClient', {
+            method: 'POST',
+            body: body
+        });
+
+        emit('certs', res);
+    } catch (err) {
+        loading.generate = false;
+        throw err;
+    }
+};
+</script>

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

@@ -0,0 +1,228 @@
+<template>
+    <div class='card mx-2 px-0'>
+        <TablerLoading v-if='loading.gen' />
+        <div
+            v-else-if='!connection.certificate'
+            class='card-body'
+        >
+            <div
+                v-for='(sel, it) in selected'
+                class='card my-2'
+            >
+                <div class='col-12 d-flex align-items-center px-2 py-2'>
+                    <div v-text='sel.channel.rdn' />
+                    <div class='ms-auto btn-list'>
+                        <TablerEnum
+                            v-model='sel.access'
+                            default='Duplex'
+                            :options='[
+                                "Read",
+                                "Write",
+                                "Duplex"
+                            ]'
+                        />
+
+                        <TablerIconButton
+                            title='Remove Channel'
+                            @click='selected.splice(it, 1)'
+                        >
+                            <IconTrash
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                    </div>
+                </div>
+            </div>
+            <div class='col-12 mb-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    icon='search'
+                    placeholder='Channels Filter...'
+                    @keyup.enter='generate'
+                />
+            </div>
+            <div class='col-12'>
+                <TablerLoading
+                    v-if='loading.channels'
+                    desc='Loading Channels'
+                />
+                <TablerNone
+                    v-else-if='filteredChannels.length === 0'
+                    :compact='true'
+                    :create='false'
+                    label='Channels'
+                />
+                <template
+                    v-for='channel in filteredChannels'
+                    v-else
+                >
+                    <div
+                        class='hover px-2 py-2 cursor-pointer row'
+                        @click='push(channel)'
+                    >
+                        <div class='col-md-4'>
+                            <span v-text='channel.rdn' />
+                        </div>
+
+                        <div
+                            class='col-md-8'
+                            v-text='channel.description'
+                        />
+                    </div>
+                </template>
+            </div>
+        </div>
+        <div class='card-footer'>
+            <button
+                v-if='!connection.certificate'
+                :disabled='loading.gen || !selected.length'
+                class='cursor-pointer btn btn-primary w-100'
+                @click='generate'
+            >
+                Create Machine User
+            </button>
+            <button
+                v-else
+                class='cursor-pointer btn btn-primary w-100'
+                :disabled='loading.gen'
+                @click='regenerate'
+            >
+                Regenerate Certificate
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, computed, onMounted } from 'vue';
+import type { ETLConnection, ETLLdapChannelList, ETLLdapChannel, ETLLdapUser } from '../../../types.ts';
+import { std, stdurl } from '../../../std.ts';
+import {
+    TablerNone,
+    TablerEnum,
+    TablerInput,
+    TablerLoading,
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconTrash
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+    connection: ETLConnection
+}>();
+
+const emit = defineEmits([ 'certs', 'integration' ]);
+
+const loading = ref({
+    gen: false,
+    channels: true
+});
+
+const paging = ref({
+    filter: ''
+});
+
+const channels = ref<ETLLdapChannelList>({
+    total: 0,
+    items: []
+});
+
+const selected = ref<Array<{
+    access: string
+    channel: ETLLdapChannel
+}>>([]);
+
+const filteredChannels = computed(() => {
+    return channels.value.items.filter((ch) => {
+        for (const sel of selected.value) {
+            if (ch.id === sel.channel.id) return false;
+        }
+
+        return true;
+    })
+});
+
+watch(props.connection, async (newConnection, oldConnection) => {
+    if (newConnection.agency !== oldConnection.agency) {
+        await listChannels();
+    }
+});
+
+watch(paging.value, async () => {
+    await listChannels();
+});
+
+onMounted(async () => {
+    await listChannels();
+});
+
+function push(channel: ETLLdapChannel) {
+    paging.value.filter = '';
+
+    for (const sel of selected.value) {
+        if (sel.channel.id === channel.id) return;
+    }
+    selected.value.push({
+        access: 'Duplex',
+        channel
+    });
+}
+
+async function listChannels() {
+    loading.value.channels = true;
+
+    try {
+        const url = stdurl('/api/ldap/channel');
+        if (props.connection.agency) {
+            url.searchParams.append('agency', String(props.connection.agency));
+        }
+        url.searchParams.append('filter', paging.value.filter);
+        channels.value = await std(url) as ETLLdapChannelList
+    } catch (err) {
+        loading.value.channels = false;
+        throw err;
+    }
+    loading.value.channels = false;
+}
+
+async function regenerate() {
+    loading.value.gen = true;
+
+    const email = props.connection.certificate.subject.split('=')[3]
+
+    const url = stdurl(`/api/ldap/user/${email}`);
+    const res = await std(url, {
+        method: 'PUT',
+    }) as ETLLdapUser
+
+    loading.value.gen = true;
+
+    emit('certs', res.auth);
+    emit('integration', res.integrationId);
+}
+
+async function generate() {
+    loading.value.gen = true;
+    const url = stdurl('/api/ldap/user');
+    const res = await std(url, {
+        method: 'POST',
+        body: {
+            name: props.connection.name,
+            description: props.connection.description,
+            agency_id: props.connection.agency,
+            channels: selected.value.map((s) => {
+                return {
+                    id: s.channel.id,
+                    access: s.access.toLowerCase()
+                }
+            })
+        }
+    }) as ETLLdapUser
+
+    loading.value.gen = true;
+    emit('certs', res.auth);
+    emit('integration', res.integrationId);
+}
+</script>

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

@@ -0,0 +1,104 @@
+<template>
+    <div class='card'>
+        <div class='card-body text-center py-4'>
+            <template v-if='!file'>
+                <form
+                    id='dropzone-default'
+                    class='dropzone dz-clickable'
+                    action='./'
+                    autocomplete='off'
+                    novalidate=''
+                >
+                    <div class='dz-default dz-message'>
+                        <button
+                            class='dz-button'
+                            type='button'
+                        >
+                            Drop .p12 here<br>click to upload
+                        </button>
+                    </div>
+                </form>
+            </template>
+            <template v-else>
+                <TablerInput
+                    v-model='password'
+                    type='password'
+                    autocomplete='off'
+                    label='P12 Password'
+                    @keyup.enter='extract'
+                />
+
+                <div class='row mt-3'>
+                    <div class='col'>
+                        <a
+                            class='cursor-pointer btn w-100'
+                            @click='extract'
+                        >OK</a>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import {
+    TablerInput
+} from '@tak-ps/vue-tabler';
+import Dropzone from 'dropzone/dist/dropzone.mjs';
+import 'dropzone/dist/dropzone.css';
+import '@tabler/core/dist/css/tabler-vendors.min.css';
+import { convertToPem } from 'p12-pem/lib/lib/p12.js';
+
+const emit = defineEmits([
+    'certs'
+]);
+
+const dropzone = ref(null);
+const password = ref('');
+const file = ref(null);
+
+onMounted(() => {
+    createDropzone();
+});
+
+function createDropzone() {
+    nextTick(() => {
+        dropzone.value = new Dropzone("#dropzone-default", {
+            autoProcessQueue: false,
+        });
+
+        dropzone.value.on('addedfile', (f) => {
+            const read = new FileReader();
+            read.onload = (event) => {
+                file.value = event.target.result;
+            };
+            read.readAsDataURL(f);
+        });
+    });
+}
+
+function extract() {
+    try {
+        const certs = convertToPem(atob(file.value.split('base64,')[1]), password.value);
+        const cert = certs.pemCertificate
+            .split('-----BEGIN CERTIFICATE-----')
+            .join('-----BEGIN CERTIFICATE-----\n')
+            .split('-----END CERTIFICATE-----')
+            .join('\n-----END CERTIFICATE-----');
+        const key = certs.pemKey
+            .split('-----BEGIN RSA PRIVATE KEY-----')
+            .join('-----BEGIN RSA PRIVATE KEY-----\n')
+            .split('-----END RSA PRIVATE KEY-----')
+            .join('\n-----END RSA PRIVATE KEY-----');
+
+        emit('certs', { key, cert });
+    } catch (err) {
+        file.value = null;
+        password.value = '';
+        createDropzone();
+        throw err;
+    }
+}
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+    <div class='card mx-2 px-0'>
+        <div class='card-body row'>
+            <div class='col-md-6'>
+                <TablerInput
+                    v-model='auth.cert'
+                    :rows='5'
+                    label='X509 Certificate'
+                    @keyup.enter='generate'
+                />
+            </div>
+            <div class='col-md-6'>
+                <TablerInput
+                    v-model='auth.key'
+                    :rows='5'
+                    label='Private Key'
+                    @keyup.enter='generate'
+                />
+            </div>
+        </div>
+        <div class='card-footer'>
+            <button
+                class='cursor-pointer btn btn-primary w-100'
+                @click='generate'
+            >
+                Submit Certificate
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import {
+    TablerInput,
+} from '@tak-ps/vue-tabler';
+
+const emit = defineEmits([
+    'certs',
+]);
+
+const auth = ref({
+    cert: '',
+    key: '',
+});
+
+function generate() {
+    emit('certs', auth.value);
+}
+</script>

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

@@ -0,0 +1,174 @@
+<template>
+    <div>
+        <div class='card-header d-flex'>
+            Data Syncs
+
+            <div class='ms-auto btn-list'>
+                <IconPlus
+                    v-tooltip='"Create Sync"'
+                    :size='32'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='router.push(`/connection/${props.connection.id}/data/new`)'
+                />
+                <IconRefresh
+                    v-tooltip='"Refresh"'
+                    :size='32'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='listData'
+                />
+            </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='error'
+                :compact='true'
+            />
+            <TablerLoading v-else-if='loading' />
+            <TablerNone
+                v-else-if='!list.items.length'
+                :create='false'
+                label='Data Syncs'
+            />
+            <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='data of list.items'
+                            :key='data.id'
+                            class='cursor-pointer'
+                            @click='router.push(`/connection/${props.connection.id}/data/${data.id}`)'
+                        >
+                            <td>
+                                <div class='d-flex align-items-center'>
+                                    <IconDatabase
+                                        :size='32'
+                                        stroke='1'
+                                        class='me-2'
+                                    />
+                                    <div
+                                        class='user-select-none'
+                                        v-text='data.name'
+                                    />
+                                    <div class='ms-auto'>
+                                        <IconAccessPoint
+                                            v-if='data.mission_sync'
+                                            v-tooltip='"Mission Sync On"'
+                                            :size='32'
+                                            stroke='1'
+                                            class='cursor-pointer text-green'
+                                        />
+                                        <IconAccessPointOff
+                                            v-else
+                                            v-tooltip='"Mission Sync Off"'
+                                            :size='32'
+                                            stroke='1'
+                                            class='cursor-pointer text-red'
+                                        />
+                                    </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, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { std, stdurl } from '../../../std.ts';
+import TableFooter from '../../util/TableFooter.vue';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerInput,
+    TablerLoading
+} from '@tak-ps/vue-tabler'
+import {
+    IconAccessPoint,
+    IconAccessPointOff,
+    IconDatabase,
+    IconRefresh,
+    IconPlus
+} from '@tabler/icons-vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+    connection: {
+        type: Object,
+        required: true
+    }
+});
+
+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 listData();
+});
+
+onMounted(async () => {
+    await listData();
+});
+
+async function listData() {
+    loading.value = true;
+    try {
+        const url = stdurl(`/api/connection/${route.params.connectionid}/data`);
+        url.searchParams.append('limit', paging.value.limit);
+        url.searchParams.append('page', paging.value.page);
+        url.searchParams.append('filter', paging.value.filter);
+        url.searchParams.append('connection', route.params.connectionid);
+        list.value = await std(url);
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value = false;
+}
+</script>