@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/ETL/Layer/LayerEnvironment.vue

@@ -1,259 +0,0 @@
-<template>
-    <div>
-        <div class='card-header d-flex'>
-            <h3 class='card-title'>
-                Environment
-            </h3>
-            <div
-                v-if='disabled'
-                class='ms-auto btn-list'
-            >
-                <template v-if='disabled && !raw'>
-                    <TablerIconButton
-                        title='Raw View'
-                        @click='raw = true'
-                    >
-                        <IconCode
-                            :size='32'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                    <TablerIconButton
-                        v-if='props.capabilities'
-                        title='Edit'
-                        @click='disabled = false'
-                    >
-                        <IconPencil
-                            :size='32'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </template>
-                <template v-else-if='raw'>
-                    <TablerIconButton
-                        title='Close View'
-                        @click='raw = false'
-                    >
-                        <IconX
-                            :size='32'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </template>
-            </div>
-        </div>
-
-        <div
-            v-if='softAlert'
-            class='bg-red-lt mx-2 px-2 py-2 my-2 rounded border border-red justify-content-center'
-        >
-            <div>Output Schema could not be loaded from upstream source:</div>
-            <div v-text='softAlert.message' />
-        </div>
-        <TablerLoading
-            v-else-if='!environment'
-            desc='Loading Environment'
-        />
-        <TablerLoading
-            v-else-if='loading.save'
-            desc='Saving Environment'
-        />
-        <div
-            v-else
-            class='col'
-        >
-            <template v-if='raw'>
-                <CopyField
-                    :rows='20'
-                    :edit='true'
-                    :hover='true'
-                    :validate='validateJSON'
-                    :model-value='JSON.stringify(environment, null, 4)'
-                    @update:model-value='environment = JSON.parse($event)'
-                />
-            </template>
-            <TablerAlert
-                v-else-if='!props.capabilities'
-                title='Missing Capabilities'
-                :err='new Error("Layer failed to return a Capabilities object")'
-            />
-            <TablerAlert
-                v-else-if='!props.capabilities.incoming.schema.input'
-                title='Missing Input Schema'
-                :err='new Error("Layer failed to return an input schema on the Capabilities object")'
-            />
-            <template v-else-if='direction === "incoming" && props.capabilities.name === "etl-arcgis"'>
-                <LayerIncomingEnvironmentArcGIS
-                    v-model='environment'
-                    :disabled='disabled'
-                />
-            </template>
-            <template v-else-if='direction === "outgoing" && props.capabilities.name === "etl-arcgis"'>
-                <LayerOutgoingEnvironmentArcGIS
-                    v-model='environment'
-                    :disabled='disabled'
-                />
-            </template>
-            <template
-                v-else-if='
-                    props.capabilities[direction].schema.input.type !== "object"
-                        || !props.capabilities[direction].schema.input.properties
-                '
-            >
-                <div class='d-flex justify-content-center my-4'>
-                    Only Object Schemas are Supported.
-                </div>
-            </template>
-            <template v-else>
-                <TablerNone
-                    v-if='Object.keys(capabilities[direction].schema.input.properties).length === 0'
-                    label='Schema'
-                    :create='false'
-                />
-                <Schema
-                    v-else
-                    v-model='environment'
-                    :schema='capabilities[direction].schema.input'
-                    :disabled='disabled'
-                />
-            </template>
-
-            <div class='px-2 pb-3'>
-                <!-- AutoSuggested Filters -->
-                <template v-if='config.timezone'>
-                    <TablerTimeZone
-                        v-model='config.timezone.timezone'
-                        label='Date TimeZone Override'
-                        :disabled='disabled'
-                    />
-                </template>
-            </div>
-
-            <div
-                v-if='!disabled || raw'
-                class='col-12 px-2 py-2 d-flex'
-            >
-                <button
-                    class='btn'
-                    @click='reload'
-                >
-                    Cancel
-                </button>
-                <div class='ms-auto'>
-                    <button
-                        class='btn btn-primary'
-                        @click='saveLayer'
-                    >
-                        Save
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { std } from '../../../std.ts';
-import { validateJSON } from '../../../base/validators.ts';
-import {
-    TablerNone,
-    TablerAlert,
-    TablerLoading,
-    TablerIconButton,
-    TablerTimeZone,
-} from '@tak-ps/vue-tabler';
-import CopyField from '../../CloudTAK/util/CopyField.vue';
-import LayerIncomingEnvironmentArcGIS from './LayerIncomingEnvironmentArcGIS.vue';
-import LayerOutgoingEnvironmentArcGIS from './LayerOutgoingEnvironmentArcGIS.vue';
-import Schema from './utils/Schema.vue';
-import {
-    IconX,
-    IconCode,
-    IconPencil,
-} from '@tabler/icons-vue'
-
-const props = defineProps({
-    layer: {
-        type: Object,
-        required: true
-    },
-    capabilities: {
-        type: Object,
-        required: true
-    }
-});
-
-const emit = defineEmits([ 'refresh' ]);
-
-const route = useRoute();
-
-const direction = ref(route.name.includes('incoming') ? 'incoming' : 'outgoing');
-
-const raw = ref(false);
-const softAlert = ref(false);
-const disabled = ref(true);
-const config = ref({});
-const environment = ref();
-
-const loading = ref({
-    save: false
-});
-
-onMounted(async () => {
-    await reload();
-});
-
-function hasDateTime() {
-    if (!props.capabilities) return false;
-
-    if (props.capabilities[direction.value].schema.output) {
-        for (const prop of Object.keys(props.capabilities[direction.value].schema.output.properties)) {
-            if (props.capabilities[direction.value].schema.output.properties[prop].format && props.capabilities[direction.value].schema.output.properties[prop].format === 'date-time') {
-                return true;
-            }
-        }
-    }
-
-    return false;
-}
-
-async function reload() {
-    raw.value = false;
-    disabled.value = true;
-
-    environment.value = JSON.parse(JSON.stringify(props.layer[direction.value].environment));
-
-    if (direction.value === 'incoming')  {
-        const cnf = JSON.parse(JSON.stringify(props.layer[direction.value].config));
-
-        if (!hasDateTime()) {
-            delete cnf.timezone;
-        } else if (!cnf.timezone) {
-            cnf.timezone = { timezone: 'No TimeZone' }
-        }
-
-        config.value = cnf;
-    }
-
-    disabled.value = true;
-}
-
-async function saveLayer() {
-    loading.value.save = true;
-
-    await std(`/api/connection/${props.layer.connection}/layer/${props.layer.id}/${direction.value}`, {
-        method: 'PATCH',
-        body: {
-            environment: environment.value,
-            config: config.value
-        }
-    });
-
-    disabled.value = true;
-    loading.value.save = false;
-
-    emit('refresh');
-}
-</script>

