From 64ed64f0d354cf06eb1458686c17e0f974c8c9bc Mon Sep 17 00:00:00 2001
From: Aaron <aaronwang@rancher.com>
Date: Wed, 4 Apr 2018 16:02:57 +0800
Subject: [PATCH 1/4] Polish code

---
 app/models/pod.js                             |  8 +------
 app/models/workload.js                        |  9 +++++--
 app/workload/template.hbs                     | 24 +++++++------------
 .../components/accordion-pod/component.js     |  6 ++---
 .../components/accordion-pod/template.hbs     |  4 ++--
 .../components/form-key-value/template.hbs    | 10 ++++----
 6 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/app/models/pod.js b/app/models/pod.js
index 359aee19d..ee6cae9f4 100644
--- a/app/models/pod.js
+++ b/app/models/pod.js
@@ -98,13 +98,7 @@ var Pod = Resource.extend(DisplayImage, {
       return resource;
     }
   }),
-  image: function () {
-    let containers = this.get('containers');
-    if(!containers.length){
-      return
-    }
-    return containers[0].image;
-  }.property('containers'),
+
   isOn: function() {
     return ['running','migrating','restarting'].indexOf(get(this,'state')) >= 0;
   }.property('state'),
diff --git a/app/models/workload.js b/app/models/workload.js
index 585d0d48b..ec60caa8c 100644
--- a/app/models/workload.js
+++ b/app/models/workload.js
@@ -255,12 +255,16 @@ var Workload = Resource.extend(DisplayImage, StateCounts, EndpointPorts, {
   }.property('canScale','scaleMin','scaleIncrement','scale'),
 
   displayScale: function() {
+    let lcType = get(this, 'lcType');
+    if (lcType){
+      return get(this, 'intl').t('servicePage.multistat.daemonSetScale');
+    }
     if ( get(this, 'isGlobalScale') ) {
       return get(this, 'intl').t('servicePage.globalScale', {scale: get(this, 'scale')});
     } else {
       return get(this, 'scale');
     }
-  }.property('scale','isGlobalScale'),
+  }.property('scale','isGlobalScale', 'lcType'),
 
   canHaveSidekicks: true,
 
