Merge pull request #3849 from influxdata/reinstate-table-sort-indicators

Bring back sort indicators in Hosts and Alerts tables

ui/src/alerts/components/AlertsTable.tsx

@@ -158,35 +158,35 @@ class AlertsTable extends PureComponent<Props, State> {
             className={this.sortableClasses('name')}
             style={{width: colName}}
           >
-            Name
+            Name <span className="icon caret-up" />
           </div>
           <div
             onClick={this.changeSort('level')}
             className={this.sortableClasses('level')}
             style={{width: colLevel}}
           >
-            Level
+            Level <span className="icon caret-up" />
           </div>
           <div
             onClick={this.changeSort('time')}
             className={this.sortableClasses('time')}
             style={{width: colTime}}
           >
-            Time
+            Time <span className="icon caret-up" />
           </div>
           <div
             onClick={this.changeSort('host')}
             className={this.sortableClasses('host')}
             style={{width: colHost}}
           >
-            Host
+            Host <span className="icon caret-up" />
           </div>
           <div
             onClick={this.changeSort('value')}
             className={this.sortableClasses('value')}
             style={{width: colValue}}
           >
-            Value
+            Value <span className="icon caret-up" />
           </div>
         </div>
         <InfiniteScroll

ui/src/hosts/components/HostsTable.js

@@ -121,6 +121,7 @@ class HostsTable extends Component {
                     style={{width: colName}}
                   >
                     Host
+                    <span className="icon caret-up" />
                   </div>
                   <div
                     onClick={this.updateSort('deltaUptime')}
@@ -128,6 +129,7 @@ class HostsTable extends Component {
                     style={{width: colStatus}}
                   >
                     Status
+                    <span className="icon caret-up" />
                   </div>
                   <div
                     onClick={this.updateSort('cpu')}
@@ -135,6 +137,7 @@ class HostsTable extends Component {
                     style={{width: colCPU}}
                   >
                     CPU
+                    <span className="icon caret-up" />
                   </div>
                   <div
                     onClick={this.updateSort('load')}
@@ -142,6 +145,7 @@ class HostsTable extends Component {
                     style={{width: colLoad}}
                   >
                     Load
+                    <span className="icon caret-up" />
                   </div>
                   <div className="hosts-table--th">Apps</div>
                 </div>

ui/src/style/components/tables.scss

@@ -50,21 +50,18 @@
     Sortable Tables
     ----------------------------------------------
 */
-table.table thead th.sortable-header,
-.alert-history-table--th.sortable-header {
+.sortable-header {
   transition:
     color 0.25s ease,
     background-color 0.25s ease;
   position: relative;
 
-  &:after {
-    content: '\e910';
+  > .icon {
     display: block;
     position: absolute;
     top: 50%;
     right: 8px;
     color: $g20-white;
-    font-family: 'icomoon';
     opacity: 0;
     transform: translateY(-50%);
     transition:
@@ -83,12 +80,12 @@ table.table thead th.sortable-header,
     background-color: $g5-pepper;
     color: $g19-ghost;
 
-    &:after {opacity: 1;}
+    > .icon {opacity: 1;}
   }
-  &.sorting-ascending:after {
+  &.sorting-ascending > .icon {
     transform: translateY(-50%) rotate(180deg);
   }
-  &.sorting-descending:after {
+  &.sorting-descending > .icon {
     transform: translateY(-50%) rotate(0deg);
   }
 }