Toggle Polling from the UI (#174)

* Started working on remote poll toggling.

* Daughter woke up.

* Returning error in case API calls need correct values.

* Setting poller to false.

* Using a non-blocking send.

* Skeleton for using toggle switch.

* Skeleton for separate settings view.

* Working poller button... though ugly as hell.

* settings set on mount.

* Fixed settings mount.

* Polling enalbing / disabling is working now correctly. And mounted button shows correct status.

* Using a different style toggle button.

* Removed bulma-switch

* A vague table.

* Working vue good table!!!!

* First bunch of tests.

* Increased coverage and added ticket tests as well.

* Uh...

* This is not pretty.

* Looking a bit better.

* Using proper db and added a test.

* Error handling and added tests.

* Creating bucket and naming the object properly.

frontend/client/views/settings/index.vue

@@ -54,7 +54,7 @@
         <tab-pane label="Manage Permissions" icon="fa fa-users">
           <manage-permissions :users="userRows"/>
         </tab-pane>
-        <tab-pane label="Manage Pipelines" icon="fa fa-wrench">
+        <tab-pane label="Manage Pipelines" icon="fa fa-cog">
           <div class="tile is-ancestor">
             <div class="tile is-vertical">
               <div class="tile is-parent">
@@ -103,6 +103,9 @@
             </div>
           </div>
         </tab-pane>
+        <tab-pane label="Manage Settings" icon="fa fa-wrench">
+          <manage-settings/>
+        </tab-pane>
       </tabs>
     </div>
 
@@ -355,6 +358,7 @@
   import Notification from 'vue-bulma-notification-fixed'
   import {mapGetters} from 'vuex'
   import ManagePermissions from './permissions/manage-permissions'
+  import ManageSettings from './settings/manage-settings'
   import {EventBus} from '../../app'
 
   const NotificationComponent = Vue.extend(Notification)
@@ -382,7 +386,8 @@
       TabPane,
       Modal,
       Collapse,
-      CollapseItem
+      CollapseItem,
+      ManageSettings
     },
 
     data () {

frontend/client/views/settings/settings/manage-settings.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="tile is-vertical">
+      <div class="tile is-parent">
+      <article class="tile is-child notification content-article box">
+        <div class="tile is-parent">
+          <article class="tile is-child notification content-article box">
+            <vue-good-table
+              :columns="settingColumns"
+              :rows="settingRows"
+              :paginate="true"
+              :global-search="true"
+              :defaultSortBy="{field: 'name', type: 'desc'}"
+              globalSearchPlaceholder="Search ..."
+              styleClass="table table-grid table-own-bordered">
+              <template slot="table-row" slot-scope="props">
+                <td>
+                  <span>{{ props.row.display_name }}</span>
+                </td>
+                <td v-tippy="{ arrow : true,  animation : 'shift-away'}">
+                  <toggle-button
+                    v-model="props.row.display_value"
+                    id="pollertoggle"
+                    :color="{checked: '#7DCE94', unchecked: '#82C7EB'}"
+                    :labels="{checked: 'On', unchecked: 'Off'}"
+                    @change="settingsTogglePollerSwitch"
+                    :sync="true"/>
+                </td>
+              </template>
+              <div slot="emptystate" class="empty-table-text">
+                No settings found.
+              </div>
+            </vue-good-table>
+          </article>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import { ToggleButton } from 'vue-js-toggle-button'
+  import {TabPane, Tabs} from 'vue-bulma-tabs'
+  import VueGoodTable from 'vue-good-table'
+  import VueTippy from 'vue-tippy'
+  import Notification from 'vue-bulma-notification-fixed'
+  const NotificationComponent = Vue.extend(Notification)
+  const openNotification = (propsData = {
+    title: '',
+    message: '',
+    type: '',
+    direction: '',
+    duration: 4500,
+    container: '.notifications'
+  }) => {
+    return new NotificationComponent({
+      el: document.createElement('div'),
+      propsData
+    })
+  }
+
+  Vue.use(VueGoodTable)
+  Vue.use(VueTippy)
+
+  export default {
+    name: 'manage-settings',
+    components: {Tabs, TabPane, ToggleButton},
+    data () {
+      return {
+        settingsTogglePollerValue: false,
+        settingColumns: [
+          {
+            label: 'Name',
+            field: 'display_name'
+          },
+          {
+            label: 'Value',
+            field: 'display_value'
+          }
+        ],
+        settingRows: []
+      }
+    },
+    mounted () {
+      this.setSettings()
+    },
+    methods: {
+      settingsTogglePollerSwitch (val) {
+        if (val.value) {
+          this.$http
+            .post('/api/v1/settings/poll/on')
+            .then(response => {
+              openNotification({
+                title: 'Poll turned on!',
+                message: 'Polling has been enabled.',
+                type: 'success'
+              })
+            })
+            .catch((error) => {
+              this.$onError(error)
+            })
+        } else {
+          this.$http
+            .post('/api/v1/settings/poll/off')
+            .then(response => {
+              openNotification({
+                title: 'Poll turned off!',
+                message: 'Polling has been disabled.',
+                type: 'success'
+              })
+            })
+            .catch((error) => {
+              this.$onError(error)
+            })
+        }
+      },
+      setSettings () {
+        this.$http
+          .get('/api/v1/settings/poll', {showProgressBar: false})
+          .then(response => {
+            this.settingRows = [{
+              display_name: 'Polling',
+              display_value: response.data.Status
+            }]
+          })
+          .catch((error) => {
+            this.$onError(error)
+          })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .settings-row {
+    cursor: pointer;
+  }
+  .table-general {
+    background: #413F4A;
+    border: 2px solid #000;
+  }
+  .table-general th {
+    color: #4da2fc;
+  }
+  .table-general td {
+    border: 2px solid #000;
+    color: #8c91a0;
+  }
+  .table-settings td:hover {
+    background: #575463;
+    cursor: pointer;
+  }
+</style>

frontend/package.json

@@ -56,6 +56,7 @@
     "vue-bulma-progress-bar": "^1.0.2",
     "vue-bulma-tabs": "^1.1.3",
     "vue-good-table": "^1.19.2",
+    "vue-js-toggle-button": "^1.3.2",
     "vue-lodash": "^1.0.4",
     "vue-nprogress": "0.1.5",
     "vue-router": "^3.0.1",

gaia.go

@@ -249,6 +249,11 @@ type Config struct {
 	}
 }
 
+type StoreConfig struct {
+	ID   int
+	Poll bool
+}
+
 // String returns a pipeline type string back
 func (p PipelineType) String() string {
 	return string(p)

handlers/handler.go

@@ -64,6 +64,11 @@ func InitHandlers(e *echo.Echo) error {
 	e.GET(p+"pipeline/latest", PipelineGetAllWithLatestRun)
 	e.POST(p+"pipeline/periodicschedules", PipelineCheckPeriodicSchedules)
 
+	// Settings
+	e.POST(p+"settings/poll/on", SettingsPollOn)
+	e.POST(p+"settings/poll/off", SettingsPollOff)
+	e.GET(p+"settings/poll", SettingsPollGet)
+
 	// PipelineRun
 	e.POST(p+"pipelinerun/:pipelineid/:runid/stop", PipelineStop)
 	e.GET(p+"pipelinerun/:pipelineid/:runid", PipelineRunGet)