Update the UX for target OS

https://github.com/rancher/rancher/issues/20119

app/components/container/form-ports/component.js

@@ -29,6 +29,7 @@ export default Component.extend({
   editing:             false,
   showWarning:         false,
   kindChoices:         null,
+  showHostPortWarning: false,
 
   ports:               null,
   nodePortFrom:        null,

app/components/container/form-ports/template.hbs

@@ -11,7 +11,7 @@
     }}
   {{/if}}
 
-  {{#if scope.currentCluster.isWindows}}
+  {{#if showHostPortWarning}}
     {{banner-message
       icon="icon-alert"
       color="bg-warning mb-10"

app/components/container/new-edit/component.js

@@ -1,5 +1,5 @@
 import Errors from 'ui/utils/errors';
-import { get, set, setProperties, observer } from '@ember/object';
+import { get, set, setProperties, computed } from '@ember/object';
 import { equal } from '@ember/object/computed';
 import { next } from '@ember/runloop';
 import { inject as service } from '@ember/service';
@@ -13,6 +13,8 @@ import layout from './template';
 
 const WINDOWS_NODE_SELECTOR = 'beta.kubernetes.io/os = windows';
 const LINUX_NODE_SELECTOR = 'beta.kubernetes.io/os != windows';
+const LINUX = 'linux';
+const WINDOWS = 'windows';
 
 export default Component.extend(NewOrEdit, ChildHook, {
   clusterStore: service(),
@@ -37,7 +39,7 @@ export default Component.extend(NewOrEdit, ChildHook, {
   isRequestedHost:       null,
   upgradeOptions:        null,
   separateLivenessCheck: false,
-  windowsOnly:           false,
+  targetOs:              WINDOWS,
 
   // Errors from components
   commandErrors:    null,
@@ -124,6 +126,10 @@ export default Component.extend(NewOrEdit, ChildHook, {
   },
 
   actions: {
+    setTargetOs(os) {
+      set(this, 'targetOs', os);
+    },
+
     setImage(uuid) {
       set(this, 'launchConfig.image', uuid);
     },
@@ -163,24 +169,6 @@ export default Component.extend(NewOrEdit, ChildHook, {
     },
   },
 
-  linuxOnlyDidChange: observer('linuxOnly', function(){
-    const linuxOnly = get(this, 'linuxOnly');
-    const windowsOnly = get(this, 'windowsOnly');
-
-    if ( linuxOnly && windowsOnly ) {
-      set(this, 'windowsOnly', false);
-    }
-  }),
-
-  windowsOnlyDidChange: observer('windowsOnly', function(){
-    const linuxOnly = get(this, 'linuxOnly');
-    const windowsOnly = get(this, 'windowsOnly');
-
-    if ( windowsOnly && linuxOnly ) {
-      set(this, 'linuxOnly', false);
-    }
-  }),
-
   // Labels
   labelsChanged: debouncedObserver(
     'userLabels.@each.{key,value}',
@@ -222,6 +210,10 @@ export default Component.extend(NewOrEdit, ChildHook, {
     });
   }.observes('isUpgrade', 'isSidekick', 'isGlobal', 'service.displayName', 'intl.locale').on('init'),
 
+  showTargetOS: computed('scope.currentCluster.isWindows', 'isUpgrade', 'isSidekick', function(){
+    return get(this, 'scope.currentCluster.isWindows') && !get(this, 'isUpgrade') && !get(this, 'isSidekick');
+  }),
+
   // ----------------------------------
   // ----------------------------------
   // Save
@@ -291,8 +283,8 @@ export default Component.extend(NewOrEdit, ChildHook, {
 
     let readinessProbe = get(lc, 'readinessProbe');
 
-    if ( !get(this, 'isUpgrade') && (get(this, 'windowsOnly') || get(this, 'linuxOnly')) && !get(this, 'isSidekick') ) {
-      const selector = get(this, 'windowsOnly') ? WINDOWS_NODE_SELECTOR : LINUX_NODE_SELECTOR;
+    if ( get(this, 'showTargetOS') && ( get(this, 'targetOs') === LINUX || get(this, 'targetOs') === WINDOWS )  ) {
+      const selector = get(this, 'targetOs') === WINDOWS ? WINDOWS_NODE_SELECTOR : LINUX_NODE_SELECTOR;
 
       if ( !get(service, 'scheduling') ) {
         set(service, 'scheduling', { node: { requireAll: [selector] } });

app/components/container/new-edit/template.hbs

@@ -56,7 +56,7 @@
 <hr class="mt-30 mb-30" />
 
 <div class="row">
-  <div class="col span-11-of-23 mt-0 mb-0">
+  <div class="col span-{{if showTargetOS "9" "11"}}-of-23 mt-0 mb-0">
     {{container/form-image
       initialValue=launchConfig.image
       errors=imageErrors
@@ -64,8 +64,40 @@
     }}
   </div>
 
+ {{#if showTargetOS}}
+   <div class="col span-5-of-23 mt-0 mb-0">
+    <label class="acc-label pb-5">
+      {{t "newContainer.os"}}
+      {{field-required}}
+    </label>
+    <div class="row">
+      <div class="btn-group no-inline-space mt-5">
+        <button
+          class="btn btn-link btn-sm bg-{{if (eq targetOs "all") "primary" "default" }}"
+          {{action "setTargetOs" "all"}}
+        >
+          {{t "newContainer.all"}}
+        </button>
+        <button
+          class="btn btn-link btn-sm bg-{{if (eq targetOs "linux") "primary" "default" }}"
+          {{action "setTargetOs" "linux"}}
+        >
+          <i class="icon icon-fw icon-linux"></i>
+          {{t "newContainer.linux"}}
+        </button>
+        <button
+          class="btn btn-link btn-sm bg-{{if (eq targetOs "windows") "primary" "default" }}"
+          {{action "setTargetOs" "windows"}}
+        >
+          <i class="icon icon-fw icon-windows"></i>
+          {{t "newContainer.windows"}}
+        </button>
+      </div>
+    </div>
+    </div>
+  {{/if}}
   {{#unless isSidekick}}
-    <div class="col span-11-of-23 mt-0 mb-0 offset-1-of-23">
+    <div class="col span-{{if showTargetOS "8" "11"}}-of-23 mt-0 mb-0 offset-1-of-23">
       {{form-namespace
         namespace=namespace
         errors=namespaceErrors
@@ -76,31 +108,6 @@
   {{/unless}}
 </div>
 
-{{#if (and scope.currentCluster.isWindows (not isUpgrade) (not isSidekick)) }}
-  <div class="row">
-    <div class="col span-11-of-23 mt-0 mb-0">
-      <div class="checkbox mt-20 hand no-select">
-        <label class="text-muted">
-          {{input
-            type="checkbox"
-            checked=linuxOnly
-          }}
-          {{t "newContainer.linux"}}
-        </label>
-      </div>
-      <div class="checkbox hand no-select">
-        <label class="text-muted">
-          {{input
-            type="checkbox"
-            checked=windowsOnly
-          }}
-          {{t "newContainer.windows"}}
-        </label>
-      </div>
-    </div>
-  </div>
-{{/if}}
-
 <hr class="mt-30 mb-30" />
 <div class="row">
   {{container/form-ports
@@ -108,6 +115,7 @@
     showWarning=(and isUpgrade (not service.isCreatedByRancher))
     changed=(action (mut launchConfig.ports))
     errors=portErrors
+    showHostPortWarning=(and showTargetOS (not-eq targetOs "linux"))
     editing=true
   }}
 </div>

app/components/node-row/template.hbs

@@ -62,13 +62,23 @@
           </span>
         </div>
       {{/if}}
+      {{#if (and model.osInfo scope.currentCluster.isWindows)}}
+        <div class="text-small text-muted">
+          <span>
+            <i class="icon icon-fw icon-{{model.osInfo}}"></i>
+            <span class="text-capitalize">
+              {{model.osInfo}}
+            </span>
+          </span>
+        </div>
+      {{/if}}
     {{else}}
       <span class="text-muted">
         {{t 'generic.na'}}
       </span>
     {{/if}}
   </td>
-  
+
   <td class="text-right" data-title="{{dt.cpu}}">
     {{#if model.cpuUsage}}
       {{model.cpuUsage}}

app/models/cluster.js

@@ -234,6 +234,11 @@ export default Resource.extend(Grafana, ResourceUsage, {
 
   isWindows:  computed('rancherKubernetesEngineConfig', 'rancherKubernetesEngineConfig.network.plugin', 'rancherKubernetesEngineConfig.network.options.flannel_backend_type', function() {
     const config = get(this, 'rancherKubernetesEngineConfig');
+
+    if ( !config ) {
+      return false;
+    }
+
     const plugin = get(config, 'network.plugin');
     const flannelBackend = get(config, 'network.options.flannel_backend_type');
     const port = get(config, 'network.options.flannel_backend_port');

app/models/node.js

@@ -189,6 +189,12 @@ var Node = Resource.extend(Grafana, StateCounts, ResourceUsage, {
     return version;
   }),
 
+  osInfo: computed('labels', function() {
+    const labels = get(this, 'labels') || {};
+
+    return labels['beta.kubernetes.io/os'];
+  }),
+
   //  or they will not be pulled in correctly.
   displayEndpoints: function() {
     var store = get(this, 'clusterStore');

app/styles/components/_button.scss

@@ -174,6 +174,10 @@ fieldset[disabled] .btn {
       margin-left: 2px;
     }
 
+    .btn:not(:first-child) {
+      margin-right: 1px;
+    }
+
     .btn:last-child {
       border-radius: 0 2px 2px 0;
     }

lib/shared/addon/utils/constants.js

@@ -555,7 +555,8 @@ C.LABEL_PREFIX_TO_IGNORE = [
   'beta.kubernetes.io/',
   'node-role.kubernetes.io/',
   'kubernetes.io/',
-  'cattle.io/'
+  'cattle.io/',
+  'rke.cattle.io'
 ];
 
 C.SYSTEM_LABELS_WITH_CONTROL = [

translations/en-us.yaml

@@ -5900,8 +5900,10 @@ newContainer:
     sidekickName: 'Edit Sidecar of "{name}"'
   saveUpgrade: Save
   saveNew: Launch
-  windows: Run all pods for this workload on Windows nodes only
-  linux: Run all pods for this workload on Linux nodes only
+  windows: Windows
+  linux: Linux
+  all: All
+  os: Target OS
   name:
     placeholder: e.g. myapp
   description: