ui: add disk capacity to hardware stats dashbaord

Release note: None
cockroachdb · Jul 23, 2018 · 6bf0495 · 6bf0495
1 parent 2840016
commit 6bf0495
Showing 1 changed file with 39 additions and 1 deletion.
diff --git a/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/hardware.tsx b/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/hardware.tsx
@@ -4,11 +4,12 @@ import { LineGraph } from "src/views/cluster/components/linegraph";
 import { Metric, Axis, AxisUnits } from "src/views/shared/components/metricQuery";
 
 import { GraphDashboardProps, nodeDisplayName } from "./dashboardUtils";
+import * as docsURL from "oss/src/util/docs";
 
 // TODO(vilterp): tooltips
 
 export default function (props: GraphDashboardProps) {
-  const { nodeIDs, nodesSummary, nodeSources, tooltipSelection } = props;
+  const { nodeIDs, nodesSummary, nodeSources, storeSources, tooltipSelection } = props;
 
   return [
     <LineGraph
@@ -108,6 +109,43 @@ export default function (props: GraphDashboardProps) {
       </Axis>
     </LineGraph>,
 
+    <LineGraph
+      title="Disk Capacity"
+      sources={storeSources}
+      tooltip={(
+        <div>
+          <dl>
+            <dt>Capacity</dt>
+            <dd>
+              Total disk space available {tooltipSelection} to CockroachDB.
+              {" "}
+              <em>
+                Control this value per node with the
+                {" "}
+                <code>
+                  <a href={docsURL.startFlags} target="_blank">
+                    --store
+                  </a>
+                </code>
+                {" "}
+                flag.
+              </em>
+            </dd>
+            <dt>Available</dt>
+            <dd>Free disk space available {tooltipSelection} to CockroachDB.</dd>
+            <dt>Used</dt>
+            <dd>Disk space used {tooltipSelection} by CockroachDB.</dd>
+          </dl>
+        </div>
+      )}
+    >
+      <Axis units={AxisUnits.Bytes} label="capacity">
+        <Metric name="cr.store.capacity" title="Capacity" />
+        <Metric name="cr.store.capacity.available" title="Available" />
+        <Metric name="cr.store.capacity.used" title="Used" />
+      </Axis>
+    </LineGraph>,
+
     <LineGraph
       title="Network Bytes Received"
       sources={nodeSources}