AMBARI-20139.Need to show data in sorted order in Hive view(Venkata Sairam)

contrib/views/hive20/src/main/resources/ui/app/components/jobs-browser.js

@@ -24,7 +24,12 @@ export default Ember.Component.extend({
   maxEndTime: null,
   statusFilter: null,
   titleFilter: null,
-
+  jobId: {'asc':true},
+  title: {'noSort':true},
+  status: {'noSort':true},
+  dateSubmitted: {'noSort':true},
+  duration: {'noSort':true},
+  sortProp:['id:desc'],
   sortedJobs: Ember.computed.sort('jobs', function (m1, m2) {
     if (m1.get('dateSubmitted') < m2.get('dateSubmitted')) {
       return 1;
@@ -42,7 +47,7 @@ export default Ember.Component.extend({
     }
   }),
 
-  filteredJobs: Ember.computed('titleFilteredJobs', 'statusFilter', function () {
+  filteredJobs: Ember.computed('titleFilteredJobs', 'statusFilter', 'sortProp', function () {
     if (this.get('statusFilter')) {
       return  this.get('titleFilteredJobs').filter((entry) => entry.get('status').toLowerCase() === this.get('statusFilter'));
     } else {
@@ -50,6 +55,8 @@ export default Ember.Component.extend({
     }
   }),
 
+  filteredJobsSorted: Ember.computed.sort('filteredJobs', 'sortProp'),
+
   statusCounts: Ember.computed('titleFilteredJobs', function () {
     return this.get('titleFilteredJobs').reduce((acc, item, index) => {
       let status = item.get('status').toLowerCase();
@@ -64,6 +71,13 @@ export default Ember.Component.extend({
 
 
   actions: {
+    sort(sortProp, sortField, key) {
+      let perm = {};
+      perm[key] = true;
+      this.set(sortField, perm);
+      this.set('sortProp', [sortProp]);
+    },
+
     setDateRange(startDate, endDate) {
       this.sendAction('filterChanged', startDate, endDate);
     },

contrib/views/hive20/src/main/resources/ui/app/components/setting-list.js

@@ -20,7 +20,16 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   settings: [],
+  settingsConf: {'noSort':true},
+  sortProp:['id:desc'],
+  settingsSorted: Ember.computed.sort('settings', 'sortProp'),
   actions: {
+    sort(sortProp, sortField, key) {
+      let perm = {};
+      perm[key] = true;
+      this.set(sortField, perm);
+      this.set('sortProp', [sortProp]);
+    },
     addNewSettings() {
       this.sendAction('newSettings');
     }

contrib/views/hive20/src/main/resources/ui/app/controllers/savedqueries.js

@@ -0,0 +1,24 @@
+/**
+ * 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.Controller.extend({
+	"sortProp": ['id:desc'],
+	sortedSavedQueries : Ember.computed.sort("savedQuerylist", "sortProp")
+});

contrib/views/hive20/src/main/resources/ui/app/controllers/udfs.js

@@ -19,4 +19,6 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
+   "sortProp": ['id:desc'],
+   sortedUDF : Ember.computed.sort("udflist", "sortProp")
 });

contrib/views/hive20/src/main/resources/ui/app/routes/savedqueries.js

@@ -34,10 +34,19 @@ export default Ember.Route.extend(UILoggerMixin, {
 
     controller.set('showDeleteSaveQueryModal', false);
     controller.set('selectedSavedQueryId', null);
+    controller.set('preview', {"noSort":true});
+    controller.set('title', {"noSort":true});
+    controller.set('dataBase', {"noSort":true});
+    controller.set('owner', {"noSort":true});
   },
 
   actions: {
-
+    sort(sortProp, sortField, key) {
+      let perm = {};
+      perm[key] = true;
+      this.get('controller').set(sortField, perm);
+      this.get('controller').set('sortProp', [sortProp]);
+    },
     deleteSavedQuery(){
       let queryId = this.get('controller').get('selectedSavedQueryId');
       let self = this;

contrib/views/hive20/src/main/resources/ui/app/routes/udfs.js

@@ -44,10 +44,18 @@ export default Ember.Route.extend({
       fileResourceList.push({'name':'Add New File Resource', 'action':'addNewFileResource'});
       controller.set('fileResourceList', fileResourceList);
     });
+    controller.set('name', {'noSort':true});
+    controller.set('classname', {'noSort':true});
+    controller.set('owner', {'noSort':true});
   },
 
   actions:{
-
+    sort(sortProp, sortField, key) {
+      let perm = {};
+      perm[key] = true;
+      this.get('controller').set(sortField, perm);
+      this.get('controller').set('sortProp', [sortProp]);
+    },
     refreshUdfList(){
       this.get('store').findAll('udf').then((data) => {
         let udfList = [];

contrib/views/hive20/src/main/resources/ui/app/styles/app.scss

@@ -1009,3 +1009,7 @@ rect.operator__box {
 .button-container {
   margin-top: 10px;
 }
+
+.sort-icon {
+  padding-left: 5px;
+}

contrib/views/hive20/src/main/resources/ui/app/templates/components/jobs-browser.hbs

@@ -54,16 +54,46 @@
     <table class="table table-striped">
       <thead>
         <tr>
-          <th width="10%">Job ID</th>
-          <th width="30%">Title</th>
-          <th width="10%">Status</th>
-          <th width="25%">Start time</th>
-          <th width="20%" >Duration(in seconds)</th>
+          <th width="10%">Job ID
+          <span class="sort-icon">
+            {{#if jobId.noSort}}<i class="fa fa-chevron-right" {{action "sort" "id" "jobId" "desc"}}></i>{{/if}}
+            {{#if jobId.desc}}<i class="fa fa-chevron-down" {{action "sort" "id:desc" "jobId" "asc"}}></i>{{/if}}
+            {{#if jobId.asc}}<i class="fa fa-chevron-up" {{action "sort" "''" "jobId" "noSort"}}></i>{{/if}}
+          </span>
+          </th>
+          <th width="30%">Title
+          <span class="sort-icon">
+            {{#if title.noSort}}<i class="fa fa-chevron-right" {{action "sort" "title" "title" "desc"}}></i>{{/if}}
+            {{#if title.desc}}<i class="fa fa-chevron-down" {{action "sort" "title:desc" "title" "asc"}}></i>{{/if}}
+            {{#if title.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "title" "noSort"}}></i>{{/if}}
+          </span>
+          </th>
+          <th width="10%">Status
+          <span class="sort-icon">
+            {{#if status.noSort}}<i class="fa fa-chevron-right" {{action "sort" "status" "status" "desc"}}></i>{{/if}}
+            {{#if status.desc}}<i class="fa fa-chevron-down" {{action "sort" "status:desc" "status" "asc"}}></i>{{/if}}
+            {{#if status.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "status" "noSort"}}></i>{{/if}}
+          </span>
+          </th>
+          <th width="25%">Start time
+          <span class="sort-icon">
+            {{#if dateSubmitted.noSort}}<i class="fa fa-chevron-right" {{action "sort" "dateSubmitted" "dateSubmitted" "desc"}}></i>{{/if}}
+            {{#if dateSubmitted.desc}}<i class="fa fa-chevron-down" {{action "sort" "dateSubmitted:desc" "dateSubmitted" "asc"}}></i>{{/if}}
+            {{#if dateSubmitted.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "dateSubmitted" "noSort"}}></i>{{/if}}
+          </span>
+          </th>
+          <th width="20%" >Duration(in seconds)
+          <span class="sort-icon">
+            {{#if duration.noSort}}<i class="fa fa-chevron-right" {{action "sort" "duration" "duration" "desc"}}></i>{{/if}}
+            {{#if duration.desc}}<i class="fa fa-chevron-down" {{action "sort" "duration:desc" "duration" "asc"}}></i>{{/if}}
+            {{#if duration.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "duration" "noSort"}}></i>{{/if}}
+          </span>
+          </th>
           <th>Action</th>
         </tr>
       </thead>
       <tbody>
-        {{#each filteredJobs as |job| }}
+        {{#each filteredJobsSorted as |job| }}
           {{job-item job=job}}
         {{/each}}
       </tbody>

contrib/views/hive20/src/main/resources/ui/app/templates/components/setting-list.hbs

@@ -19,13 +19,17 @@
 <table class="table table-bordered table-hover">
   <thead>
   <tr>
-    <th width="40%">KEY</th>
+    <th width="40%">KEY
+      {{#if settingsConf.noSort}}<i class="fa fa-chevron-right" {{action "sort" "key" "settingsConf" "desc"}}></i>{{/if}}
+      {{#if settingsConf.desc}}<i class="fa fa-chevron-down" {{action "sort" "key:desc" "settingsConf" "asc"}}></i>{{/if}}
+      {{#if settingsConf.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "settingsConf" "noSort"}}></i>{{/if}}
+    </th>
     <th width="40%">VALUE</th>
     <th width="20%">ACTIONS</th>
   </tr>
   </thead>
   <tbody>
-  {{#each settings as |setting|}}
+  {{#each settingsSorted as |setting|}}
     {{yield setting}}
   {{/each}}
   <tr class="new-settings text-center">

contrib/views/hive20/src/main/resources/ui/app/templates/savedqueries.hbs

@@ -19,20 +19,44 @@
 <div class="row jobs-table">
   <div class="col-md-12">
 
-    {{#if savedQuerylist.length}}
+    {{#if sortedSavedQueries.length}}
 
-      <table class="table table-striped">
-        <thead>
-        <tr>
-          <th width="30%">Preview</th>
-          <th width="20%">Title</th>
-          <th width="20%">Database</th>
-          <th width="20%">Owner</th>
-          <th width="10%">Action</th>
+    <table class="table table-striped">
+      <thead>
+      <tr>
+        <th width="30%">Preview
+          <span class="sort-icon">
+            {{#if preview.noSort}}<i class="fa fa-chevron-right" {{action "sort" "shortQuery:asc" "preview" "desc"}}></i>{{/if}}
+            {{#if preview.desc}}<i class="fa fa-chevron-down" {{action "sort" "shortQuery:desc" "preview" "asc"}}></i>{{/if}}
+            {{#if preview.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "preview" "noSort"}}></i>{{/if}}
+          </span>
+        </th>
+        <th width="20%">Title
+          <span class="sort-icon">
+            {{#if title.noSort}}<i class="fa fa-chevron-right" {{action "sort" "title" "title" "desc"}}></i>{{/if}}
+            {{#if title.desc}}<i class="fa fa-chevron-down" {{action "sort" "title:desc" "title" "asc"}}></i>{{/if}}
+            {{#if title.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "title" "noSort"}}></i>{{/if}}
+          </span>
+        </th>
+        <th width="20%">Database
+          <span class="sort-icon">
+            {{#if dataBase.noSort}}<i class="fa fa-chevron-right" {{action "sort" "dataBase" "dataBase" "desc"}}></i>{{/if}}
+            {{#if dataBase.desc}}<i class="fa fa-chevron-down" {{action "sort" "dataBase:desc" "dataBase" "asc"}}></i>{{/if}}
+            {{#if dataBase.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "dataBase" "noSort"}}></i>{{/if}}
+          </span>
+        </th>
+        <th width="20%">Owner
+          <span class="sort-icon">
+            {{#if owner.noSort}}<i class="fa fa-chevron-right" {{action "sort" "owner" "owner" "desc"}}></i>{{/if}}
+            {{#if owner.desc}}<i class="fa fa-chevron-down" {{action "sort" "owner:desc" "owner" "asc"}}></i>{{/if}}
+            {{#if owner.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "owner" "noSort"}}></i>{{/if}}
+          </span>
+        </th>
+        <th width="10%">Action</th>
         </tr>
         </thead>
         <tbody>
-        {{#each savedQuerylist as |savedQuery| }}
+        {{#each sortedSavedQueries as |savedQuery| }}
           <tr>
             <td><a href="#" {{action "openAsWorksheet" savedQuery }} >{{savedQuery.shortQuery}}</a></td>
             <td class="break-word">{{savedQuery.title}}</td>
@@ -47,7 +71,7 @@
       </table>
     {{/if}}
 
-    {{#unless savedQuerylist.length}}
+    {{#unless sortedSavedQueries.length}}
       <div class="no-results">
         <div>There is no saved query.</div>
       </div>

contrib/views/hive20/src/main/resources/ui/app/templates/udfs.hbs

@@ -25,18 +25,36 @@
 <div class="row jobs-table">
   <div class="col-md-12">
 
-    {{#if udflist.length}}
+    {{#if sortedUDF.length}}
       <table class="table table-striped">
         <thead>
         <tr>
-          <th width="20%">UDF Name</th>
-          <th width="20%">UDF Class Name</th>
-          <th width="40%">Owner</th>
-          <th width="20%">Action</th>
-        </tr>
-        </thead>
-        <tbody>
-        {{#each udflist as |udf| }}
+        <th width="20%">UDF Name
+          <span class="sort-icon">
+            {{#if name.noSort}}<i class="fa fa-chevron-right" {{action "sort" "name:asc" "name" "desc"}}></i>{{/if}}
+            {{#if name.desc}}<i class="fa fa-chevron-down" {{action "sort" "name:desc" "name" "asc"}}></i>{{/if}}
+            {{#if name.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "name" "noSort"}}></i>{{/if}}
+          </span>
+        </th>
+        <th width="20%">UDF Class Name
+          <span class="sort-icon">
+            {{#if classname.noSort}}<i class="fa fa-chevron-right" {{action "sort" "classname:asc" "classname" "desc"}}></i>{{/if}}
+            {{#if classname.desc}}<i class="fa fa-chevron-down" {{action "sort" "classname:desc" "classname" "asc"}}></i>{{/if}}
+            {{#if classname.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "classname" "noSort"}}></i>{{/if}}
+          </span>
+        </th>
+        <th width="40%">Owner
+          <span class="sort-icon">
+            {{#if owner.noSort}}<i class="fa fa-chevron-right" {{action "sort" "owner:asc" "owner" "desc"}}></i>{{/if}}
+            {{#if owner.desc}}<i class="fa fa-chevron-down" {{action "sort" "owner:desc" "owner" "asc"}}></i>{{/if}}
+            {{#if owner.asc}}<i class="fa fa-chevron-up" {{action "sort" "" "owner" "noSort"}}></i>{{/if}}
+          </span>
+        </th>
+        <th width="20%" class="center">Action</th>
+      </tr>
+      </thead>
+      <tbody>
+        {{#each sortedUDF as |udf| }}
           {{udf-item
           udf=udf
           fileResourceList=fileResourceList
@@ -47,7 +65,7 @@
       </table>
     {{/if}}
 
-    {{#unless udflist.length}}
+    {{#unless sortedUDF.length}}
       <div class="no-results">
         <div>There is No UDF.</div>
       </div>