@@ -271,7 +275,8 @@ var Workload = Resource.extend(DisplayImage, StateCounts, EndpointPorts, {
   canUpgrade: true,
   canHaveLabels: true,
   canScale: computed('lcType', function() {
-    return get(this,'lcType') !== 'cronjob';
+    let lcType = get(this, 'lcType');
+    return  lcType !== 'cronjob' && lcType !== 'daemonset';
   }),
   realButNotLb: true,
   canHaveLinks: true,
diff --git a/app/workload/template.hbs b/app/workload/template.hbs
index 2583b570d..4b694c746 100644
--- a/app/workload/template.hbs
+++ b/app/workload/template.hbs
@@ -47,22 +47,16 @@
   </div>
 
   <div class="row banner bg-info basics mt-0" style="border-top: none;">
-    {{#if service.canScale}}
-      <div class="vertical-middle">
-        <label class="acc-label vertical-middle p-0">{{t 'servicePage.multistat.scale'}}</label>
-        {{#if (eq service.type 'daemonSet')}}
-          {{t "servicePage.multistat.daemonSetScale"}}
-        {{else}}
-          <span class="pr-5">
-            {{service.displayScale}}
-          </span>
-          <div class="btn-group btn-group-xs p-0">
-            <button class="btn btn-xs bg-primary" {{action "scaleDown" target=service}} disabled={{not service.canScaleDown}}><i class="icon icon-minus icon-fw"/></button>
-            <button style="margin-left: -1px;" class="btn btn-xs bg-primary" {{action "scaleUp" target=service}} disabled={{not service.canScaleUp}}><i class="icon icon-plus icon-fw"/></button>
-          </div>
-        {{/if}}
+    <div class="vertical-middle">
+      <label class="acc-label vertical-middle p-0">{{t 'servicePage.multistat.scale'}}</label>
+      <span class="pr-5">
+        {{service.displayScale}}
+      </span>
+      <div class="btn-group btn-group-xs p-0">
+        <button class="btn btn-xs bg-primary" {{action "scaleDown" target=service}} disabled={{not service.canScaleDown}}><i class="icon icon-minus icon-fw"/></button>
+        <button style="margin-left: -1px;" class="btn btn-xs bg-primary" {{action "scaleUp" target=service}} disabled={{not service.canScaleUp}}><i class="icon icon-plus icon-fw"/></button>
       </div>
-    {{/if}}
+    </div>
     <div class="vertical-middle">
       <label class="acc-label vertical-middle p-0">{{t 'servicePage.multistat.created'}}</label>
       {{date-calendar service.created}}
diff --git a/lib/shared/addon/components/accordion-pod/component.js b/lib/shared/addon/components/accordion-pod/component.js
index 181083b6f..313e2f28d 100644
--- a/lib/shared/addon/components/accordion-pod/component.js
+++ b/lib/shared/addon/components/accordion-pod/component.js
@@ -20,12 +20,12 @@ export default Component.extend(ManageLabels, {
     },
     {
       name:           'name',
-      sort:           ['key'],
+      sort:           ['name'],
       translationKey: 'generic.name',
     },
     {
-      name:           'image',
-      sort:           ['value','key'],
+      name:           'displayImage',
+      sort:           ['displayImage'],
       translationKey: 'generic.image',
     },
     {
diff --git a/lib/shared/addon/components/accordion-pod/template.hbs b/lib/shared/addon/components/accordion-pod/template.hbs
index f67ec7787..5e28c67a0 100644
--- a/lib/shared/addon/components/accordion-pod/template.hbs
+++ b/lib/shared/addon/components/accordion-pod/template.hbs
@@ -26,8 +26,8 @@
         <td data-title="{{dt.name}}">
           {{inst.name}}
         </td>
-        <td data-title="{{dt.image}}">
-          {{inst.image}}
+        <td data-title="{{dt.displayImage}}">
+          {{inst.displayImage}}
         </td>
         <td data-title="{{dt.displayIp}}">
           {{inst.displayIp}}
diff --git a/lib/shared/addon/components/form-key-value/template.hbs b/lib/shared/addon/components/form-key-value/template.hbs
index 69f3e3588..69fd142bb 100644
--- a/lib/shared/addon/components/form-key-value/template.hbs
+++ b/lib/shared/addon/components/form-key-value/template.hbs
@@ -56,11 +56,6 @@
     {{/each}}
     </tbody>
   </table>
-  {{#if ary.length}}
-    <div class="protip mb-5">
-      {{t 'formKeyValue.protip'}}
-    </div>
-  {{/if}}
 {{else}}
   {{#unless editing}}
     <div>{{t 'generic.none'}}</div>
@@ -68,6 +63,11 @@
 {{/if}}
 
 {{#if (and editing allowAdd)}}
+  {{#if ary.length}}
+    <div class="protip mb-5">
+      {{t 'formKeyValue.protip'}}
+    </div>
+  {{/if}}
   <div>
     <button class="btn bg-link icon-btn p-0" {{action "add"}}>
       <span class="darken"><i class="icon icon-plus text-small"/></span>

From 94b57541ec308b6da9ea0962a862ab19e10f8693 Mon Sep 17 00:00:00 2001
From: Aaron <aaronwang@rancher.com>
Date: Mon, 9 Apr 2018 10:48:40 +0800
Subject: [PATCH 2/4] Map language environment backward

Related issue is https://github.com/rancher/rancher/issues/12451
---
 .../pipeline-step-task/component.js           | 31 ++++++++++++++++++-
 .../pipeline-step-task/template.hbs           |  2 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/lib/pipeline/addon/components/pipeline-step-task/component.js b/lib/pipeline/addon/components/pipeline-step-task/component.js
index c6262678d..bb781147d 100644
--- a/lib/pipeline/addon/components/pipeline-step-task/component.js
+++ b/lib/pipeline/addon/components/pipeline-step-task/component.js
@@ -27,7 +27,7 @@ export default Component.extend({
     let runScriptConfig = this.get('runScriptConfig');
     let routeState = this.get('routeState');
     if(runScriptConfig.image){
-      this.set('selectedType', 'Custom');
+      this.setLanguageEnvironment(runScriptConfig);
     }else{
       let label = this.get('languageToLabel')[routeState.language]|| 'Custom';
       this.set('selectedType', label);
@@ -37,6 +37,35 @@ export default Component.extend({
       }
     }
   },
+  setLanguageEnvironment(runScriptConfig){
+    let image = runScriptConfig.image;
+    let selectedType = 'Custom';
+    if(runScriptConfig.isShell){
+      let splitedImage = image.split(':');
+      let imageName = splitedImage[0];
+      let imageTag = 'latest';
+      if(splitedImage[1]){
+        imageTag = splitedImage[1];
+      }
+      let environmentTypes = this.get('environmentTypes');
+      let shouldSelectedType = environmentTypes.find((ele)=>{
+        let eleImageName = ele.value.split(':')[0];
+        if(eleImageName === imageName){
+          return true
+        }
+      });
+      if(shouldSelectedType){
+        selectedType = shouldSelectedType.label;
+        let selectedImage = shouldSelectedType.value.split(':');
+        this.set('customImage',{
+          selectableTags: shouldSelectedType.version,
+          repo: selectedImage[0],
+          tag: selectedImage[1]
+        });
+      }
+    }
+    this.set('selectedType', selectedType);
+  },
   selectedTypeObserve: function(){
     let selectedType = this.get('selectedType');
     if(selectedType !== 'Custom'){
diff --git a/lib/pipeline/addon/components/pipeline-step-task/template.hbs b/lib/pipeline/addon/components/pipeline-step-task/template.hbs
index b3177b52a..63f46b1c0 100644
--- a/lib/pipeline/addon/components/pipeline-step-task/template.hbs
+++ b/lib/pipeline/addon/components/pipeline-step-task/template.hbs
@@ -69,7 +69,7 @@
     <li {{action "changeTaskModel" true}}>
       <a href="javascript:void(0);" class="{{if (eq runScriptConfig.isShell true) 'active' (if (eq modalOpts.type 'review') 'hide')}} ember-view">{{t 'newPipelineStep.stepType.task.shellScript'}}</a>
     </li>
-    {{#if (eq selectedType 'custom')}}
+    {{#if (eq selectedType 'Custom')}}
     <li {{action "changeTaskModel" false}}>
       <a href="javascript:void(0);" class="{{if (eq runScriptConfig.isShell false) 'active' (if (eq modalOpts.type 'review') 'hide')}} ember-view">{{t 'newPipelineStep.stepType.task.customEntryPoint'}}</a>
     </li>

From aba5efbedb96b44abfc260a20f40a3b1a70848c7 Mon Sep 17 00:00:00 2001
From: Aaron <aaronwang@rancher.com>
Date: Mon, 9 Apr 2018 14:55:08 +0800
Subject: [PATCH 3/4] Fetch envvars from backend

---
 .../pipeline-codemirror/component.js          |  5 ++-
 .../pipeline-input-var-hint/component.js      |  6 ++--
 .../components/pipeline-logs/component.js     | 31 +------------------
 .../components/pipeline-stages/component.js   | 11 ++-----
 lib/pipeline/addon/new-pipeline/route.js      | 10 +++++-
 lib/pipeline/addon/new-pipeline/template.hbs  |  1 +
 lib/pipeline/addon/pipeline/route.js          | 13 ++++++--
 lib/pipeline/addon/pipeline/template.hbs      |  1 +
 lib/pipeline/addon/services/code-mirror.js    | 14 +++------
 lib/pipeline/addon/services/pipeline.js       |  1 -
 lib/pipeline/addon/utils/pipelineStep.js      |  5 +++
 11 files changed, 38 insertions(+), 60 deletions(-)

diff --git a/lib/pipeline/addon/components/pipeline-codemirror/component.js b/lib/pipeline/addon/components/pipeline-codemirror/component.js
index 4da3c037c..0808e4194 100644
--- a/lib/pipeline/addon/components/pipeline-codemirror/component.js
+++ b/lib/pipeline/addon/components/pipeline-codemirror/component.js
@@ -1,5 +1,5 @@
 import Component from 'ember-component';
-import injectService from 'ember-service/inject';
+import { inject as service } from '@ember/service';
 import observer from 'ember-metal/observer';
 import { bind, once, scheduleOnce } from 'ember-runloop';
 import CodeMirror from 'codemirror';
@@ -9,7 +9,7 @@ export default Component.extend({
   layout,
   tagName: 'textarea',
 
-  codeMirror: injectService(),
+  codeMirror: service(),
 
   didInsertElement() {
     this._super(...arguments);
@@ -17,7 +17,6 @@ export default Component.extend({
       var cur = editor.getCursor();
       var end = cur.ch, start = end;
       var matched = this.get('codeMirror').getMatchedHint(editor.getValue(),editor);
-      console.log(matched);
       return {list: matched.matchedArry, from: CodeMirror.Pos(cur.line, start - matched.index), to: CodeMirror.Pos(cur.line, end)};
     });
     this._codeMirror = this.get('codeMirror').fromTextArea(this.get('elementId'), this.get('element'));
diff --git a/lib/pipeline/addon/components/pipeline-input-var-hint/component.js b/lib/pipeline/addon/components/pipeline-input-var-hint/component.js
index 883247650..8d0b3e9c5 100644
--- a/lib/pipeline/addon/components/pipeline-input-var-hint/component.js
+++ b/lib/pipeline/addon/components/pipeline-input-var-hint/component.js
@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
+import { singleton } from 'pipeline/utils/pipelineStep';
 
 export default Component.extend({
   hintAry: null,
@@ -7,10 +8,6 @@ export default Component.extend({
   positionX: 0,
   positionY: 0,
   codeMirror: service(),
-  didInsertElement(){
-    debugger
-    this.get('codeMirror').set('hintAry', this.get('hintAry'));
-  },
   positionStyle: function(){
     var positionX = this.get('positionX'), positionY=this.get('positionY');
     return [
@@ -157,6 +154,7 @@ export default Component.extend({
   },
   didInsertElement() {
     this._super(...arguments);
+    singleton.hintAry = this.get('hintAry');
     this.$(document).on('keyup', 'input:not(.js-disable-hint)', (e) => {
       $.fn.E_INPUT_HINT.startHint(e.target, ( /*hint*/ ) => {});
     })
diff --git a/lib/pipeline/addon/components/pipeline-logs/component.js b/lib/pipeline/addon/components/pipeline-logs/component.js
index 0bcd16f61..2782d1ab7 100644
--- a/lib/pipeline/addon/components/pipeline-logs/component.js
+++ b/lib/pipeline/addon/components/pipeline-logs/component.js
@@ -12,7 +12,6 @@ export default Component.extend(ThrottledResize, {
   showProtip: true,
   status: 'connecting',
   socket: null,
-  pipeline: service(),
   logHeight: 300,
   globalStore: service(),
   onlyCombinedLog: true,
@@ -74,31 +73,6 @@ export default Component.extend(ThrottledResize, {
       inst = this.get('instance');
       var isFollow = ($body.scrollTop() + $body.outerHeight() + 10) >= body.scrollHeight;
 
-
-      // var logs = '';
-      // message.trim().split(/\n/).forEach((line) => {
-      //   var match = line.match(/^\[?([^ \]]+)\]?\s?/);
-      //   var dateStr, msg;
-      //   if (match) {
-      //     msg = line.substr(match[0].length);
-      //     var date = new Date(match[1] * 1);
-      //     dateStr = '<span class="log-date">' + Util.escapeHtml(date.toLocaleDateString()) + ' ' + Util.escapeHtml(date.toLocaleTimeString()) + ' </span>';
-      //   } else {
-      //     msg = line;
-      //     dateStr = '<span class="log-date">Unknown Date</span>';
-      //   }
-
-      //   // body.insertAdjacentHTML('beforeend',
-      //   //   '<div class="log-msg">' +
-      //   //   dateStr +
-      //   //   AnsiUp.ansi_to_html(Util.escapeHtml(msg)) +
-      //   //   '</div>'
-      //   // );
-      //   logs += '<div class="log-msg">' +
-      //     dateStr +
-      //     AnsiUp.ansi_to_html(Util.escapeHtml(msg)) +
-      //     '</div>';
-      // });
       var logs = message;
 
       var logsAry = inst.activityLogs;
@@ -113,10 +87,7 @@ export default Component.extend(ThrottledResize, {
     };
 
     var activity = inst.activity;
-    // var params = `?activityId=${activity.id}&stageOrdinal=${inst.stageIndex}&stepOrdinal=${inst.stepIndex}`;
-    // var url = ("ws://" + window.location.host + this.get('pipeline.pipelinesEndpoint') + '/ws/log' + params);
-    // var socket = new WebSocket(url);
-    // this.set('socket', socket);
+
     let fetchLog = ()=>{
       if(inst.stageIndex===-1||inst.stepIndex===-1){
         return
diff --git a/lib/pipeline/addon/components/pipeline-stages/component.js b/lib/pipeline/addon/components/pipeline-stages/component.js
index cceb098a5..48e31f0ea 100644
--- a/lib/pipeline/addon/components/pipeline-stages/component.js
+++ b/lib/pipeline/addon/components/pipeline-stages/component.js
@@ -22,15 +22,7 @@ export default Component.extend({
   dragDom: null,
   model: null,
   pipeline: null,
-  envvars: ['CICD_GIT_COMMIT',
-'CICD_GIT_REPO_NAME',
-'CICD_GIT_BRANCH',
-'CICD_GIT_URL',
-'CICD_PIPELINE_ID',
-'CICD_PIPELINE_NAME',
-'CICD_TRIGGER_TYPE',
-'CICD_EXECUTION_ID',
-'CICD_EXECUTION_SEQUENCE'].map(ele=>`\${${ele}}`),
+  envvars: '[]',
   systemVars: null,
   envvarsLoading: true,
   modalService: service('modal'),
@@ -39,6 +31,7 @@ export default Component.extend({
   }.property('editable'),
   init() {
     this._super(...arguments);
+    this.set('envvars', JSON.parse(this.get('envvars')).map(ele=>`\${${ele}}`));
   },
   actions: {
     dragStart: function(content, e) {
diff --git a/lib/pipeline/addon/new-pipeline/route.js b/lib/pipeline/addon/new-pipeline/route.js
index 3ea0651fe..e10a95002 100644
--- a/lib/pipeline/addon/new-pipeline/route.js
+++ b/lib/pipeline/addon/new-pipeline/route.js
@@ -32,7 +32,13 @@ export default Route.extend({
     let accounts = globalStore.findAll('sourceCodeCredential');
     let clusterPipeline = globalStore.find('clusterPipeline', `${clusterId}:${clusterId}`, {forceReload: true});
     let projectDockerCredentials = projectStore.all('dockerCredential');
-    return hash({accounts, clusterPipeline, projectDockerCredentials} ).then(({accounts, clusterPipeline, projectDockerCredentials})=>{
+    return clusterPipeline.then((pipeline)=>{
+      clusterPipeline = pipeline;
+      return clusterPipeline.followLink('envvars')
+    }).then((envvars)=>{
+      return hash({accounts, clusterPipeline, projectDockerCredentials,envvars})
+    })
+    .then(({accounts, clusterPipeline, projectDockerCredentials, envvars})=>{
       let pipeline = globalStore.createRecord({type:'pipeline', projectId , stages: this.get('precanStages')});
       if(!accounts.content.length){
         return {
@@ -40,6 +46,7 @@ export default Route.extend({
           accounts,
           clusterPipeline,
           projectDockerCredentials,
+          envvars,
           repositories: [],
           language: 'Custom'
         };
@@ -50,6 +57,7 @@ export default Route.extend({
             accounts,
             clusterPipeline,
             projectDockerCredentials,
+            envvars,
             repositories: res,
             language: 'Custom'
           }
diff --git a/lib/pipeline/addon/new-pipeline/template.hbs b/lib/pipeline/addon/new-pipeline/template.hbs
index 4b53c3df7..d9147880d 100644
--- a/lib/pipeline/addon/new-pipeline/template.hbs
+++ b/lib/pipeline/addon/new-pipeline/template.hbs
@@ -9,6 +9,7 @@
 <section class="pipeline-container">
   {{pipeline-stages
     clusterPipeline=model.clusterPipeline
+    envvars=model.envvars
     pipeline=model.pipeline
     stagesDraggable=true
     accounts=model.accounts
diff --git a/lib/pipeline/addon/pipeline/route.js b/lib/pipeline/addon/pipeline/route.js
index 2905aba1b..8220323c4 100644
--- a/lib/pipeline/addon/pipeline/route.js
+++ b/lib/pipeline/addon/pipeline/route.js
@@ -24,18 +24,25 @@ export default Route.extend({
     let accounts = globalStore.findAll('sourceCodeCredential');
     let clusterPipeline = globalStore.find('clusterPipeline', `${clusterId}:${clusterId}`);
     let projectDockerCredentials = projectStore.all('dockerCredential');
-    return hash({
+    return clusterPipeline.then((cPipeline)=>{
+      clusterPipeline = cPipeline;
+      return clusterPipeline.followLink('envvars')
+    }).then((envvars)=>{
+      return hash({
         pipeline,
         pipelineHistory,
         accounts,
         clusterPipeline, 
         projectDockerCredentials,
-      }).then(({
+        envvars
+      })
+    }).then(({
         pipeline,
         pipelineHistory,
         accounts,
         clusterPipeline, 
         projectDockerCredentials,
+        envvars
       })=>{
         var piplineObj;
         if(params.mode === 'duplicate'){
@@ -61,6 +68,7 @@ export default Route.extend({
             accounts,
             clusterPipeline, 
             projectDockerCredentials,
+            envvars,
             repositories: [],
           }
         }else{
@@ -73,6 +81,7 @@ export default Route.extend({
                   accounts,
                   clusterPipeline, 
                   projectDockerCredentials,
+                  envvars,
                   repositories: res,
                 }
               })
diff --git a/lib/pipeline/addon/pipeline/template.hbs b/lib/pipeline/addon/pipeline/template.hbs
index d68718f3a..d5584a4c6 100644
--- a/lib/pipeline/addon/pipeline/template.hbs
+++ b/lib/pipeline/addon/pipeline/template.hbs
@@ -16,6 +16,7 @@
 <section class="pipeline-container">
   {{pipeline-stages
     clusterPipeline=model.clusterPipeline
+    envvars=model.envvars
     pipeline=model.pipeline
     stagesDraggable=false
     accounts=model.accounts
diff --git a/lib/pipeline/addon/services/code-mirror.js b/lib/pipeline/addon/services/code-mirror.js
index cb220f762..0c16b8fcf 100644
--- a/lib/pipeline/addon/services/code-mirror.js
+++ b/lib/pipeline/addon/services/code-mirror.js
@@ -1,20 +1,14 @@
 import CodeMirror from 'codemirror';
 import Service from 'ember-service';
+import { singleton } from 'pipeline/utils/pipelineStep';
+import { set, get } from '@ember/object';
 
 export default Service.extend({
   init() {
     this._super(...arguments);
     this._instances = Object.create(null);
   },
-  hintAry: ['CICD_GIT_COMMIT',
-'CICD_GIT_REPO_NAME',
-'CICD_GIT_BRANCH',
-'CICD_GIT_URL',
-'CICD_PIPELINE_ID',
-'CICD_PIPELINE_NAME',
-'CICD_TRIGGER_TYPE',
-'CICD_EXECUTION_ID',
-'CICD_EXECUTION_SEQUENCE'].map(ele=>`\${${ele}}`),
+
   fromTextArea(id, textarea) {
     return this.registerInstance(id, CodeMirror.fromTextArea(textarea));
   },
@@ -37,7 +31,7 @@ export default Service.extend({
     delete this._instances[id];
   },
   getMatchedHint(value, editor) {
-    var hintAry = this.get('hintAry');
+    var hintAry = singleton.hintAry;
     var cur = editor.getCursor();
     var cursorPosition = cur.ch;
     var cursorValue = editor.getLine(cur.line).slice(0, cursorPosition);
diff --git a/lib/pipeline/addon/services/pipeline.js b/lib/pipeline/addon/services/pipeline.js
index 90c3b5632..9f31c19e0 100644
--- a/lib/pipeline/addon/services/pipeline.js
+++ b/lib/pipeline/addon/services/pipeline.js
@@ -1,7 +1,6 @@
 import Service from '@ember/service';
 import { inject as service } from '@ember/service';
 
-
 export default Service.extend({
   globalStore: service(),
   scope: service(),
diff --git a/lib/pipeline/addon/utils/pipelineStep.js b/lib/pipeline/addon/utils/pipelineStep.js
index 21092dc0a..aaeba56ac 100644
--- a/lib/pipeline/addon/utils/pipelineStep.js
+++ b/lib/pipeline/addon/utils/pipelineStep.js
@@ -1,5 +1,9 @@
 const DEFAULT_REGISTRY = 'index.docker.io';
 
+export let singleton = {
+  hintAry: []
+}
+
 export function analyzeImageRepo (images) {
   if(!images){
     return '';
@@ -35,6 +39,7 @@ export function analyzeImageRepo (images) {
 
   return output;
 }
+
 export const environmentTypes = [{
     label: 'C',
     value: 'gcc:latest',

From e3d835b18cab3e5640bf05d991eca7880b48ab88 Mon Sep 17 00:00:00 2001
From: Aaron <aaronwang@rancher.com>
Date: Mon, 9 Apr 2018 17:02:01 +0800
Subject: [PATCH 4/4] Enable user to use up/down key to select pipeline
 variables

---
 .../pipeline-input-var-hint/component.js      | 62 ++++++++++++++++---
 .../pipeline-input-var-hint/template.hbs      |  6 +-
 vendor/codemirror/show-hint.css               |  4 ++
 3 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/lib/pipeline/addon/components/pipeline-input-var-hint/component.js b/lib/pipeline/addon/components/pipeline-input-var-hint/component.js
index 8d0b3e9c5..2ce4c9b47 100644
--- a/lib/pipeline/addon/components/pipeline-input-var-hint/component.js
+++ b/lib/pipeline/addon/components/pipeline-input-var-hint/component.js
@@ -7,6 +7,7 @@ export default Component.extend({
   matchedArry: null,
   positionX: 0,
   positionY: 0,
+  activeIndex: 0,
   codeMirror: service(),
   positionStyle: function(){
     var positionX = this.get('positionX'), positionY=this.get('positionY');
@@ -28,6 +29,11 @@ export default Component.extend({
     var hd = this.get('hidden');
     return hd?'hide':'';
   }.property('hidden'),
+  hiddenObserve: function () {
+    var hd = this.get('hidden');
+    let triggerInputEle = this.get('triggerInputEle');
+    hd&&this.$(triggerInputEle).focus()||this.$(triggerInputEle).blur();
+  }.observes('hidden'),
   showHint(y,x){
     this.set('positionX',x);
     this.set('positionY',y);
@@ -95,9 +101,8 @@ export default Component.extend({
     return false;
     
   },
-  actions: {
-    clickHint(val){
-      var triggerClickHint = this.get('triggerClickHint');
+  setHint(val){
+    var triggerClickHint = this.get('triggerClickHint');
       triggerClickHint&&triggerClickHint(val)
       var triggerInputEle = this.get('triggerInputEle');
       if(!triggerInputEle){
@@ -112,6 +117,11 @@ export default Component.extend({
         $(triggerInputEle).trigger('change',newVal);
         $(triggerInputEle).trigger('input',newVal);
       }
+      this.set('hidden',true);
+  },
+  actions: {
+    clickHint(val){
+      this.setHint(val);
     }
   },
   didRender(){
@@ -134,9 +144,7 @@ export default Component.extend({
         return pos;
       }
     }
-    var clickHiden = ()=>{
-      this.set('hidden',true);
-    };
+
     var scrollPosition = ()=>{
       var hd = this.get('hidden');
       if(hd){
@@ -145,18 +153,56 @@ export default Component.extend({
       var originalCoordinates = this.get('originalCoordinates');
       this.showHint(originalCoordinates.top-this.$(window).scrollTop(),originalCoordinates.left);
     };
-    this.$(document).on('click.hint', clickHiden).on('scroll.hint', scrollPosition);
+    this.$(document).on('scroll.hint', scrollPosition);
   },
   willDestroyElement(){
     this._super();
     this.$(document).off('click.hint');
     this.$(document).off('scroll.hint');
+    this.$(document).off('keyup.hint');
+    this.$(document).off('keyup.hint-return');
   },
   didInsertElement() {
     this._super(...arguments);
     singleton.hintAry = this.get('hintAry');
-    this.$(document).on('keyup', 'input:not(.js-disable-hint)', (e) => {
+    this.$(document).on('keyup.hint', 'input:not(.js-disable-hint)', (e) => {
       $.fn.E_INPUT_HINT.startHint(e.target, ( /*hint*/ ) => {});
     })
+    let $dropdownEle = this.$('.js-hint-dropdown');
+    let $activeLi ;
+    this.$(document).on('keyup.hint-return', (e) => {
+      let hiddenClass = this.get('hidden');
+      let activeIndex = this.get('activeIndex');
+      let matchedArry = this.get('matchedArry');
+      if(!hiddenClass){
+        switch(e.which){
+          //down
+          case 40:
+            activeIndex +=1;
+            if(activeIndex >= matchedArry.length){
+              activeIndex = matchedArry.length - 1;
+            }
+            this.set('activeIndex', activeIndex);
+            $activeLi = this.$('.js-hint-dropdown>li.active')[0];
+            $dropdownEle.scrollTop($activeLi.offsetTop - $dropdownEle.height() + 2*$activeLi.offsetHeight);
+            break;
+          // up
+          case 38:
+            activeIndex -=1;
+            if(activeIndex < 0 ){
+              activeIndex = 0;
+            }
+            this.set('activeIndex', activeIndex);
+            $activeLi = this.$('.js-hint-dropdown>li.active')[0];
+            $dropdownEle.scrollTop($activeLi.offsetTop - $dropdownEle.height());
+            break;
+          // enter
+          case 13:
+            this.setHint(matchedArry[activeIndex]);
+            break;
+          default: break;
+        }
+      }
+    });
   }
 });
diff --git a/lib/pipeline/addon/components/pipeline-input-var-hint/template.hbs b/lib/pipeline/addon/components/pipeline-input-var-hint/template.hbs
index d5d3f2d7d..af3d0743b 100644
--- a/lib/pipeline/addon/components/pipeline-input-var-hint/template.hbs
+++ b/lib/pipeline/addon/components/pipeline-input-var-hint/template.hbs
@@ -1,10 +1,10 @@
 <div style={{positionStyle}} class={{hiddenClass}} >
-  <ul class="dropdown-menu" style="position: static;display:inline-block;max-height: 200px;overflow: scroll">
+  <ul class="dropdown-menu js-hint-dropdown" style="position: static;display:inline-block;max-height: 200px;overflow: scroll">
     {{#if loading}}
       <li>loading...</li>
     {{else}}
-      {{#each matchedArry as |hint|}}
-        <li {{action "clickHint" hint}}> <a href="#">{{hint}}</a> </li>
+      {{#each matchedArry as |hint index|}}
+        <li class="{{if (eq activeIndex index) 'active' ''}}" {{action "clickHint" hint}}> <a href="#">{{hint}}</a> </li>
       {{/each}}
     {{/if}}
   </ul>
diff --git a/vendor/codemirror/show-hint.css b/vendor/codemirror/show-hint.css
index 6b6c0b387..eb362f330 100644
--- a/vendor/codemirror/show-hint.css
+++ b/vendor/codemirror/show-hint.css
@@ -37,3 +37,7 @@ li.CodeMirror-hint-active {
   background: #08f;
   color: white;
 }
+.CodeMirror-hints > li:hover {
+  background: #08f;
+  color: white;
+}