Handle release control errors (#56)

Show modal with error message when release is blocked

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.21-alpine
+FROM nginx:1.23-alpine
 
 LABEL maintainer="estafette.io" \
       description="The estafette-ci-web is the component that renders the Esfafette CI web interface"
@@ -25,4 +25,4 @@ ENV GRACEFUL_SHUTDOWN_DELAY_SECONDS="15"
 ENTRYPOINT ["/docker-entrypoint.sh"]
 
 # Reset change of stopsignal in openresty container at https://github.com/openresty/docker-openresty/blob/master/alpine/Dockerfile#L124
-STOPSIGNAL SIGTERM
+STOPSIGNAL SIGTERM

docs/api/pipelines/github.com/estafette/estafette-ci-api/releases/POST.js

@@ -0,0 +1,4 @@
+const { delay, type, file } = require('connect-api-mocker/helpers')
+const path = require('path')
+
+module.exports = [delay(500), type('application/json'), file(path.join(__dirname, './post.json'))]

docs/api/pipelines/github.com/estafette/estafette-ci-api/releases/post.json

@@ -0,0 +1,4 @@
+{
+  "code": 403,
+  "message": "Release not allowed on this branch"
+}

mocks/api/pipelines/github.com/estafette/estafette-ci-api/builds/index.json

@@ -104,9 +104,9 @@
       "repoSource": "github.com",
       "repoOwner": "estafette",
       "repoName": "estafette-ci-api",
-      "repoBranch": "main",
+      "repoBranch": "feature/test-123",
       "repoRevision": "d5c290aec655c2bb9cd5526665acd67846d38d10",
-      "buildVersion": "1.0.0-main-1727",
+      "buildVersion": "1.0.0-feature-test-123-1727",
       "buildStatus": "succeeded",
       "labels": [
         {
@@ -170,10 +170,10 @@
             "event": "finished",
             "status": "succeeded",
             "name": "github.com/estafette/estafette-ci-db-migrator",
-            "branch": "main"
+            "branch": "feature/test-123"
           },
           "builds": {
-            "branch": "main"
+            "branch": "feature/test-123"
           }
         }
       ],
@@ -183,7 +183,7 @@
           "git": {
             "event": "push",
             "repository": "github.com/estafette/estafette-ci-api",
-            "branch": "main"
+            "branch": "feature/test-123"
           }
         }
       ],
@@ -997,4 +997,4 @@
     "totalPages": 1,
     "totalItems": 10
   }
-}
+}

mocks/api/pipelines/github.com/estafette/estafette-ci-api/releases/POST.js

@@ -0,0 +1,17 @@
+const {
+  type,
+  file
+} = require('connect-api-mocker/helpers')
+const path = require('path')
+
+module.exports = function (req, res) {
+  type('application/json')(req, res, () => {
+    if (req.body && req.body.releaseVersion.includes('-main-')) {
+      res.statusCode = 201
+      file(path.join(__dirname, './post-201.json'))(req, res)
+    } else {
+      res.statusCode = 403
+      file(path.join(__dirname, './post-403.json'))(req, res)
+    }
+  })
+}

mocks/api/pipelines/github.com/estafette/estafette-ci-api/releases/post-201.json

@@ -0,0 +1,16 @@
+{
+  "name": "tooling-estafette",
+  "action": "release",
+  "id": "12313",
+  "repoSource": "github.com",
+  "repoOwner": "estafette",
+  "repoName": "estafette-ci-api",
+  "releaseVersion": "xyz",
+  "releaseStatus": "succeeded",
+  "triggerEvents": [],
+  "insertedAt": "2006-01-02 15:04:05.999999999 -0700 MST",
+  "startedAt": "2006-01-02 15:04:05.999999999 -0700 MST",
+  "updatedAt": "2006-01-02 15:04:05.999999999 -0700 MST",
+  "duration": 30000,
+  "pendingDuration": 0
+}

mocks/api/pipelines/github.com/estafette/estafette-ci-api/releases/post-403.json

@@ -0,0 +1,12 @@
+{
+  "code": "Forbidden",
+  "error": {
+    "cluster": "abc1",
+    "message": "Release not allowed on this branch",
+    "repositoryReleaseControl": {
+      "allowed": [
+        "main"
+      ]
+    }
+  }
+}

src/components/ReleaseButton.vue

@@ -48,27 +48,97 @@
         </b-dropdown-item-button>
       </div>
     </b-dropdown>