package/src/components/ETL/Layer/LayerIncomingConfig.vue

@@ -1,401 +0,0 @@
-<template>
-    <div>
-        <div class='card-header'>
-            <h3 class='card-title'>
-                Layer Config
-            </h3>
-            <div class='ms-auto btn-list'>
-                <TablerIconButton
-                    v-if='disabled && cronEnabled'
-                    title='Manual Run'
-                    @click='invoke'
-                >
-                    <IconPlayerPlay
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-
-                <TablerIconButton
-                    v-if='disabled'
-                    title='Edit Layer Config'
-                    @click='disabled = false'
-                >
-                    <IconPencil
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-            </div>
-        </div>
-
-        <TablerLoading
-            v-if='loading.save'
-            desc='Saving Config'
-        />
-        <TablerLoading
-            v-else-if='loading.init'
-            desc='Loading Config'
-        />
-        <div
-            v-else
-            class='card-body'
-        >
-            <div class='row g-2'>
-                <div
-                    v-if='props.capabilities ? props.capabilities.incoming.invocation.includes("schedule") : true'
-                    class='col-md-12'
-                >
-                    <div class='d-flex align-items-center'>
-                        <IconCalendarClock
-                            :size='20'
-                            stroke='1'
-                        />
-                        <div style='width: calc(100% - 20px);'>
-                            <TablerToggle
-                                v-model='cronEnabled'
-                                :disabled='disabled'
-                                label='Scheduled Runs'
-                            />
-                        </div>
-                    </div>
-
-                    <div
-                        v-if='cronEnabled'
-                        class='col-12 border rounded px-2 py-2'
-                    >
-                        <TablerInput
-                            v-model='incoming.cron'
-                            label='Cron Expression'
-                            :disabled='disabled'
-                            placeholder='Cron Expression'
-                        >
-                            <TablerDropdown v-if='!disabled'>
-                                <template #default>
-                                    <TablerIconButton
-                                        title='Samples'
-                                    >
-                                        <IconSettings
-                                            :size='16'
-                                            stroke='1'
-                                        />
-                                    </TablerIconButton>
-                                </template>
-                                <template #dropdown>
-                                    <ul
-                                        class='px-1 py-1'
-                                    >
-                                        <li
-                                            class='py-1 px-1 cursor-pointer hover'
-                                            @click='incoming.cron = "rate(1 minute)"'
-                                        >
-                                            rate(1 minute)
-                                        </li>
-                                        <li
-                                            class='py-1 px-1 cursor-pointer hover'
-                                            @click='incoming.cron = "rate(5 minutes)"'
-                                        >
-                                            rate(5 minutes)
-                                        </li>
-                                        <li
-                                            class='py-1 px-1 cursor-pointer hover'
-                                            @click='incoming.cron = "cron(15 10 * * ? *)"'
-                                        >
-                                            cron(15 10 * * ? *)
-                                        </li>
-                                        <li
-                                            class='py-1 px-1 cursor-pointer hover'
-                                            @click='incoming.cron = "cron(0/5 8-17 ? * MON-FRI *)"'
-                                        >
-                                            cron(0/5 8-17 ? * MON-FRI *)
-                                        </li>
-                                    </ul>
-                                </template>
-                            </TablerDropdown>
-                        </TablerInput>
-                        <label
-                            v-if='incoming.cron'
-                            v-text='cronstr(incoming.cron)'
-                        />
-                    </div>
-                </div>
-                <div
-                    v-if='props.capabilities ? props.capabilities.incoming.invocation.includes("webhook") : true'
-                    class='col-md-12'
-                >
-                    <div class='d-flex align-items-center'>
-                        <IconWebhook
-                            :size='20'
-                            stroke='1'
-                        />
-                        <div style='width: calc(100% - 20px);'>
-                            <TablerToggle
-                                v-model='incoming.webhooks'
-                                :disabled='disabled'
-                                label='Webhooks Delivery'
-                            />
-                        </div>
-                    </div>
-
-                    <div
-                        v-if='incoming.webhooks'
-                        class='col-12 border rounded px-2 py-2'
-                    >
-                        <label>Webhook URL</label>
-                        <CopyField
-                            :model-value='props.layer.uuid'
-                        />
-                    </div>
-                </div>
-                <div class='col-md-12'>
-                    <div class='row'>
-                        <div class='col-12'>
-                            <label>Data Destination</label>
-                        </div>
-                        <div
-                            class='px-2 py-2 round btn-group w-100'
-                            role='group'
-                        >
-                            <input
-                                id='dest-groups'
-                                type='radio'
-                                class='btn-check'
-                                autocomplete='off'
-                                :disabled='disabled'
-                                :checked='dest === "groups"'
-                                @click='dest = "groups"'
-                            >
-                            <label
-                                for='dest-groups'
-                                type='button'
-                                class='btn btn-sm'
-                            >
-                                <IconAffiliate
-                                    v-tooltip='"Channel Selection"'
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <span class='mx-2'>Channel Selection</span>
-                            </label>
-
-                            <input
-                                id='dest-mission'
-                                type='radio'
-                                class='btn-check'
-                                autocomplete='off'
-                                :disabled='disabled'
-                                :checked='dest === "mission"'
-                                @click='dest = "mission"'
-                            >
-                            <label
-                                for='dest-mission'
-                                type='button'
-                                class='btn btn-sm'
-                            >
-                                <IconAmbulance
-                                    v-tooltip='"Data Sync"'
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <span class='mx-2'>Data Sync</span>
-                            </label>
-                        </div>
-
-                        <template v-if='dest === "groups"'>
-                            <div class='col-md-12'>
-                                <TablerInlineAlert
-                                    type='info'
-                                    description='If no channels are selected, then all channels assigned to the connection will be used'
-                                />
-
-                                <GroupSelect
-                                    v-model='incoming.groups'
-                                    :disabled='disabled'
-                                    :connection='layer.connection'
-                                />
-                            </div>
-                        </template>
-                        <template v-else>
-                            <div class='col-12 d-flex align-items-center my-1'>
-                                <IconDatabase
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <DataSelect
-                                    v-model='incoming.data'
-                                    :disabled='disabled'
-                                    :connection='layer.connection'
-                                />
-                            </div>
-                        </template>
-                    </div>
-                </div>
-
-                <div
-                    v-if='!disabled'
-                    class='col-12 pt-3 d-flex'
-                >
-                    <button
-                        class='btn'
-                        @click='reload'
-                    >
-                        Cancel
-                    </button>
-                    <div class='ms-auto'>
-                        <button
-                            class='btn btn-primary'
-                            @click='saveIncoming'
-                        >
-                            Save
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, watch, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { server } from '../../../std.ts';
-import type { ETLLayerIncoming } from '../../../types.ts';
-import GroupSelect from '../../util/GroupSelect.vue';
-import cronstrue from 'cronstrue';
-import DataSelect from '../../util/DataSelect.vue';
-import CopyField from '../../CloudTAK/util/CopyField.vue';
-import {
-    TablerIconButton,
-    TablerInlineAlert,
-    TablerDropdown,
-    TablerInput,
-    TablerToggle,
-    TablerLoading
-} from '@tak-ps/vue-tabler';
-import {
-    IconCalendarClock,
-    IconAffiliate,
-    IconAmbulance,
-    IconPlayerPlay,
-    IconWebhook,
-    IconPencil,
-    IconSettings,
-    IconDatabase,
-} from '@tabler/icons-vue'
-
-const props = defineProps({
-    layer: {
-        type: Object,
-        required: true
-    },
-    capabilities: {
-        type: Object,
-        required: true
-    }
-})
-
-const route = useRoute();
-const emit = defineEmits([
-    'refresh',
-    'stack'
-]);
-
-const dest = ref('groups');
-const disabled = ref(true);
-const cronEnabled = ref(true);
-
-const loading = ref({
-    init: true,
-    version: false,
-    save: false
-});
-
-const incoming = ref<ETLLayerIncoming>(props.layer.incoming);
-
-watch(incoming, () => {
-    if (cronEnabled.value) {
-        incoming.value.cron = '0/15 * * * ? *';
-    } else {
-        incoming.value.cron = null;
-    }
-});
-
-onMounted(() => {
-    reload();
-    loading.value.init = false;
-})
-
-function reload() {
-    incoming.value = props.layer.incoming;
-    cronEnabled.value = !!incoming.value.cron
-    disabled.value = true;
-}
-
-async function invoke() {
-    loading.value.init = true;
-    try {
-        await server.POST('/api/connection/{:connectionid}/layer/{:layerid}/task/invoke', {
-            params: {
-                path: {
-                    ':connectionid': Number(String(route.params.connectionid)),
-                    ':layerid': Number(String(route.params.layerid))
-                }
-            }
-        });
-
-        loading.value.init = false;
-    } catch (err) {
-        loading.value.init = false;
-        throw err;
-    }
-}
-
-
-function cronstr(cron?: string) {
-    if (!cron) return;
-
-    if (cron.includes('cron(')) {
-        return cronstrue.toString(cron.replace('cron(', '').replace(')', ''));
-    } else {
-        const rate = cron.replace('rate(', '').replace(')', '');
-        return `Once every ${rate}`;
-    }
-}
-
-async function saveIncoming() {
-    loading.value.save = true;
-
-    try {
-        if (!cronEnabled.value) {
-            incoming.value.cron = null;
-        }
-
-        if (dest.value === 'groups') {
-            incoming.value.data = null;
-        } else {
-            incoming.value.groups = [];
-        }
-
-        const res = await server.PATCH(`/api/connection/{:connectionid}/layer/{:layerid}/incoming`, {
-            params: {
-                path: {
-                    ':connectionid': Number(String(route.params.connectionid)),
-                    ':layerid': Number(String(route.params.layerid))
-                }
-            },
-            body: incoming.value
-        });
-
-        if (res.error) throw new Error(res.error.message);
-
-        disabled.value = true;
-        loading.value.save = false;
-
-        emit('refresh');
-        emit('stack');
-    } catch (err) {
-        loading.value.save = false;
-        throw err;
-    }
-}
-</script>