Merge pull request #2675 from vincent99/master

Cleanup custom cluster drivers

app/instance-initializers/nav.js

@@ -281,9 +281,9 @@ const rootNav = [
   {
     scope:          'global',
     id:             'nodes-node-drivers',
-    localizedLabel: 'nav.admin.nodeDrivers',
+    localizedLabel: 'nav.admin.drivers',
     route:          'nodes.custom-drivers',
-    resource:       ['nodedriver', 'kontainerDriver'],
+    resource:       ['nodedriver', 'kontainerdriver'],
     resourceScope:  'global',
   },
   {

app/styles/components/_button.scss

@@ -1,6 +1,6 @@
 $btn-padding: 8px 15px;
 $xs-padding: 2px 3px;
-$sm-padding: 6px 10px 4px 10px;
+$sm-padding: 5px 10px 3px 10px;
 $lg-padding: 18px 30px;
 
 // -----------------------------------------------------------------------------

app/styles/pages/_host.scss

@@ -73,6 +73,13 @@
   &.alidns { @include alidns; }
 }
 
+.machine-driver-empty {
+  height: 100px;
+  margin-top: 10px;
+  padding-top: 50px;
+  color: $text-muted;
+}
+
 .error-loading-driver {
   border: 2px solid red !important;
 }

lib/nodes/addon/custom-drivers/cluster-drivers/template.hbs

@@ -1,10 +1,15 @@
-<section class="header clearfix">
+<section class="header has-tabs clearfix p-0">
+  <ul class="tab-nav">
+    <li>
+      {{#link-to "custom-drivers.cluster-drivers"}}{{t 'customDrivers.clusters'}}{{/link-to}}
+    </li>
+    <li>
+      {{#link-to "custom-drivers.node-drivers"}}{{t 'customDrivers.nodes'}}{{/link-to}}
+    </li>
+  </ul>
   <div class="right-buttons">
-    {{!-- <button disabled={{rbac-prevents resource="kontainerDriver" scope="global" permission="create"}} class="btn btn-sm bg-primary right-divider-btn" {{action 'addNewDriver'}}>{{t 'machinePage.add'}}</button> --}}
+    <button disabled={{rbac-prevents resource="kontainerdriver" scope="global" permission="create"}} class="btn btn-sm bg-primary right-divider-btn" {{action 'addNewDriver'}}>{{t 'clusterDrivers.add'}}</button>
-    <button class="btn btn-sm bg-primary right-divider-btn" {{action 'addNewDriver'}}>{{t 'clusterDrivers.add'}}</button>
   </div>
-
-  <h1>{{t 'clusterDrivers.title'}}</h1>
 </section>
 
 {{#sortable-table
@@ -50,4 +55,4 @@
   {{else if (eq kind "norows")}}
     <tr><td colspan="{{sortable.fullColspan}}" class="text-center text-muted pt-20 pb-20">{{t 'clusterDrivers.table.noData'}}</td></tr>
   {{/if}}
-{{/sortable-table}}
+{{/sortable-table}}

lib/nodes/addon/custom-drivers/index/route.js

@@ -3,7 +3,7 @@ import Route from '@ember/routing/route';
 export default Route.extend({
   redirect(model, transition) {
     if (transition.targetName === 'nodes.custom-drivers.index') {
-      this.replaceWith('custom-drivers.node-drivers');
+      this.replaceWith('custom-drivers.cluster-drivers');
     }
   }
 });

lib/nodes/addon/custom-drivers/node-drivers/template.hbs

@@ -1,9 +1,15 @@
-<section class="header clearfix">
+<section class="header has-tabs clearfix p-0">
+  <ul class="tab-nav">
+    <li>
+      {{#link-to "custom-drivers.cluster-drivers"}}{{t 'customDrivers.clusters'}}{{/link-to}}
+    </li>
+    <li>
+      {{#link-to "custom-drivers.node-drivers"}}{{t 'customDrivers.nodes'}}{{/link-to}}
+    </li>
+  </ul>
   <div class="right-buttons">
     <button disabled={{rbac-prevents resource="nodedriver" scope="global" permission="create"}} class="btn btn-sm bg-primary right-divider-btn" {{action 'addNewDriver'}}>{{t 'machinePage.add'}}</button>
   </div>
-
-  <h1>{{t 'machinePage.header'}}</h1>
 </section>
 
 {{#sortable-table

lib/nodes/addon/custom-drivers/template.hbs

@@ -1,12 +1 @@
-<section class="header has-tabs clearfix pb-0">
+{{outlet}}
-  <ul class="tab-nav">
-    <li>
-      {{#link-to "custom-drivers.cluster-drivers"}}{{t 'customDrivers.clusters'}}{{/link-to}}
-    </li>
-    <li>
-      {{#link-to "custom-drivers.node-drivers"}}{{t 'customDrivers.nodes'}}{{/link-to}}
-    </li>
-  </ul>
-</section>
-
-{{outlet}}

lib/nodes/addon/routes.js

@@ -2,9 +2,9 @@ import buildRoutes from 'ember-engines/routes';
 
 export default buildRoutes(function() {
   // Define your engine's route map here
-  this.route('custom-drivers', { path: '/custom-drivers' }, function() {
+  this.route('custom-drivers', { path: '/drivers' }, function() {
-    this.route('node-drivers', { path: '/node-drivers' });
+    this.route('node-drivers', { path: '/node' });
-    this.route('cluster-drivers', { path: '/cluster-drivers' });
+    this.route('cluster-drivers', { path: '/cluster' });
   });
   this.route('node-templates');
 });

lib/shared/addon/components/cru-cluster/component.js

@@ -142,7 +142,7 @@ export default Component.extend(ViewNewEdit, ChildHook, {
               driver:      get(c, 'name'),
               kontainerId: get(c, 'id'),
               name:        get(c, 'name'),
-              nodeWhich:   'external',
+              genericIcon: true, // @TODO should have a way for drivers to provide an icon
             });
           } else {
             set(this, 'needReloadSchema', true);
@@ -203,6 +203,8 @@ export default Component.extend(ViewNewEdit, ChildHook, {
         out = out.filterBy('driver', 'rke');
       }
 
+      out.sortBy('name');
+
       return out;
     }),
 
@@ -212,7 +214,6 @@ export default Component.extend(ViewNewEdit, ChildHook, {
     const cloudGroup    = [];
     const customGroup   = [];
     const importGroup   = [];
-    const externalGroup = [];
 
     choices.forEach((item) => {
       if (get(item, 'driver') === 'rke' && get(item, 'name') !== 'custom') {
@@ -221,8 +222,6 @@ export default Component.extend(ViewNewEdit, ChildHook, {
         importGroup.pushObject(item);
       } else if (get(item, 'name') === 'custom') {
         customGroup.pushObject(item);
-      } else if (get(item, 'nodeWhich') === 'external') {
-        externalGroup.pushObject(item)
       } else {
         cloudGroup.pushObject(item);
       }
@@ -231,7 +230,6 @@ export default Component.extend(ViewNewEdit, ChildHook, {
     return {
       cloudGroup,
       customGroup,
-      externalGroup,
       importGroup,
       rkeGroup,
     };

lib/shared/addon/components/cru-cluster/template.hbs

@@ -13,113 +13,75 @@
 {{#unless initialProvider}}
 
   <div class="row nav nav-boxes checked-active inline-form">
-    <div class="col span-8 col-inline mt-0 mb-0">
+    <div class="col span-8 col-inline mb-0">
-      {{#if (gte providerGroups.cloudGroup.length 1)}}
+      <div>
-        <div class="row nav checked-active inline-form">
+        <label class="acc-label">{{t 'clusterNew.driverLabels.cloud'}}</label>
-          <div>
+      </div>
-            <label class="acc-label">{{t 'clusterNew.driverLabels.cloud'}}</label>
+      {{#each (get providerGroups "cloudGroup") as |choice|}}
+        {{#unless choice.scriptError}}
+          {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name)}}
+            <div class="machine-driver {{if choice.genericIcon 'generic'}} {{choice.name}}"></div>
+            <p class="driver-name">{{driver-name choice.name}}</p>
+          {{/link-to}}
+        {{else}}
+          <div class={{concat "disabled error-loading-driver mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name}}>
+              {{#tooltip-element type="tooltip-basic" model=choice.scriptError tooltipTemplate='tooltip-static' aria-describedby="tooltip-base" tooltipFor="tooltipDriverError"}}
+                <span class="icon icon-alert"></span>
+              {{/tooltip-element}}
+            <div class="machine-driver {{choice.name}}"></div>
+            <p class="driver-name">{{driver-name choice.name}}</p>
           </div>
-          {{#each (get providerGroups "cloudGroup") as |choice|}}
+        {{/unless}}
-            {{#unless choice.scriptError}}
+      {{else}}
-              {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name)}}
+        <div class="machine-driver-empty">{{t 'clusterNew.driverLabels.noCloud'}}</div>
-                <div class="machine-driver {{choice.name}}"></div>
+      {{/each}}
-                <p class="driver-name">{{driver-name choice.name}}</p>
-                {{#if choice.genericIcon}}
-                  <p class="text-link text-bold">{{driver-name choice.name}}</p>
-                {{/if}}
-              {{/link-to}}
-            {{else}}
-              <div
-                class={{concat "disabled error-loading-driver mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name}}>
-                {{#tooltip-element type="tooltip-basic" model=choice.scriptError tooltipTemplate='tooltip-static' aria-describedby="tooltip-base" tooltipFor="tooltipDriverError"}}
-                  <span class="icon icon-alert"></span>
-                {{/tooltip-element}}
-                <div class="machine-driver {{choice.name}}"></div>
-                <p class="driver-name">{{driver-name choice.name}}</p>
-                {{#if choice.genericIcon}}
-                  <p class="text-link text-bold">{{driver-name choice.name}}</p>
-                {{/if}}
-              </div>
-            {{/unless}}
-          {{/each}}
-        </div>
-      {{/if}}
-
-      {{#if (gte providerGroups.rkeGroup.length 1)}}
-        <div class="row">
-          <div>
-            <label class="acc-label">{{t 'clusterNew.driverLabels.infra'}}</label>
-          </div>
-          {{#each (get providerGroups "rkeGroup") as |choice|}}
-            {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name)}}
-              <div class="machine-driver {{if choice.genericIcon 'generic'}} {{choice.name}}"></div>
-              <p class="driver-name">{{driver-name choice.name}}</p>
-            {{/link-to}}
-          {{/each}}
-        </div>
-      {{/if}}
-
-      {{#if (gte providerGroups.externalGroup.length 1)}}
-        <div class="row">
-          <div>
-            <label class="acc-label">{{t 'clusterNew.driverLabels.external'}}</label>
-          </div>
-          {{#each (get providerGroups "externalGroup") as |choice|}}
-            {{#unless choice.scriptError}}
-              {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name)}}
-                <div class="machine-driver {{choice.name}}"></div>
-                <p class="driver-name">{{driver-name choice.name}}</p>
-                {{#if choice.genericIcon}}
-                  <p class="text-link text-bold">{{driver-name choice.name}}</p>
-                {{/if}}
-              {{/link-to}}
-            {{else}}
-              <div
-                class={{concat "disabled error-loading-driver mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name}}>
-                {{#tooltip-element type="tooltip-basic" model=choice.scriptError tooltipTemplate='tooltip-static' aria-describedby="tooltip-base" tooltipFor="tooltipDriverError"}}
-                  <span class="icon icon-alert"></span>
-                {{/tooltip-element}}
-                <div class="machine-driver {{choice.name}}"></div>
-                <p class="driver-name">{{driver-name choice.name}}</p>
-                {{#if choice.genericIcon}}
-                  <p class="text-link text-bold">{{driver-name choice.name}}</p>
-                {{/if}}
-              </div>
-            {{/unless}}
-          {{/each}}
-        </div>
-      {{/if}}
     </div>
-    <div class="col span-2 col-inline mt-0 mb-0">
-      <div class="row">
-        <div>
-          <label class="acc-label">{{t 'clusterNew.driverLabels.import'}}</label>
-        </div>
-        {{#each (get providerGroups "importGroup") as |choice|}}
-          {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-12 col-inline nav-box-item driver " choice.name)}}
-            <div class="machine-driver {{choice.name}}"></div>
-            <p class="driver-name">{{driver-name choice.name}}</p>
-            {{#if choice.genericIcon}}
-              <p class="text-link text-bold">{{driver-name choice.name}}</p>
-            {{/if}}
-          {{/link-to}}
-        {{/each}}
-      </div>
 
-      <div class="row">
+    <div class="col span-2 col-inline mb-0">
-        <div>
+      <div>
-          <label class="acc-label">{{t 'clusterNew.driverLabels.custom'}}</label>
+        <label class="acc-label">{{t 'clusterNew.driverLabels.import'}}</label>
-        </div>
-        {{#each (get providerGroups "customGroup") as |choice|}}
-          {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-12 col-inline nav-box-item driver " choice.name)}}
-            <div class="machine-driver {{choice.name}}"></div>
-            <p class="driver-name">{{driver-name choice.name}}</p>
-            {{#if choice.genericIcon}}
-              <p class="text-link text-bold">{{driver-name choice.name}}</p>
-            {{/if}}
-          {{/link-to}}
-        {{/each}}
       </div>
+      {{#each (get providerGroups "importGroup") as |choice|}}
+        {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-12 col-inline nav-box-item driver " choice.name)}}
+          <div class="machine-driver {{choice.name}}"></div>
+          <p class="driver-name">{{driver-name choice.name}}</p>
+          {{#if choice.genericIcon}}
+            <p class="text-link text-bold">{{driver-name choice.name}}</p>
+          {{/if}}
+        {{/link-to}}
+      {{/each}}
+    </div>
+
+  </div>
+
+  <div class="row nav nav-boxes checked-active inline-form">
+    <div class="col span-8 col-inline mt-0">
+      <div>
+        <label class="acc-label">{{t 'clusterNew.driverLabels.infra'}}</label>
+      </div>
+      {{#each (get providerGroups "rkeGroup") as |choice|}}
+        {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-3 col-inline nav-box-item driver " choice.name)}}
+          <div class="machine-driver {{if choice.genericIcon 'generic'}} {{choice.name}}"></div>
+          <p class="driver-name">{{driver-name choice.name}}</p>
+        {{/link-to}}
+      {{else}}
+        <div class="machine-driver-empty">{{t 'clusterNew.driverLabels.noInfra'}}</div>
+      {{/each}}
+    </div>
+
+    <div class="col span-2 col-inline mt-0">
+      <div>
+        <label class="acc-label">{{t 'clusterNew.driverLabels.custom'}}</label>
+      </div>
+      {{#each (get providerGroups "customGroup") as |choice|}}
+        {{#link-to (query-params provider=choice.name) class=(concat "mb-20 mt-10 col span-12 col-inline nav-box-item driver " choice.name)}}
+          <div class="machine-driver {{choice.name}}"></div>
+          <p class="driver-name">{{driver-name choice.name}}</p>
+          {{#if choice.genericIcon}}
+            <p class="text-link text-bold">{{driver-name choice.name}}</p>
+          {{/if}}
+        {{/link-to}}
+      {{/each}}
     </div>
   </div>
 {{/unless}}

server/proxies/api.js

@@ -23,21 +23,39 @@ module.exports = function(app, options) {
       return;
     }
 
-    proxyLog('WS', req);
-
     if ( socket.ssl ) {
       req.headers['x-forwarded-proto'] = 'https';
     }
 
 
-
     let targetHost = config.apiServer.replace(/^https?:\/\//, '');
+    let host = req.headers['host'];
+    let port;
 
-    req.headers['x-forwarded-host'] = req.headers['host'];
+    if ( socket.ssl ) {
+      req.headers['x-forwarded-proto'] = 'https';
+      port = 443;
+    } else {
+      req.headers['x-forwarded-proto'] = 'http';
+      port = 80;
+    }
+
+    if ( host ) {
+      idx = host.lastIndexOf(':');
+      if ( ( host.startsWith('[') && host.includes(']:') || !host.startsWith('[') ) && idx > 0 ){
+        port = host.substr(idx+1);
+        host = host.substr(0, host.lastIndexOf(':'));
+      }
+    }
+
+    req.headers['x-forwarded-host'] = host;
+    req.headers['x-forwarded-port'] = port;
     req.headers['host'] = targetHost;
     req.headers['origin'] = config.apiServer;
     req.socket.servername = targetHost;
 
+    proxyLog('WS', req);
+
     try {
       proxy.ws(req, socket, head);
     } catch (err) {
@@ -113,5 +131,5 @@ function onProxyError(err, req, res) {
 }
 
 function proxyLog(label, req) {
-  console.log(`[${ label }][${ req._source }]`, req.method, req.url);
+  console.log(`[${ label }]`, req.method, req.url);
 }

translations/en-us.yaml

@@ -2118,9 +2118,10 @@ clusterNew:
   driverLabels:
     cloud: In a hosted Kubernetes provider
     custom: From my own existing nodes
-    external: User Provided
     import: Import existing cluster
     infra: From nodes in an infrastructure provider
+    noCloud: There are no cluster drivers enabled.
+    noInfra: There are no node drivers enabled.
   externalError: 'Component could not be loaded. Check URL.'
   members:
     label: Member Roles
@@ -5866,7 +5867,6 @@ customDrivers:
   clusters: Cluster Drivers
 
 clusterDrivers:
-  title: Cluster Drivers
   add: Add Cluster Driver
   builtIn: Built-In
   table:
@@ -6983,7 +6983,7 @@ nav:
     accounts: Users
     clusters: Clusters
     machines: Nodes
-    nodeDrivers: Custom Drivers
+    drivers: Drivers
     catalogs: Catalogs
     globalDns: Global DNS
     globalDnsEntries: Entries