UI: show encryption stats on stores report.

requires cockroachdb#26802 for new `StoresResponse` fields.

This adds basic file stats to the stores report page.
Also improves the styling:
- show decoded key info protobuf fields rather than raw proto (eg:
  creation date rather than unix timestamp)
- table styling moved to core style file
- full-width cells to head different sections

Release note (admin ui change): add encryption statistics on stores report page

Author: marc

pkg/ui/ccl/src/views/reports/containers/stores/encryption.tsx

@@ -1,29 +1,121 @@
 import React from "react";
 
 import * as protos from "src/js/protos";
+import _ from "lodash";
+import Long from "long";
+import moment from "moment";
 import { EncryptionStatusProps } from "oss/src/views/reports/containers/stores/encryption";
+import { Bytes } from "src/util/format";
+import { FixLong } from "src/util/fixLong";
+
+const dateFormat = "Y-MM-DD HH:mm:ss";
 
 export default class EncryptionStatus extends React.Component<EncryptionStatusProps, {}> {
 
+  renderHeaderRow(header: string) {
+    return (
+      <tr className="stores-table__row">
+        <td colSpan={2} className="stores-table__cell stores-table__cell--header--row">{header}</td>
+      </tr>
+    );
+  }
+
   renderSimpleRow(header: string, value: string) {
     return (
       <tr className="stores-table__row">
         <th className="stores-table__cell stores-table__cell--header">{header}</th>
-        <td className="stores-table__cell" title={value}><pre>{value}</pre></td>
+        <td className="stores-table__cell" title={value}>{value}</td>
       </tr>
     );
   }
 
-  render(): React.ReactElement<any> {
-    const { store } = this.props;
-    const rawStatus = store.encryption_status;
+  renderStoreKey(key: protos.cockroach.ccl.storageccl.engineccl.enginepbccl.IKeyInfo) {
+    // Get the enum name from its value (eg: "AES128_CTR" for 1).
+    const encryptionType = protos.cockroach.ccl.storageccl.engineccl.enginepbccl.EncryptionType[key.encryption_type];
+    const createdAt = moment.unix(FixLong(key.creation_time).toNumber()).utc().format(dateFormat);
+
+    return [
+      this.renderHeaderRow("Active Store Key: user specified"),
+      this.renderSimpleRow("Algorithm", encryptionType),
+      this.renderSimpleRow("Key ID", key.key_id),
+      this.renderSimpleRow("Created", createdAt),
+      this.renderSimpleRow("Source", key.source),
+    ];
+  }
+
+  renderDataKey(key: protos.cockroach.ccl.storageccl.engineccl.enginepbccl.IKeyInfo) {
+    // Get the enum name from its value (eg: "AES128_CTR" for 1).
+    const encryptionType = protos.cockroach.ccl.storageccl.engineccl.enginepbccl.EncryptionType[key.encryption_type];
+    const createdAt = moment.unix(key.creation_time.toNumber()).utc().format(dateFormat);
+
+    return [
+      this.renderHeaderRow("Active Data Key: automatically generated"),
+      this.renderSimpleRow("Algorithm", encryptionType),
+      this.renderSimpleRow("Key ID", key.key_id),
+      this.renderSimpleRow("Created", createdAt),
+      this.renderSimpleRow("Parent Key ID", key.parent_key_id),
+    ];
+  }
+
+  calculatePercentage(active: Long, total: Long): number {
+    if (active === total) {
+      return 100;
+    }
+    return Long.fromInt(100).mul(active).toNumber() / total.toNumber();
+  }
+
+  renderFileStats(stats: protos.cockroach.server.serverpb.IStoreDetails) {
+    const totalFiles = FixLong(stats.total_files);
+    const totalBytes = FixLong(stats.total_bytes);
+    if (totalFiles.eq(0) && totalBytes.eq(0)) {
+      return null;
+    }
+
+    const activeFiles = FixLong(stats.active_key_files);
+    const activeBytes = FixLong(stats.active_key_bytes);
+
+    let fileDetails = this.calculatePercentage(activeFiles, totalFiles).toFixed(2) + "%";
+    fileDetails += " (" + activeFiles + "/" + totalFiles + ")";
+
+    let byteDetails = this.calculatePercentage(activeBytes, totalBytes).toFixed(2) + "%";
+    byteDetails += " (" + Bytes(activeBytes.toNumber()) + "/" + Bytes(totalBytes.toNumber()) + ")";
 
+    return [
+      this.renderHeaderRow("Encryption Progress: fraction encrypted using the active data key"),
+      this.renderSimpleRow("Files", fileDetails),
+      this.renderSimpleRow("Bytes", byteDetails),
+    ];
+  }
+
+  decodeEncryptionStatus(data: Uint8Array): protos.cockroach.ccl.storageccl.engineccl.enginepbccl.EncryptionStatus {
+    let decodedStatus;
+
+    // Attempt to decode protobuf.
     try {
-      const decodedStatus = protos.cockroach.ccl.storageccl.engineccl.enginepbccl.EncryptionStatus.decode(rawStatus);
-      return this.renderSimpleRow("Encryption Status", JSON.stringify(decodedStatus.toJSON(), null, 2));
+      decodedStatus = protos.cockroach.ccl.storageccl.engineccl.enginepbccl.EncryptionStatus.decode(data);
     } catch (e) {
       console.log("Error decoding protobuf: ", e);
       return null;
     }
+    return decodedStatus;
+  }
+
+  getEncryptionRows() {
+    const { store } = this.props;
+    const rawStatus = store.encryption_status;
+    if (_.isEmpty(rawStatus)) {
+      return null;
+    }
+
+    const decodedStatus = this.decodeEncryptionStatus(rawStatus);
+    if (decodedStatus == null) {
+      return null;
+    }
+
+    return [
+      this.renderStoreKey(decodedStatus.active_store_key),
+      this.renderDataKey(decodedStatus.active_data_key),
+      this.renderFileStats(store),
+    ];
   }
 }

pkg/ui/src/views/reports/containers/stores/encryption.tsx

@@ -8,7 +8,7 @@ export interface EncryptionStatusProps {
 
 export default class EncryptionStatus extends React.Component<EncryptionStatusProps, {}> {
 
-  render(): React.ReactElement<any> {
+  getEncryptionRows(): React.ReactElement<any> {
     return null;
   }
 }

pkg/ui/src/views/reports/containers/stores/index.tsx

@@ -10,8 +10,6 @@ import { AdminUIState } from "src/redux/state";
 import { nodeIDAttr } from "src/util/constants";
 import EncryptionStatus from "src/views/reports/containers/stores/encryption";
 
-import "./stores.styl";
-
 interface StoresOwnProps {
   stores: protos.cockroach.server.serverpb.StoresResponse;
   lastError: Error;
@@ -58,12 +56,12 @@ class Stores extends React.Component<StoresProps, {}> {
     );
   }
 
-  renderStore(store: protos.cockroach.server.serverpb.IStoreDetails, key: number) {
+  renderStore(store: protos.cockroach.server.serverpb.IStoreDetails) {
     return (
-      <table key={key} className="stores-table">
+      <table key={store.store_id} className="stores-table">
         <tbody>
           { this.renderSimpleRow("Store ID", store.store_id.toString()) }
-          <EncryptionStatus store={store} />
+          { new EncryptionStatus({store: store}).getEncryptionRows() }
         </tbody>
       </table>
     );
@@ -122,8 +120,8 @@ class Stores extends React.Component<StoresProps, {}> {
         <h1>Stores</h1>
         <h2>{header} stores</h2>
         {
-          _.map(stores.stores, (store, key) => (
-            this.renderStore(store, key)
+          _.map(_.sortBy(stores.stores, (store) => store.store_id), (store) => (
+            this.renderStore(store)
           ))
         }
       </div>

pkg/ui/src/views/reports/containers/stores/stores.styl

@@ -139,6 +139,27 @@ $reports-table
   margin 0
   padding 0
 
+.stores-table
+  @extend $reports-table
+
+  &__cell
+    background-color white
+    padding 6px 12px
+    max-width none
+    width 100%
+
+    &--header
+      background-color $link-color
+      text-align right
+      width 150px
+      min-width 150px
+
+      &--row
+        background-color $link-color
+        text-align center
+        color white
+        font-weight 900
+
 .connections-table
   @extend $reports-table
   font-size 12px