Refactors and brings back boolean_to_icon in form

app/views/projects/services/_form.html.haml

@@ -2,8 +2,10 @@
   .col-lg-3
     %h4.prepend-top-0
       = @service.title
-      = boolean_to_icon @service.activated?
-
+      - [true, false].each do | value |
+        - hide_class = 'd-none' if @service.activated? != value
+        %span.js-service-active-status{ class: hide_class, data: { value: value.to_s } }
+          = boolean_to_icon value
     %p= #{@service.description}.
 
     - if @service.respond_to?(:detailed_description)

ee/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue

@@ -82,14 +82,19 @@ export default {
   },
   watch: {
     activated() {
-      const inactive = document.querySelector('.fa-power-off');
-      const active = document.querySelector('.fa-circle');
-      this.activated
-        ? inactive && inactive.setAttribute('class', 'fa fa-circle cgreen')
-        : active && active.setAttribute('class', 'fa fa-power-off clgray');
+      this.updateIcon();
     },
   },
   methods: {
+    updateIcon() {
+      return document.querySelectorAll('.js-service-active-status').forEach(icon => {
+        if (icon.dataset.value === this.activated.toString()) {
+          icon.classList.remove('d-none');
+        } else {
+          icon.classList.add('d-none');
+        }
+      });
+    },
     resetKey() {
       return axios
         .put(this.formPath, { service: { token: '' } })