diff --git a/app/components/container-row/template.hbs b/app/components/container-row/template.hbs index b88f57d9f..e4be74332 100644 --- a/app/components/container-row/template.hbs +++ b/app/components/container-row/template.hbs @@ -1,5 +1,6 @@ - + {{container-dot model=model}} + {{model.displayState}} @@ -11,21 +12,19 @@ {{display-image model.imageUuid}} - - - {{#if model.command}} - {{model.command}} + {{#if model.command~}} + ({{model.command}}) {{else}} - None + (none) {{/if}} {{#if showStats}} {{#if model.cpuSpark}} - {{spark-line data=model.cpuSpark width=60 height=15 max=cpuMax classNames="spark-tl" prefix="CPU: " formatter="percent"}} - {{spark-line data=model.memorySpark width=60 height=15 max=memoryMax classNames="spark-tr" prefix="Memory: " formatter="mib"}} - {{spark-line data=model.networkSpark width=60 height=15 max=networkMax classNames="spark-bl" prefix="Network: " formatter="kbps"}} - {{spark-line data=model.storageSpark width=60 height=15 max=storageMax classNames="spark-br" prefix="Storage: " formatter="kbps"}} + {{spark-line data=model.cpuSpark width=60 height=15 max=cpuMax prefix="CPU: " formatter="percent"}} + {{spark-line data=model.memorySpark width=60 height=15 max=memoryMax prefix="Memory: " formatter="mib"}} + {{spark-line data=model.networkSpark width=60 height=15 max=networkMax prefix="Network: " formatter="kbps"}} + {{spark-line data=model.storageSpark width=60 height=15 max=storageMax prefix="Storage: " formatter="kbps"}} {{/if}} {{/if}} diff --git a/app/components/d3-area/component.js b/app/components/d3-area/component.js new file mode 100644 index 000000000..c35f2b3a9 --- /dev/null +++ b/app/components/d3-area/component.js @@ -0,0 +1,121 @@ +import Ember from 'ember'; + + +export default Ember.Component.extend({ + data: null, + classNames: ['col-sm-12', 'col-md-4', 'col-md-height', 'col-md-full-height', 'col-top'], + //attributeBindings: ['tooltip'], + tagName: 'div', + + width: null, + height: 110, + min: 0, + max: null, + interpolation: 'step-after', + formatter: 'value', + prefix: '', + + svg: null, + line: null, + dot: null, + x: null, + y: null, + + + didInsertElement: function() { + this.set('width', this.$('#inner-content').width()); + }, + + hasData: function() { + if (this.get('data.length') > 0 && !this.get('svg')) { + this.create(); + } + }.observes('data.length'), + + create() { + var svg = d3.select(this.$('#cpu-graph')[0]) + .append('svg:svg') + .attr('width', '100%') + .attr('height', '100%'); + + this.set('svg', svg); + this.set('x', d3.scale.linear().range([0, this.get('width')])); + this.set('y', d3.scale.linear().range([this.get('height'), 0])); + + var line = d3.svg.line() + .x((d, i) => { + return this.get('x')(i); + }) + .y((d) => { + return this.get('y')(d); + }); + this.set('line', line); + + //svg.append('path').attr('class', `node-${this.get('data')[0][0]}`).attr('d', line(this.get('data')[0].slice(1))) + //.attr('stroke', 'green') + //.attr('stroke-width', 2) + //.attr('fill', 'none'); + }, + + generateYAxis: function() { + var out; + if (this.get('type') === 'cpu') { + out = d3.svg.axis() + .scale(this.get('y')) + .ticks(6) + .tickFormat(function(d) { return d + "%"; }) + .orient('right'); + } else { + out = d3.svg.axis() + .scale(this.get('y')) + .ticks(6) + .orient('right'); + } + return out; + }, + + update: function() { + var svg = this.get('svg'); + var data = (this.get('data') || []).slice(); + var x = this.get('x'); + var y = this.get('y'); + var line = this.get('line'); + var width = this.get('width'); + var height = this.get('height'); + + if (svg && data && x && y && line) { + x.domain([0, 60]); + x.range([0, width - 1]); + + y.domain([0, 100]); + y.range([height, 0]); + + + var yAxis = this.generateYAxis(); + + //svg.selectAll('path') + //.data([data[0].splice(1)]) + //.attr('d', line); + + data.forEach((v,i,d) => { // jshint ignore:line + //debugger; + if (svg.select(`.node-${v[0]}`)[0][0]) { + /*svg.select(`.node-${v[0]}`) + .data(v.slice(1)) + .attr('d', line);*/ + } else { + //debugger; + svg.append('path').attr('class', `node-${v[0]}`).attr('d', line(v.slice(1))) + .attr('stroke', 'green') + .attr('stroke-width', 2) + .attr('fill', 'none'); + } + }); + svg.append('g') + .attr('class', 'y-axis') + .attr('transform', 'translate(0, 0)') + .call(yAxis); + + } + }.observes('data', 'data.[]'), +}); diff --git a/app/components/d3-area/template.hbs b/app/components/d3-area/template.hbs new file mode 100644 index 000000000..adb5617ad --- /dev/null +++ b/app/components/d3-area/template.hbs @@ -0,0 +1,14 @@ +
+
+ +
+
+
+
+ Connecting... +
+
+ Utilization stats are only available while active/running. +
+
+
diff --git a/app/components/form-command/template.hbs b/app/components/form-command/template.hbs index 6e9fbe762..ed924e703 100644 --- a/app/components/form-command/template.hbs +++ b/app/components/form-command/template.hbs @@ -89,7 +89,7 @@
- +
{{#if environmentArray.length}} diff --git a/app/components/form-ports/template.hbs b/app/components/form-ports/template.hbs index 5c21e0575..4f65d7bb7 100644 --- a/app/components/form-ports/template.hbs +++ b/app/components/form-ports/template.hbs @@ -5,7 +5,7 @@
{{#unless editing}}
- +
{{/unless}} {{#if portsArray.length}} diff --git a/app/components/info-multi-stats/component.js b/app/components/info-multi-stats/component.js index ec3ece094..8959a2f08 100644 --- a/app/components/info-multi-stats/component.js +++ b/app/components/info-multi-stats/component.js @@ -21,6 +21,7 @@ export default Ember.Component.extend({ cpuGraph: null, cpuData: null, setCpuScale: false, + cpuD3Data: null, memoryCanvas: '#memoryGraph', memoryGraph: null, @@ -142,6 +143,7 @@ export default Ember.Component.extend({ row.push(point.cpu_total); } + this.set('cpuD3Data', data); if ( point.cpu_count && this.get('renderOk') && !this.get('setCpuScale') ) { graph.axis.max(point.cpu_count*100); @@ -234,6 +236,7 @@ export default Ember.Component.extend({ x.push(i); } this.set('cpuData', [x]); + this.set('cpuD3Data', [x]); var cpuGraph = c3.generate({ bindto: this.get('cpuCanvas'), @@ -405,11 +408,14 @@ export default Ember.Component.extend({ //console.log('Init Network'); var x = ['x']; + var z = []; for ( var i = 0 ; i < MAX_POINTS ; i++ ) { x.push(i); + z.push(i); } this.set('networkData', [x]); + this.set('networkD3Data', z); var networkGraph = c3.generate({ bindto: this.get('networkCanvas'), diff --git a/app/components/info-multi-stats/template.hbs b/app/components/info-multi-stats/template.hbs index 393e2fbdc..d7014a360 100644 --- a/app/components/info-multi-stats/template.hbs +++ b/app/components/info-multi-stats/template.hbs @@ -1,16 +1,17 @@ +
+
+
+ +
+
+
+
+ {{yield}} +
+
+
-
-
-
- -
- {{yield}} -
-
-
-
-
diff --git a/app/host/containers/template.hbs b/app/host/containers/template.hbs index b3ddcc386..883748112 100644 --- a/app/host/containers/template.hbs +++ b/app/host/containers/template.hbs @@ -1,23 +1,19 @@ -
- - - - {{sortable-th sortable=this action="changeSort" name="state" width="120"}} - {{sortable-th sortable=this action="changeSort" name="name"}} - {{sortable-th sortable=this action="changeSort" name="ip" width="110" label="IP Address"}} - {{sortable-th sortable=this action="changeSort" name="image"}} - {{sortable-th sortable=this action="changeSort" name="command"}} - - - - - - {{#each arranged as |container|}} - {{container-row model=container showStats=true cpuMax=cpuMax memoryMax=memoryMax storageMax=storageMax networkMax=networkMax}} - {{else}} - - {{/each}} - -
Stats 
This host does not have any containers yet.
-
- + + + + {{sortable-th sortable=this action="changeSort" name="state" width="120"}} + {{sortable-th sortable=this action="changeSort" name="name"}} + {{sortable-th sortable=this action="changeSort" name="ip" width="110" label="IP Address"}} + {{sortable-th sortable=this action="changeSort" name="image (command)"}} + + + + + + {{#each arranged as |container|}} + {{container-row model=container showStats=true cpuMax=cpuMax memoryMax=memoryMax storageMax=storageMax networkMax=networkMax}} + {{else}} + + {{/each}} + +
Stats 
This host does not have any containers yet.
diff --git a/app/host/storage/template.hbs b/app/host/storage/template.hbs index f5b0c2df2..4ed9326de 100644 --- a/app/host/storage/template.hbs +++ b/app/host/storage/template.hbs @@ -1,20 +1,17 @@ -
- - - - {{sortable-th sortable=this action="changeSort" name="state" width="120"}} - {{sortable-th sortable=this action="changeSort" name="hostPath"}} - - - - - - {{#each arranged as |volume|}} - {{volume-row model=volume}} - {{else}} - - {{/each}} - -
Mounts 
This host does not have any volumes.
-
- + + + + {{sortable-th sortable=this action="changeSort" name="state" width="120"}} + {{sortable-th sortable=this action="changeSort" name="hostPath"}} + + + + + + {{#each arranged as |volume|}} + {{volume-row model=volume}} + {{else}} + + {{/each}} + +
Mounts 
This host does not have any volumes.
diff --git a/app/host/template.hbs b/app/host/template.hbs index d8a795253..61ef5045b 100644 --- a/app/host/template.hbs +++ b/app/host/template.hbs @@ -12,6 +12,73 @@
{{#info-multi-stats model=model linkName="hostStats" single=true}} +
+
+ + {{model.displayIp}} {{zero-clipboard text=model.displayIp}} +
+
+ {{#if model.memoryBlurb}} + + {{model.memoryBlurb}} + {{else}} + No Memory Footprint + {{/if}} +
+
+ {{#if model.osDetail}} + + {{model.osDetail}} + {{else}} + No OS Details + {{/if}} +
+
+ {{#if model.dockerBlurb}} + + {{model.dockerBlurb}} + {{else}} + No Docker Details + {{/if}} +
+
+
+
+ {{#if model.cpuBlurb}} + + {{model.cpuBlurb}}{{#if model.cpuTooltip}} {{/if}} + {{/if}} +
+
+ {{#if model.diskBlurb}} + + {{#if model.diskDetail}} + {{#each model.diskDetail as |disk|}} + {{disk.value}} + {{/each}} + {{else}} + {{model.diskBlurb}} (total) + {{/if}} + {{else}} + No Storage Details + {{/if}} +
+
+ {{#if model.info.osInfo.kernelVersion}} + + {{model.info.osInfo.kernelVersion}} + {{/if}} +
+
+ + {{#if model.machine}} + {{model.machine.driver}} + {{else}} + No Provider + {{/if}} +
+
+ {{!--
    {{#if model.showTransitioningMessage}}
  • @@ -21,87 +88,17 @@
    • {{/if}} - -
  • - - {{model.displayIp}} {{zero-clipboard text=model.displayIp}} -
    • - - {{#if model.machine}} -
  • - - {{model.machine.driver}} -
    • - {{/if}} - - {{#if model.cpuBlurb}} -
  • - - {{model.cpuBlurb}}{{#if model.cpuTooltip}} {{/if}} -
    • - {{/if}} - - {{#if model.memoryBlurb}} -
  • - - {{model.memoryBlurb}} -
    • - {{/if}} - - {{#if model.diskBlurb}} -
  • - - {{#if model.diskDetail}} - {{#each model.diskDetail as |disk|}} - {{disk.value}} - {{/each}} - {{else}} - {{model.diskBlurb}} (total) - {{/if}} -
    • - {{/if}} - - {{#if model.osDetail}} -
  • - - {{model.osDetail}} -
    • - {{/if}} - - {{#if model.info.osInfo.kernelVersion}} -
  • - - {{model.info.osInfo.kernelVersion}} -
    • - {{/if}} - - {{#if model.dockerBlurb}} -
  • - - {{model.dockerBlurb}} -
    • - {{/if}} - -
  • - - {{#if userLabelArray.length}} - {{#each userLabelArray as |label|}} - {{label.key}}{{#if label.value}}={{label.value}}{{/if}} - {{/each}} - {{else}} - None - {{/if}} -
+ --}} {{/info-multi-stats}}
-
    +
      {{#link-to "host.containers" tagName="li" href=false}} Containers{{/link-to}} {{#link-to "host.storage" tagName="li" href=false}} Storage{{/link-to}}
    -
    +
    {{outlet}}
diff --git a/app/login/template.hbs b/app/login/template.hbs index 4e95ced31..c3a45ac3b 100644 --- a/app/login/template.hbs +++ b/app/login/template.hbs @@ -1,9 +1,11 @@