Kaynağa Gözat

HUE-9207 [frontend] Move the connectors page into a component

With the restructuring of the ApiHelper certain functions are no longer exposed on the global scope. This is also in line with migrating old style pages into webpack.
Johan Ahlen 5 yıl önce
ebeveyn
işleme
b473dfc636

+ 385 - 0
desktop/core/src/desktop/js/apps/about/components/ko.connectorsConfig.js

@@ -0,0 +1,385 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as ko from 'knockout';
+
+import componentUtils from 'ko/components/componentUtils';
+import I18n from 'utils/i18n';
+import DisposableComponent from 'ko/components/DisposableComponent';
+import { simpleGet, simplePost } from 'api/apiUtils';
+import huePubSub from 'utils/huePubSub';
+
+export const NAME = 'connectors-config';
+
+// prettier-ignore
+const TEMPLATE = `
+<script type="text/html" id="installed-connectors-page">
+  <div class="row-fluid">
+    <a href="javascript:void(0)" data-bind="click: $root.addNewConnector">
+      + Connector
+    </a>
+  </div>
+
+  <div data-bind="template: { name: 'connectors-page', data: $root.instances() }"></div>
+
+</script>
+
+
+<script type="text/html" id="add-connector-page">
+  <div class="row-fluid">
+    Add a Connector
+  </div>
+
+  <div data-bind="template: { name: 'connectors-page', data: $root.connectors() }"></div>
+
+</script>
+
+
+<script type="text/html" id="connectors-page">
+  <div class="card card-small margin-top-10">
+
+    <div class="card-body clearfix">
+      <div class="span2">
+        <div data-bind="dockable: { scrollable: ${ window.MAIN_SCROLLABLE }, jumpCorrection: 0, topSnap: '${ window.BANNER_TOP_HTML ? '78px' : '50px' }', triggerAdjust: 0 }">
+          <ul class="nav nav-pills nav-stacked">
+            <li data-bind="css: { 'active': $root.selectedConnectorCategory() === 'All' }">
+              <a href="javascript:void(0)" data-bind="text: 'All', click: function(){ $root.selectedConnectorCategory('All') }"></a>
+            </li>
+            <!-- ko foreach: $root.categories -->
+            <li data-bind="css: { 'active': $root.selectedConnectorCategory() === type }">
+              <a href="javascript:void(0)" data-bind="text: name, click: function(){ $root.selectedConnectorCategory(type) }"></a>
+            </li>
+            <!-- /ko -->
+          </ul>
+        </div
+      </div>
+
+      <div class="span10">
+        <div data-bind="dockable: { scrollable: ${ window.MAIN_SCROLLABLE }, jumpCorrection: 0, topSnap: '${ window.BANNER_TOP_HTML ? '78px' : '50px' }', triggerAdjust: 0 }">
+          <span class="pull-right">
+            <a href="https://docs.gethue.com/administrator/configuration/" target="_blank">
+              <i class="fa fa-question-circle"></i> ${ I18n('Help') }
+            </a>
+          </span>
+          <input type="text" data-bind="clearable: $root.connectorsFilter, valueUpdate: 'afterkeydown'"
+              class="input-xlarge pull-right margin-bottom-10" placeholder="${ I18n('Filter...') }">
+        </div>
+
+        <div class="margin-top-10">
+          <div data-bind="foreach: $root.filteredConnectors()">
+            <h4 data-bind="text: category_name"></h4>
+            <table class="table table-condensed">
+              <thead>
+                <tr>
+                  <th width="30%">${ I18n('Name') }</th>
+                  <th>${ I18n('Description') }</th>
+                </tr>
+              </thead>
+              <!-- ko if: $data.values.length > 0 -->
+              <tbody data-bind="foreach: values">
+                <tr data-bind="click: $root.editConnector">
+                  <td data-bind="text: nice_name"></td>
+                  <td data-bind="text: description"></td>
+                </tr>
+              </tbody>
+              <!-- /ko -->
+              <!-- ko ifnot: $data.values.length > 0 -->
+              <tfoot>
+                <tr>
+                  <td colspan="2">
+                    ${ I18n('No connectors') }
+                    <!-- ko if: $root.section() == 'installed-connectors-page' -->
+                      <a href="javascript:void(0)" data-bind="click: function() { $root.selectedConnectorCategory($data.category); $root.addNewConnector(); }">
+                        ${ I18n('Add one ?') }
+                      </a>
+                    <!-- /ko -->
+                  </td>
+                </tr>
+              </tfoot>
+              <!-- /ko -->
+            </table>
+          </div>
+
+          <!-- ko if: $root.filteredConnectors().length == 0 -->
+          <table class="table table-condensed">
+            <thead>
+              <tr>
+                <th width="30%">${ I18n('Name') }</th>
+                <th>${ I18n('Instances') }</th>
+              </tr>
+            </thead>
+            <tfoot>
+              <tr>
+                <td colspan="2">
+                  ${ I18n('No connectors') }
+                  <!-- ko if: $root.section() == 'installed-connectors-page' -->
+                    <a href="javascript:void(0)" data-bind="click: function() { $root.selectedConnectorCategory($data.category); $root.addNewConnector(); }">
+                      ${ I18n('Add one ?') }
+                    </a>
+                  <!-- /ko -->
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+          <!-- /ko -->
+        </div>
+      </div>
+    </div>
+
+  </div>
+</script>
+
+
+<script type="text/html" id="connector-page">
+  <div class="row-fluid">
+    <input data-bind="value: nice_name">
+    <!-- ko if: typeof id != 'undefined' -->
+      <!-- ko if: id -->
+        (<span data-bind="text: name"></span>)
+        <a href="javascript:void(0)" data-bind="click: $root.updateConnector">
+          ${ I18n('Update') }
+        </a>
+        <a href="javascript:void(0)" data-bind="click: $root.deleteConnector">
+          ${ I18n('Delete') }
+        </a>
+      <!-- /ko -->
+      <!-- ko ifnot: id -->
+        <a href="javascript:void(0)" data-bind="click: $root.updateConnector">
+          ${ I18n('Save') }
+        </a>
+        <a href="javascript:void(0)" data-bind="click: function() { $root.section('add-connector-page'); }">
+          ${ I18n('Cancel') }
+        </a>
+      <!-- /ko -->
+    <!-- /ko -->
+    <a href="javascript:void(0)" data-bind="click: $root.testConnector">
+      ${ I18n('Test connection') }
+    </a>
+    <span>
+      <i class="fa fa-question" data-bind="visible: !$root.testConnectionExecuted()"></i>
+      <i class="fa fa-check" data-bind="visible: $root.testConnectionExecuted() && $root.testConnectionErrors().length == 0"></i>
+      <i class="fa fa-exclamation" data-bind="visible: $root.testConnectionExecuted() && $root.testConnectionErrors().length != 0"></i>
+      <span data-bind="visible: $root.testConnectionExecuted() && $root.testConnectionErrors().length != 0, text: $root.testConnectionErrors">
+      </span>
+    </span>
+    <table class="table table-condensed">
+      <thead>
+        <tr>
+          <th width="30%">${ I18n('Name') }</th>
+          <th>${ I18n('Value') }</th>
+        </tr>
+      </thead>
+      <tbody data-bind="foreach: settings">
+        <tr>
+          <td data-bind="text: name"></td>
+          <td><input data-bind="value: value" class="input-xxlarge"></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</script>
+
+<div class="container-fluid">
+  <a href="javascript:void(0)" data-bind="click: function() { selectedConnectorCategory('All'); section('installed-connectors-page'); }">
+    ${ I18n('Connectors') }
+  </a>
+
+  <!-- ko if: section() === 'installed-connectors-page' -->
+    <div data-bind="template: { name: 'installed-connectors-page' }"></div>
+  <!-- /ko -->
+
+  <!-- ko if: section() === 'add-connector-page' -->
+    <div data-bind="template: { name: 'add-connector-page' }"></div>
+  <!-- /ko -->
+
+  <!-- ko if: section() === 'connector-page' && $root.instance() -->
+    <div data-bind="template: { name: 'connector-page', data: $root.instance() }"></div>
+  <!-- /ko -->
+</div>
+`;
+
+class ConnectorsConfig extends DisposableComponent {
+  constructor() {
+    super();
+    this.section = ko.observable('installed-connectors-page');
+    this.categories = ko.observableArray();
+    this.selectedConnectorCategory = ko.observable('All');
+    this.connectorsFilter = ko.observable();
+
+    this.testConnectionExecuted = ko.observable(false);
+    this.testConnectionErrors = ko.observable('');
+
+    // Handle two types of objects are being listed: connector instances and types
+    this.instances = ko.observableArray(); // Connector instances (e.g. connector to a MySql DB on a certain host)
+    this.instance = ko.observable();
+
+    this.connectors = ko.observableArray(); // Connector types (e.g. mysql dialect)
+    this.connector = ko.observable();
+
+    this.selectedConnectors = ko.pureComputed(() => {
+      const connectors =
+        this.section() === 'installed-connectors-page' ? this.instances() : this.connectors();
+      if (this.selectedConnectorCategory() === 'All') {
+        return connectors;
+      }
+      return connectors.filter(
+        connector => connector.category === this.selectedConnectorCategory()
+      );
+    });
+
+    this.filteredConnectors = ko.pureComputed(() => {
+      if (!this.connectorsFilter()) {
+        return this.selectedConnectors();
+      }
+
+      const lowerQuery = this.connectorsFilter().toLowerCase();
+      const filteredConnectors = [];
+      this.selectedConnectors().forEach(connector => {
+        const filteredConnector = {
+          category: connector.category,
+          category_name: this.categories().find(cat => cat.type === connector.category)
+            .category_name,
+          values: []
+        };
+        filteredConnector.values = connector.values.filter(
+          subMetricKey => subMetricKey.name.toLowerCase().indexOf(lowerQuery) !== -1
+        );
+        if (filteredConnector.values.length > 0) {
+          filteredConnectors.push(filteredConnector);
+        }
+      });
+      return filteredConnectors;
+    });
+
+    this.addNewConnector = () => {
+      this.testConnectionExecuted(false);
+      this.testConnectionErrors('');
+      this.section('add-connector-page');
+    };
+
+    this.fetchConnectors = () => {
+      this.fetchConnectorTypes(); // TODO: might be cleaner to chain below
+      simpleGet(
+        '/desktop/connectors/api/instances/',
+        {},
+        {
+          successCallback: data => {
+            this.instances(data.connectors);
+          }
+        }
+      );
+    };
+
+    this.editConnector = data => {
+      if (this.section() === 'installed-connectors-page') {
+        this.instance(data);
+      } else {
+        this.newConnector(data.dialect);
+      }
+      this.section('connector-page');
+    };
+
+    this.newConnector = dialect => {
+      simpleGet(
+        '/desktop/connectors/api/instance/new/' + dialect,
+        {},
+        {
+          successCallback: data => {
+            this.instance(ko.mapping.fromJS(data.connector));
+          }
+        }
+      );
+    };
+
+    this.fetchConnector = id => {
+      simpleGet(
+        '/desktop/connectors/api/instance/get/' + id,
+        {},
+        {
+          successCallback: data => {
+            this.instance(ko.mapping.fromJS(data.connector));
+          }
+        }
+      );
+    };
+
+    this.deleteConnector = connector => {
+      simplePost(
+        '/desktop/connectors/api/instance/delete',
+        {
+          connector: ko.mapping.toJSON(connector)
+        },
+        {
+          successCallback: data => {
+            this.section('installed-connectors-page');
+            this.fetchConnectors();
+            huePubSub.publish('cluster.config.refresh.config');
+          }
+        }
+      );
+    };
+
+    this.updateConnector = connector => {
+      simplePost(
+        '/desktop/connectors/api/instance/update',
+        {
+          connector: ko.mapping.toJSON(connector)
+        },
+        {
+          successCallback: data => {
+            connector.id = data.connector.id;
+            this.section('installed-connectors-page');
+            this.fetchConnectors();
+            huePubSub.publish('cluster.config.refresh.config');
+          }
+        }
+      );
+    };
+
+    this.fetchConnectorTypes = () => {
+      simpleGet(
+        '/desktop/connectors/api/types/',
+        {},
+        {
+          successCallback: data => {
+            this.connectors(data.connectors);
+            this.categories(data.categories);
+          }
+        }
+      );
+    };
+
+    this.testConnector = connector => {
+      this.testConnectionExecuted(false);
+      this.testConnectionErrors('');
+
+      simplePost(
+        '/desktop/connectors/api/instance/test',
+        {
+          connector: ko.mapping.toJSON(connector)
+        },
+        {
+          successCallback: data => {
+            this.testConnectionExecuted(true);
+            this.testConnectionErrors(data.warnings);
+          }
+        }
+      );
+    };
+  }
+}
+
+componentUtils.registerComponent(NAME, ConnectorsConfig, TEMPLATE);