+    <b-modal
+      ref="my-modal"
+      hide-footer
+      title="Release restricted"
+    >
+      <div
+        class="d-block text-center"
+        v-if="error"
+      >
+        <h4>
+          Release to '{{ error.cluster }}' is restricted
+          <br>
+          from this branch!
+        </h4>
+        <div
+          class="text-left"
+          v-if="error.repositoryReleaseControl.allowed && error.repositoryReleaseControl.allowed.length > 0"
+        >
+          Allowed branches
+        </div>
+        <ul
+          class="text-left"
+          v-if="error.repositoryReleaseControl.allowed && error.repositoryReleaseControl.allowed.length > 0"
+        >
+          <li
+            v-for="branch in error.repositoryReleaseControl.allowed"
+            :key="branch"
+          >
+            {{ branch }}
+          </li>
+        </ul>
+        <div
+          class="text-left"
+          v-if="error.repositoryReleaseControl.blocked && error.repositoryReleaseControl.blocked.length > 0"
+        >
+          Blocked branches
+        </div>
+        <ul
+          class="text-left"
+          v-if="error.repositoryReleaseControl.blocked && error.repositoryReleaseControl.blocked.length > 0"
+        >
+          <li
+            v-for="branch in error.repositoryReleaseControl.blocked"
+            :key="branch"
+          >
+            {{ branch }}
+          </li>
+        </ul>
+      </div>
+      <b-button
+        block
+        class="mt-3"
+        variant="outline-danger"
+        @click="hideModal"
+      >
+        Close
+      </b-button>
+    </b-modal>
   </b-input-group>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { BDropdown, BDropdownHeader, BDropdownItemButton, BInputGroup, BInputGroupText } from 'bootstrap-vue'
+import {
+  BDropdown,
+  BDropdownHeader,
+  BDropdownItemButton,
+  BInputGroup,
+  BInputGroupText,
+  BModal,
+  BButton
+} from 'bootstrap-vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUpload } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faUpload)
 
+const releaseNotAllowed = 'Release not allowed on this branch'
+
 export default {
   components: {
     BDropdown,
     BDropdownHeader,
     BDropdownItemButton,
     BInputGroup,
     BInputGroupText,
-    FontAwesomeIcon
+    FontAwesomeIcon,
+    BModal,
+    BButton
   },
   props: {
     pipeline: {
@@ -80,19 +150,25 @@ export default {
       default: null
     }
   },
-
   data: function () {
     return {
-      clicked: false
+      clicked: false,
+      error: {
+        cluster: '',
+        repositoryReleaseControl: {
+          allowed: [],
+          blocked: []
+        }
+      }
     }
   },
 
   methods: {
     releaseTargetDisabled: function (releaseTarget) {
       return this.pipeline &&
-             this.pipeline.releaseTargets &&
-             this.pipeline.releaseTargets.length > 0 &&
-             this.pipeline.releaseTargets.some(rt => rt.name === releaseTarget.name && rt.activeReleases && rt.activeReleases.some(ar => ar && ar.releaseStatus === 'running'))
+        this.pipeline.releaseTargets &&
+        this.pipeline.releaseTargets.length > 0 &&
+        this.pipeline.releaseTargets.some(rt => rt.name === releaseTarget.name && rt.activeReleases && rt.activeReleases.some(ar => ar && ar.releaseStatus === 'running'))
     },
 
     startRelease: function (releaseTarget, action, event) {
@@ -114,7 +190,12 @@ export default {
             this.updateRelease(startedRelease)
           })
           .catch(e => {
-            console.warn(e)
+            if (e.message === releaseNotAllowed) {
+              this.error = e
+              this.$refs['my-modal'].show()
+            } else {
+              console.warn(e)
+            }
           })
       }
     },
@@ -156,6 +237,10 @@ export default {
 
     hasActions: function (releaseTarget) {
       return releaseTarget && releaseTarget.actions && releaseTarget.actions.length > 0
+    },
+
+    hideModal: function () {
+      this.$refs['my-modal'].hide()
     }
   },
 

src/main.js

@@ -51,8 +51,15 @@ Vue.axios.interceptors.response.use((response) => {
         break
     }
   }
-
-  return Promise.reject(new Error(error.response && error.response.data ? error.response.data.error : error.message))
+  if (error.response && error.response.data) {
+    if (typeof error.response.data.error === 'object') {
+      return Promise.reject(error.response.data.error)
+    } else {
+      return Promise.reject(new Error(error.response.data.error))
+    }
+  } else {
+    return Promise.reject(new Error(error.message))
+  }
 })
 
 // redirect to login page when user gets logged out