@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,259 @@
+<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

@@ -0,0 +1,401 @@
+<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>