Switch from axios to fetch api

nuxt.config.ts

@@ -30,8 +30,7 @@ const config: NuxtConfig = {
     '~/plugins/loadPreRegisteredServices.ts',
   ],
   buildModules: ['@nuxt/typescript-build', '@nuxtjs/vuetify'],
-  modules: ['@nuxtjs/axios', 'nuxt-webfontloader'],
-  axios: {},
+  modules: ['nuxt-webfontloader'],
   webfontloader: {
     google: {
       families: ['Quicksand', 'Fira Code'],

package.json

@@ -18,7 +18,6 @@
   "devDependencies": {
     "@nuxt/types": "^2.15.8",
     "@nuxt/typescript-build": "^2.1.0",
-    "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/eslint-config-typescript": "^6.0.1",
     "@nuxtjs/vuetify": "^1.12.1",
     "@types/codemirror": "^5.60.2",

src/components/index/ServiceRegisterDialog.vue

@@ -136,7 +136,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
 
   methods: {
     async submitService(): Promise<void> {
-      await getServiceInfo(this.$axios, this.endpoint)
+      await getServiceInfo(this.endpoint)
         .then(async (_) => {
           this.registerButton = false
           await this.$store

src/components/runs/InfoCard.vue

@@ -94,9 +94,10 @@
         <div v-if="item.key === 'Run ID'" class="d-flex align-center">
           <span v-text="item.value" />
           <v-tooltip top :value="tooltip">
-            <template #activator>
+            <template #activator="on">
               <v-icon
                 right
+                v-on="on"
                 @click.stop="copyTooltip"
                 v-text="'mdi-clipboard-outline'"
               />

src/components/services/RunImportDialog.vue

@@ -106,7 +106,6 @@ import { codeMirrorMode, validUrl, convertGitHubUrl } from '@/utils'
 import { Service } from '@/store/services'
 import { getRunsId } from '@/utils/WESRequest'
 import { RunLog } from '@/types/WES'
-import { Run } from '@/store/runs'
 import { Workflow } from '@/store/workflows'
 
 const changeQueue: Array<NodeJS.Timeout> = []
@@ -228,7 +227,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
 
     getRunsId(runId: string) {
       if (!this.service.runIds.includes(this.runId)) {
-        getRunsId(this.$axios, this.service.endpoint, runId)
+        getRunsId(this.service.endpoint, runId)
           .then((runLog) => {
             this.getFailed = false
             this.runLog = runLog
@@ -246,27 +245,25 @@ const options: ThisTypedComponentOptionsWithRecordProps<
             this.workflowUrl = runLog.request.workflow_url
             this.workflowContent = 'Failed to get workflow content'
             if (validUrl(this.workflowUrl)) {
-              convertGitHubUrl(this.$axios, this.workflowUrl).then((url) => {
+              convertGitHubUrl(this.workflowUrl).then((url) => {
                 this.workflowUrl = url
-                this.$axios.$get(this.workflowUrl).then((res) => {
-                  if (typeof res === 'string') {
-                    this.workflowContent = res
-                  } else {
-                    this.workflowContent = JSON.stringify(res, null, 2)
+                fetch(this.workflowUrl).then((res) => {
+                  if (!res.ok) {
+                    throw new Error(res.statusText)
                   }
+                  res.text().then((text) => (this.workflowContent = text))
                 })
               })
             } else {
               const fileName = this.workflowUrl.split('/').pop() || ''
               for (const file of runLog.request.workflow_attachment || []) {
                 const attachedFileName = file.file_name.split('/').pop() || ''
                 if (fileName === attachedFileName) {
-                  this.$axios.$get(file.file_url).then((res) => {
-                    if (typeof res === 'string') {
-                      this.workflowContent = res
-                    } else {
-                      this.workflowContent = JSON.stringify(res, null, 2)
+                  fetch(file.file_url).then((res) => {
+                    if (!res.ok) {
+                      throw new Error(res.statusText)
                     }
+                    res.text().then((text) => (this.workflowContent = text))
                   })
                   break
                 }

src/components/services/WorkflowRegisterDialog.vue

@@ -388,16 +388,18 @@ const options: ThisTypedComponentOptionsWithRecordProps<
 
     fetchWfContent(url: string) {
       if (validUrl(url)) {
-        convertGitHubUrl(this.$axios, this.url).then((url) => {
+        convertGitHubUrl(this.url).then((url) => {
           this.url = url
-          this.$axios
-            .$get(this.url)
+          fetch(this.url)
             .then((res) => {
-              this.fetchFailed = false
-              if (typeof res === 'string') {
-                this.wfContentDownload = res
+              if (!res.ok) {
+                this.fetchFailed = true
+                this.wfContentDownload = ''
               } else {
-                this.wfContentDownload = JSON.stringify(res, null, 2)
+                res.text().then((content) => {
+                  this.fetchFailed = false
+                  this.wfContentDownload = content
+                })
               }
             })
             .catch((_) => {

src/pages/runs/index.vue

@@ -92,7 +92,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
             'INITIALIZING',
             'RUNNING',
             'CANCELING',
-          ].includes(this.run.state)
+          ].includes(this.$store.getters['runs/run'](this.runId))
         ) {
           await this.$store.dispatch('runs/updateRun', this.runId)
         }

src/store/runs.ts

@@ -251,15 +251,10 @@ export const actions: ActionTree<State, RootState> = {
       }
     }
 
-    const runId = (await postRuns(this.$axios, payload.service.endpoint, data))
-      .run_id
+    const runId = (await postRuns(payload.service.endpoint, data)).run_id
 
-    const runStatus = await getRunsIdStatus(
-      this.$axios,
-      payload.service.endpoint,
-      runId
-    )
-    const runLog = await getRunsId(this.$axios, payload.service.endpoint, runId)
+    const runStatus = await getRunsIdStatus(payload.service.endpoint, runId)
+    const runLog = await getRunsId(payload.service.endpoint, runId)
 
     dispatch(
       'services/addRunId',
@@ -352,7 +347,7 @@ export const actions: ActionTree<State, RootState> = {
         run.serviceId
       )
       if (service) {
-        const runLog = await getRunsId(this.$axios, service.endpoint, runId)
+        const runLog = await getRunsId(service.endpoint, runId)
         commit('setProp', {
           key: 'state',
           value: runLog.state,
@@ -377,10 +372,7 @@ export const actions: ActionTree<State, RootState> = {
     if (service) {
       const date = dayjs().utc().format()
       if (rootGetters['services/getRuns'](service.id)) {
-        const runListRes: RunListResponse = await getRuns(
-          this.$axios,
-          service.endpoint
-        )
+        const runListRes: RunListResponse = await getRuns(service.endpoint)
         const runsMap: Record<string, RunStatus> = {}
         for (const run of runListRes.runs) {
           runsMap[run.run_id] = run
@@ -408,11 +400,9 @@ export const actions: ActionTree<State, RootState> = {
       } else {
         for (const runId of service.runIds) {
           const state = (
-            await getRunsIdStatus(this.$axios, service.endpoint, runId).catch(
-              (_) => ({
-                state: 'UNKNOWN',
-              })
-            )
+            await getRunsIdStatus(service.endpoint, runId).catch((_) => ({
+              state: 'UNKNOWN',
+            }))
           ).state
           commit('setProp', {
             key: 'state',
@@ -439,7 +429,7 @@ export const actions: ActionTree<State, RootState> = {
         run.serviceId
       )
       if (service) {
-        await postRunsIdCancel(this.$axios, service.endpoint, runId)
+        await postRunsIdCancel(service.endpoint, runId)
       }
     }
   },

src/store/services.ts

@@ -235,10 +235,7 @@ export const actions: ActionTree<State, RootState> = {
       preRegistered: boolean
     }
   ): Promise<string> {
-    const { serviceInfo, state } = await getServiceInfo(
-      this.$axios,
-      payload.endpoint
-    )
+    const { serviceInfo, state } = await getServiceInfo(payload.endpoint)
       .then((serviceInfo) => ({ serviceInfo, state: 'Available' }))
       .catch((_) => ({
         serviceInfo: {
@@ -318,7 +315,7 @@ export const actions: ActionTree<State, RootState> = {
   ): Promise<void> {
     const service: Service | undefined = getters.service(serviceId)
     if (service) {
-      await getServiceInfo(this.$axios, service.endpoint)
+      await getServiceInfo(service.endpoint)
         .then(async (serviceInfo) => {
           commit('setProp', {
             key: 'serviceInfo',

src/store/workflows.ts

@@ -177,28 +177,23 @@ export const actions: ActionTree<State, RootState> = {
     const workflowId: string = uuidv4()
     let content = ''
     if (validUrl(payload.workflow.workflow_url)) {
-      const url = await convertGitHubUrl(
-        this.$axios,
-        payload.workflow.workflow_url
-      )
-      const res = await this.$axios.$get(url)
-      if (typeof res === 'string') {
-        content = res
-      } else {
-        content = JSON.stringify(res, null, 2)
+      const url = await convertGitHubUrl(payload.workflow.workflow_url)
+      const res = await fetch(url, { method: 'GET' })
+      if (!res.ok) {
+        throw new Error(`Failed to fetch workflow from ${url}`)
       }
+      content = await res.text()
     } else {
       const fileName = payload.workflow.workflow_url.split('/').slice(-1)[0]
       for (const file of payload.workflow.workflow_attachment) {
         const attachedFileName = file.file_name.split('/').slice(-1)[0]
         if (fileName === attachedFileName) {
-          const url = await convertGitHubUrl(this.$axios, file.file_url)
-          const res = await this.$axios.$get(url)
-          if (typeof res === 'string') {
-            content = res
-          } else {
-            content = JSON.stringify(res, null, 2)
+          const url = await convertGitHubUrl(file.file_url)
+          const res = await fetch(url, { method: 'GET' })
+          if (!res.ok) {
+            throw new Error(`Failed to fetch workflow from ${url}`)
           }
+          content = await res.text()
           break
         }
       }
@@ -232,28 +227,23 @@ export const actions: ActionTree<State, RootState> = {
   ): Promise<void> {
     let content = ''
     if (validUrl(payload.workflow.workflow_url)) {
-      const url = await convertGitHubUrl(
-        this.$axios,
-        payload.workflow.workflow_url
-      )
-      const res = await this.$axios.$get(url)
-      if (typeof res === 'string') {
-        content = res
-      } else {
-        content = JSON.stringify(res, null, 2)
+      const url = await convertGitHubUrl(payload.workflow.workflow_url)
+      const res = await fetch(url, { method: 'GET' })
+      if (!res.ok) {
+        throw new Error(`Failed to fetch workflow from ${url}`)
       }
+      content = await res.text()
     } else {
       const fileName = payload.workflow.workflow_url.split('/').slice(-1)[0]
       for (const file of payload.workflow.workflow_attachment) {
         const attachedFileName = file.file_name.split('/').slice(-1)[0]
         if (fileName === attachedFileName) {
-          const url = await convertGitHubUrl(this.$axios, file.file_url)
-          const res = await this.$axios.$get(url)
-          if (typeof res === 'string') {
-            content = res
-          } else {
-            content = JSON.stringify(res, null, 2)
+          const url = await convertGitHubUrl(file.file_url)
+          const res = await fetch(url, { method: 'GET' })
+          if (!res.ok) {
+            throw new Error(`Failed to fetch workflow from ${url}`)
           }
+          content = await res.text()
           break
         }
       }