Webhooks (rancher#954)

* Webhook receivers

.watchmanconfig

@@ -1,4 +1,4 @@
 {
   "ignore_dirs": ["tmp", "dist"],
-  "fsevents_latency": 0.1
+  "settle": 100,
 }

app/authenticated/project/api/hooks/edit-receiver/controller.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    cancel() {
+      this.send('goToPrevious');
+    },
+  },
+});

app/authenticated/project/api/hooks/edit-receiver/route.js

@@ -0,0 +1,22 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  webhookStore: Ember.inject.service(),
+  allServices: Ember.inject.service(),
+
+  model(params) {
+    return this.get('webhookStore').find('receiver', params.receiver_id).then((receiver) => {
+      return Ember.Object.create({
+        receiver: receiver,
+        allServices: this.get('allServices').choices(),
+      });
+    });
+  },
+
+  resetController: function (controller, isExisting/*, transition*/) {
+    if (isExisting)
+    {
+      controller.set('errors', null);
+    }
+  }
+});

app/authenticated/project/api/hooks/edit-receiver/template.hbs

@@ -0,0 +1,5 @@
+{{new-receiver
+  editing=true
+  model=model.receiver
+  cancel=(action "cancel")
+}}

app/authenticated/project/api/hooks/index/controller.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+import Sortable from 'ui/mixins/sortable';
+
+export default Ember.Controller.extend(Sortable, {
+  settings: Ember.inject.service(),
+
+  sortableContent: Ember.computed.alias('model.receivers'),
+  sortBy: 'name',
+  sorts: {
+    state:        ['stateSort','name','id'],
+    name:         ['name','id'],
+  },
+
+});

app/authenticated/project/api/hooks/index/template.hbs

@@ -0,0 +1,37 @@
+<div class="lacsso banner bg-info m-0 p-0">
+  <div class="lacsso banner-icon" style="width: 68px;"><span class="icon icon-2x icon-notification"></span></div>
+  <div class="lacsso banner-message">
+    <p class="lacsso mt-15 mb-15">
+      Experimental: More webhook features will be added in future releases, and the existing capabilities may change.
+    </p>
+  </div>
+</div>
+
+<section class="header">
+  <h1>{{t 'hookPage.receiver.header'}}</h1>
+
+  {{#link-to "authenticated.project.api.hooks.new-receiver" class="btn btn-sm btn-primary"}}{{t 'hookPage.receiver.buttonText'}}{{/link-to}}
+</section>
+
+<section class="well">
+  <p>{{t 'hookPage.receiver.content' appName=settings.appName}}</p>
+  <table class="grid fixed r-mb0 r-mt10">
+    <thead>
+      <tr>
+        {{sortable-th sortable=this action="changeSort" name="state" width="125" label="generic.state"}}
+        {{sortable-th sortable=this action="changeSort" name="name" label="generic.name"}}
+        {{sortable-th sortable=this action="changeSort" name="kind" width="125" label="hookPage.fields.kind.label"}}
+        {{sortable-th sortable=this action="changeSort" name="detail" label="hookPage.fields.detail.label"}}
+        {{sortable-th sortable=this action="changeSort" name="url" width="100"  label="hookPage.fields.url.label"}}
+        <th width="75">&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each arranged as |row|}}
+        {{hook-row model=row}}
+      {{else}}
+        <tr><td colspan="6" class="text-center text-muted">{{t 'hookPage.receiver.noData'}}</td></tr>
+      {{/each}}
+    </tbody>
+  </table>
+</section>

app/authenticated/project/api/hooks/new-receiver/controller.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  queryParams: ['receiverId'],
+  receiverId: null,
+
+  actions: {
+    cancel() {
+      this.send('goToPrevious');
+    },
+  },
+
+});

app/authenticated/project/api/hooks/new-receiver/route.js

@@ -0,0 +1,39 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  webhookStore: Ember.inject.service(),
+  allServices: Ember.inject.service(),
+
+  model(params) {
+    let promise;
+    if ( params.receiverId ) {
+      promise = this.get('webhookStore').find('receiver', params.receiverId);
+    } else {
+      promise = Ember.RSVP.resolve(this.get('webhookStore').createRecord({
+        type: 'receiver',
+        driver: 'scaleService',
+        scaleServiceConfig: {
+          type: 'scaleService',
+          action: 'up',
+          amount: 1,
+          serviceId: null,
+        }
+      }));
+    }
+
+    return promise.then((receiver) => {
+      return Ember.Object.create({
+        receiver: receiver.cloneForNew(),
+        allServices: this.get('allServices').choices(),
+      });
+    });
+  },
+
+  resetController: function (controller, isExisting/*, transition*/) {
+    if (isExisting)
+    {
+      controller.set('errors', null);
+      controller.set('receiverId', null);
+    }
+  }
+});

