From 9e4af9eeeae0b30211fdaca9d6d32470711e3ea0 Mon Sep 17 00:00:00 2001
From: Paul Traylor <paul.traylor@linecorp.com>
Date: Wed, 2 Oct 2019 12:05:16 +0900
Subject: [PATCH] Allow disabling hosts

- Migrate from bootstrap-switch to vue.toggle
---
 ...e.txt => LICENSE.vue-js-toggle-button.txt} | 12 ++++-----
 promgen/admin.py                              |  2 +-
 promgen/migrations/0011_disable_host.py       | 14 +++++++++++
 promgen/models.py                             |  1 +
 promgen/prometheus.py                         |  2 +-
 promgen/serializers.py                        | 19 +++++++++++++-
 promgen/static/css/bootstrap-switch.min.css   | 10 --------
 promgen/static/js/bootstrap-switch.min.js     | 10 --------
 promgen/static/js/promgen.js                  | 16 ------------
 promgen/static/js/promgen.vue.js              | 25 +++++++++++++++++++
 promgen/static/js/vue.toggle.min.js           |  9 +++++++
 promgen/templates/base.html                   |  3 +--
 .../promgen/project_detail_exporters.html     | 13 ++++------
 .../promgen/project_detail_hosts.html         | 19 ++++++++------
 promgen/templates/promgen/rule_block.html     |  7 ++++--
 promgen/urls.py                               |  1 +
 promgen/views.py                              | 15 ++++++++---
 17 files changed, 111 insertions(+), 67 deletions(-)
 rename licenses/{LICENSE.bootstrap3-switch.apache.txt => LICENSE.vue-js-toggle-button.txt} (85%)
 create mode 100644 promgen/migrations/0011_disable_host.py
 delete mode 100755 promgen/static/css/bootstrap-switch.min.css
 delete mode 100755 promgen/static/js/bootstrap-switch.min.js
 create mode 100644 promgen/static/js/vue.toggle.min.js

diff --git a/licenses/LICENSE.bootstrap3-switch.apache.txt b/licenses/LICENSE.vue-js-toggle-button.txt
similarity index 85%
rename from licenses/LICENSE.bootstrap3-switch.apache.txt
rename to licenses/LICENSE.vue-js-toggle-button.txt
index 31e23cd19..845bb4428 100644
--- a/licenses/LICENSE.bootstrap3-switch.apache.txt
+++ b/licenses/LICENSE.vue-js-toggle-button.txt
@@ -1,6 +1,6 @@
-The MIT License (MIT)
+MIT License
 
-Copyright (c) 2013-2015 The authors of Bootstrap Switch
+Copyright (c) 2017 Yev Vlasenko
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/promgen/admin.py b/promgen/admin.py
index 1e6390a5e..7910a8994 100644
--- a/promgen/admin.py
+++ b/promgen/admin.py
@@ -17,7 +17,7 @@ class FilterInline(admin.TabularInline):
 
 @admin.register(models.Host)
 class HostAdmin(admin.ModelAdmin):
-    list_display = ('name', 'farm')
+    list_display = ("name", "farm", "enabled")
 
 
 @admin.register(models.Shard)
diff --git a/promgen/migrations/0011_disable_host.py b/promgen/migrations/0011_disable_host.py
new file mode 100644
index 000000000..a83bb823f
--- /dev/null
+++ b/promgen/migrations/0011_disable_host.py
@@ -0,0 +1,14 @@
+# Generated by Django 2.2.4 on 2019-10-02 01:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [("promgen", "0010_app_label_migration")]
+
+    operations = [
+        migrations.AddField(
+            model_name="host", name="enabled", field=models.BooleanField(default=True)
+        )
+    ]
diff --git a/promgen/models.py b/promgen/models.py
index 02be6a63d..3a6fd3a57 100644
--- a/promgen/models.py
+++ b/promgen/models.py
@@ -304,6 +304,7 @@ def __str__(self):
 class Host(models.Model):
     name = models.CharField(max_length=128)
     farm = models.ForeignKey('Farm', on_delete=models.CASCADE)
+    enabled = models.BooleanField(default=True)
 
     class Meta:
         ordering = ['name']
diff --git a/promgen/prometheus.py b/promgen/prometheus.py
index 72aff0527..c38a2f182 100644
--- a/promgen/prometheus.py
+++ b/promgen/prometheus.py
@@ -161,7 +161,7 @@ def render_config(service=None, project=None):
             labels['__metrics_path__'] = exporter.path
 
         hosts = []