+ 1 - 0
desktop/core/src/desktop/js/ko/ko.all.js

@@ -175,6 +175,7 @@ import 'ko/components/ko.sqlColumnsTable';
 
 // TODO: Move to about app when it has it's own webpack entry
 import 'apps/about/components/ko.hueConfigTree';
+import 'apps/about/components/ko.connectorsConfig';
 
 import 'ko/extenders/ko.maxLength';
 import 'ko/extenders/ko.numeric';

+ 6 - 334
desktop/core/src/desktop/templates/connectors/connectors.mako

@@ -20,347 +20,19 @@ from desktop.conf import CUSTOM
 from desktop.views import commonheader, commonfooter
 %>
 
-<%
-MAIN_SCROLLABLE = "'.page-content'"
-if CUSTOM.BANNER_TOP_HTML.get():
-  TOP_SNAP = "78px"
-else:
-  TOP_SNAP = "50px"
-%>
-
 <%namespace name="actionbar" file="../actionbar.mako" />
 <%namespace name="layout" file="../about_layout.mako" />
 
-
-<script type="text/javascript">
-  (function () {
-    var ConnectorsViewModel = function () {
-      var self = this;
-
-      self.apiHelper = window.apiHelper;
-
-      self.section = ko.observable('installed-connectors-page');
-      self.categories = ko.observableArray();
-      self.selectedConnectorCategory = ko.observable('All');
-      self.connectorsFilter = ko.observable();
-
-      self.testConnectionExecuted = ko.observable(false);
-      self.testConnectionErrors = ko.observable('');
-
-      // Handle two types of objects are being listed: connector instances and types
-      self.instances = ko.observableArray(); // Connector instances (e.g. connector to a MySql DB on a certain host)
-      self.instance = ko.observable();
-
-      self.connectors = ko.observableArray(); // Connector types (e.g. mysql dialect)
-      self.connector = ko.observable();
-
-      self.selectedConnectors = ko.pureComputed(function () {
-        const connectors = self.section() == 'installed-connectors-page' ? self.instances() : self.connectors();
-        return connectors.filter(function (connector) {
-          return self.selectedConnectorCategory() == 'All' || connector.category == self.selectedConnectorCategory();
-        });
-      });
-      self.filteredConnectors = ko.pureComputed(function () {
-        var connectors = self.selectedConnectors();
-
-        if (self.connectorsFilter()) {
-          var lowerQuery = self.connectorsFilter().toLowerCase();
-          var filteredConnectors = []
-          connectors.forEach(function (connector) {
-            var _connector = {
-                "category": connector.category,
-                "category_name": $.grep(self.categories(), function(cat) { return cat.type == connector.category})[0].category_name,
-                "values": []
-            };
-            _connector.values = connector.values.filter(function (subMetricKey) {
-              return self.connectorsFilter() || subMetricKey.name.toLowerCase().indexOf(lowerQuery) !== -1;
-            });
-            if (_connector.values.length > 0) {
-              filteredConnectors.push(_connector);
-            }
-          });
-          connectors = filteredConnectors;
-        }
-
-        return connectors;
-      });
-
-      self.addNewConnector = function () {
-        self.testConnectionExecuted(false);
-        self.testConnectionErrors('');
-        self.section('add-connector-page');
-      };
-
-      self.fetchConnectors = function () {
-        self.fetchConnectorTypes(); // TODO: might be cleaner to chain below
-        self.apiHelper.simpleGet('/desktop/connectors/api/instances/', {}, {
-          successCallback: function (data) {
-            self.instances(data.connectors);
-          }
-        });
-      };
-      self.editConnector = function (data) {
-        if (self.section() == 'installed-connectors-page') {
-          self.instance(data);
-        } else {
-          self.newConnector(data.dialect);
-        }
-        self.section('connector-page');
-      };
-
-      self.newConnector = function (dialect) {
-        self.apiHelper.simpleGet('/desktop/connectors/api/instance/new/' + dialect, {}, {
-          successCallback: function (data) {
-            self.instance(ko.mapping.fromJS(data.connector));
-          }
-        });
-      };
-      self.fetchConnector = function (id) {
-        self.apiHelper.simpleGet('/desktop/connectors/api/instance/get/' + id, {}, {
-          successCallback: function (data) {
-            self.instance(ko.mapping.fromJS(data.connector));
-          }
-        });
-      };
-      self.deleteConnector = function (connector) {
-        self.apiHelper.simplePost('/desktop/connectors/api/instance/delete', {
-            'connector': ko.mapping.toJSON(connector)
-          }, {
-          successCallback: function (data) {
-            self.section('installed-connectors-page');
-            self.fetchConnectors();
-            huePubSub.publish('cluster.config.refresh.config');
-          }
-        });
-      };
-      self.updateConnector = function (connector) {
-        self.apiHelper.simplePost('/desktop/connectors/api/instance/update', {
-            'connector': ko.mapping.toJSON(connector)
-          }, {
-          successCallback: function (data) {
-            connector.id = data.connector.id;
-            self.section('installed-connectors-page');
-            self.fetchConnectors();
-            huePubSub.publish('cluster.config.refresh.config');
-          }
-        });
-      };
-      self.fetchConnectorTypes = function () {
-        self.apiHelper.simpleGet('/desktop/connectors/api/types/', {}, {
-          successCallback: function (data) {
-            self.connectors(data.connectors);
-            self.categories(data.categories);
-          }
-        });
-      };
-      self.testConnector = function (connector) {
-        self.testConnectionExecuted(false);
-        self.testConnectionErrors('');
-
-        self.apiHelper.simplePost('/desktop/connectors/api/instance/test', {
-            'connector': ko.mapping.toJSON(connector)
-          }, {
-          successCallback: function (data) {
-            self.testConnectionExecuted(true);
-            self.testConnectionErrors(data.warnings);
-          }
-        });
-      };
-    }
-
-    $(document).ready(function () {
-      var viewModel = new ConnectorsViewModel();
-      ko.applyBindings(viewModel, $('#connectorsComponents')[0]);
-    });
-  })();
-</script>
-
-
 ${ layout.menubar(section='connectors') }
 
