@tak-ps/cloudtak 12.54.0

package/src/components/ETL/ConnectionEdit.vue

@@ -0,0 +1,448 @@
+<template>
+    <div style='overflow: auto;'>
+        <div class='page-wrapper'>
+            <div class='page-header d-print-none'>
+                <div class='container-xl'>
+                    <div class='row g-2 align-items-center'>
+                        <div class='col d-flex text-white'>
+                            <TablerBreadCrumb />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class='page-body'>
+            <div class='container-xl'>
+                <div class='row row-deck row-cards'>
+                    <div class='col-lg-12'>
+                        <template v-if='loading'>
+                            <TablerLoading
+                                class='text-white'
+                            />
+                        </template>
+                        <template v-else>
+                            <div class='card'>
+                                <div class='card-header'>
+                                    <h3
+                                        v-if='route.params.connectionid'
+                                        class='card-title'
+                                    >
+                                        Connection <span v-text='connection.id' />
+                                    </h3>
+                                    <h3
+                                        v-else
+                                        class='card-title'
+                                    >
+                                        New Connection
+                                    </h3>
+
+                                    <div
+                                        v-if='route.params.connectionid && connection.readonly !== true'
+                                        class='ms-auto d-flex btn-list'
+                                    >
+                                        <span class='px-2'>Enabled</span>
+                                        <label class='form-check form-switch'>
+                                            <input
+                                                v-model='connection.enabled'
+                                                class='form-check-input'
+                                                type='checkbox'
+                                            >
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class='card-body'>
+                                    <div class='row row-cards'>
+                                        <div class='col-md-12 mt-3'>
+                                            <TablerInput
+                                                v-model='connection.name'
+                                                label='Name'
+                                                :error='errors.name'
+                                                description='The human readable name of the Connection'
+                                            />
+                                        </div>
+
+                                        <div class='col-md-12'>
+                                            <div
+                                                class='px-2 py-2 round btn-group w-100'
+                                                role='group'
+                                            >
+                                                <input
+                                                    id='connection-readonly-false'
+                                                    type='radio'
+                                                    class='btn-check'
+                                                    autocomplete='off'
+                                                    :disabled='route.params.connectionid'
+                                                    :checked='!connection.readonly'
+                                                    @click='connection.readonly = false'
+                                                >
+                                                <label
+                                                    for='connection-readonly-false'
+                                                    type='button'
+                                                    class='btn btn-sm'
+                                                ><IconCloud
+                                                    v-tooltip='"Cloud Integration"'
+                                                    :size='32'
+                                                    stroke='1'
+                                                /><span class='mx-2'>Cloud Integration</span></label>
+
+                                                <input
+                                                    id='connection-readonly-true'
+                                                    type='radio'
+                                                    class='btn-check'
+                                                    autocomplete='off'
+                                                    :disabled='route.params.connectionid'
+                                                    :checked='connection.readonly'
+                                                    @click='connection.readonly = true'
+                                                >
+                                                <label
+                                                    for='connection-readonly-true'
+                                                    type='button'
+                                                    class='btn btn-sm'
+                                                ><IconDrone
+                                                    v-tooltip='"External Integration"'
+                                                    :size='32'
+                                                    stroke='1'
+                                                /><span class='mx-2'>External Integration</span></label>
+                                            </div>
+                                        </div>
+                                        <div class='col-md-12'>
+                                            <TablerInput
+                                                v-model='connection.description'
+                                                label='Description'
+                                                description='
+                                                    Human readable details about what the connection contains or is used for
+                                                '
+                                                :error='errors.description'
+                                                :rows='6'
+                                            />
+                                        </div>
+                                        <div class='col-md-12'>
+                                            <AgencySelect
+                                                v-if='!agencyDisabled'
+                                                v-model='connection.agency'
+                                                label='Agency Owner'
+                                                @disabled='disableAgency'
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <template v-if='isNextReady || route.params.connectionid'>
+                                    <div class='card-header'>
+                                        <h3 class='card-title'>
+                                            Connection Authentication
+                                        </h3>
+                                    </div>
+                                    <div class='card-body'>
+                                        <div class='row'>
+                                            <template v-if='isReady'>
+                                                <div class='col-12 d-flex align-items-center'>
+                                                    <IconCheck
+                                                        :size='40'
+                                                        class='text-green'
+                                                    />
+                                                    <span class='mx-3'>Certificate Uploaded</span>
+
+                                                    <div class='ms-auto'>
+                                                        <TablerIconButton
+                                                            title='Remove Certificate'
+                                                            @click='certificateAttachment({ ca: [], key: "", cert: ""})'
+                                                        >
+                                                            <IconTrash
+                                                                :size='32'
+                                                                stroke='1'
+                                                            />
+                                                        </TablerIconButton>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <template v-else-if='!route.params.connectionid || regen'>
+                                                <div class='col-12 pb-2'>
+                                                    <div
+                                                        class='btn-group w-100'
+                                                        role='group'
+                                                    >
+                                                        <template v-if='!agencyDisabled'>
+                                                            <input
+                                                                id='creation'
+                                                                type='radio'
+                                                                class='btn-check'
+                                                                name='cert-type'
+                                                                autocomplete='off'
+                                                                :checked='type === "creation"'
+                                                                @click='type = "creation"'
+                                                            >
+                                                            <label
+                                                                for='creation'
+                                                                type='button'
+                                                                class='btn'
+                                                            >Machine User Creation</label>
+                                                        </template>
+
+                                                        <input
+                                                            id='login'
+                                                            type='radio'
+                                                            class='btn-check'
+                                                            name='cert-type'
+                                                            autocomplete='off'
+                                                            :checked='type === "login"'
+                                                            @click='type = "login"'
+                                                        >
+                                                        <label
+                                                            for='login'
+                                                            type='button'
+                                                            class='btn'
+                                                        >User Login</label>
+
+                                                        <input
+                                                            id='p12'
+                                                            type='radio'
+                                                            class='btn-check'
+                                                            name='cert-type'
+                                                            autocomplete='off'
+                                                            :checked='type === "p12"'
+                                                            @click='type = "p12"'
+                                                        >
+                                                        <label
+                                                            for='p12'
+                                                            type='button'
+                                                            class='btn'
+                                                        >P12 Certificate Upload</label>
+
+                                                        <input
+                                                            id='raw'
+                                                            type='radio'
+                                                            class='btn-check'
+                                                            name='cert-type'
+                                                            autocomplete='off'
+                                                            :checked='type === "raw"'
+                                                            @click='type = "raw"'
+                                                        >
+                                                        <label
+                                                            for='raw'
+                                                            type='button'
+                                                            class='btn'
+                                                        >Raw Certificate</label>
+                                                    </div>
+                                                </div>
+                                                <template v-if='type === "raw"'>
+                                                    <CertificateRaw
+                                                        @certs='certificateAttachment($event)'
+                                                        @err='err = $event'
+                                                    />
+                                                </template>
+                                                <template v-else-if='type === "p12"'>
+                                                    <CertificateP12
+                                                        class='mx-2'
+                                                        @certs='certificateAttachment($event)'
+                                                        @err='err = $event'
+                                                    />
+                                                </template>
+                                                <template v-else-if='type === "login"'>
+                                                    <CertificateLogin
+                                                        @certs='certificateAttachment($event)'
+                                                        @err='err = $event'
+                                                    />
+                                                </template>
+                                                <template v-else-if='!agencyDisabled && type === "creation"'>
+                                                    <CertificateMachineUser
+                                                        :connection='connection'
+                                                        @certs='certificateAttachment($event)'
+                                                        @integration='integrationAttachment($event)'
+                                                        @err='err = $event'
+                                                    />
+                                                </template>
+                                            </template>
+                                            <template v-else>
+                                                <div class='border px-3 py-3'>
+                                                    <div class='d-flex justify-content-center'>
+                                                        <IconLock
+                                                            :size='50'
+                                                            stroke='1'
+                                                        />
+                                                    </div>
+                                                    <div class='d-flex justify-content-center my-3'>
+                                                        Once Certificates are generated they cannot be viewed
+                                                    </div>
+                                                    <div class='d-flex justify-content-center'>
+                                                        <button
+                                                            class='btn btn-secondary'
+                                                            @click='regen = true'
+                                                        >
+                                                            Regenerate Certificate
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </template>
+
+                                            <div class='col-md-12 mt-3'>
+                                                <div class='d-flex'>
+                                                    <TablerDelete
+                                                        v-if='route.params.connectionid'
+                                                        label='Delete Connection'
+                                                        @delete='del'
+                                                    />
+
+                                                    <div class='ms-auto'>
+                                                        <button
+                                                            :disabled='!route.params.connectionid && !isReady'
+                                                            class='cursor-pointer btn btn-primary'
+                                                            @click='create'
+                                                        >
+                                                            Save Connection
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <PageFooter />
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { std } from '../../std.ts';
+import PageFooter from '../PageFooter.vue';
+import AgencySelect from './Connection/AgencySelect.vue';
+import CertificateP12 from './Connection/CertificateP12.vue';
+import CertificateLogin from './Connection/CertificateLogin.vue';
+import CertificateRaw from './Connection/CertificateRaw.vue';
+import CertificateMachineUser from './Connection/CertificateMachineUser.vue';
+import {
+    IconLock,
+    IconCloud,
+    IconDrone,
+    IconCheck,
+    IconTrash,
+} from '@tabler/icons-vue';
+import {
+    TablerLoading,
+    TablerIconButton,
+    TablerBreadCrumb,
+    TablerDelete,
+    TablerInput
+} from '@tak-ps/vue-tabler';
+
+const router = useRouter();
+const route = useRoute();
+
+const loading = ref(true);
+const regen = ref(false);
+const type = ref('creation');
+const modal = ref({
+    upload: false,
+})
+
+const errors = ref({
+    name: '',
+    description: '',
+});
+
+const agencyDisabled = ref(false);
+
+const connection = ref({
+    name: '',
+    agency: undefined,
+    readonly: false,
+    description: '',
+    enabled: true,
+    integrationId: undefined,
+    auth: {
+        ca: [],
+        cert: '',
+        key: ''
+    }
+});
+
+const isNextReady = computed(() => {
+    return connection.value.name.trim().length > 0
+        && connection.value.description.trim().length > 0
+        && connection.value.agency !== undefined
+});
+
+const isReady = computed(() => {
+    return connection.value.auth.cert.trim().length && connection.value.auth.key.trim().length
+});
+
+onMounted(async () => {
+    if (route.params.connectionid) {
+        await fetch();
+    } else {
+        loading.value = false;
+    }
+});
+
+function disableAgency() {
+    agencyDisabled.value = true;
+    type.value = 'login'
+    connection.value.agency = null;
+}
+
+async function fetch() {
+    loading.value = true;
+    connection.value = await std(`/api/connection/${route.params.connectionid}`);
+    connection.value.auth = {
+        ca: [],
+        cert: '',
+        key: ''
+    }
+    loading.value = false;
+}
+
+function integrationAttachment(integration) {
+    connection.value.integrationId = integration;
+}
+
+function certificateAttachment(certs) {
+    modal.value.upload = false;
+    connection.value.auth.ca = certs.ca;
+    connection.value.auth.cert = certs.cert;
+    connection.value.auth.key = certs.key;
+}
+
+async function create() {
+    for (const field of ['name', 'description']) {
+        if (!connection.value[field]) errors.value[field] = 'Cannot be empty';
+        else errors.value[field] = '';
+    }
+
+    for (const e in errors.value) {
+        if (errors.value[e]) return;
+    }
+
+    if (route.params.connectionid) {
+        const body = JSON.parse(JSON.stringify(connection.value));
+        if (!regen.value) delete body.auth;
+
+        const create = await std(`/api/connection/${route.params.connectionid}`, {
+            method: 'PATCH',
+            body: body
+        });
+        router.push(`/connection/${create.id}`);
+    } else {
+        const create = await std('/api/connection', {
+            method: 'POST',
+            body: connection.value
+        });
+        router.push(`/connection/${create.id}`);
+    }
+}
+
+async function del() {
+    await std(`/api/connection/${route.params.connectionid}`, {
+        method: 'DELETE'
+    });
+    router.push('/connection');
+}
+</script>

package/src/components/ETL/Connections.vue

@@ -0,0 +1,148 @@
+<template>
+    <div style='overflow: auto;'>
+        <div class='page-wrapper'>
+            <div class='page-header d-print-none'>
+                <div class='container-xl'>
+                    <div class='row g-2 align-items-center'>
+                        <div class='col d-flex text-white'>
+                            <TablerBreadCrumb />
+
+                            <div class='ms-auto'>
+                                <div class='btn-list'>
+                                    <a
+                                        class='cursor-pointer btn btn-primary'
+                                        @click='router.push("/connection/new")'
+                                    >
+                                        New Connection
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class='page-body'>
+            <div class='container-xl'>
+                <div class='row row-deck row-cards'>
+                    <div class='col-lg-12'>
+                        <div class='card'>
+                            <div class='card-body'>
+                                <label class='form-label'>Connection Search</label>
+                                <div class='input-icon mb-3'>
+                                    <input
+                                        v-model='paging.filter'
+                                        type='text'
+                                        class='form-control'
+                                        placeholder='Search…'
+                                    >
+                                    <span class='input-icon-addon'>
+                                        <IconSearch
+                                            :size='24'
+                                            stroke='1'
+                                        />
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <template v-if='loading'>
+                        <TablerLoading />
+                    </template>
+                    <template v-else>
+                        <TablerNone
+                            v-if='!list.items.length'
+                            label='Connections'
+                            @create='router.push("/connection/new")'
+                        />
+                        <template v-else>
+                            <div
+                                v-for='connection in list.items'
+                                :key='connection.id'
+                                class='col-lg-12'
+                            >
+                                <div class='card'>
+                                    <ConnectionCard
+                                        :connection='connection'
+                                        :clickable='true'
+                                        :expanded='true'
+                                    />
+                                </div>
+                            </div>
+
+                            <div class='col-lg-12 d-flex'>
+                                <div class='ms-auto'>
+                                    <TablerPager
+                                        v-if='list.total > paging.limit'
+                                        :page='paging.page'
+                                        :total='list.total'
+                                        :limit='paging.limit'
+                                        @page='paging.page = $event'
+                                    />
+                                </div>
+                            </div>
+                        </template>
+                    </template>
+                </div>
+            </div>
+        </div>
+        <PageFooter />
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import type { ETLConnectionList } from '../../types.ts'
+import { std, stdurl } from '../../std.ts';
+import PageFooter from '../PageFooter.vue';
+import ConnectionCard from './ConnectionCard.vue';
+import {
+    TablerPager,
+    TablerBreadCrumb,
+    TablerLoading,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+import {
+    IconSearch
+} from '@tabler/icons-vue'
+
+const router = useRouter();
+
+const loading = ref(true);
+const paging = ref({
+    filter: '',
+    limit: 10,
+    page: 0
+});
+
+const list = ref<ETLConnectionList>({
+    total: 0,
+    status: {
+        dead: 0,
+        live: 0,
+        unknown: 0
+    },
+    items: []
+})
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await fetchList();
+});
+
+async function fetchList() {
+    loading.value = true;
+    const url = stdurl('/api/connection');
+    url.searchParams.append('filter', paging.value.filter);
+    url.searchParams.append('limit', String(paging.value.limit));
+    url.searchParams.append('page', String(paging.value.page));
+    list.value = await std(url) as ETLConnectionList;
+    loading.value = false;
+}
+</script>