UI: show encryption stats on stores report.

requires #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,10 +1,24 @@
 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";
+
+const dateFormat = "Y-MM-DD HH:mm:ss Z";
 
 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">
@@ -14,16 +28,77 @@ export default class EncryptionStatus extends React.Component<EncryptionStatusPr
     );
   }
 
-  render(): React.ReactElement<any> {
+  renderKey(isStoreKey: boolean, key: protos.cockroach.ccl.storageccl.engineccl.enginepbccl.KeyInfo$Properties) {
+    // 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);
+
+    if (isStoreKey) {
+      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),
+      ];
+    } else {
+      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),
+      ];
+    }
+  }
+
+  renderFileStats(stats: protos.cockroach.server.serverpb.StoreDetails$Properties) {
+    if (stats.total_files.eq(0) && stats.total_bytes.eq(0)) {
+      return null;
+    }
+
+    let percentFiles = 100;
+    if (stats.active_key_files !== stats.total_files) {
+      percentFiles = Long.fromInt(100).mul(stats.active_key_files).toNumber() / stats.total_files.toNumber();
+    }
+    let fileDetails = percentFiles.toFixed(2) + "%";
+    fileDetails += " (" + stats.active_key_files + "/" + stats.total_files + ")";
+
+    let percentBytes = 100;
+    if (stats.active_key_bytes !== stats.total_bytes) {
+      percentBytes = Long.fromInt(100).mul(stats.active_key_bytes).toNumber() / stats.total_bytes.toNumber();
+    }
+    let byteDetails = percentBytes.toFixed(2) + "%";
+    byteDetails += " (" + Bytes(stats.active_key_bytes.toNumber()) + "/" + Bytes(stats.total_bytes.toNumber()) + ")";
+
+    return [
+      this.renderHeaderRow("Encryption Progress: fraction encrypted using the active data key"),
+      this.renderSimpleRow("Files", fileDetails),
+      this.renderSimpleRow("Bytes", byteDetails),
+    ];
+  }
+
+  render() {
     const { store } = this.props;
     const rawStatus = store.encryption_status;
+    if (_.isEmpty(rawStatus)) {
+      return null;
+    }
+
+    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(rawStatus);
     } catch (e) {
       console.log("Error decoding protobuf: ", e);
       return null;
     }
+
+    return [
+      this.renderKey(true, decodedStatus.active_store_key),
+      this.renderKey(false, decodedStatus.active_data_key),
+      this.renderFileStats(store),
+    ];
   }
 }

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,9 +56,9 @@ class Stores extends React.Component<StoresProps, {}> {
     );
   }
 
-  renderStore(store: protos.cockroach.server.serverpb.StoreDetails$Properties, key: number) {
+  renderStore(store: protos.cockroach.server.serverpb.StoreDetails$Properties) {
     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} />
@@ -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