-        for host in exporter.project.farm.host_set.all():
+        for host in exporter.project.farm.host_set.filter(enabled=True):
             hosts.append('{}:{}'.format(host.name, exporter.port))
 
         data.append({
diff --git a/promgen/serializers.py b/promgen/serializers.py
index c15760ae2..4c467598d 100644
--- a/promgen/serializers.py
+++ b/promgen/serializers.py
@@ -48,4 +48,21 @@ class SenderSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = models.Sender
-        fields = ('sender', 'owner', 'label')
+
+
+class HostSeralizer(serializers.ModelSerializer):
+    class Meta:
+        model = models.Host
+        fields = ("pk", "name", "enabled")
+
+
+class ExporterSeralizer(serializers.ModelSerializer):
+    class Meta:
+        model = models.Exporter
+        fields = ("pk", "job", "port", "enabled")
+
+
+class RuleSeralizer(serializers.ModelSerializer):
+    class Meta:
+        model = models.Rule
+        fields = ("pk", "name", "enabled")
diff --git a/promgen/static/css/bootstrap-switch.min.css b/promgen/static/css/bootstrap-switch.min.css
deleted file mode 100755
index 77006595e..000000000
--- a/promgen/static/css/bootstrap-switch.min.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
-  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
-  *
-  * @version v3.3.4
-  * @homepage https://bttstrp.github.io/bootstrap-switch
-  * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
-  * @license Apache-2.0
-  */
-
-.bootstrap-switch{display:inline-block;direction:ltr;cursor:pointer;border-radius:4px;border:1px solid #ccc;position:relative;text-align:left;overflow:hidden;line-height:8px;z-index:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.bootstrap-switch .bootstrap-switch-container{display:inline-block;top:0;border-radius:4px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-label{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:table-cell;vertical-align:middle;padding:6px 12px;font-size:14px;line-height:20px}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on{text-align:center;z-index:1}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{color:#fff;background:#337ab7}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info{color:#fff;background:#5bc0de}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{color:#fff;background:#5cb85c}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning{background:#f0ad4e;color:#fff}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger{color:#fff;background:#d9534f}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default{color:#000;background:#eee}.bootstrap-switch .bootstrap-switch-label{text-align:center;margin-top:-1px;margin-bottom:-1px;z-index:100;color:#333;background:#fff}.bootstrap-switch span::before{content:"\200b"}.bootstrap-switch .bootstrap-switch-handle-on{border-bottom-left-radius:3px;border-top-left-radius:3px}.bootstrap-switch .bootstrap-switch-handle-off{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch input[type=radio],.bootstrap-switch input[type=checkbox]{position:absolute!important;top:0;left:0;margin:0;z-index:-1;opacity:0;filter:alpha(opacity=0);visibility:hidden}.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label{padding:1px 5px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label{padding:5px 10px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label{padding:6px 16px;font-size:18px;line-height:1.3333333}.bootstrap-switch.bootstrap-switch-disabled,.bootstrap-switch.bootstrap-switch-indeterminate,.bootstrap-switch.bootstrap-switch-readonly{cursor:default!important}.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label{opacity:.5;filter:alpha(opacity=50);cursor:default!important}.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container{-webkit-transition:margin-left .5s;-o-transition:margin-left .5s;transition:margin-left .5s}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on{border-radius:0 3px 3px 0}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off{border-radius:3px 0 0 3px}.bootstrap-switch.bootstrap-switch-focused{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{border-bottom-left-radius:3px;border-top-left-radius:3px}
\ No newline at end of file
diff --git a/promgen/static/js/bootstrap-switch.min.js b/promgen/static/js/bootstrap-switch.min.js
deleted file mode 100755
index 1381dc110..000000000
--- a/promgen/static/js/bootstrap-switch.min.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
-  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
-  *
-  * @version v3.3.4
-  * @homepage https://bttstrp.github.io/bootstrap-switch
-  * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
-  * @license Apache-2.0
-  */
-
-(function(a,b){if('function'==typeof define&&define.amd)define(['jquery'],b);else if('undefined'!=typeof exports)b(require('jquery'));else{b(a.jquery),a.bootstrapSwitch={exports:{}}.exports}})(this,function(a){'use strict';function c(j,k){if(!(j instanceof k))throw new TypeError('Cannot call a class as a function')}var d=function(j){return j&&j.__esModule?j:{default:j}}(a),e=Object.assign||function(j){for(var l,k=1;k<arguments.length;k++)for(var m in l=arguments[k],l)Object.prototype.hasOwnProperty.call(l,m)&&(j[m]=l[m]);return j},f=function(){function j(k,l){for(var n,m=0;m<l.length;m++)n=l[m],n.enumerable=n.enumerable||!1,n.configurable=!0,'value'in n&&(n.writable=!0),Object.defineProperty(k,n.key,n)}return function(k,l,m){return l&&j(k.prototype,l),m&&j(k,m),k}}(),g=d.default||window.jQuery||window.$,h=function(){function j(k){var l=this,m=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};c(this,j),this.$element=g(k),this.options=g.extend({},g.fn.bootstrapSwitch.defaults,this._getElementOptions(),m),this.prevOptions={},this.$wrapper=g('<div>',{class:function(){var o=[];return o.push(l.options.state?'on':'off'),l.options.size&&o.push(l.options.size),l.options.disabled&&o.push('disabled'),l.options.readonly&&o.push('readonly'),l.options.indeterminate&&o.push('indeterminate'),l.options.inverse&&o.push('inverse'),l.$element.attr('id')&&o.push('id-'+l.$element.attr('id')),o.map(l._getClass.bind(l)).concat([l.options.baseClass],l._getClasses(l.options.wrapperClass)).join(' ')}}),this.$container=g('<div>',{class:this._getClass('container')}),this.$on=g('<span>',{html:this.options.onText,class:this._getClass('handle-on')+' '+this._getClass(this.options.onColor)}),this.$off=g('<span>',{html:this.options.offText,class:this._getClass('handle-off')+' '+this._getClass(this.options.offColor)}),this.$label=g('<span>',{html:this.options.labelText,class:this._getClass('label')}),this.$element.on('init.bootstrapSwitch',this.options.onInit.bind(this,k)),this.$element.on('switchChange.bootstrapSwitch',function(){for(var n=arguments.length,o=Array(n),p=0;p<n;p++)o[p]=arguments[p];!1===l.options.onSwitchChange.apply(k,o)&&(l.$element.is(':radio')?g('[name="'+l.$element.attr('name')+'"]').trigger('previousState.bootstrapSwitch',!0):l.$element.trigger('previousState.bootstrapSwitch',!0))}),this.$container=this.$element.wrap(this.$container).parent(),this.$wrapper=this.$container.wrap(this.$wrapper).parent(),this.$element.before(this.options.inverse?this.$off:this.$on).before(this.$label).before(this.options.inverse?this.$on:this.$off),this.options.indeterminate&&this.$element.prop('indeterminate',!0),this._init(),this._elementHandlers(),this._handleHandlers(),this._labelHandlers(),this._formHandler(),this._externalLabelHandler(),this.$element.trigger('init.bootstrapSwitch',this.options.state)}return f(j,[{key:'setPrevOptions',value:function(){this.prevOptions=e({},this.options)}},{key:'state',value:function(l,m){return'undefined'==typeof l?this.options.state:this.options.disabled||this.options.readonly||this.options.state&&!this.options.radioAllOff&&this.$element.is(':radio')?this.$element:(this.$element.is(':radio')?g('[name="'+this.$element.attr('name')+'"]').trigger('setPreviousOptions.bootstrapSwitch'):this.$element.trigger('setPreviousOptions.bootstrapSwitch'),this.options.indeterminate&&this.indeterminate(!1),this.$element.prop('checked',!!l).trigger('change.bootstrapSwitch',m),this.$element)}},{key:'toggleState',value:function(l){return this.options.disabled||this.options.readonly?this.$element:this.options.indeterminate?(this.indeterminate(!1),this.state(!0)):this.$element.prop('checked',!this.options.state).trigger('change.bootstrapSwitch',l)}},{key:'size',value:function(l){return'undefined'==typeof l?this.options.size:(null!=this.options.size&&this.$wrapper.removeClass(this._getClass(this.options.size)),l&&this.$wrapper.addClass(this._getClass(l)),this._width(),this._containerPosition(),this.options.size=l,this.$element)}},{key:'animate',value:function(l){return'undefined'==typeof l?this.options.animate:this.options.animate===!!l?this.$element:this.toggleAnimate()}},{key:'toggleAnimate',value:function(){return this.options.animate=!this.options.animate,this.$wrapper.toggleClass(this._getClass('animate')),this.$element}},{key:'disabled',value:function(l){return'undefined'==typeof l?this.options.disabled:this.options.disabled===!!l?this.$element:this.toggleDisabled()}},{key:'toggleDisabled',value:function(){return this.options.disabled=!this.options.disabled,this.$element.prop('disabled',this.options.disabled),this.$wrapper.toggleClass(this._getClass('disabled')),this.$element}},{key:'readonly',value:function(l){return'undefined'==typeof l?this.options.readonly:this.options.readonly===!!l?this.$element:this.toggleReadonly()}},{key:'toggleReadonly',value:function(){return this.options.readonly=!this.options.readonly,this.$element.prop('readonly',this.options.readonly),this.$wrapper.toggleClass(this._getClass('readonly')),this.$element}},{key:'indeterminate',value:function(l){return'undefined'==typeof l?this.options.indeterminate:this.options.indeterminate===!!l?this.$element:this.toggleIndeterminate()}},{key:'toggleIndeterminate',value:function(){return this.options.indeterminate=!this.options.indeterminate,this.$element.prop('indeterminate',this.options.indeterminate),this.$wrapper.toggleClass(this._getClass('indeterminate')),this._containerPosition(),this.$element}},{key:'inverse',value:function(l){return'undefined'==typeof l?this.options.inverse:this.options.inverse===!!l?this.$element:this.toggleInverse()}},{key:'toggleInverse',value:function(){this.$wrapper.toggleClass(this._getClass('inverse'));var l=this.$on.clone(!0),m=this.$off.clone(!0);return this.$on.replaceWith(m),this.$off.replaceWith(l),this.$on=m,this.$off=l,this.options.inverse=!this.options.inverse,this.$element}},{key:'onColor',value:function(l){return'undefined'==typeof l?this.options.onColor:(this.options.onColor&&this.$on.removeClass(this._getClass(this.options.onColor)),this.$on.addClass(this._getClass(l)),this.options.onColor=l,this.$element)}},{key:'offColor',value:function(l){return'undefined'==typeof l?this.options.offColor:(this.options.offColor&&this.$off.removeClass(this._getClass(this.options.offColor)),this.$off.addClass(this._getClass(l)),this.options.offColor=l,this.$element)}},{key:'onText',value:function(l){return'undefined'==typeof l?this.options.onText:(this.$on.html(l),this._width(),this._containerPosition(),this.options.onText=l,this.$element)}},{key:'offText',value:function(l){return'undefined'==typeof l?this.options.offText:(this.$off.html(l),this._width(),this._containerPosition(),this.options.offText=l,this.$element)}},{key:'labelText',value:function(l){return'undefined'==typeof l?this.options.labelText:(this.$label.html(l),this._width(),this.options.labelText=l,this.$element)}},{key:'handleWidth',value:function(l){return'undefined'==typeof l?this.options.handleWidth:(this.options.handleWidth=l,this._width(),this._containerPosition(),this.$element)}},{key:'labelWidth',value:function(l){return'undefined'==typeof l?this.options.labelWidth:(this.options.labelWidth=l,this._width(),this._containerPosition(),this.$element)}},{key:'baseClass',value:function(){return this.options.baseClass}},{key:'wrapperClass',value:function(l){return'undefined'==typeof l?this.options.wrapperClass:(l||(l=g.fn.bootstrapSwitch.defaults.wrapperClass),this.$wrapper.removeClass(this._getClasses(this.options.wrapperClass).join(' ')),this.$wrapper.addClass(this._getClasses(l).join(' ')),this.options.wrapperClass=l,this.$element)}},{key:'radioAllOff',value:function(l){if('undefined'==typeof l)return this.options.radioAllOff;var m=!!l;return this.options.radioAllOff===m?this.$element:(this.options.radioAllOff=m,this.$element)}},{key:'onInit',value:function(l){return'undefined'==typeof l?this.options.onInit:(l||(l=g.fn.bootstrapSwitch.defaults.onInit),this.options.onInit=l,this.$element)}},{key:'onSwitchChange',value:function(l){return'undefined'==typeof l?this.options.onSwitchChange:(l||(l=g.fn.bootstrapSwitch.defaults.onSwitchChange),this.options.onSwitchChange=l,this.$element)}},{key:'destroy',value:function(){var l=this.$element.closest('form');return l.length&&l.off('reset.bootstrapSwitch').removeData('bootstrap-switch'),this.$container.children().not(this.$element).remove(),this.$element.unwrap().unwrap().off('.bootstrapSwitch').removeData('bootstrap-switch'),this.$element}},{key:'_getElementOptions',value:function(){return{state:this.$element.is(':checked'),size:this.$element.data('size'),animate:this.$element.data('animate'),disabled:this.$element.is(':disabled'),readonly:this.$element.is('[readonly]'),indeterminate:this.$element.data('indeterminate'),inverse:this.$element.data('inverse'),radioAllOff:this.$element.data('radio-all-off'),onColor:this.$element.data('on-color'),offColor:this.$element.data('off-color'),onText:this.$element.data('on-text'),offText:this.$element.data('off-text'),labelText:this.$element.data('label-text'),handleWidth:this.$element.data('handle-width'),labelWidth:this.$element.data('label-width'),baseClass:this.$element.data('base-class'),wrapperClass:this.$element.data('wrapper-class')}}},{key:'_width',value:function(){var l=this,m=this.$on.add(this.$off).add(this.$label).css('width',''),n='auto'===this.options.handleWidth?Math.round(Math.max(this.$on.width(),this.$off.width())):this.options.handleWidth;return m.width(n),this.$label.width(function(o,p){return'auto'===l.options.labelWidth?p<n?n:p:l.options.labelWidth}),this._handleWidth=this.$on.outerWidth(),this._labelWidth=this.$label.outerWidth(),this.$container.width(2*this._handleWidth+this._labelWidth),this.$wrapper.width(this._handleWidth+this._labelWidth)}},{key:'_containerPosition',value:function(){var l=this,m=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.options.state,n=arguments[1];this.$container.css('margin-left',function(){var o=[0,'-'+l._handleWidth+'px'];return l.options.indeterminate?'-'+l._handleWidth/2+'px':m?l.options.inverse?o[1]:o[0]:l.options.inverse?o[0]:o[1]})}},{key:'_init',value:function(){var l=this,m=function(){l.setPrevOptions(),l._width(),l._containerPosition(),setTimeout(function(){if(l.options.animate)return l.$wrapper.addClass(l._getClass('animate'))},50)};if(this.$wrapper.is(':visible'))return void m();var n=window.setInterval(function(){if(l.$wrapper.is(':visible'))return m(),window.clearInterval(n)},50)}},{key:'_elementHandlers',value:function(){var l=this;return this.$element.on({'setPreviousOptions.bootstrapSwitch':this.setPrevOptions.bind(this),'previousState.bootstrapSwitch':function(){l.options=l.prevOptions,l.options.indeterminate&&l.$wrapper.addClass(l._getClass('indeterminate')),l.$element.prop('checked',l.options.state).trigger('change.bootstrapSwitch',!0)},'change.bootstrapSwitch':function(n,o){n.preventDefault(),n.stopImmediatePropagation();var p=l.$element.is(':checked');l._containerPosition(p),p===l.options.state||(l.options.state=p,l.$wrapper.toggleClass(l._getClass('off')).toggleClass(l._getClass('on')),!o&&(l.$element.is(':radio')&&g('[name="'+l.$element.attr('name')+'"]').not(l.$element).prop('checked',!1).trigger('change.bootstrapSwitch',!0),l.$element.trigger('switchChange.bootstrapSwitch',[p])))},'focus.bootstrapSwitch':function(n){n.preventDefault(),l.$wrapper.addClass(l._getClass('focused'))},'blur.bootstrapSwitch':function(n){n.preventDefault(),l.$wrapper.removeClass(l._getClass('focused'))},'keydown.bootstrapSwitch':function(n){!n.which||l.options.disabled||l.options.readonly||(37===n.which||39===n.which)&&(n.preventDefault(),n.stopImmediatePropagation(),l.state(39===n.which))}})}},{key:'_handleHandlers',value:function(){var l=this;return this.$on.on('click.bootstrapSwitch',function(m){return m.preventDefault(),m.stopPropagation(),l.state(!1),l.$element.trigger('focus.bootstrapSwitch')}),this.$off.on('click.bootstrapSwitch',function(m){return m.preventDefault(),m.stopPropagation(),l.state(!0),l.$element.trigger('focus.bootstrapSwitch')})}},{key:'_labelHandlers',value:function(){var l=this;this.$label.on({click:function(o){o.stopPropagation()},'mousedown.bootstrapSwitch touchstart.bootstrapSwitch':function(o){l._dragStart||l.options.disabled||l.options.readonly||(o.preventDefault(),o.stopPropagation(),l._dragStart=(o.pageX||o.originalEvent.touches[0].pageX)-parseInt(l.$container.css('margin-left'),10),l.options.animate&&l.$wrapper.removeClass(l._getClass('animate')),l.$element.trigger('focus.bootstrapSwitch'))},'mousemove.bootstrapSwitch touchmove.bootstrapSwitch':function(o){if(null!=l._dragStart){var p=(o.pageX||o.originalEvent.touches[0].pageX)-l._dragStart;o.preventDefault(),p<-l._handleWidth||0<p||(l._dragEnd=p,l.$container.css('margin-left',l._dragEnd+'px'))}},'mouseup.bootstrapSwitch touchend.bootstrapSwitch':function(o){if(l._dragStart){if(o.preventDefault(),l.options.animate&&l.$wrapper.addClass(l._getClass('animate')),l._dragEnd){var p=l._dragEnd>-(l._handleWidth/2);l._dragEnd=!1,l.state(l.options.inverse?!p:p)}else l.state(!l.options.state);l._dragStart=!1}},'mouseleave.bootstrapSwitch':function(){l.$label.trigger('mouseup.bootstrapSwitch')}})}},{key:'_externalLabelHandler',value:function(){var l=this,m=this.$element.closest('label');m.on('click',function(n){n.preventDefault(),n.stopImmediatePropagation(),n.target===m[0]&&l.toggleState()})}},{key:'_formHandler',value:function(){var l=this.$element.closest('form');l.data('bootstrap-switch')||l.on('reset.bootstrapSwitch',function(){window.setTimeout(function(){l.find('input').filter(function(){return g(this).data('bootstrap-switch')}).each(function(){return g(this).bootstrapSwitch('state',this.checked)})},1)}).data('bootstrap-switch',!0)}},{key:'_getClass',value:function(l){return this.options.baseClass+'-'+l}},{key:'_getClasses',value:function(l){return g.isArray(l)?l.map(this._getClass.bind(this)):[this._getClass(l)]}}]),j}();g.fn.bootstrapSwitch=function(j){for(var l=arguments.length,m=Array(1<l?l-1:0),n=1;n<l;n++)m[n-1]=arguments[n];return Array.prototype.reduce.call(this,function(o,p){var q=g(p),r=q.data('bootstrap-switch'),s=r||new h(p,j);return r||q.data('bootstrap-switch',s),'string'==typeof j?s[j].apply(s,m):o},this)},g.fn.bootstrapSwitch.Constructor=h,g.fn.bootstrapSwitch.defaults={state:!0,size:null,animate:!0,disabled:!1,readonly:!1,indeterminate:!1,inverse:!1,radioAllOff:!1,onColor:'primary',offColor:'default',onText:'ON',offText:'OFF',labelText:'&nbsp',handleWidth:'auto',labelWidth:'auto',baseClass:'bootstrap-switch',wrapperClass:'wrapper',onInit:function(){},onSwitchChange:function(){}}});
diff --git a/promgen/static/js/promgen.js b/promgen/static/js/promgen.js
index 4f955fbca..f969cc7a7 100644
--- a/promgen/static/js/promgen.js
+++ b/promgen/static/js/promgen.js
@@ -64,22 +64,6 @@ $(document).ready(function() {
     $(ele.data('copyto')).val(ele.text())
   }).css('cursor', 'pointer');
 
-  $('[data-toggle="toggle"]').bootstrapSwitch();
-  $('[data-toggle="toggle"][data-action]').on('switchChange.bootstrapSwitch', function(event, state) {
-    if (window.confirm("Are you sure?")) {
-      $.post(this.dataset.action, this.dataset).done(function(data){
-        // Ideally we would directly update things that need to be updated
-        // but a page redraw is a bit easier since that also allows us to
-        // update our page messages
-        window.location = data.redirect
-      });
-    } else {
-      // If we click the cancel button, then we restore the old state and
-      // use the third parameter to skip re-firing the change event
-      $(this).bootstrapSwitch('state', !state, true);
-    }
-  });
-
   $('[data-filter]').change(function(){
     var search = this.value.toUpperCase();
     $(this.dataset.filter).each(function(i, ele){
diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
index 9b9d7eda5..fed06dd09 100644
--- a/promgen/static/js/promgen.vue.js
+++ b/promgen/static/js/promgen.vue.js
@@ -3,6 +3,8 @@
 # These sources are released under the terms of the MIT license: see LICENSE
 */
 
+Vue.use(window['vue-js-toggle-button'].default)
+
 Vue.config.devtools = true
 
 var dataStore = {
@@ -12,10 +14,33 @@ var dataStore = {
     globalMessages: []
 };
 
+/* Django CSRF compat */
+function readCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+}
+
 var app = new Vue({
     el: '#vue',
     data: dataStore,
     methods: {
+        toggleEnabled: function (event) {
+            let ele = event.srcElement.parentNode.dataset;
+            console.log(ele);
+            // TODO: Fix animation on confirmation
+            if (window.confirm(ele.confirm)) {
+                fetch(ele.target, { method: 'POST', headers: { "X-CSRFToken": readCookie('csrftoken') } })
+                    .then(function (response) {
+                        location.reload();
+                    })
+            }
+        },
         toggleTarget: function (target) {
             let tgt = document.getElementById(target);
             tgt.classList.toggle('collapse');
diff --git a/promgen/static/js/vue.toggle.min.js b/promgen/static/js/vue.toggle.min.js
new file mode 100644
index 000000000..61d8a5f0c
--- /dev/null
+++ b/promgen/static/js/vue.toggle.min.js
@@ -0,0 +1,9 @@
+/**
+ * Minified by jsDelivr using Terser v3.14.1.
+ * Original file: /npm/vue-js-toggle-button@1.3.2/dist/index.js
+ * https://github.com/euvl/vue-js-toggle-button
+ * 
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-js-toggle-button"]=t():e["vue-js-toggle-button"]=t()}(this,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=2)}([function(e,t,n){n(7);var o=n(5)(n(1),n(6),"data-v-25adc6c0",null);e.exports=o.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=function(e,t){return"object"===(void 0===e?"undefined":o(e))&&e.hasOwnProperty(t)},i=function(e){return e+"px"},s=function(e,t){return"translate3d("+e+", "+t+", "+(arguments.length>2&&void 0!==arguments[2]?arguments[2]:"0px")+")"};t.default={name:"ToggleButton",props:{value:{type:Boolean,default:!1},name:{type:String},disabled:{type:Boolean,default:!1},sync:{type:Boolean,default:!1},speed:{type:Number,default:300},color:{type:[String,Object],validator:function(e){return"object"===(void 0===e?"undefined":o(e))?e.checked||e.unchecked||e.disabled:"string"==typeof e}},switchColor:{type:[String,Object],validator:function(e){return"object"===(void 0===e?"undefined":o(e))?e.checked||e.unchecked:"string"==typeof e}},cssColors:{type:Boolean,default:!1},labels:{type:[Boolean,Object],default:!1,validator:function(e){return"object"===(void 0===e?"undefined":o(e))?e.checked||e.unchecked:"boolean"==typeof e}},height:{type:Number,default:22},width:{type:Number,default:50},margin:{type:Number,default:3},fontSize:{type:Number}},computed:{className:function(){return["vue-js-switch",{toggled:this.toggled,disabled:this.disabled}]},coreStyle:function(){return{width:i(this.width),height:i(this.height),backgroundColor:this.cssColors?null:this.disabled?this.colorDisabled:this.colorCurrent,borderRadius:i(Math.round(this.height/2))}},buttonRadius:function(){return this.height-2*this.margin},distance:function(){return i(this.width-this.height+this.margin)},buttonStyle:function(){var e="transform "+this.speed+"ms",t=i(this.margin),n=this.toggled?s(this.distance,t):s(t,t),o=this.switchColor?this.switchColorCurrent:null;return{width:i(this.buttonRadius),height:i(this.buttonRadius),transition:e,transform:n,background:o}},labelStyle:function(){return{lineHeight:i(this.height),fontSize:this.fontSize?i(this.fontSize):null}},colorChecked:function(){var e=this.color;return"object"!==(void 0===e?"undefined":o(e))?e||"#75c791":r(e,"checked")?e.checked:"#75c791"},colorUnchecked:function(){var e=this.color;return r(e,"unchecked")?e.unchecked:"#bfcbd9"},colorDisabled:function(){var e=this.color;return r(e,"disabled")?e.disabled:this.colorCurrent},colorCurrent:function(){return this.toggled?this.colorChecked:this.colorUnchecked},labelChecked:function(){var e=this.labels;return r(e,"checked")?e.checked:"on"},labelUnchecked:function(){var e=this.labels;return r(e,"unchecked")?e.unchecked:"off"},switchColorChecked:function(){var e=this.switchColor;return r(e,"checked")?e.checked:"#fff"},switchColorUnchecked:function(){var e=this.switchColor;return r(e,"unchecked")?e.unchecked:"#fff"},switchColorCurrent:function(){var e=this.switchColor;return"object"!==(void 0===e?"undefined":o(e))?e||"#fff":this.toggled?this.switchColorChecked:this.switchColorUnchecked}},watch:{value:function(e){this.sync&&(this.toggled=!!e)}},data:function(){return{toggled:!!this.value}},methods:{toggle:function(e){this.toggled=!this.toggled,this.$emit("input",this.toggled),this.$emit("change",{value:this.toggled,srcEvent:e})}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),r=n.n(o);n.d(t,"ToggleButton",function(){return r.a});var i=!1;t.default={install:function(e){i||(e.component("ToggleButton",r.a),i=!0)}}},function(e,t,n){(e.exports=n(4)()).push([e.i,".vue-js-switch[data-v-25adc6c0]{display:inline-block;position:relative;vertical-align:middle;user-select:none;font-size:10px;cursor:pointer}.vue-js-switch .v-switch-input[data-v-25adc6c0]{opacity:0;position:absolute;width:1px;height:1px}.vue-js-switch .v-switch-label[data-v-25adc6c0]{position:absolute;top:0;font-weight:600;color:#fff;z-index:1}.vue-js-switch .v-switch-label.v-left[data-v-25adc6c0]{left:10px}.vue-js-switch .v-switch-label.v-right[data-v-25adc6c0]{right:10px}.vue-js-switch .v-switch-core[data-v-25adc6c0]{display:block;position:relative;box-sizing:border-box;outline:0;margin:0;transition:border-color .3s,background-color .3s;user-select:none}.vue-js-switch .v-switch-core .v-switch-button[data-v-25adc6c0]{display:block;position:absolute;overflow:hidden;top:0;left:0;border-radius:100%;background-color:#fff;z-index:2}.vue-js-switch.disabled[data-v-25adc6c0]{pointer-events:none;opacity:.6}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},r=0;r<this.length;r++){var i=this[r][0];"number"==typeof i&&(o[i]=!0)}for(r=0;r<t.length;r++){var s=t[r];"number"==typeof s[0]&&o[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),e.push(s))}},e}},function(e,t){e.exports=function(e,t,n,o){var r,i=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(r=e,i=e.default);var c="function"==typeof i?i.options:i;if(t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns),n&&(c._scopeId=n),o){var a=Object.create(c.computed||null);Object.keys(o).forEach(function(e){var t=o[e];a[e]=function(){return t}}),c.computed=a}return{esModule:r,exports:i,options:c}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{class:e.className},[n("input",{staticClass:"v-switch-input",attrs:{type:"checkbox",name:e.name,disabled:e.disabled},domProps:{checked:e.value},on:{change:function(t){return t.stopPropagation(),e.toggle(t)}}}),e._v(" "),n("div",{staticClass:"v-switch-core",style:e.coreStyle},[n("div",{staticClass:"v-switch-button",style:e.buttonStyle})]),e._v(" "),e.labels?[e.toggled?n("span",{staticClass:"v-switch-label v-left",style:e.labelStyle},[e._t("checked",[[e._v(e._s(e.labelChecked))]])],2):n("span",{staticClass:"v-switch-label v-right",style:e.labelStyle},[e._t("unchecked",[[e._v(e._s(e.labelUnchecked))]])],2)]:e._e()],2)},staticRenderFns:[]}},function(e,t,n){var o=n(3);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);n(8)("2283861f",o,!0)},function(e,t,n){var o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var r=n(9),i={},s=o&&(document.head||document.getElementsByTagName("head")[0]),c=null,a=0,u=!1,l=function(){},d="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(e){for(var t=0;t<e.length;t++){var n=e[t],o=i[n.id];if(o){o.refs++;for(var r=0;r<o.parts.length;r++)o.parts[r](n.parts[r]);for(;r<n.parts.length;r++)o.parts.push(p(n.parts[r]));o.parts.length>n.parts.length&&(o.parts.length=n.parts.length)}else{var s=[];for(r=0;r<n.parts.length;r++)s.push(p(n.parts[r]));i[n.id]={id:n.id,refs:1,parts:s}}}}function f(){var e=document.createElement("style");return e.type="text/css",s.appendChild(e),e}function p(e){var t,n,o=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(o){if(u)return l;o.parentNode.removeChild(o)}if(d){var r=a++;o=c||(c=f()),t=g.bind(null,o,r,!1),n=g.bind(null,o,r,!0)}else o=f(),t=function(e,t){var n=t.css,o=t.media,r=t.sourceMap;o&&e.setAttribute("media",o);r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}.bind(null,o),n=function(){o.parentNode.removeChild(o)};return t(e),function(o){if(o){if(o.css===e.css&&o.media===e.media&&o.sourceMap===e.sourceMap)return;t(e=o)}else n()}}e.exports=function(e,t,n){u=n;var o=r(e,t);return h(o),function(t){for(var n=[],s=0;s<o.length;s++){var c=o[s];(a=i[c.id]).refs--,n.push(a)}t?h(o=r(e,t)):o=[];for(s=0;s<n.length;s++){var a;if(0===(a=n[s]).refs){for(var u=0;u<a.parts.length;u++)a.parts[u]();delete i[a.id]}}}};var v,b=(v=[],function(e,t){return v[e]=t,v.filter(Boolean).join("\n")});function g(e,t,n,o){var r=n?"":o.css;if(e.styleSheet)e.styleSheet.cssText=b(t,r);else{var i=document.createTextNode(r),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(i,s[t]):e.appendChild(i)}}},function(e,t){e.exports=function(e,t){for(var n=[],o={},r=0;r<t.length;r++){var i=t[r],s=i[0],c={id:e+":"+r,css:i[1],media:i[2],sourceMap:i[3]};o[s]?o[s].parts.push(c):n.push(o[s]={id:s,parts:[c]})}return n}}])});
+//# sourceMappingURL=/sm/1f18d78d9b248f1e6a6661b42c5452143ed724d46c4fd23491c5a97ef34ab6ab.map
diff --git a/promgen/templates/base.html b/promgen/templates/base.html
index 1e7284ed7..da8ae8ae8 100644
--- a/promgen/templates/base.html
+++ b/promgen/templates/base.html
@@ -8,7 +8,6 @@
   <title>{% block title %}Promgen {{ VERSION }}{% endblock %}</title>
   <link rel="stylesheet" href="{% static "/css/bootstrap.min.css" %}">
   <link rel="stylesheet" href="{% static "/css/bootstrap-theme.min.css" %}">
-  <link rel="stylesheet" href="{% static "/css/bootstrap-switch.min.css" %}">
   <link rel="stylesheet" href="{% static "/css/promgen.css" %}">
   <link rel="icon" href="{% static "/images/promgen_logo_color.png" %}">
 </head>
@@ -31,10 +30,10 @@
   <script src="{% static "/js/bootstrap.min.js" %}"></script>
   <script src="{% static "/js/bootstrap3-typeahead.min.js" %}"></script>
   <script src="{% static "/js/moment.min.js" %}"></script>
-  <script src="{% static "/js/bootstrap-switch.min.js" %}"></script>
   <script src="{% static "/js/linkify.min.js" %}"></script>
   <script src="{% static "/js/linkify-string.min.js" %}"></script>
   <script src="{% static "/js/vue.min.js" %}"></script>
+  <script src="{% static "/js/vue.toggle.min.js" %}"></script>
   <script src="{% static "/js/promgen.js" %}"></script>
   <script src="{% static "/js/promgen.vue.js" %}"></script>
   {% block javascript %}{% endblock %}
diff --git a/promgen/templates/promgen/project_detail_exporters.html b/promgen/templates/promgen/project_detail_exporters.html
index 945234f3f..f285d12a1 100644
--- a/promgen/templates/promgen/project_detail_exporters.html
+++ b/promgen/templates/promgen/project_detail_exporters.html
@@ -17,14 +17,11 @@
       <td>{{ exporter.port }}</td>
       <td>{{ exporter.path | default:"/metrics" }}</td>
       <td style="white-space: nowrap">
-        <input
-          type="checkbox"
-          {% if exporter.enabled %}checked{% endif %}
-          data-size="mini"
-          data-toggle="toggle"
-          data-csrfmiddlewaretoken="{{csrf_token}}"
-          data-action="{% url 'exporter-toggle' exporter.id %}"
-        />
+        <toggle-button
+                       :value="{{exporter.enabled|lower}}"
+                       @click.native.prevent="toggleEnabled($event)"
+                       data-confirm="Are you sure you want to toggle this exporter?"
+                       data-target="{% url 'exporter-toggle' exporter.pk %}"></toggle-button>
       </td>
       <td>
         <form id="{{exporter.job}}_{{exporter.port}}">
diff --git a/promgen/templates/promgen/project_detail_hosts.html b/promgen/templates/promgen/project_detail_hosts.html
index 8259373de..e749748e9 100644
--- a/promgen/templates/promgen/project_detail_hosts.html
+++ b/promgen/templates/promgen/project_detail_hosts.html
@@ -4,14 +4,19 @@
   <table class="table">
     <tr>
       <th>Name</th>
-      <th>&nbsp;</th>
-    {% if project.farm.editable %}
-      <th>&nbsp;</th>
-    {% endif %}
+      <th>Enabled</th>
+      <th colspan="2">Actions</th>
     </tr>
-  {% for host in project.farm.host_set.all %}
+    {% for host in project.farm.host_set.all %}
     <tr>
       <td><a href="{% url 'host-detail' host.name %}">{{ host.name }}</a></td>
+      <td>
+        <toggle-button
+                       :value="{{host.enabled|lower}}"
+                       @click.native.prevent="toggleEnabled($event)"
+                       data-confirm="Are you sure you want to toggle this host?"
+                       data-target="{% url 'host-toggle' host.pk %}"></toggle-button>
+      </td>
       <td>
         <a
           @click.prevent="silenceSetLabels"
@@ -23,14 +28,14 @@
           style="display: inline-block;"
         >{% trans "Silence" %}</a>
       </td>
-      {% if project.farm.editable %}
       <td>
+        {% if project.farm.editable %}
         <form method="post" action="{% url 'host-delete' host.id %}" onsubmit="return confirm('{% trans "Delete this host?" %}');">
           {% csrf_token %}
         <button name="delete" type="submit" class="btn btn-danger btn-xs">{% trans "Delete" %}</button>
         </form>
+        {% endif %}
       </td>
-      {% endif %}
     </tr>
   {% endfor %}
   </table>
diff --git a/promgen/templates/promgen/rule_block.html b/promgen/templates/promgen/rule_block.html
index 4fa565b19..3e4821328 100644
--- a/promgen/templates/promgen/rule_block.html
+++ b/promgen/templates/promgen/rule_block.html
@@ -21,8 +21,11 @@
 
   {% if toggle %}
   <td style="white-space: nowrap">
-    <input type="checkbox" {% if rule.enabled %}checked{% endif %} data-size="mini" data-toggle="toggle" data-csrfmiddlewaretoken="{{csrf_token}}"
-      data-action="{% url 'rule-toggle' rule.id %}" />
+    <toggle-button
+                   :value="{{rule.enabled|lower}}"
+                   @click.native.prevent="toggleEnabled($event)"
+                   data-confirm="Are you sure you want to toggle this rule?"
+                   data-target="{% url 'rule-toggle' rule.pk %}"></toggle-button>
   </td>
   {% else %}
   <td>&nbsp;</td>
diff --git a/promgen/urls.py b/promgen/urls.py
index df055ecbb..d1d87364c 100644
--- a/promgen/urls.py
+++ b/promgen/urls.py
@@ -72,6 +72,7 @@
     path('host/', views.HostList.as_view(), name='host-list'),
     path('host/<slug>', views.HostDetail.as_view(), name='host-detail'),
     path('host/<int:pk>/delete', views.HostDelete.as_view(), name='host-delete'),
+    path('host/<int:pk>/toggle', views.HostToggle.as_view(), name='host-toggle'),
 
     path('notifier/<int:pk>/delete', views.NotifierDelete.as_view(), name='notifier-delete'),
     path('notifier/<int:pk>/test', views.NotifierTest.as_view(), name='notifier-test'),
diff --git a/promgen/views.py b/promgen/views.py
index 2de2a5a68..73e2a804d 100644
--- a/promgen/views.py
+++ b/promgen/views.py
@@ -14,7 +14,7 @@
 from prometheus_client import Gauge, generate_latest
 
 import promgen.templatetags.promgen as macro
-from promgen import (celery, discovery, forms, models, plugins, prometheus,
+from promgen import (celery, discovery, forms, models, plugins, prometheus, serializers,
                      signals, tasks, util, version)
 from promgen.shortcuts import resolve_domain
 
@@ -371,7 +371,7 @@ def post(self, request, pk):
         exporter.enabled = not exporter.enabled
         exporter.save()
         signals.trigger_write_config.send(request)
-        return JsonResponse({'redirect': exporter.project.get_absolute_url()})
+        return JsonResponse(serializers.ExporterSeralizer(exporter).data)
 
 
 class RuleDelete(PromgenPermissionMixin, DeleteView):
@@ -413,7 +413,7 @@ def get_permission_required(self):
     def post(self, request, pk):
         self.object.enabled = not self.object.enabled
         self.object.save()
-        return JsonResponse({'redirect': self.object.content_object.get_absolute_url()})
+        return JsonResponse(serializers.RuleSeralizer(self.object).data)
 
 
 class HostDelete(LoginRequiredMixin, DeleteView):
@@ -971,6 +971,15 @@ def form_valid(self, form):
         return redirect("project-detail", pk=farm.project_set.first().id)
 
 
+class HostToggle(LoginRequiredMixin, View):
+    def post(self, request, pk):
+        host = get_object_or_404(models.Host, pk=pk)
+        host.enabled = not host.enabled
+        host.save()
+        signals.trigger_write_config.send(request)
+        return JsonResponse(serializers.HostSeralizer(host).data)
+
+
 class ApiConfig(View):
     def get(self, request):
         return HttpResponse(prometheus.render_config(), content_type='application/json')