-
-<div id="connectorsComponents" class="container-fluid">
-
-  <a href="javascript:void(0)" data-bind="click: function() { selectedConnectorCategory('All'); section('installed-connectors-page'); }">
-    ${ _('Connectors') }
-  </a>
-
-  <!-- ko if: section() == 'installed-connectors-page' -->
-    <div data-bind="template: { name: 'installed-connectors-page' }"></div>
-  <!-- /ko -->
-
-  <!-- ko if: section() == 'add-connector-page' -->
-    <div data-bind="template: { name: 'add-connector-page' }"></div>
-  <!-- /ko -->
-
-  <!-- ko if: section() == 'connector-page' && $root.instance() -->
-    <div data-bind="template: { name: 'connector-page', data: $root.instance() }"></div>
-  <!-- /ko -->
+<div id="connectorsConfiguration">
+  <!-- ko component: { name: 'connectors-config' } --><!-- /ko -->
 </div>
 
-
-<script type="text/html" id="installed-connectors-page">
-  <div class="row-fluid">
-    <a href="javascript:void(0)" data-bind="click: $root.addNewConnector">
-      + Connector
-    </a>
-  </div>
-
-  <div data-bind="template: { name: 'connectors-page', data: $root.instances() }"></div>
-
-</script>
-
-
-<script type="text/html" id="add-connector-page">
-  <div class="row-fluid">
-    Add a Connector
-  </div>
-
-  <div data-bind="template: { name: 'connectors-page', data: $root.connectors() }"></div>
-
-</script>
-
-
-<script type="text/html" id="connectors-page">
-  <div class="card card-small margin-top-10">
-
-    <div class="card-body clearfix">
-      <div class="span2">
-        <div data-bind="dockable: { scrollable: ${ MAIN_SCROLLABLE }, jumpCorrection: 0, topSnap: '${ TOP_SNAP }', triggerAdjust: 0 }">
-          <ul class="nav nav-pills nav-stacked">
-            <li data-bind="css: { 'active': $root.selectedConnectorCategory() === 'All' }">
-              <a href="javascript:void(0)" data-bind="text: 'All', click: function(){ $root.selectedConnectorCategory('All') }"></a>
-            </li>
-            <!-- ko foreach: $root.categories -->
-            <li data-bind="css: { 'active': $root.selectedConnectorCategory() === type }">
-              <a href="javascript:void(0)" data-bind="text: name, click: function(){ $root.selectedConnectorCategory(type) }"></a>
-            </li>
-            <!-- /ko -->
-          </ul>
-        </div>
-      </div>
-
-      <div class="span10">
-        <div data-bind="dockable: { scrollable: ${ MAIN_SCROLLABLE }, jumpCorrection: 0, topSnap: '${ TOP_SNAP }', triggerAdjust: 0 }">
-          <span class="pull-right">
-            <a href="https://docs.gethue.com/administrator/configuration/" target="_blank">
-              <i class="fa fa-question-circle"></i> ${ _('Help') }
-            </a>
-          </span>
-          <input type="text" data-bind="clearable: $root.connectorsFilter, valueUpdate: 'afterkeydown'"
-              class="input-xlarge pull-right margin-bottom-10" placeholder="${ _('Filter...') }">
-        </div>
-
-        <div class="margin-top-10">
-          <div data-bind="foreach: $root.filteredConnectors()">
-            <h4 data-bind="text: category_name"></h4>
-            <table class="table table-condensed">
-              <thead>
-                <tr>
-                  <th width="30%">${ _('Name') }</th>
-                  <th>${ _('Description') }</th>
-                </tr>
-              </thead>
-              <!-- ko if: $data.values.length > 0 -->
-              <tbody data-bind="foreach: values">
-                <tr data-bind="click: $root.editConnector">
-                  <td data-bind="text: nice_name"></td>
-                  <td data-bind="text: description"></td>
-                </tr>
-              </tbody>
-              <!-- /ko -->
-              <!-- ko ifnot: $data.values.length > 0 -->
-              <tfoot>
-                <tr>
-                  <td colspan="2">
-                    ${ _('No connectors') }
-                    <!-- ko if: $root.section() == 'installed-connectors-page' -->
-                      <a href="javascript:void(0)" data-bind="click: function() { $root.selectedConnectorCategory($data.category); $root.addNewConnector(); }">
-                        ${ _('Add one ?') }
-                      </a>
-                    <!-- /ko -->
-                  </td>
-                </tr>
-              </tfoot>
-              <!-- /ko -->
-            </table>
-          </div>
-
-          <!-- ko if: $root.filteredConnectors().length == 0 -->
-          <table class="table table-condensed">
-            <thead>
-              <tr>
-                <th width="30%">${ _('Name') }</th>
-                <th>${ _('Instances') }</th>
-              </tr>
-            </thead>
-            <tfoot>
-              <tr>
-                <td colspan="2">
-                  ${ _('No connectors') }
-                  <!-- ko if: $root.section() == 'installed-connectors-page' -->
-                    <a href="javascript:void(0)" data-bind="click: function() { $root.selectedConnectorCategory($data.category); $root.addNewConnector(); }">
-                      ${ _('Add one ?') }
-                    </a>
-                  <!-- /ko -->
-                </td>
-              </tr>
-            </tfoot>
-          </table>
-          <!-- /ko -->
-        </div>
-      </div>
-    </div>
-
-  </div>
+<script type="text/javascript">
+  $(document).ready(function () {
+    ko.applyBindings({}, $('#connectorsConfiguration')[0]);
+  });
 </script>
 
 
