From 9734eedc64b0c3026b433eafb147235d11dfa5ad Mon Sep 17 00:00:00 2001
From: Adalberto Soares <junynes@gmail.com>
Date: Mon, 31 May 2021 15:27:10 -0300
Subject: [PATCH] Web Monitor: sorts validators set table (#521)

* Removes static web monitor files path for the dev env

* Fixes #511 with temp file for monitor cache

* Fixes #500 using source_path for web files on dev env

* Sets monospace font family for hash codes on the web monitor

* Fix merge

* Git ignores web-monitor/public/build files

* Sorts web monitor validators set (ascending and descending)

* Removes unused key can_create_account from interface ValInfo
---
 .../src/components/layout/Style.svelte        |   9 ++
 .../validators/ValidatorModal.svelte          |  43 ++++++
 .../src/components/validators/Vals.svelte     | 126 ++++++++----------
 3 files changed, 108 insertions(+), 70 deletions(-)
 create mode 100644 ol/cli/web-monitor/src/components/validators/ValidatorModal.svelte

diff --git a/ol/cli/web-monitor/src/components/layout/Style.svelte b/ol/cli/web-monitor/src/components/layout/Style.svelte
index 1749da3a4e..ab44a06e36 100644
--- a/ol/cli/web-monitor/src/components/layout/Style.svelte
+++ b/ol/cli/web-monitor/src/components/layout/Style.svelte
@@ -2,4 +2,13 @@
     :global(.hash) {
         font-family: "monospace";
     }
+    :global(.disable-select) {
+      -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Safari */
+         -khtml-user-select: none; /* Konqueror HTML */
+           -moz-user-select: none; /* Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+                user-select: none; /* Non-prefixed version, currently
+                                      supported by Chrome and Opera */
+    }
 </style>
\ No newline at end of file
diff --git a/ol/cli/web-monitor/src/components/validators/ValidatorModal.svelte b/ol/cli/web-monitor/src/components/validators/ValidatorModal.svelte
new file mode 100644
index 0000000000..4b07a9b4a3
--- /dev/null
+++ b/ol/cli/web-monitor/src/components/validators/ValidatorModal.svelte
@@ -0,0 +1,43 @@
+<script>
+    export let validator;
+</script>
+
+{#if validator}
+  <div id="validator-modal" uk-modal>
+      <div class="uk-modal-dialog uk-modal-body">
+          <button class="uk-modal-close-default" type="button" uk-close></button>
+          <h2 class="uk-modal-title">Validator Info</h2>
+          <table class="uk-table">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                  <td class="uk-table-expand">account address</td>
+                  <td class="hash">{validator.account_address}</td>
+                </tr>
+                <tr>
+                    <td>fullnode network address</td>
+                    <td class="uk-text-break">{validator.full_node_ip}</td>
+                </tr>
+                <tr>
+                    <td>validator network address</td>
+                    <td>{validator.validator_ip}</td>
+                </tr>
+                <tr>
+                    <td>epochs validating and mining</td>
+                    <td>{validator.epochs_validating_and_mining}</td>
+                </tr>
+                <tr>
+                  <td>can create account</td>
+                  <td>{validator.epochs_since_last_account_creation > 7}</td> <!--TODO move to the serve side?-->
+              </tr>
+            </tbody>
+          </table>
+      </div>
+  </div>
+{/if}
+
diff --git a/ol/cli/web-monitor/src/components/validators/Vals.svelte b/ol/cli/web-monitor/src/components/validators/Vals.svelte
index 5836801b55..90902efada 100644
--- a/ol/cli/web-monitor/src/components/validators/Vals.svelte
+++ b/ol/cli/web-monitor/src/components/validators/Vals.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { sortBy } from "lodash";
+import { chainInfo } from "../../store.ts";
+import ValidatorModal from "./ValidatorModal.svelte";
 
   interface ValInfo {
     account_address: string;
@@ -16,86 +17,71 @@
   }
   
   let set: ValInfo[] = [];
-
-  import { chainInfo } from "../../store.ts";
+  let selectedVal: ValInfo = null;
+  let sortableColumns = [
+    { label: "voting power", sortKey: "voting_power" },
+    { label: "proofs in epoch", sortKey: "count_proofs_in_epoch" },
+    { label: "tower height", sortKey: "tower_height" }
+  ];
+  let sortOption: string = "voting_power";
+  let sortOrder = 1;
 
   chainInfo.subscribe((info_str) => {
     let data = JSON.parse(info_str);
     // TODO: find a better way to check if data is ready.
-    if (data.chain_view && data.chain_view.validator_view) {
-      set = sortBy(data.chain_view.validator_view, ["voting_power"]).reverse();
+    if (data.chain_view && data.chain_view.validator_view && sortOption) {
+      set = data.chain_view.validator_view;
+      selectedVal = set[0];
     }
   });
-
-  function can_create_account(info: ValInfo): Boolean {
-    return info.epochs_since_last_account_creation > 7;
-  }
-
+  $: set = set.sort((a, b) => (a[sortOption] > b[sortOption]) ? sortOrder : -sortOrder);
   
+  function thOnClick(key: string) {
+    if (sortOption == key) {
+      sortOrder = -sortOrder;
+    }
+    sortOption = key;
+  }
 </script>
-<style>
-  /* TODO: get styles to work. svelte or uikit are overriding these. */
-  /* .like-accordion-title {
-    display: block;
-    font-size: 1.25rem;
-    line-height: 1.4;
-    color: #333;
-    overflow: hidden;
-    margin-left: 10px;
-  } */
-</style>
-
 
 <main uk-height-viewport="expand: true">
-  <h2
-    class=" uk-text-center uk-text-uppercase uk-text-muted uk-text-light uk-margin-medium-bottom"
-  >
+  <h2 class="uk-text-center uk-text-uppercase uk-text-muted uk-text-light uk-margin-medium-bottom">
     <span>{set.length} Validators</span>
   </h2>
+ 
+  <table class="uk-table uk-table-hover uk-text-muted">
+    <thead>
+      <tr>
+          <th class="uk-text-center">account</th>
+          {#each sortableColumns as col}
+            <th class="uk-text-right" on:click={() => thOnClick(col.sortKey)}>
+              <span class="disable-select">{col.label}</span>
+              {#if sortOption == col.sortKey}
+                {#if sortOrder == 1}
+                  <span uk-icon="icon: triangle-up"></span>
+                {:else}
+                  <span uk-icon="icon: triangle-down"></span>
+                {/if}
+              {/if}
+            </th>
+          {/each}
+          <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each set as val, i}
+        <tr on:click={() => selectedVal = val}>
+          <td class="hash uk-text-center">{val.account_address}</td>
+          <td class="uk-text-right">{val.voting_power}</td>
+          <td class="uk-text-right">{val.count_proofs_in_epoch}</td>
+          <td class="uk-text-right">{val.tower_height}</td>
+          <td>
+            <span uk-icon="icon: info" uk-toggle="target: #validator-modal"></span>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
 
-  <div class="uk-text-muted">
-    <div class="uk-column-1-4 uk-child-width-expand@s uk-text-center uk-text-uppercase uk-text-light uk-text-small">
-      <div>account</div>
-      <div>voting power</div>
-      <div>proofs in epoch</div>
-      <div>tower height</div>
-    </div>
-  </div>
-
-  <ul uk-accordion>
-    {#each set as val, i}
-      <li>
-        <div class="uk-accordion-title uk-text-muted">
-          <div class="uk-column-1-4 uk-child-width-expand@s uk-text-center">
-            <div class="hash">{val.account_address}</div>
-            <div>{val.voting_power}</div>
-            <div>{val.count_proofs_in_epoch}</div>
-            <div>{val.tower_height}</div>
-          </div>
-        </div>
-        <div class="uk-accordion-content">
-          <table class="uk-table">
-            <tbody>
-              <tr>
-                <td>fullnode network address</td>
-                <td class="uk-text-break"> {val.full_node_ip} </td>
-              </tr>
-              <tr>
-                <td>validator network address</td>
-                <td class="uk-text-break">{val.validator_ip}</td>
-              </tr>
-              <tr>
-                <td>epochs validating and mining</td>
-                <td>{val.epochs_validating_and_mining}</td>
-              </tr>
-              <tr>
-                <td>can create account</td>
-                <td>{can_create_account(val)}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </li>
-    {/each}
-  </ul>
+  <ValidatorModal validator={selectedVal}></ValidatorModal>
 </main>