diff --git a/client/src/components/JobDestinationParams/mount.js b/client/src/components/JobDestinationParams/mount.js index 271db1a40b9..42922881918 100644 --- a/client/src/components/JobDestinationParams/mount.js +++ b/client/src/components/JobDestinationParams/mount.js @@ -1,13 +1,13 @@ /** * Endpoint for mounting job metrics from non-Vue environment. */ -import $ from "jquery"; import JobDestinationParams from "./JobDestinationParams.vue"; import { mountVueComponent } from "utils/mountVueComponent"; export const mountDestinationParams = (propsData = {}) => { - $(".job-destination-parameters").each((index, el) => { - propsData.jobId = $(el).attr("job_id"); + const elements = document.querySelectorAll(".job-destination-parameters"); + Array.prototype.forEach.call(elements, function (el, i) { + propsData.jobId = el.getAttribute("job_id"); mountVueComponent(JobDestinationParams)(propsData, el); }); }; diff --git a/client/src/components/JobMetrics/mount.js b/client/src/components/JobMetrics/mount.js index 1ef820abd69..796a0008ee4 100644 --- a/client/src/components/JobMetrics/mount.js +++ b/client/src/components/JobMetrics/mount.js @@ -1,16 +1,16 @@ /** * Endpoint for mounting job metrics from non-Vue environment. */ -import $ from "jquery"; import JobMetrics from "./JobMetrics.vue"; import { mountVueComponent } from "utils/mountVueComponent"; export const mountJobMetrics = (propsData = {}) => { - $(".job-metrics").each((index, el) => { - const jobId = $(el).attr("job_id"); - const aws_estimate = $(el).attr("aws_estimate"); - const datasetId = $(el).attr("dataset_id"); - const datasetType = $(el).attr("dataset_type") || "hda"; + const elements = document.querySelectorAll(".job-metrics"); + Array.prototype.forEach.call(elements, function (el, i) { + const jobId = el.getAttribute("job_id"); + const aws_estimate = el.getAttribute("aws_estimate"); + const datasetId = el.getAttribute("dataset_id"); + const datasetType = el.getAttribute("dataset_type") || "hda"; propsData.jobId = jobId; propsData.datasetId = datasetId; propsData.datasetType = datasetType; diff --git a/client/src/components/JobParameters/mount.js b/client/src/components/JobParameters/mount.js index a8aef48fa57..2a75d872115 100644 --- a/client/src/components/JobParameters/mount.js +++ b/client/src/components/JobParameters/mount.js @@ -1,21 +1,20 @@ /** * Endpoint for mounting job parameters from non-Vue environment. */ -import $ from "jquery"; -import Vue from "vue"; import JobParameters from "./JobParameters.vue"; +import { mountVueComponent } from "utils/mountVueComponent"; export const mountJobParameters = (propsData = {}) => { - $(".job-parameters").each((index, el) => { - const jobId = $(el).attr("job_id"); - const datasetId = $(el).attr("dataset_id"); - const param = $(el).attr("param"); - const datasetType = $(el).attr("dataset_type") || "hda"; - const component = Vue.extend(JobParameters); + const elements = document.querySelectorAll(".job-parameters"); + Array.prototype.forEach.call(elements, function (el, i) { + const jobId = el.getAttribute("job_id"); + const datasetId = el.getAttribute("dataset_id"); + const param = el.getAttribute("param") || undefined; + const datasetType = el.getAttribute("dataset_type") || "hda"; propsData.jobId = jobId; propsData.datasetId = datasetId; propsData.param = param; propsData.datasetType = datasetType; - return new component({ propsData: propsData }).$mount(el); + mountVueComponent(JobParameters)(propsData, el); }); };