Modernize webhook wrappers, remove backbone dependency

Author: guerler

client/src/components/Common/Webhook.vue

@@ -1,28 +1,39 @@
 <script setup lang="ts">
+import { appendScriptStyle } from "@/utils/utils";
+import { loadWebhooks, pickWebhook } from "@/utils/webhooks";
 import { onMounted, ref } from "vue";
 
-import Webhooks from "@/utils/webhooks";
-
 interface Props {
     type: string;
     toolId?: string;
+    toolVersion?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    toolId: undefined,
+    toolId: "",
+    toolVersion: "",
 });
 
-const webhook = ref(null);
+const container = ref<HTMLElement | null>(null);
+const webhookId = ref<string | null>(null);
+
+onMounted(async () => {
+    if (container.value) {
+        container.value.setAttribute("tool_id", props.toolId);
+        container.value.setAttribute("tool_version", props.toolVersion);
+    }
 
-onMounted(() => {
-    new Webhooks.WebhookView({
-        webhook,
-        type: props.type,
-        toolId: props.toolId,
-    });
+    const webhooks = await loadWebhooks();
+    if (webhooks.length > 0) {
+        const model = pickWebhook(webhooks);
+        webhookId.value = model.id;
+        appendScriptStyle(model);
+    }
 });
 </script>
 
 <template>
-    <div id="webhook-view" ref="webhook" />
+    <div ref="container">
+        <div v-if="webhookId" :id="webhookId"></div>
+    </div>
 </template>

client/src/components/Workflow/Run/WorkflowRunSuccess.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 
 import type { WorkflowInvocation } from "@/api/invocations";
-import Webhooks from "@/utils/webhooks";
 import { startWatchingHistory } from "@/watch/watchHistoryProvided";
 
+import Webhook from "@/components/Common/Webhook.vue";
 import GridInvocation from "@/components/Grid/GridInvocation.vue";
 import WorkflowInvocationState from "@/components/WorkflowInvocationState/WorkflowInvocationState.vue";
 
@@ -14,20 +14,17 @@ const props = defineProps<{
 }>();
 
 onMounted(() => {
-    new Webhooks.WebhookView({
-        type: "workflow",
-        toolId: null,
-        toolVersion: null,
-    });
     startWatchingHistory();
 });
 
-const targetHistories = props.invocations.reduce((histories, invocation) => {
-    if (invocation.history_id && !histories.includes(invocation.history_id)) {
-        histories.push(invocation.history_id);
-    }
-    return histories;
-}, [] as string[]);
+const targetHistories = computed(() =>
+    props.invocations.reduce((histories, invocation) => {
+        if (invocation.history_id && !histories.includes(invocation.history_id)) {
+            histories.push(invocation.history_id);
+        }
+        return histories;
+    }, [] as string[])
+);
 </script>
 
 <template>
@@ -46,6 +43,6 @@ const targetHistories = props.invocations.reduce((histories, invocation) => {
             :invocation-id="props.invocations[0].id"
             is-full-page
             success />
-        <div id="webhook-view"></div>
+        <Webhook type="workflow" />
     </div>
 </template>

client/src/onload/globalInits/onloadWebhooks.js

@@ -1,17 +1,13 @@
-import Utils from "utils/utils";
-import Webhooks from "utils/webhooks";
+import { appendScriptStyle } from "utils/utils";
+import { loadWebhooks } from "utils/webhooks";
 
-export function onloadWebhooks(Galaxy) {
+export async function onloadWebhooks(Galaxy) {
     if (Galaxy.config.enable_webhooks) {
-        Webhooks.load({
-            type: "onload",
-            callback: function (webhooks) {
-                webhooks.forEach((webhook) => {
-                    if (webhook.activate && webhook.script) {
-                        Utils.appendScriptStyle(webhook);
-                    }
-                });
-            },
+        const webhooks = await loadWebhooks("onload");
+        webhooks.forEach((webhook) => {
+            if (webhook.activate && webhook.script) {
+                appendScriptStyle(webhook);
+            }
         });
     }
 }

client/src/utils/webhooks.js

@@ -1,13 +1,11 @@
 import axios from "axios";
-import Backbone from "backbone";
 import { getAppRoot } from "onload/loadConfig";
-import { appendScriptStyle } from "utils/utils";
 
 import { rethrowSimple } from "@/utils/simple-error";
 
 let webhookData = undefined;
 
-async function getWebHookData() {
+async function getWebhookData() {
     if (webhookData === undefined) {
         try {
             const { data } = await axios.get(`${getAppRoot()}api/webhooks`);
@@ -19,57 +17,16 @@ async function getWebHookData() {
     return webhookData;
 }
 
-const WebhookView = Backbone.View.extend({
-    el: "#webhook-view",
-
-    initialize: function (options) {
-        const toolId = options.toolId || "";
-        const toolVersion = options.toolVersion || "";
-
-        this.$el.attr("tool_id", toolId);
-        this.$el.attr("tool_version", toolVersion);
-
-        getWebHookData().then((data) => {
-            const filteredData = filterData(data, options);
-            if (filteredData.length > 0) {
-                this.render(weightedRandomPick(filteredData));
-            }
-        });
-    },
-
-    render: function (model) {
-        this.$el.html(`<div id="${model.id}"></div>`);
-        appendScriptStyle(model);
-        return this;
-    },
-});
-
-function filterData(data, options) {
-    let filteredData = data;
-    if (options.type) {
-        filteredData = filterType(data, options.type);
+export async function loadWebhooks(type) {
+    const webhooks = await getWebhookData();
+    if (type) {
+        return webhooks.filter((item) => item.type && item.type.indexOf(type) !== -1);
+    } else {
+        return webhooks;
     }
-    return filteredData;
-}
-
-const load = (options) => {
-    getWebHookData().then((data) => {
-        options.callback(filterData(data, options));
-    });
-};
-
-function filterType(data, type) {
-    return data.filter((item) => {
-        const itype = item.type;
-        if (itype) {
-            return itype.indexOf(type) !== -1;
-        } else {
-            return false;
-        }
-    });
 }
 
-function weightedRandomPick(data) {
+export function pickWebhook(data) {
     const weights = data.map((d) => d.weight);
     const sum = weights.reduce((a, b) => a + b);
 
@@ -87,8 +44,3 @@ function weightedRandomPick(data) {
 
     return data.at(table[Math.floor(Math.random() * table.length)]);
 }
-
-export default {
-    WebhookView: WebhookView,
-    load: load,
-};