Merge pull request #19 from newrelic/design_update

Design update

components/heat-map.js

@@ -1,4 +1,4 @@
-import { NrqlQuery, Tooltip } from 'nr1'
+import { NrqlQuery, Tooltip, Stack, StackItem } from 'nr1'
 import PropTypes from 'prop-types';
 import _ from 'underscore'
 import hsl from 'hsl-to-hex'
@@ -77,11 +77,6 @@ export default class Heatmap extends React.Component {
      */
     selection: PropTypes.string,
 
-    /**
-     * if true, show a legend with the color spectrum from 0 to max value
-     */
-    showLegend: PropTypes.bool,
-
     /**
      * callback for formatting a value to appear in tooltips and in the legend
      * ```js
@@ -152,22 +147,22 @@ function Node(props) {
 }
 
 function SingleHeatmap(props) {
-  const { title, selection, onSelect, data, onClickTitle, showLegend } = props
+  const { title, selection, onSelect, data, onClickTitle } = props
 
-  const titleStyle = `title ${onClickTitle && "clickable"}`
+  const titleStyle = `heat-map-title ${onClickTitle && "clickable"}`
   const onClick = onClickTitle && (() => onClickTitle(title))
 
   return <div className="heat-map">
-    <div className="header">
-      <div className={titleStyle} onClick={onClick}>
-        {title}
-      </div>
-      <div>
-        {showLegend && <Legend {...props}/>}
-      </div>
-    </div>
-    <div className="grid">
-      {data.map(datum => {        
+    <Stack className="heat-map-header" verticalType={Stack.VERTICAL_TYPE.CENTER} fullWidth>
+      <StackItem className={titleStyle}>
+        <span title={title} onClick={onClick}>{title}</span>
+      </StackItem>
+      <StackItem>
+        <Legend {...props}/>
+      </StackItem>
+    </Stack>
+    <div className="heat-map-grid">
+      {data.map(datum => {
         const selected = datum.name == selection
         return <Node key={datum.name} {...props} {...datum} selected={selected}
             onClick={() => onSelect(datum.name)} />
@@ -177,19 +172,15 @@ function SingleHeatmap(props) {
 }
 
 function GroupedHeatMap(props) {
-  const { data, showLegend } = props
+  const { data } = props
 
   const groups = _.groupBy(data, 'group')
   const groupNames = _.keys(groups).sort()
 
   return <div>
-    {showLegend && <div className="heat-map">      
-      <Legend {...props}/>
-    </div>}
-
     {groupNames.map(groupName => {
       const group = groups[groupName]
-      return <SingleHeatmap key={groupName} {...props} showLegend={false} data={group} title={groupName}/>
+      return <SingleHeatmap key={groupName} {...props} data={group} title={groupName}/>
     })}
   </div>
 }

components/heat-map.scss

@@ -1,77 +1,100 @@
 
 .heat-map {
-  margin: 12px;
-  border-radius: 6px;
-  padding: 12px;
-  border: 1px dotted #aaaaaa;
+  margin: 16px;
+  border-radius: 3px;
+  background: #FFFFFF;
+  box-shadow:
+    0 11px 15px -10px rgba(31, 75, 116, 0.25),
+    0 1px 3px 1px rgba(0, 134, 148, 0.03),
+    0 3px 0 0 rgba(0, 49, 54, 0.04),
+    0 1px 0 0 rgba(0, 75, 82, 0.11);
   background-color: white;
 
-  .header {
-    .title {
-      font-size: 18px;
-      font-weight: 400;
-      text-align: center;
-    }
+  .heat-map-header {
+    box-sizing: border-box;
+    padding: 0 16px;
+    height: 40px;
+    justify-content: space-between;
+    border-bottom: 1px solid #EDEEEE;
 
     .clickable {
-      color: #005054;      
+      color: #005054;
     }
     .clickable:hover {
       text-decoration: underline;
       cursor: pointer;
     }
   }
-
-  .grid {
+
+  .heat-map-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #000E0E;
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .heat-map-grid {
     display: flex;
     flex-wrap: wrap;
-    padding-top: 12px;
-    
-  
+    padding: 14px;
+
+
     .node {
-      width: 12px;
-      height: 16px;
-      border: 1px solid #aaaaaa;
+      width: 14px;
+      height: 14px;
       margin: 2px;
+      background-color: #EDEEEE;
+
+      &:hover {
+        cursor: pointer;
+        transform: scale(1.125);
+      }
     }
 
     .selected {
-      border: 3px solid #222222;
-      margin: -2px;
-      width: 16px;
-      height: 20px;
+      transform: scale(1.75);
+      box-shadow: inset 0 0 0 1.75px #fff, 0 0 0 1.75px #2a3434bd, 0 1px 4px rgba(0, 0, 0, 0.38);
+      position: relative;
+      border-radius: 1px;
+
+      &:hover {
+        transform: scale(1.75);
+      }
     }
-  }   
+  }
 }
 
 .heat-map-legend {
-  width: 100%;
+  width: 250px;
   display: flex;
+  justify-content: flex-end;
+  align-items: center;
   padding-top: 0px;
-  padding-bottom: 4px;
-  border-bottom: 1px dotted #eeeeee;
-
+
   span {
-    width: 10%;
-    padding-left: 8px;
     font-size: 12px;
     font-weight: 200;
-    padding-top: 3px;
+    white-space: nowrap;
+    color: #8E9494;
   }
   .left {
-    padding-right: 8px;
     text-align: right;
   }
 }
 
 .heat-map-spectrum {
   display: flex;
-  height: 24px;
-  width: 100%;
+  height: 8px;
+  width: 170px;
+  box-sizing: border-box;
+  margin: 0 8px;
+  border-radius: 9px;
+  overflow: hidden;
 
   .slice {
     width: 0.5%;
-    margin-top: 6px;
-    margin-bottom: 7px;
   }
 }

lib/plots.js

@@ -0,0 +1,26 @@
+import bytesToSize from './bytes-to-size'
+
+const MEGABYTE = 1024*1024
+const GIGABYTE = MEGABYTE*1024
+const PLOTS = [
+  {
+    select: 'sum(cpuPercent) AS cpu',
+    title: "CPU",
+    formatValue: (value) => `${value.toFixed(1)}%`,
+    max: (max) => Math.ceil(max/100)*100,
+  },
+  {
+    select: 'sum(memoryResidentSizeBytes) AS memory',
+    title: "Memory",
+    formatValue: (value) => bytesToSize(value),
+    max: (max) => Math.ceil(max / GIGABYTE)*GIGABYTE
+  },
+  {
+    select: 'sum(ioReadBytesPerSecond+ioWriteBytesPerSecond) AS io',
+    title: "Disk I/O",
+    formatValue: (value) => `${bytesToSize(value)}/s`,
+    max: (max) => Math.ceil(max / MEGABYTE)*MEGABYTE
+  }
+]
+
+export default PLOTS

nerdlets/container-explorer/container-explorer-nerdlet.js

@@ -8,16 +8,21 @@ import findRelatedAccountsWith from '../../lib/find-related-account-with'
 import ContainerExplorer from './container-explorer'
 import Header from './header'
 
+import PLOTS from '../../lib/plots'
+
 export default class ContainerExplorerNerdlet extends React.Component {
   constructor(props) {
     super(props)
 
     this.addFilter = this.addFilter.bind(this)
     this.removeFilter = this.removeFilter.bind(this)
     this.setAccount = this.setAccount.bind(this)
+    this.setPlot = this.setPlot.bind(this);
+    this.setGroup = this.setGroup.bind(this);
 
     this.state = {
-      filters: []
+      filters: [],
+      plot: PLOTS[0],
     }    
   }
 
@@ -60,6 +65,14 @@ export default class ContainerExplorerNerdlet extends React.Component {
     this.countProcesses()
   }
 
+  async setPlot(plot) {
+    await this.setState({ plot })
+  }
+
+  async setGroup(group) {
+    await this.setState({ group })
+  }
+
   async countProcesses() {
     this.setState({counts: null})
 
@@ -88,8 +101,8 @@ export default class ContainerExplorerNerdlet extends React.Component {
 
     return <div style={{height: "100%"}}>
       <Header {...this.state} setAccount={this.setAccount} 
-          showFacetPicker={this.showFacetPicker} removeFilter={this.removeFilter}/>
-      {counts && <ContainerExplorer {...this.state} addFilter={this.addFilter}/>}
+          showFacetPicker={this.showFacetPicker} removeFilter={this.removeFilter} setPlot={this.setPlot}/>
+      {counts && <ContainerExplorer {...this.state} addFilter={this.addFilter} removeFilter={this.removeFilter} setPlot={this.setPlot} setGroup={this.setGroup} />}
     </div>
   }
 }