Merge pull request #20669 from couchand/feature/finish-cluster-overview

ui: finish short-term enhancements to cluster overview
cockroachdb · Dec 13, 2017 · 16118b5 · 16118b5
2 parents 1a83e5b + ede0950
commit 16118b5
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 29 deletions.
diff --git a/pkg/ui/src/hacks/require.d.ts b/pkg/ui/src/hacks/require.d.ts
diff --git a/pkg/ui/src/interfaces/assets.d.ts b/pkg/ui/src/interfaces/assets.d.ts
@@ -1,3 +1,8 @@
+declare module "assets/*" {
+    var _: string;
+    export default _;
+}
+
 declare module "!!raw-loader!*" {
     var _: string;
     export default _;

diff --git a/pkg/ui/src/views/cluster/components/visualization/index.tsx b/pkg/ui/src/views/cluster/components/visualization/index.tsx
@@ -1,13 +1,11 @@
-// tslint:disable-next-line:no-var-requires
-const spinner = require<string>("assets/spinner.gif");
-
 import React from "react";
 import classNames from "classnames";
 
-import "./visualizations.styl";
-
 import { ToolTipWrapper } from "src/views/shared/components/toolTip";
 
+import "./visualizations.styl";
+import spinner from "assets/spinner.gif";
+
 interface VisualizationProps {
   title: string;
   subtitle?: string;

diff --git a/pkg/ui/src/views/cluster/containers/clusterOverview/cluster.styl b/pkg/ui/src/views/cluster/containers/clusterOverview/cluster.styl
@@ -4,17 +4,16 @@
 .cluster-overview
   /* TODO(couchand): Update the layout styles to get rid of this hack. */
   margin-top -1 * $page-padding-top
-  border-bottom 1px solid $table-border-color
-
-  .cluster-ticker
-    padding-top 0
-    padding-bottom 0
 
   .cluster-summary
     background-color white
     padding-top $page-padding-top
     padding-bottom $page-padding-top
     padding-left 20px
+    margin-left 24px
+    margin-right 24px
+    border 1px solid $table-border-color
+
     color gray
     display grid
     align-items end

diff --git a/pkg/ui/src/views/cluster/containers/clusterOverview/index.tsx b/pkg/ui/src/views/cluster/containers/clusterOverview/index.tsx
@@ -12,6 +12,7 @@ import createChartComponent from "src/views/shared/util/d3-react";
 import capacityChart from "./capacity";
 
 import "./cluster.styl";
+import spinner from "assets/spinner.gif";
 
 // tslint:disable-next-line:variable-name
 const CapacityChart = createChartComponent(capacityChart);
@@ -20,7 +21,7 @@ class ClusterTicker extends React.Component<{}, {}> {
   render() {
     return (
       <section className="section cluster-ticker">
-        <h2>Cluster Overview</h2>
+        <h1>Cluster Overview</h1>
       </section>
     );
   }
@@ -151,15 +152,23 @@ interface ClusterSummaryProps {
   capacityUsage: CapacityUsageProps;
   nodeLiveness: NodeLivenessProps;
   replicationStatus: ReplicationStatusProps;
+  loading: boolean;
 }
 
 class ClusterSummary extends React.Component<ClusterSummaryProps, {}> {
   render() {
-    const children = [
-      ...renderCapacityUsage(this.props.capacityUsage),
-      ...renderNodeLiveness(this.props.nodeLiveness),
-      ...renderReplicationStatus(this.props.replicationStatus),
-    ];
+    const children = [];
+
+    if (this.props.loading) {
+      children.push(<img className="visualization__spinner" src={spinner} />);
+    } else {
+      children.push(
+        ...renderCapacityUsage(this.props.capacityUsage),
+        ...renderNodeLiveness(this.props.nodeLiveness),
+        ...renderReplicationStatus(this.props.replicationStatus),
+      );
+    }
+
     return <section className="cluster-summary" children={children} />;
   }
 }
@@ -169,6 +178,7 @@ function mapStateToClusterSummaryProps (state: AdminUIState) {
     capacityUsage: mapStateToCapacityUsageProps(state),
     nodeLiveness: mapStateToNodeLivenessProps(state),
     replicationStatus: mapStateToReplicationStatusProps(state),
+    loading: !state.cachedData.nodes.data,
   };
 }
 

diff --git a/pkg/ui/src/views/jobs/index.tsx b/pkg/ui/src/views/jobs/index.tsx
@@ -1,8 +1,3 @@
-// tslint:disable-next-line:no-var-requires
-const spinner = require<string>("assets/spinner.gif");
-// tslint:disable-next-line:no-var-requires
-const noResults = require<string>("assets/noresults.svg");
-
 import _ from "lodash";
 import moment from "moment";
 import { Line } from "rc-progress";
@@ -22,6 +17,9 @@ import { SortSetting } from "src/views/shared/components/sortabletable";
 import { ColumnDescriptor, SortedTable } from "src/views/shared/components/sortedtable";
 import { ToolTipWrapper } from "src/views/shared/components/toolTip";
 
+import spinner from "assets/spinner.gif";
+import noResults from "assets/noresults.svg";
+
 type Job = protos.cockroach.server.serverpb.JobsResponse.Job;
 
 type JobType = protos.cockroach.sql.jobs.Type;

diff --git a/pkg/ui/src/views/reports/containers/range/logTable.tsx b/pkg/ui/src/views/reports/containers/range/logTable.tsx
@@ -1,6 +1,3 @@
-// tslint:disable-next-line:no-var-requires
-const spinner = require<string>("assets/spinner.gif");
-
 import _ from "lodash";
 import React from "react";
 
@@ -10,6 +7,8 @@ import Print from "src/views/reports/containers/range/print";
 import Loading from "src/views/shared/components/loading";
 import { TimestampToMoment } from "src/util/convert";
 
+import spinner from "assets/spinner.gif";
+
 interface LogTableProps {
   rangeID: Long;
   log: protos.cockroach.server.serverpb.RangeLogResponse$Properties;