-<script type="text/html" id="connector-page">
-  <div class="row-fluid">
-    <input data-bind="value: nice_name">
-    <!-- ko if: typeof id != 'undefined' -->
-      <!-- ko if: id -->
-        (<span data-bind="text: name"></span>)
-        <a href="javascript:void(0)" data-bind="click: $root.updateConnector">
-          ${ _('Update') }
-        </a>
-        <a href="javascript:void(0)" data-bind="click: $root.deleteConnector">
-          ${ _('Delete') }
-        </a>
-      <!-- /ko -->
-      <!-- ko ifnot: id -->
-        <a href="javascript:void(0)" data-bind="click: $root.updateConnector">
-          ${ _('Save') }
-        </a>
-        <a href="javascript:void(0)" data-bind="click: function() { $root.section('add-connector-page'); }">
-          ${ _('Cancel') }
-        </a>
-      <!-- /ko -->
-    <!-- /ko -->
-    <a href="javascript:void(0)" data-bind="click: $root.testConnector">
-      ${ _('Test connection') }
-    </a>
-    <span>
-      <i class="fa fa-question" data-bind="visible: !$root.testConnectionExecuted()"></i>
-      <i class="fa fa-check" data-bind="visible: $root.testConnectionExecuted() && $root.testConnectionErrors().length == 0"></i>
-      <i class="fa fa-exclamation" data-bind="visible: $root.testConnectionExecuted() && $root.testConnectionErrors().length != 0"></i>
-      <span data-bind="visible: $root.testConnectionExecuted() && $root.testConnectionErrors().length != 0, text: $root.testConnectionErrors">
-      </span>
-    </span>
-    <table class="table table-condensed">
-      <thead>
-        <tr>
-          <th width="30%">${ _('Name') }</th>
-          <th>${ _('Value') }</th>
-        </tr>
-      </thead>
-      <tbody data-bind="foreach: settings">
-        <tr>
-          <td data-bind="text: name"></td>
-          <td><input data-bind="value: value" class="input-xxlarge"></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</script>

+ 24 - 62
package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "hue",
-  "version": "4.6.0",
+  "name": "gethue",
+  "version": "4.6.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5651,8 +5651,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5673,14 +5672,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5695,20 +5692,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5825,8 +5819,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5838,7 +5831,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5853,7 +5845,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5861,14 +5852,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5887,7 +5876,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5968,8 +5956,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5981,7 +5968,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6067,8 +6053,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6104,7 +6089,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6124,7 +6108,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6168,14 +6151,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -8737,8 +8718,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -8759,14 +8739,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -8781,20 +8759,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -8911,8 +8886,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -8924,7 +8898,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -8939,7 +8912,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -8947,14 +8919,12 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -8973,7 +8943,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -9054,8 +9023,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -9067,7 +9035,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -9153,8 +9120,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -9190,7 +9156,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -9210,7 +9175,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -9254,14 +9218,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },