runs: use local error alert and not global alert

In this way it'll continuw polling the backend and restore when the error
condition ends.

src/components/run.vue

@@ -1,5 +1,12 @@
 <template>
   <div>
+    <div
+      v-if="fetchRunError"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <div>{{ fetchRunError }}</div>
+    </div>
     <RunDetail :run="run" :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
     <div v-if="run">
       <div v-if="run.phase != 'setuperror'">
@@ -69,6 +76,7 @@ export default {
   },
   data() {
     return {
+      fetchRunError: null,
       run: null,
       polling: null
     };
@@ -102,9 +110,10 @@ export default {
     async fetchRun() {
       let { data, error } = await fetchRun(this.runid);
       if (error) {
-        this.$store.dispatch("setError", error);
+        this.fetchRunError = error;
         return;
       }
+      this.fetchRunError = null;
       this.run = data;
 
       // sort tasks by level

src/components/runs.vue

@@ -1,5 +1,12 @@
 <template>
   <div>
+    <div
+      v-if="fetchRunsError"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <div>{{ fetchRunsError }}</div>
+    </div>
     <div v-if="runs.length > 0">
       <ul>
         <li
@@ -94,6 +101,7 @@ export default {
   },
   data() {
     return {
+      fetchRunsError: null,
       runs: [],
       wantedRunsNumber: 25,
       hasMoreRuns: false,
@@ -185,9 +193,10 @@ export default {
       while (!stopFetch) {
         let { data, error } = await fetchRuns(group, startRunID, lastrun);
         if (error) {
-          this.$store.dispatch("setError", error);
+          this.fetchRunsError = error;
           return;
         }
+        this.fetchRunsError = null;
         runCount += data.length;
         if (runCount >= this.wantedRunsNumber || data.length == 0) {
           hasMoreRuns = data.length != 0;

src/components/task.vue

@@ -1,5 +1,13 @@
 <template>
   <div>
+    <div
+      v-if="fetchRunError || fetchTaskError"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <div>Error fetching Run: {{ fetchRunError }}</div>
+      <div>Error fetching Task: {{ fetchTaskError }}</div>
+    </div>
     <RunDetail :run="run" :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
     <div v-if="task != null">
       <div class="mt-8 mb-4 flex justify-between items-center">
@@ -56,6 +64,8 @@ export default {
   },
   data() {
     return {
+      fetchRunError: null,
+      fetchTaskError: null,
       run: null,
       task: null,
       polling: null
@@ -72,17 +82,19 @@ export default {
     async fetchRun() {
       let { data, error } = await fetchRun(this.runid);
       if (error) {
-        this.$store.dispatch("setError", error);
+        this.fetchRunError = error;
         return;
       }
+      this.fetchRunError = error;
       this.run = data;
     },
     async fetchTask() {
       let { data, error } = await fetchTask(this.runid, this.taskid);
       if (error) {
-        this.$store.dispatch("setError", error);
+        this.fetchTaskError = error;
         return;
       }
+      this.fetchTaskError = error;
       this.task = data;
     },
     pollData() {