Sentence cased text everywhere (#3166)

* Sentence cased text everywhere

Follows Weave Cloud's direction of sentence case on most things.

* More space between sorter caret and label

* Use full topology name for table header

client/app/scripts/charts/nodes-grid.js

@@ -2,11 +2,13 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { List as makeList, Map as makeMap } from 'immutable';
+import capitalize from 'lodash/capitalize';
 
 import NodeDetailsTable from '../components/node-details/node-details-table';
 import { clickNode, sortOrderChanged } from '../actions/app-actions';
 import { shownNodesSelector } from '../selectors/node-filters';
 import { trackAnalyticsEvent } from '../utils/tracking-utils';
+import { findTopologyById } from '../utils/topology-utils';
 import { TABLE_VIEW_MODE } from '../constants/naming';
 
 import { windowHeightSelector } from '../selectors/canvas';
@@ -18,7 +20,15 @@ const IGNORED_COLUMNS = ['docker_container_ports', 'docker_container_id', 'docke
   'docker_container_command', 'docker_container_networks'];
 
 
-function getColumns(nodes) {
+function topologyLabel(topologies, id) {
+  const topology = findTopologyById(topologies, id);
+  if (!topology) {
+    return capitalize(id);
+  }
+  return topology.get('fullName');
+}
+
+function getColumns(nodes, topologies) {
   const metricColumns = nodes
     .toList()
     .flatMap((n) => {
@@ -43,11 +53,12 @@ function getColumns(nodes) {
     .toList()
     .sortBy(m => m.get('label'));
 
+
   const relativesColumns = nodes
     .toList()
     .flatMap((n) => {
       const metadata = (n.get('parents') || makeList())
-        .map(m => makeMap({ id: m.get('topologyId'), label: m.get('topologyId') }));
+        .map(m => makeMap({ id: m.get('topologyId'), label: topologyLabel(topologies, m.get('topologyId')) }));
       return metadata;
     })
     .toSet()
@@ -108,7 +119,7 @@ class NodesGrid extends React.Component {
 
   render() {
     const {
-      nodes, gridSortedBy, gridSortedDesc, searchNodeMatches, searchQuery, windowHeight
+      nodes, gridSortedBy, gridSortedDesc, searchNodeMatches, searchQuery, windowHeight, topologies
     } = this.props;
     const height =
       this.tableRef ? windowHeight - this.tableRef.getBoundingClientRect().top - 30 : 0;
@@ -131,7 +142,7 @@ class NodesGrid extends React.Component {
         .toList()
         .filter(n => !(searchQuery && searchNodeMatches.get(n.get('id'), makeMap()).isEmpty()))
         .toJS(),
-      columns: getColumns(nodes)
+      columns: getColumns(nodes, topologies)
     };
 
     return (
@@ -167,6 +178,7 @@ function mapStateToProps(state) {
     searchQuery: state.get('searchQuery'),
     selectedNodeId: state.get('selectedNodeId'),
     windowHeight: windowHeightSelector(state),
+    topologies: state.get('topologies'),
   };
 }
 

client/app/scripts/components/node-details/node-details-image-status.js

@@ -91,7 +91,7 @@ class NodeDetailsImageStatus extends React.PureComponent {
     return (
       <div className="node-details-content-section image-status">
         <div className="node-details-content-section-header">
-          Container Image Status
+          Container image status
           {containers &&
             <div>
               <a

client/app/styles/_base.scss

@@ -245,13 +245,11 @@ a {
   }
 
   &-label, .pause-text {
-    text-transform: uppercase;
     margin: 0 0.25em;
   }
 
   &-versionupdate {
     margin-right: 0.5em;
-    text-transform: uppercase;
   }
 
   &-tools {
@@ -318,7 +316,6 @@ a {
 
     &-label {
       font-size: $font-size-small;
-      text-transform: uppercase;
     }
 
   }
@@ -327,7 +324,6 @@ a {
     &-item {
       &-label {
         font-size: $font-size-tiny;
-        text-transform: uppercase;
       }
     }
   }
@@ -646,7 +642,6 @@ a {
   }
 
   &-more {
-    text-transform: uppercase;
     font-size: $font-size-tiny;
     color: $color-turquoise;
     margin-top: -2px;
@@ -716,7 +711,6 @@ a {
         span {
           font-size: $font-size-normal;
           margin-left: 0;
-          text-transform: uppercase;
         }
       }
 
@@ -776,7 +770,6 @@ a {
     &-more {
       @extend .btn-opacity;
       padding: 0 2px;
-      text-transform: uppercase;
       cursor: pointer;
       font-size: $font-size-tiny;
       font-weight: bold;
@@ -835,7 +828,6 @@ a {
       margin: 16px 0;
 
       &-header {
-        text-transform: uppercase;
         font-size: $font-size-small;
         color: $text-tertiary-color;
         padding: 4px 0;
@@ -877,7 +869,6 @@ a {
 
         &-label {
           color: $text-secondary-color;
-          text-transform: uppercase;
           font-size: $font-size-tiny;
         }
       }
@@ -892,7 +883,6 @@ a {
 
       &-label {
         color: $text-secondary-color;
-        text-transform: uppercase;
         font-size: $font-size-small;
 
         .fa {
@@ -919,10 +909,6 @@ a {
       display: flex;
       color: inherit;
 
-      .label {
-        text-transform: uppercase;
-      }
-
       .node-details-health-item {
         width: auto;
       }
@@ -941,7 +927,6 @@ a {
         color: $text-secondary-color;
         padding: 0 0.5em 0 0;
         white-space: nowrap;
-        text-transform: uppercase;
         font-size: $font-size-tiny;
 
         &::after {
@@ -974,7 +959,6 @@ a {
         color: $text-secondary-color;
         padding: 0 0.5em 0 0;
         white-space: nowrap;
-        text-transform: uppercase;
         font-size: $font-size-tiny;
 
         &::after {
@@ -1014,7 +998,6 @@ a {
     }
 
     &-header {
-      text-transform: uppercase;
       color: $text-tertiary-color;
       font-size: $font-size-tiny;
       text-align: right;
@@ -1030,7 +1013,7 @@ a {
       }
 
       &-sorter {
-        margin: 0 0.25em;
+        margin: 0 0.35em;
       }
 
       &:first-child {
@@ -1193,7 +1176,6 @@ a {
     font-weight: bold;
     padding-right: 20px;
     text-align: right;
-    text-transform: uppercase;
   }
 }
 
@@ -1293,7 +1275,6 @@ a {
 
         font-size: $font-size-tiny;
         font-weight: bold;
-        text-transform: uppercase;
 
         &:hover {
           opacity: 1;
@@ -1345,7 +1326,6 @@ a {
     }
 
     .link {
-      text-transform: uppercase;
       font-weight: bold;
       cursor: pointer;
       float: right;
@@ -1374,7 +1354,6 @@ a {
   padding: 0px 0;
   margin-top: 4px;
   text-align: right;
-  text-transform: uppercase;
   cursor: pointer;
   color: $text-secondary-color;
   font-size: $font-size-small;
@@ -1391,7 +1370,6 @@ a {
   margin-right: 0.5em;
 
   &-label {
-    text-transform: uppercase;
     margin-right: 0.25em;
   }
 
@@ -1421,7 +1399,6 @@ a {
 }
 
 .status {
-  text-transform: uppercase;
   padding: 2px 12px;
   border-radius: $border-radius-soft;
   color: $text-secondary-color;
@@ -1509,7 +1486,6 @@ a {
 
   &-action {
     background-color: transparent;
-    text-transform: uppercase;
 
     &-selected, &:not([disabled]):hover {
       background-color: $background-darker-secondary-color;
@@ -1676,7 +1652,6 @@ a {
 
     &-hint {
       font-size: $font-size-tiny;
-      text-transform: uppercase;
       transition: opacity 0.3s 0.5s $base-ease;
       opacity: 1;
     }
@@ -1811,7 +1786,6 @@ a {
 
     h2 {
       margin: 0;
-      text-transform: uppercase;
       font-size: $font-size-large;
     }
   }
@@ -1845,7 +1819,6 @@ a {
     align-items: stretch;
 
     h2 {
-      text-transform: uppercase;
       line-height: 150%;
       font-size: $font-size-large;
       color: $color-primary-lavender;
@@ -1854,7 +1827,6 @@ a {
     }
 
     h3 {
-      text-transform: uppercase;
       font-size: $font-size-normal;
       color: $color-primary-lavender;
       padding: 4px 0;
@@ -1918,7 +1890,6 @@ a {
     flex-direction: column;
 
     &-current-topology {
-      text-transform: uppercase;
       color: $color-primary-lavender;
     }