app/authenticated/project/api/hooks/new-receiver/template.hbs

@@ -0,0 +1,5 @@
+{{new-receiver
+  editing=false
+  model=model.receiver
+  cancel=(action "cancel")
+}}

app/authenticated/project/api/hooks/route.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  webhookStore: Ember.inject.service(),
+
+  model: function() {
+    return this.get('webhookStore').findAll('schema', {url: 'schemas'}).then((schemas) => {
+      let receiver = schemas.findBy('id','receiver').resourceFields;
+      receiver.name.required = true;
+      receiver.scaleServiceConfig.required = true;
+      schemas.findBy('id','scaleservice').resourceFields.serviceId.required = true;
+
+      return Ember.RSVP.hash({
+        receivers: this.get('webhookStore').findAll('receiver', {forceReload: true}),
+      });
+    });
+  },
+});

app/components/container-row/template.hbs

@@ -1,14 +1,14 @@
 <td data-title="{{t 'generic.state'}}:" class="state">
   {{badge-state model=model}}
 </td>
-<td data-title="{{t 'generic.name'}}:" class="force-wrap">
+<td data-title="{{t 'generic.name'}}:" class="clip">
   <a href="{{href-to detailRoute model.id}}">{{model.displayName}}</a>
 </td>
 <td data-title="{{t 'containersPage.table.ipAddress'}}:">
   {{format-ip model.displayIp}}
 </td>
 {{#if showHost}}
-  <td data-title="{{t 'containersPage.table.primaryHost'}}:">
+  <td data-title="{{t 'containersPage.table.primaryHost'}}:" class="clip">
     {{#if model.primaryHost}}
       <a href="{{href-to "host" model.primaryHost.id}}">{{model.primaryHost.displayName}}</a>
     {{else}}

app/components/hook-row/component.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'TR',
+});

app/components/hook-row/template.hbs

@@ -0,0 +1,22 @@
+<td data-title="{{t 'generic.state'}}">
+  {{badge-state model=model}}
+</td>
+<td data-title="{{t 'generic.name'}}">
+  {{model.displayName}}
+</td>
+<td data-title="{{t 'hookPage.fields.kind.label'}}">
+  {{model.displayKind}}
+</td>
+<td data-title="{{t 'hookPage.fields.detail.label'}}">
+  {{#if (eq model.driver 'scaleService')}}
+    {{t 'hookPage.scaleService.detailPrefix' displayService=model.displayService action=model.opt.action amount=model.opt.amount}}
+    <a href="">{{t 'hookPage.scaleService.detailLink' displayService=model.displayService action=model.opt.action amount=model.opt.amount}}</a>
+    {{t 'hookPage.scaleService.detailSuffix' displayService=model.displayService action=model.opt.action amount=model.opt.amount}}
+  {{/if}}
+</td>
+<td data-title="{{t 'hookPage.fields.url.label'}}">
+  {{copy-to-clipboard clipboardText=model.url size="small"}}
+</td>
+<td data-title="{{t 'generic.actions'}}" class="actions">
+  {{action-menu model=model showPrimary=showPrimaryActions}}
+</td>

app/components/new-receiver/component.js

@@ -0,0 +1,25 @@
+import Ember from 'ember';
+import NewOrEdit from 'ui/mixins/new-or-edit';
+
+export default Ember.Component.extend(NewOrEdit, {
+  allServices: Ember.inject.service(),
+
+  actions: {
+    cancel() {
+      this.sendAction('cancel');
+    }
+  },
+
+  doSave: function(opt) {
+    opt = opt || {};
+    if ( !this.get('primaryResource.id') ) {
+      opt.url = 'receivers';
+    }
+
+    return this._super(opt);
+  },
+
+  doneSaving() {
+    this.send('cancel');
+  },
+});

app/components/new-receiver/template.hbs

@@ -0,0 +1,82 @@
+<section class="horizontal-form container-fluid">
+  <h2>{{t (if editing 'newReceiver.title.edit' 'newReceiver.title.add')}}</h2>
+
+  <div class="row form-group">
+    <div class="col-md-6 col-md-offset-3">
+      <div class="form-label form-control-static">
+        <label>{{t 'generic.name'}}</label>
+      </div>
+      <div>
+        {{input type="text" value=model.name classNames="form-control" placeholder=(t 'newReceiver.name.placeholder')}}
+      </div>
+    </div>
+  </div>
+
+  <div class="row form-group">
+    <div class="col-md-6 col-md-offset-3">
+      <div class="form-label form-control-static">
+        <label>{{t 'newReceiver.driver.label'}}</label>
+      </div>
+      <div>
+        <select class="form-control">
+          <option value="scaleService">{{t 'hookPage.scaleService.label'}}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="row form-group">
+    <div class="col-md-6 col-md-offset-3">
+      <div class="form-label form-control-static">
+        <label>{{t 'newReceiver.action.label'}}</label>
+      </div>
+      <div>
+        <span class="radio inline-block r-mr10">
+          <label>{{radio-button selection=model.scaleServiceConfig.action value="up"}}&nbsp;Scale up</label>
+        </span>
+        <span class="radio inline-block">
+          <label>{{radio-button selection=model.scaleServiceConfig.action value="down"}}&nbsp;Scale down</label>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="row form-group">
+    <div class="col-md-6 col-md-offset-3">
+      <div class="form-label form-control-static">
+        <label>{{t 'newReceiver.service.label'}}</label>
+      </div>
+      <div>
+        <select class="form-control" onchange={{action (mut model.scaleServiceConfig.serviceId) value="target.value"}}>
+          <option selected={{eq model.scaleServiceConfig.serviceId null}}>{{t 'newReceiver.service.prompt'}}</option>
+          {{#each-in allServices.grouped as |group list|}}
+            <optgroup label={{group}}>
+              {{#each list as |svc|}}
+                <option selected={{eq svc.id model.scaleServiceConfig.serviceId}} value={{svc.id}}>{{svc.name}}</option>
+              {{/each}}
+            </optgroup>
+          {{/each-in}}
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="row form-group">
+    <div class="col-md-6 col-md-offset-3">
+      <div class="form-label form-control-static">
+        <label>{{t 'newReceiver.amount.label'}}</label>
+      </div>
+      <div class="row">
+        <div class="col-xs-3 col-sm-2">
+          {{format-number model.scaleServiceConfig.amount}}
+        </div>
+        <div class="col-xs-9 col-sm-10">
+          {{input-slider value=model.scaleServiceConfig.amount valueMin=1 valueMax=11}}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{top-errors errors=errors}}
+{{save-cancel editing=editing save="save" cancel="cancel"}}

app/components/stack-section/template.hbs

@@ -87,7 +87,7 @@
         <tbody>
           {{#each sortedServices as |service|}}
             <tr>
-              <td data-title="{{t 'stackSection.table.dataTitle.state'}}:" class="state">
+              <td data-title="{{t 'stackSection.table.dataTitle.state'}}:" class="state r-pl10">
                 {{badge-state model=service}}
               </td>
               <td data-title="{{t 'stackSection.table.dataTitle.serviceName'}}:" class="force-wrap">

app/containers/index/controller.js

@@ -47,7 +47,7 @@ export default Ember.Controller.extend({
       searchField: 'displayState',
       type: 'string',
       classNames: '',
-      width: '125px'
+      width: '115px'
     },
     {
       displayName: 'Name',

app/containers/index/template.hbs

@@ -1,14 +1,14 @@
-<section class="header">
+<section class="header clearfix">
   <h1>{{t 'containersPage.index.header'}}</h1>
 
   {{#link-to "containers.new" classNames="btn btn-sm btn-primary"}}{{t 'containersPage.index.linkTo'}}{{/link-to}}
 
-  <div class="btn-group pull-right r-mr10 r-mt5">
+  <div class="btn-group r-mr10 r-mt5" style="float: right;">
     <label style="font-weight: normal;">{{input type="checkbox" checked=showSystem}} {{t 'hostsPage.index.showSystem'}}</label>
   </div>
 </section>
 
-<section class="well instances">
+<section class="well instances r-pt5">
   {{#sortable-table
     classNames="lacsso grid sortable-table"
     sorts=sorts

app/initializers/webhook-store.js

@@ -0,0 +1,6 @@
+import initializer from 'ember-api-store/initializers/store';
+
+export default {
+  name: 'webhook-store',
+  initialize: initializer('webhook-store','webhookStore')
+};