AMBARI-19815 : Recent workflows in Workflow designer. (Venkata Sairam via nitirajrathore)

contrib/views/wfmanager/src/main/resources/ui/app/components/designer-workspace.js

@@ -24,6 +24,7 @@ export default Ember.Component.extend({
   appPath : null,
   type : 'wf',
   tabId : 0,
+  store:Ember.inject.service(),
   //isProjectManagerEnabled : Constants.isProjectManagerEnabled,
   hasMultitabSupport : true,
   tabCounter : new Map(),
@@ -51,8 +52,14 @@ export default Ember.Component.extend({
         this.get('tabs').forEach((tab)=>{
           this.get('tabCounter').set(tab.type, (this.get('tabCounter').get(tab.type)) + 1);
         }, this);
-        Ember.getOwner(this).lookup('route:design').on('openNewTab', function(path){
-          this.createNewTab('wf', path);
+        Ember.getOwner(this).lookup('route:design').on('openNewTab', function(path, type){
+          if(type === 'COORDINATOR'){
+            this.createNewTab('coord', path);
+          }else if(type === 'BUNDLE'){
+            this.createNewTab('bundle', path);
+          }else{
+            this.createNewTab('wf', path);
+          }
         }.bind(this));
 
       }.bind(this)).catch(function(data){
@@ -92,6 +99,11 @@ export default Ember.Component.extend({
     this.get('tabs').clear();
   }.on('willDestroyElement'),
   createNewTab : function(type, path){
+    var existingTab = this.get('tabs').findBy("filePath", path);
+    if(existingTab && path){
+      this.$('.nav-tabs a[href="#' + existingTab.id + '"]').tab("show");
+      return;
+    }
     var tab = {
       type : type,
       id : this.generateTabId(),
@@ -157,7 +169,39 @@ export default Ember.Component.extend({
   generateTabId(){
     return 'tab-'+ Math.ceil(Math.random() * 100000);
   },
+  recentFilesSorted: Ember.computed.sort("recentFiles", "['updatedAt:desc']"),
+  projList:Ember.computed("recentFilesSorted", function() {
+     return this.get("recentFilesSorted").slice(0, 10);
+  }),
   actions : {
+    deleteWorkflowJob(){
+      this.sendAction("deleteWorkflowJob");
+    },
+    showTopRecentList(){
+      var deferred = Ember.RSVP.defer();
+      this.sendAction('getAllRecentWorks', deferred);
+      deferred.promise.then((data)=>{
+        this.set("recentFiles", data);
+      }).catch((e)=>{
+        console.error(e);
+      })
+    },
+    editWorkflow(path, type){
+      this.sendAction('editWorkflow', path, type);
+    },
+    showProjectManagerList(){
+      var deferred = Ember.RSVP.defer();
+      this.sendAction('getAllRecentWorks', deferred);
+      deferred.promise.then((data)=>{
+        this.set("recentFiles", data);
+        this.set("isProjManagerVisible", true);
+      }).catch((e)=>{
+        console.error(e);
+      })
+    },
+    hideProjectManagerList(){
+      this.set("isProjManagerVisible", false);
+    },
     register(tabInfo, context){
       var tab = this.get('tabs').findBy('id', tabInfo.id);
       Ember.set(tab, 'context', context);

contrib/views/wfmanager/src/main/resources/ui/app/components/drafts-wf.js

@@ -19,43 +19,87 @@ import Ember from 'ember';
 const { computed } = Ember;
 
 export default Ember.Component.extend({
+  "search": "",
+  "isBundle": true,
+  "isCoordinator": true,
+  "isWorkflow": true,
+  "filteredModels": Ember.computed("model", "search", "isBundle", "isCoordinator", "isWorkflow", function(){
+	Ember.run.later(()=>{
+      this.$('.actions').hide();
+    }, 10);
+  	var condition = "", condition1 = "", condition2 = "", searchTxt = this.get("search");
+  	if(searchTxt && searchTxt.length){
+  	  condition1 = "(role.get('name') && role.get('name').indexOf(searchTxt)>-1)";
+  	}
+  	if(this.get("isWorkflow")){
+  		if(condition2.length){
+  	  		condition2 = condition2 + " role.get('type') == 'WORKFLOW'";
+  	  	} else {
+  	  		condition2 = condition2 + " role.get('type') == 'WORKFLOW'";
+  	  	}
+  	}
+  	if(this.get("isCoordinator")){
+  		if(condition2.length){
+  			condition2 = condition2 + " || role.get('type') == 'COORDINATOR'";
+  		} else {
+  			condition2 = condition2 + "role.get('type') == 'COORDINATOR'";
+  		}
+  	}
+  	if(this.get("isBundle")){
+  		if(condition2.length) {
+  			condition2 = condition2 + " || role.get('type') == 'BUNDLE'";
+  		} else {
+  			condition2 = condition2 + " role.get('type') == 'BUNDLE'";
+  		}
+  	}
+  	if(condition1.length && condition2.length) {
+    	condition = condition1 + "&&(" + condition2+ ")";
+  	} else if(condition2.length) {
+    	condition = condition2;
+  	}
+	return this.get("model").filter( (role) => {
+	  return eval(condition);
+	});
+  }),
+  modelSorted : Ember.computed.sort("filteredModels", "['updatedAt:desc']"),
   "isDeleteDraftConformation": false,
   "currentDraft": undefined,
   "deleteInProgress": false,
   "deleteMsg": undefined,
+  "currentJobService" : Ember.inject.service('current-job'),
   elementsInserted: function () {
       this.$('.actions').hide();
   }.on("didInsertElement"),
   rendered : function(){
     var self = this;
-    this.$("#configureJob").on('hidden.bs.modal', function () {
+    this.$("#projectsList").on("hidden.bs.modal", function () {
+      this.sendAction("close");
+      history.back();
+    }.bind(this));
+    this.$("#projectDeleteModal").on('hidden.bs.modal', function () {
+      self.set("isDeleteDraftConformation", true);
       self.set("deleteMsg", null);
       self.set("deleteInProgress", false);
     }.bind(this));
+    this.$("#projectsList").modal("show");
+    Ember.$("#loading").css("display", "none");
   }.on('didInsertElement'),
   store: Ember.inject.service(),
   actions: {
-    importActionToEditor ( path ) {
-      this.sendAction('editWorkflow', path);
+    importActionToEditor ( path, type ) {
+      this.$("#projectsList").modal("hide");
+      this.sendAction('editWorkflow', path, type);
     },
-    deleteDraftConformation (job ){
-	    this.set("isDeleteDraftConformation", true);
-	    this.$("#configureJob").modal("show");
+    confirmDelete (job ){
+	    this.set("showingConfirmation", true);
 	    this.set("currentDraft", job);
     },
     deleteDraft () {
-	    this.set("deleteInProgress", true);
-	    var job = this.get("currentDraft"), self= this;
-  		this.get("store").findRecord('wfproject', job.id).then(function(post) {
-  		  post.destroyRecord();
-  		}).then(function () {
-  	      self.set("deleteInProgress", false);
-  	      self.set("deleteMsg", "Draft successfully deleted.");
-            console.log("Deleted successfully");
-  	    }).catch(function (response) {
-  	      self.set("deleteInProgress", false);
-  	      self.set("deleteMsg", "There is some problem while deletion.Please try again.");
-  	    });
+	    this.sendAction("deleteWorkflow", this.get('currentDraft'));
+    },
+    closeProjects () {
+		  $('.modal-backdrop').remove();
+		  this.$("#projectsList").modal("hide");
     },
     showActions (job) {
       this.$('.'+job.get("updatedAt")+'Actions').show();

contrib/views/wfmanager/src/main/resources/ui/app/components/flow-designer.js

@@ -145,6 +145,35 @@ export default Ember.Component.extend(FindNodeMixin, Validations, {
       });
     }
   },
+
+  importWorkflowFromProjManager(path){
+      var self = this;
+      this.set("showingFileBrowser",false);
+      if(path){
+        self.set("isWorkflowImporting", true);
+        this.isDraftExists(path).promise.then(function(data){
+          var draftData = JSON.parse(data);
+          if(draftData.draftExists && draftData.isDraftCurrent) {
+              self.set("workflowFilePath", path);
+              self.getDraftWorkflowData(path).promise.then(function(data){
+                var workflowImporter = WorkflowJsonImporter.create({});
+                var workflow = workflowImporter.importWorkflow(data);
+                self.resetDesigner();
+                self.set("workflow", workflow);
+                self.initAndRenderWorkflow();
+                self.set("isWorkflowImporting", false);
+                self.doValidation();
+              }.bind(this)).catch(function(data){
+              });
+          } else {
+            self.importWorkflow(path);
+          }
+        }.bind(this)).catch(function(e){
+          console.error(e);
+        });
+      }
+  },
+
   observeXmlAppPath : Ember.observer('xmlAppPath', function(){
     if(!this.get('xmlAppPath') || null === this.get('xmlAppPath')){
       return;
@@ -193,7 +222,7 @@ export default Ember.Component.extend(FindNodeMixin, Validations, {
         }
       }
     }
-    this.importWorkflow(relXmlPath);
+    this.importWorkflowFromProjManager(relXmlPath);
   },
   setConentWidth(){
     var offset = 120;

contrib/views/wfmanager/src/main/resources/ui/app/components/recent-projects.js

@@ -0,0 +1,57 @@
+/*
+*    Licensed to the Apache Software Foundation (ASF) under one or more
+*    contributor license agreements.  See the NOTICE file distributed with
+*    this work for additional information regarding copyright ownership.
+*    The ASF 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 Ember from 'ember';
+
+export default Ember.Component.extend({
+  store: Ember.inject.service(),
+  rendered : function(){
+  	var self = this;
+    this.$("#projectDeleteModal").on('hidden.bs.modal', function () {
+      self.set("isDeleteDraftConformation", true);
+      self.set("deleteMsg", null);
+      self.set("deleteInProgress", false);
+    }.bind(this));
+    this.$("#projectsList").on("hidden.bs.modal", function () {
+      this.sendAction("close");
+    }.bind(this));
+    this.$("#projectsList").modal("show");
+  }.on('didInsertElement'),
+  actions: {
+  	close(){
+  		this.sendAction("close");
+  	},
+  	deleteWorkflow (job) {
+	    this.set("deleteInProgress", true);
+	    var self= this;
+	    var rec = this.get("store").peekRecord('wfproject', job.id);
+	    if(rec){
+	      rec.destroyRecord().then(function () {
+  	      self.set("deleteInProgress", false);
+  	      self.set("deleteMsg", "Workflow successfully deleted.");
+  	    }).catch(function (response) {
+  	      self.set("deleteInProgress", false);
+  	      self.set("deleteMsg", "There is some problem while deletion.Please try again.");
+  	    });
+	    }
+    },
+    editWorkflow ( path, type ) {
+      this.sendAction('editWorkflow', path, type);
+      this.$("#projectsList").modal("hide");
+    },
+  }
+});

contrib/views/wfmanager/src/main/resources/ui/app/components/save-wf.js

@@ -142,7 +142,7 @@ export default Ember.Component.extend(Validations, {
         detail=jsonResp.message;
       }
     }else{
-      detail=response; 
+      detail=response;
     }
     return detail;
   },

contrib/views/wfmanager/src/main/resources/ui/app/helpers/format-unicode-date.js

@@ -18,7 +18,8 @@
 import Ember from 'ember';
 
 export function formatUnicodeDate(params) {
-  return new Date(parseInt(params[0])).toUTCString();
+    var date = new Date(parseInt(params[0])).toUTCString();
+    return [moment(date).format("MM/DD/YYYY hh:mm A")].join("")
 }
 
 export default Ember.Helper.helper(formatUnicodeDate);

contrib/views/wfmanager/src/main/resources/ui/app/models/wfproject.js

@@ -19,7 +19,8 @@ import DS from 'ember-data';
 
 export default DS.Model.extend({
 	workflowDefinitionPath: DS.attr("string"),
+	name: DS.attr("string"),
 	type: DS.attr("string"),
-	updatedAt: DS.attr("string"),
+	updatedAt: DS.attr("number"),
 	owner:DS.attr("string")
 });

contrib/views/wfmanager/src/main/resources/ui/app/routes/design.js

@@ -19,7 +19,7 @@ import Ember from 'ember';
 import SchemaVersions from '../domain/schema-versions';
 
 export default Ember.Route.extend(Ember.Evented, {
-
+  currentDraft: null,
   beforeModel: function(transition){
     this.set("xmlAppPath", transition.queryParams.appPath);
     this.controllerFor('design').set("xmlAppPath", transition.queryParams.appPath);
@@ -71,25 +71,30 @@ export default Ember.Route.extend(Ember.Evented, {
       this.set('failedSchemaVersions', true);
       transition.retry();
     },
-    editWorkflow(path){
-      this.trigger('openNewTab', path);
+    editWorkflow(path, type){
+      this.trigger('openNewTab', path, type);
+    },
+    deleteWorkflow(job){
+      this.set("currentDraft", job);
     },
     showDashboard(){
       this.controller.set('dashboardShown', true);
       this.transitionTo('design.dashboardtab');
     },
-    showProjManager(){
-      //this.controller.set('ProjManagerShown', true);
-      this.transitionTo('design.projManagerTab');
+    getAllRecentWorks(deferred){
+      this.store.findAll("wfproject", { reload: true }).then((data)=>{
+        deferred.resolve(data);
+      }).catch((e)=>{
+        deferred.reject(e);
+      });
     },
     hideDashboard(){
       this.controller.set('dashboardShown', false);
       this.transitionTo('design');
     },
     hideProjManager(){
-      //this.controller.set('ProjManagerShown', false);
+      this.controller.set('dashboardShown', false);
       this.transitionTo('design');
     }
   }
-
-});
+});

contrib/views/wfmanager/src/main/resources/ui/app/routes/design/proj-manager-tab.js

@@ -19,11 +19,14 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
   model:function(params) {
-    return this.store.findAll('wfproject');
+	var data = this.store.findAll("wfproject").catch((error) => {
+      console.log(error);
+    });
+    return data;
   },
   actions: {
     routeToDesigner(options){
       this.transitionTo("design", options);
-    }
+  	}
   }
 });

contrib/views/wfmanager/src/main/resources/ui/app/services/current-job.js

@@ -0,0 +1,28 @@
+/*
+*    Licensed to the Apache Software Foundation (ASF) under one or more
+*    contributor license agreements.  See the NOTICE file distributed with
+*    this work for additional information regarding copyright ownership.
+*    The ASF 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 Ember from 'ember';
+
+export default Ember.Service.extend({
+	currentJob: null,
+	setCurrentJob(job){
+      this.set("currentJob", job);
+	},
+	getCurrentJob(){
+      return this.get("currentJob");
+	}
+});

contrib/views/wfmanager/src/main/resources/ui/app/styles/app.less

@@ -1587,15 +1587,11 @@ input:invalid {
   width:5%;
 }
 #draftsTable {
-  padding-top: 0.5%;
-  padding-left: 0.5%;
-  padding-right: 0.5%;
   max-height:500px;
-  overflow:scroll;
+  overflow-y:scroll;
 }
 #emptyDrafts {
-  padding-left:40%;
-  padding-top:5%;
+  padding-left:35%;
 }
 .width300 {
   white-space: nowrap;
@@ -1627,11 +1623,17 @@ input:invalid {
   width: 100%;
   min-height: 100px;
 }
+.displayBlock {
+ display : block;
+}
 .no-asset-records {
   text-align: center;
   padding: 3px;
   overflow-y: auto;
 }
+#projectsList .modal-dialog {
+  width:850px;
+}
 .custom-action-xml{
   width: 100%;
   min-height: 175px;
@@ -1640,3 +1642,36 @@ input:invalid {
   width: 650px;
   top: 60px;
 }
+.tab-pane #draftsTable, #projectsList #dashboard, .tab-pane .searchWorkflows {
+  display : none;
+}
+#projectDeleteModal .modal-dialog {
+  width:500px;
+}
+.projects-list {
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.proj-menu {
+  width:200px;
+}
+.pl10 {
+  padding-left:10px;
+}
+.fixed-col {
+  width:15%;
+}
+.width100 {
+    white-space: nowrap;
+    width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.l-input {
+  height: 30px;
+  width: 60%;
+  margin-bottom: 10px;
+  margin-right: 3px;
+}

contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-config.hbs

@@ -138,5 +138,5 @@
   {{bundle-version-settings bundle=bundle showVersionSettings="showVersionSettings" }}
 {{/if}}
 {{#if showingSaveWorkflow}}
-  {{save-wf type='wf' close="closeSave" jobFilePath=bundleFilePath openFileBrowser="openFileBrowser" closeFileBrowser="closeFileBrowser" jobConfigs=configForSave}}
+  {{save-wf type='bundle' close="closeSave" jobFilePath=bundleFilePath openFileBrowser="openFileBrowser" closeFileBrowser="closeFileBrowser" jobConfigs=configForSave}}
 {{/if}}

contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-config.hbs

@@ -381,5 +381,5 @@ okBtnText="Continue" cancelBtnText="Cancel" onOk="resetCoordinator"}}{{/confirma
 </div>
 {{/if}}
 {{#if showingSaveWorkflow}}
-  {{save-wf type='wf' close="closeSave" jobFilePath=coordinatorFilePath openFileBrowser="openFileBrowser" closeFileBrowser="closeFileBrowser" jobConfigs=configForSave}}
+  {{save-wf type='coord' close="closeSave" jobFilePath=coordinatorFilePath openFileBrowser="openFileBrowser" closeFileBrowser="closeFileBrowser" jobConfigs=configForSave}}
 {{/if}}

contrib/views/wfmanager/src/main/resources/ui/app/templates/components/designer-workspace.hbs

@@ -26,6 +26,39 @@
         </div>
         <div class="col-sm-8">
           <div class="text-right pull-right paddingtop7">
+              <button {{action 'showDashboard'}} class="backto-dashboard btn btn-default" title="Workflow Dashboard">
+                <i class="fa fa-th marginright5"></i>Dashboard
+              </button>
+            <div class="dropdown create-wf-menu">
+              <button class="btn btn-default dropdown-toggle borderRightRadiusNone" {{action "showTopRecentList"}} type="button" data-toggle="dropdown">Recent
+                <span class="caret"></span></button>
+                <ul class="dropdown-menu proj-menu">
+                 {{#if projList}}
+                  {{#each projList as |proj index|}}
+                    <li>
+                      <a id="wfs_btn" class="pointer projects-list" title={{proj.workflowDefinitionPath}} {{action "editWorkflow" proj.workflowDefinitionPath proj.type}}>
+                      {{#if (eq proj.type "WORKFLOW")}}
+                          <i class="fa fa-sitemap marginright5"></i>{{proj.name}}
+                      {{else if  (eq proj.type "COORDINATOR")}}
+                          <i class="fa fa-history marginright5"></i>{{proj.name}}
+                      {{else}}
+                          <i class="fa fa-cubes marginright5"></i>{{proj.name}}
+                      {{/if}}
+                      </a>
+                    </li>
+                   {{/each}}
+                  <li>
+                      <a {{action "showProjectManagerList"}} title="My Workflows" class="pointer">
+                      More...
+                      </a>
+                  </li>
+                 {{else}}
+                  <li class="pl10">
+                    No recent workflows.
+                  </li>
+                 {{/if}}
+                </ul>
+             </div>
             <div class="dropdown create-wf-menu">
               <button class="btn btn-default dropdown-toggle borderRightRadiusNone" type="button" data-toggle="dropdown">Create
                 <span class="caret"></span></button>
@@ -62,9 +95,6 @@
                   </li>
                 </ul>
               </div>
-              <button {{action 'showDashboard'}} class="backto-dashboard btn btn-default" title="Workflow Dashboard">
-                <i class="fa fa-th marginright5"></i>Dashboard
-              </button>
               <button {{action "showAssetManager" true}} class="btn btn-default" title="Manage Assets">
                   Manage Assets
               </button>
@@ -128,6 +158,9 @@
   {{#if showingAssetManager}}
     {{#asset-manager showAssetManager="showAssetManager"}}{{/asset-manager}}
   {{/if}}
+  {{#if isProjManagerVisible}}
+    {{recent-projects recentFiles=recentFiles routeToDesigner="routeToDesigner" editWorkflow="editWorkflow" deleteWorkflow="deleteWorkflow" close="hideProjectManagerList" deleteWorkflowJob="deleteWorkflowJob" currentDraft=currentDraft}}
+  {{/if}}
   {{#if showingWarning}}
   {{#confirmation-dialog title="Confirm workflow reset"
     confirmationMessage="Any unsaved changes may be lost. Do you want to close this tab ?"

contrib/views/wfmanager/src/main/resources/ui/app/templates/components/drafts-wf.hbs

@@ -15,107 +15,75 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
-{{#if model}}
-<div id="draftsTable">
-<table id="search-table" class="table search-table listing table-striped table-hover table-bordered" cellspacing="0" width="100%">
-  <thead>
-    <tr>
-      <!--th>Draft Name</th-->
-      <th>Type</th>
-      <th>Draft Path</th>
-      <th>Created Time</th>
-      <th>Action</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#if model}}
-    {{#each model as |job idx|}}
-    <tr>
-    <!--td title={{job.workflowDefinitionPath}}> <div class="width300">{{job.workflowDefinitionPath}}</div></td-->
-    <td class="{{job.type}} cyScrollMsg">
-    {{#if (eq job.type "WORKFLOW")}}
-      <i class="fa fa-sitemap marginright5"></i>
-    {{/if}}
-    </td>
-		<td title={{job.workflowDefinitionPath}}>
-     <div class="width300">
-       {{job.workflowDefinitionPath}}
-     </div>
-    </td>
-		<td> {{format-unicode-date job.updatedAt}}</td>
-		<td class=" no-sort" {{action 'hideActions' job on="mouseLeave"}} style="width:200px;">
-		  <div id="actions-div" class="pull-left Actions{{job.updatedAt}}">
-		    <button {{action 'showActions' job on='mouseEnter'}} type="button" class="btn btn-default isOn">
-		      <i class="fa fa-cog" aria-hidden="true"></i>
-		    </button>
-		  </div>
-		  <div class="pull-left {{job.updatedAt}}Actions actions" id="actions">
-		    <div class="wf-buttons btn-group btn-group-sm" role="group" aria-label="buttons">
-		      <button {{action "importActionToEditor" job.workflowDefinitionPath}} type="button" class="btn btn-default">
-		        Edit
-		      </button>
-		      <button {{action 'deleteDraftConformation' job}} type="button" class="btn btn-default">
-		        Delete
-		      </button>
-		    </div>
-		  </div>
-		</td>
-	</tr>
-    {{/each}}
-    {{/if}}
-  </tbody>
-</table>
+<div id="loading" class="displayBlock">
+    {{spin-spinner lines=13 length=20 width=10}}
 </div>
-<div id="draftsNum">Displaying {{model.length}} projects</div>
+<div class="searchWorkflows">
+  {{input type="checkbox" name="isWorkflow" checked=isWorkflow}}Workflow&nbsp;&nbsp;
+  {{input type="checkbox" name="isCoordinator" checked=isCoordinator}}Coordinator&nbsp;&nbsp;
+  {{input type="checkbox" name="isBundle" checked=isBundle}}Bundle&nbsp;&nbsp;
+  {{input type="text" class="l-input" value=search placeholder="Workflow Name"}}
+</div>
+{{#if modelSorted}}
+    <div id="draftsTable">
+        <table id="search-table" class="table search-table listing table-striped table-hover table-bordered"
+               cellspacing="0" width="100%">
+            <thead>
+              <tr>
+                  <!--th>Draft Name</th-->
+                  <th></th>
+                  <th>Name</th>
+                  <th>Path</th>
+                  <th>Updated at</th>
+                  <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+            {{#if modelSorted}}
+                {{#each modelSorted as |job idx|}}
+                {{#if true}}
+                    <tr>
+                        <!--td title={{job.workflowDefinitionPath}}> <div class="width300">{{job.workflowDefinitionPath}}</div></td-->
+                        <td class="{{job.type}} cyScrollMsg">
+                          {{#if (eq job.type "WORKFLOW")}}
+                              <i class="fa fa-sitemap marginright5"></i>
+                          {{else if  (eq job.type "COORDINATOR")}}
+                              <i class="fa fa-history marginright5"></i>
+                          {{else}}
+                              <i class="fa fa-cubes marginright5"></i>
+                          {{/if}}
+                        </td>
+                        <td title={{job.name}}>
+                            <div class="width100">
+                              {{job.name}}
+                            </div>
+                        </td>
+                        <td title={{job.workflowDefinitionPath}}>
+                            <div class="width300">
+                                {{job.workflowDefinitionPath}}
+                            </div>
+                        </td>
+                        <td>
+                            <div class="width50">
+                                {{format-unicode-date job.updatedAt}}
+                            </div>
+                        </td>
+                        <td class=" no-sort fixed-col">
+                            <button {{action "importActionToEditor" job.workflowDefinitionPath job.type}} type="button"
+                                                                                                         class="btn btn-default">
+                                        Open
+                                    </button>
+                        </td>
+                    </tr>
+                    {{/if}}
+                {{/each}}
+            {{/if}}
+            </tbody>
+        </table>
+    </div>
+    <div id="draftsNum">Displaying {{modelSorted.length}} workflows</div>
 {{else}}
-  <div id="emptyDrafts">
-    There are no projects currently
-  </div>
-{{/if}}
-{{#if true}}
-<div class="modal fade" id="configureJob" role="dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal">&times;</button>
-          <h4 class="modal-title">Delete Draft Confirmation</h4>
-      </div>
-      <div class="modal-body">
-         {{#if deleteMsg}}
-        <div class="row form-group">
-          <div class="col-xs-4">
-          </div>
-          <div class="col-xs-8">
-            <div class="input-group">
-              {{deleteMsg}}
-            </div>
-          </div>
-        </div>
-          {{/if}}
-          {{#unless deleteMsg}}
-        <div class="row form-group">
-          <div class="col-xs-4">
-          </div>
-          <div class="col-xs-8">
-            <div class="input-group">
-              <label class="control-label" for="{{type}}-path">Do you want to delete the draft?</label>
-            </div>
-          </div>
-        </div>
-        {{/unless}}
-      </div>
-      <div class="modal-footer">
-        {{#if deleteInProgress}}
-          {{spin-spinner lines=10 length=10 width=5 radius=10 }}
-          <span class="pull-left">Deleting the draft</span>
-        {{/if}}
-        <button type="button" class="btn btn-default" data-dismiss="modal" {{action "closeDraftWindow"}}>Close</button>
-        {{#unless deleteMsg}}
-          <button type="button" class="btn btn-primary" {{action "deleteDraft" }}>Delete</button>
-        {{/unless}}
-      </div>
+    <div id="emptyDrafts">
+        <label class="control-label" for="{{type}}-path">There are no workflows currently</label>
     </div>
-  </div>
-</div>
-{{/if}}
+{{/if}}

contrib/views/wfmanager/src/main/resources/ui/app/templates/components/recent-projects.hbs

@@ -0,0 +1,33 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF 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.
+}}
+<div class="modal" id="projectsList" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+        <h4 class="modal-title">My Workflows</h4>
+      </div>
+      <div class="modal-body">
+         {{drafts-wf model=recentFiles routeToDesigner="routeToDesigner" editWorkflow="editWorkflow" deleteWorkflow="deleteWorkflow"}}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>

contrib/views/wfmanager/src/main/resources/ui/app/templates/design.hbs

@@ -15,5 +15,5 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-{{designer-workspace xmlAppPath=xmlAppPath showDashboard="showDashboard" showProjManager="showProjManager"
+{{designer-workspace xmlAppPath=xmlAppPath editWorkflow="editWorkflow" currentDraft=currentDraft showDashboard="showDashboard" showProjManager="showProjManager" getAllRecentWorks="getAllRecentWorks"
   hideDashboard="hideDashboard" hideProjManager="hideProjManager" adminConfig=model.adminConfig}}

contrib/views/wfmanager/src/main/resources/ui/app/templates/design/proj-manager-tab.hbs

@@ -16,4 +16,4 @@
 * limitations under the License.
 }}
 
-{{drafts-wf model=model routeToDesigner="routeToDesigner" editWorkflow="editWorkflow"}}
+{{drafts-wf model=model routeToDesigner="routeToDesigner" editWorkflow="editWorkflow" deleteWorkflow="deleteWorkflow"}}