add sort icons in table headers for session and slug

src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html

@@ -16,16 +16,56 @@
             </span>
           </div>
           <div class="column is-1 has-text-left">
-            <span class="column-title">All ?</span>
+            <span class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"></i>
+                </span>
+              </span>
+              <span class="column-title">All?</span>
+            </span>
           </div>
           <div class="column is-2 has-text-left">
-            <span class="column-title">Completion Date</span>
+              <span class="is-sortable">
+                <span class="sort-icons">
+                  <span class="icon">
+                    <i class="fas fa-sort-up"></i>
+                  </span>
+                  <span class="icon">
+                    <i class="fas fa-sort-down"></i>
+                  </span>
+                </span>
+                <span class="column-title">Completion Date</span>
+              </span>
           </div>
           <div class="column is-2 has-text-left">
-            <span class="column-title">Duration</span>
+              <span class="is-sortable">
+                <span class="sort-icons">
+                  <span class="icon">
+                    <i class="fas fa-sort-up"></i>
+                  </span>
+                  <span class="icon">
+                    <i class="fas fa-sort-down"></i>
+                  </span>
+                </span>
+                <span class="column-title">Duration</span>
+              </span>
           </div>
           <div class="column  is-1 has-text-left">
-            <span class="column-title">Errors?</span>
+            <span class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"></i>
+                </span>
+              </span>
+              <span class="column-title">Errors?</span>
+            </span>
           </div>
           <div class="column is-1 has-text-left">
             <span class="column-title"></span>
@@ -33,7 +73,8 @@
         </div>
         <div class="data-list">
           <div class="data columns is-multiline is-vcentered is-marginless"
-            *ngFor="let session of allSessionsIdInfo; let i=index; let odd=odd; let even=even;" [ngClass]="{ odd: odd, even: even }">
+            *ngFor="let session of allSessionsIdInfo; let i=index; let odd=odd; let even=even;"
+            [ngClass]="{ odd: odd, even: even }">
             <div class="column is-4 has-text-left">
               {{ session._id }}
             </div>

src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html

@@ -14,22 +14,58 @@
       <div class="table entity-list-table">
         <div class="header columns is-marginless">
           <div class="column is-4 has-text-centered">
-            <span (click)="sortBy('name')" class="is-sortable">
-              <span class="column-title">Slugs</span>
-              <p></p>
-            </span>
+              <span class="is-sortable">
+                  <span class="sort-icons">
+                    <span class="icon">
+                      <i class="fas fa-sort-up"></i>
+                    </span>
+                    <span class="icon">
+                      <i class="fas fa-sort-down"></i>
+                    </span>
+                  </span>
+                  <span class="column-title">Slugs</span>
+                </span>
           </div>
           <div class="column is-1 has-text-left">
             <span class="column-title">Uuids</span>
           </div>
           <div class="column is-2 has-text-left">
-            <span class="column-title">Completion Date</span>
+              <span class="is-sortable">
+                  <span class="sort-icons">
+                    <span class="icon">
+                      <i class="fas fa-sort-up"></i>
+                    </span>
+                    <span class="icon">
+                      <i class="fas fa-sort-down"></i>
+                    </span>
+                  </span>
+                  <span class="column-title">Completion Date</span>
+                </span>
           </div>
           <div class="column is-2 has-text-left">
-            <span class="column-title">Last</span>
-          </div>
+              <span class="is-sortable">
+                  <span class="sort-icons">
+                    <span class="icon">
+                      <i class="fas fa-sort-up"></i>
+                    </span>
+                    <span class="icon">
+                      <i class="fas fa-sort-down"></i>
+                    </span>
+                  </span>
+                  <span class="column-title">Duration</span>
+                </span>          </div>
           <div class="column  is-1 has-text-left">
-            <span class="column-title">Errors?</span>
+              <span class="is-sortable">
+                  <span class="sort-icons">
+                    <span class="icon">
+                      <i class="fas fa-sort-up"></i>
+                    </span>
+                    <span class="icon">
+                      <i class="fas fa-sort-down"></i>
+                    </span>
+                  </span>
+                  <span class="column-title">Errors?</span>
+                </span>
           </div>
           <div class="column  is-1 has-text-left">
             <span class="column-title"></span>