AMBARI-20842. HIVE 2 -UX changes- Part1 (pallavkul)

contrib/views/hive20/src/main/resources/ui/app/components/udf-item.js

@@ -122,6 +122,7 @@ export default Ember.Component.extend(UILoggerMixin, {
 
     cancelEditUdf(){
       this.set('expandedEdit', false);
+      this.set('isAddingNewFileResource', false);
     },
 
     saveUDf(name, classname, udfid, udfFileResourceName, udfFileResourcePath){

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

@@ -42,6 +42,9 @@
 
 .top-application-header{
   background-color: #e1e1e0;
+  ul{
+    padding: 0 15px;
+  }
 }
 
 .fa-1-5{
@@ -737,6 +740,7 @@ pre {
 }
 
 .worksheet-nav {
+  padding: 0 9px;
   li{
     margin-left:5px;
     a {
@@ -948,7 +952,7 @@ rect.operator__box {
   overflow: auto;
 }
 
-.explain--error {
+.explain--error, .no-results {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -984,3 +988,20 @@ rect.operator__box {
   text-overflow: ellipsis;
   width: 100px;
 }
+
+.progress {
+  margin-top: 15px;
+}
+
+.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.middle-align {
+  vertical-align: middle;
+}
+
+.table-title {
+  padding: 0 15px;
+}

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

@@ -54,11 +54,11 @@
     <table class="table table-striped">
       <thead>
         <tr>
-          <th width="10%">Job Id</th>
+          <th width="10%">Job ID</th>
           <th width="30%">Title</th>
-          <th width="10%">status</th>
+          <th width="10%">Status</th>
           <th width="25%">Start time</th>
-          <th width="20%" >Duration</th>
+          <th width="20%" >Duration(in seconds)</th>
           <th>Action</th>
         </tr>
       </thead>

contrib/views/hive20/src/main/resources/ui/app/templates/components/notification-message.hbs

@@ -27,7 +27,7 @@
   {{#if displayBody}}
     <div class="panel-body">
       {{#if showStatus}}
-        <p><strong>Status:</strong> {{notification.status}}</p>
+        <div><strong>Status:</strong> {{notification.status}}</div>
         <hr/>
       {{/if}}
       {{#if notification.responseMessage}}

contrib/views/hive20/src/main/resources/ui/app/templates/components/table-rename-form.hbs

@@ -17,7 +17,7 @@
 }}
 
 <div class="form-group">
-  <label class="col-sm-4 control-label">New Table Name</label>
+  <label class="col-sm-4 control-label">New table name</label>
   <div class="col-sm-8 {{if error 'has-error'}}">
     {{input value=newTableName class="form-control" placeholder="Table Name"}}
     <span class="help-block">{{errorMessage}}</span>

contrib/views/hive20/src/main/resources/ui/app/templates/components/table-statistics.hbs

@@ -19,17 +19,15 @@
 {{#if showStats}}
 <div class="row">
   <div class="alert">
-    <p class="lead">
-      {{fa-icon "line-chart" size=2}}&nbsp;&nbsp;&nbsp;&nbsp; STATISTICS
-      <div class="pull-right">
+    <p >
+      <div class="pull-left">
         <button class="btn btn-success"
           {{action "analyseTable"}}>{{fa-icon "location-arrow"}} {{#if (not tableStatisticsEnabled)}}
           Compute {{else}} Recompute {{/if}}</button>
 
         <label>
           {{input type="checkbox" checked=analyseWithStatistics}}
-          <small>include columns</small>
-        </label>
+        </label>&nbsp;<span>INCLUDE COLUMNS</span>
       </div>
     </p>
 
@@ -44,7 +42,7 @@
       </div>
     {{/if}}
     <div class="stats-section">
-      <p><strong>TABLE STATISTICS</strong></p>
+      <p class="table-title"><strong>TABLE STATISTICS</strong></p>
       <table class="table table-bordered table-hover">
         <thead>
         <tr>
@@ -81,7 +79,7 @@
 </div>
 
 <div class="row stats-section">
-  <p><strong>COLUMNS STATISTICS</strong></p>
+  <p class="table-title"><strong>COLUMNS STATISTICS</strong></p>
   <table class="table table-bordered table-hover">
     <thead>
     <tr>

contrib/views/hive20/src/main/resources/ui/app/templates/components/udf-edit.hbs

@@ -18,19 +18,26 @@
 
 <td colspan="4" style="padding: 0;">
   <div class="udf-container">
-  <form class="form-inline">
-    <table class="table" style="background-color: transparent">
-      <tr>
-        <td width="20%" >
-          <label>UDF Name</label><br />
-          {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="UDF Name" value=name }}
-        </td>
-        <td width="20%">
-          <label >UDF Class Name</label><br />
-          {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="UDF Class Name" value=classname }}
-        </td>
-        <td width="40%">
-          <label >File Resource</label><br />
+
+    <h4>Edit UDF</h4>
+
+    <form class="form-horizontal">
+      <div class="form-group">
+        <label class="col-sm-2 control-label">UDF Name</label>
+        <div class="col-sm-10">
+          {{input type="text" class="form-control" placeholder="UDF Name" value=name }}
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="col-sm-2 control-label">UDF Class Name</label>
+        <div class="col-sm-10">
+          {{input type="text" class="form-control" placeholder="UDF Class Name" value=classname }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-sm-2 control-label">File Resource</label>
+        <div class="col-sm-10">
           {{#unless isAddingNewFileResource}}
             {{#power-select
             options=fileResourceList
@@ -43,23 +50,34 @@
             {{/power-select}}
           {{/unless}}
           {{#if isAddingNewFileResource}}
-            <label class="sr-only">Resource name</label>
-            {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="File Resource Name" value=udfFileResourceName }}
 
-            <label class="sr-only">Resource Path</label>
-            {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="File Resource path" value=udfFileResourcePath }}
+            <div class="form-group">
+              <label class="col-sm-2 control-label">Resource name</label>
+              <div class="col-sm-10">
+                {{input type="text" class="form-control" placeholder="File Resource Name" value=udfFileResourceName }}
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label class="col-sm-2 control-label">Resource Path</label>
+              <div class="col-sm-10">
+                {{input type="text" class="form-control" placeholder="File Resource path" value=udfFileResourcePath }}
+              </div>
+            </div>
+
           {{/if}}
-        </td>
+        </div>
+      </div>
 
-        <td width="20%" align="center">
-          <br />
+      <div class="form-group">
+        <div class="col-sm-offset-2 col-sm-10">
           <button class="btn btn-success" type="button" {{action 'saveUDf' name classname udfid udfFileResourceName udfFileResourcePath}}>Save UDF</button>
           <button class="btn btn-warning" type="button" {{action 'cancelEditUdf'}}>Cancel</button>
-        </td>
+        </div>
+      </div>
+    </form>
+
 
-      </tr>
-    </table>
-  </form>
   </div>
 </td>
 

contrib/views/hive20/src/main/resources/ui/app/templates/components/udf-item.hbs

@@ -17,10 +17,10 @@
 }}
 
 <tr>
-  <td> {{udf.name}}</td>
+  <td><a class="hand" {{action "showEditUdf" udf.id udf.fileResource }}>{{udf.name}}</a></td>
   <td>{{udf.classname}} </td>
   <td>{{udf.owner}}</td>
-  <td class="center">
+  <td>
     <a class="hand" {{action "toggleExpandUdf" udf.fileResource }}>{{fa-icon "expand"}}</a>&nbsp;&nbsp;
     <a class="hand" {{action "showEditUdf" udf.id udf.fileResource }}>{{fa-icon "edit"}}</a>&nbsp;&nbsp;
     <a class="hand" {{action "showRemoveUdfModal" udf.id }}>{{fa-icon "remove"}}</a>
@@ -59,9 +59,9 @@
 {{#if showDeleteUdfModal}}
   {{confirm-dialog
   title="Confirm"
-  label="Do You want to delete the UDF?"
+  label="Do you want to delete the UDF?"
   titleIcon="minus"
-  labelIcon="save"
+  labelIcon="remove"
   rejectIcon="times"
   confirmIcon="check"
   closable=false
@@ -71,6 +71,4 @@
   }}
 {{/if}}
 
-
-
 {{yield}}

contrib/views/hive20/src/main/resources/ui/app/templates/components/udf-new.hbs

@@ -16,46 +16,63 @@
 * limitations under the License.
 }}
 
-<form class="form-inline">
-  <table class="table">
-    <tr>
-      <td width="20%" >
-        <label>UDF Name</label><br />
-        {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="UDF Name" value=udfName }}
-      </td>
-      <td width="20%">
-        <label >UDF Class Name</label><br />
-        {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="UDF Class Name" value=udfClassName }}
-      </td>
-      <td width="40%">
-        <label >File Resource</label><br />
-        {{#unless isAddingNewFileResource}}
-          {{#power-select
-          options=fileResourceList
-          placeholder="File Resource"
-          searchField="name"
-          selected=selectedFileResource
-          searchPlaceholder="Type the paramter"
-          onchange=(action "handleFileResourceChange" ) as |filter| }}
-            <b>{{filter.name}}</b>
-          {{/power-select}}
-        {{/unless}}
-        {{#if isAddingNewFileResource}}
-          <label class="sr-only">Resource name</label>
-          {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"  placeholder="File Resource Name" value=resourceName }}
-
-          <label class="sr-only">Resource Path</label>
-          {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"  placeholder="File Resource path" value=resourcePath }}
-        {{/if}}
-      </td>
-
-      <td width="20%" align="center">
-        <br />
-        <button class="btn btn-success" type="button" {{action 'saveUDf'}}>Add UDF</button>
-        <button class="btn btn-warning" type="button" {{action 'cancelSaveUDf'}}>Cancel</button>
-      </td>
-    </tr>
-  </table>
+<h4>Add new UDF</h4>
+
+<form class="form-horizontal">
+  <div class="form-group">
+    <label class="col-sm-2 control-label">UDF Name</label>
+    <div class="col-sm-10">
+      {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="UDF Name" value=udfName }}
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="col-sm-2 control-label">UDF Class Name</label>
+    <div class="col-sm-10">
+      {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="UDF Class Name" value=udfClassName }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="col-sm-2 control-label">File Resource</label>
+    <div class="col-sm-10">
+      {{#unless isAddingNewFileResource}}
+        {{#power-select
+        options=fileResourceList
+        placeholder="File Resource"
+        searchField="name"
+        selected=selectedFileResource
+        searchPlaceholder="Type the paramter"
+        onchange=(action "handleFileResourceChange" ) as |filter| }}
+          <b>{{filter.name}}</b>
+        {{/power-select}}
+      {{/unless}}
+      {{#if isAddingNewFileResource}}
+
+        <div class="form-group">
+          <label class="col-sm-2 control-label">Resource name</label>
+          <div class="col-sm-10">
+            {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"  placeholder="File Resource Name" value=resourceName }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="col-sm-2 control-label">Resource Path</label>
+          <div class="col-sm-10">
+            {{input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"  placeholder="File Resource path" value=resourcePath }}
+          </div>
+        </div>
+
+      {{/if}}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <button class="btn btn-success" type="button" {{action 'saveUDf'}}>Add UDF</button>
+      <button class="btn btn-warning" type="button" {{action 'cancelSaveUDf'}}>Cancel</button>
+    </div>
+  </div>
 </form>
 
+
 {{yield}}

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

@@ -43,7 +43,7 @@
 {{#if confirmDropDatabase}}
   {{confirm-dialog
     title="Confirm"
-    label="Do You want to delete the database?"
+    label="Do you want to delete the database?"
     titleIcon="minus"
     labelIcon="database"
     rejectIcon="times"

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

@@ -51,7 +51,7 @@
         <button class="btn btn-default" {{action "visualExplainQuery" }} disabled={{ worksheet.isQueryRunning}}>{{fa-icon "link"}} Visual Explain</button>
 
         {{#if worksheet.isQueryRunning}}
-          {{fa-icon "spinner fa-1-5" spin=true}}
+          {{fa-icon "spinner fa-1-5 middle-align" spin=true}}
         {{/if}}
 
       </div>
@@ -78,7 +78,7 @@
                  aria-controls={{concat 'db_body_' tableModel.dbname}}>
                 {{ tableModel.dbname }} {{#if (eq tableModel.dbname worksheet.selectedDb)}} {{fa-icon "check"}}  {{/if}}
               </a>
-              <small class="pull-right">Tables({{tableModel.tables.length}})</small>
+              <span class="pull-right">Tables({{tableModel.tables.length}})</span>
             </h4>
           </div>
           <div id={{concat 'db_body_' tableModel.dbname}} class="db-tables collapse
@@ -106,12 +106,15 @@
 </div>
 
 {{#if showWorksheetModal}}
-  {{#modal-dialog translucentOverlay=true clickOutsideToClose=true container-class="modal-dialog  modal-sm"}}
+  {{#modal-dialog translucentOverlay=true clickOutsideToClose=true container-class="modal-dialog"}}
     <div class="modal-content">
       <div class="modal-header">
-        <h4 class="modal-title">Saving worksheet</h4>
+        {{fa-icon "minus fa-lg"}} Confirm
       </div>
       <div class="modal-body">
+
+        <p class="lead">{{fa-icon "save fa-lg"}} Do you want to save the worksheet?</p>
+
         <div class="form-horizontal">
           <div class="form-group">
             <label for="title" class="col-sm-2 control-label">Title</label>
@@ -129,9 +132,8 @@
       </div>
 
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" disabled={{not worksheetTitle}} {{action "saveWorksheetModal"}}>{{fa-icon "check"}} Save</button>
-        <button type="button" class="btn btn-default" {{action "closeWorksheetModal"}}>{{fa-icon "close"}}Cancel
-        </button>
+        <button type="button" class="btn btn-default" {{action "closeWorksheetModal"}}>{{fa-icon "close"}} Reject</button>
+        <button type="button" class="btn btn-success" disabled={{not worksheetTitle}} {{action "saveWorksheetModal"}}>{{fa-icon "check"}} Save</button>
       </div>
     </div>
   {{/modal-dialog}}

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

@@ -18,43 +18,49 @@
 
 <div class="row jobs-table">
   <div class="col-md-12">
-    <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>
-      </tr>
-      </thead>
-      <tbody>
-      {{#each savedQuerylist as |savedQuery| }}
+
+    {{#if savedQuerylist.length}}
+
+      <table class="table table-striped">
+        <thead>
         <tr>
-          <td>{{savedQuery.shortQuery}}</td>
-          <td class="break-word">{{savedQuery.title}}</td>
-          <td>{{savedQuery.dataBase}}</td>
-          <td>{{savedQuery.owner}}</td>
-          <td>
-              <div class="dropdown">
-                <a class="dropdown-toggle" id="dropdownMenu1121" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">{{fa-icon "cog"}}</a>
-                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu">
-                  <li><a href="#" {{action "openDeleteSavedQueryModal" savedQuery.id}} class="text-uppercase">{{fa-icon "remove"}} Delete</a></li>
-                  <li><a href="#" {{action "openAsWorksheet" savedQuery }} class="text-uppercase">{{fa-icon "folder-open-o"}} Open as worksheet</a></li>
-                </ul>
-              </div>
-          </td>
+          <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>
         </tr>
-      {{/each}}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+        {{#each savedQuerylist as |savedQuery| }}
+          <tr>
+            <td><a href="#" {{action "openAsWorksheet" savedQuery }} >{{savedQuery.shortQuery}}</a></td>
+            <td class="break-word">{{savedQuery.title}}</td>
+            <td>{{savedQuery.dataBase}}</td>
+            <td>{{savedQuery.owner}}</td>
+            <td>
+              <a href="#" {{action "openDeleteSavedQueryModal" savedQuery.id}} class="text-uppercase">{{fa-icon "remove"}}</a>
+            </td>
+          </tr>
+        {{/each}}
+        </tbody>
+      </table>
+    {{/if}}
+
+    {{#unless savedQuerylist.length}}
+      <div class="no-results">
+        <div>There is no saved query.</div>
+      </div>
+    {{/unless}}
+
+
   </div>
 </div>
 
 {{#if showDeleteSaveQueryModal}}
   {{confirm-dialog
   title="Confirm"
-  label="Do You want to delete the saved query?"
+  label="Do you want to delete the saved query?"
   titleIcon="minus"
   labelIcon="save"
   rejectIcon="times"

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

@@ -19,18 +19,23 @@
 <div class="pull-right">
     {{#link-to 'udfs.new' class="btn btn-sm btn-success"}}{{fa-icon "plus"}} NEW UDF{{/link-to}}
 </div>
+
+
+
 <div class="row jobs-table">
   <div class="col-md-12">
-    <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%" class="center">Action</th>
-      </tr>
-      </thead>
-      <tbody>
+
+    {{#if udflist.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| }}
           {{udf-item
           udf=udf
@@ -38,8 +43,16 @@
           refreshUdfList='refreshUdfList'
           }}
         {{/each}}
-      </tbody>
-    </table>
+        </tbody>
+      </table>
+    {{/if}}
+
+    {{#unless udflist.length}}
+      <div class="no-results">
+        <div>There is No UDF.</div>
+      </div>
+    {{/unless}}
+
   </div>
 </div>