conjur-asset-ui 1.3.0 → 1.3.1

data/public/js/views/chart.js

@@ -0,0 +1,471 @@
+/** @jsx React.DOM */
+/* global conjur, React, d3, _ */
+
+(function(conjur, React, d3, _) {
+    'use strict';
+
+    var bisector = d3.bisector(function(d) { return d.date; }).left;
+
+    function _translate(x, y) {
+        return 'translate(' + x + ',' + y + ')';
+    }
+
+    this.Chart = React.createClass({
+        getDefaultProps: function() {
+            return {
+                defaultOptions: {
+                    legend: {
+
+                    },
+                    axis: {
+                        x: {
+                            label: 'X axis'
+                        },
+                        y: {
+                            label: 'Y axis'
+                        }
+                    },
+                    margin: {
+                        top: 20,
+                        right: 120,
+                        bottom: 30,
+                        left: 50
+                    }
+                }
+            };
+        },
+
+        el: undefined,
+        svg: {},
+
+        componentDidMount: function() {
+            this.el = this.getDOMNode();
+
+            var options = _.deepExtend({}, this.props.options, this.props.defaultOptions);
+
+            this.setState(options, function() {
+                this._calculateInitialState(function() {
+                    this._create();
+                    this._update();
+                }.bind(this));
+            }.bind(this));
+        },
+
+        componentDidUpdate: function() {
+            if (typeof this.svg.svg === 'undefined') {
+                return;
+            }
+
+            this._update();
+
+            return;
+        },
+
+        componentWillUnmount: function() {
+
+        },
+
+        render: function() {
+            return (
+              <div className="b-chart"></div>
+            );
+        },
+
+        _getHeight: function() {
+            var height;
+
+            if (this.el.offsetHeight) {
+                height = this.el.offsetHeight;
+            } else if (this.el.style.pixelHeight) {
+                height = this.el.style.pixelHeight;
+            }
+
+            height = window.parseFloat(height) -
+                this.state.margin.top - this.state.margin.bottom;
+
+            return height;
+        },
+
+        _getWidth: function() {
+            var width;
+
+            if (this.el.offsetWidth) {
+                width = this.el.offsetWidth;
+            } else if (this.el.style.pixelWidth) {
+                width = this.el.style.pixelWidth;
+            }
+
+            width = window.parseFloat(width) -
+                this.state.margin.left - this.state.margin.right;
+
+            return width;
+        },
+
+        _create: function() {
+            var svg = d3.select(this.el)
+                    .append('svg')
+                    .attr('class', 'd3-line-chart')
+                    .attr('width', this.state.fullWidth)
+                    .attr('height', this.state.fullHeight)
+                    .append('g')
+                    .attr('class', 'd3-line-chart__inner')
+                    .attr('transform', _translate(this.state.margin.left, this.state.margin.top));
+
+            this.svg.svg = svg;
+
+            this.svg.axis = svg.append('g')
+                .attr('class', 'd3-axis');
+
+            this.svg.axis.append('g')
+                .attr('class', 'd3-axis__x');
+
+            this.svg.axis.append('g')
+                .attr('class', 'd3-axis__y');
+
+            this.svg.legend = svg.append('g')
+                .attr('class', 'd3-legend');
+
+            this.svg.graph = svg.append('g')
+                .attr('class', 'd3-graph');
+
+            this.svg.focus = this.svg.graph.append('g')
+                .attr('class', 'd3-graph__focus');
+        },
+
+        _update: function() {
+            this._drawAxisX();
+            this._drawAxisY();
+            this._drawLegend();
+            this._drawLine();
+            this._drawFocus();
+        },
+
+        _calculateInitialState: function(cb) {
+            var props = this.props;
+
+            var width = this._getWidth(),
+                height = this._getHeight(),
+                fullWidth = (
+                    width +
+                        this.state.margin.left +
+                        this.state.margin.right
+                ),
+                fullHeight = (
+                    height +
+                        this.state.margin.top +
+                        this.state.margin.bottom
+                );
+
+            var color = d3.scale.category10();
+
+            color.domain(d3.keys(props.data[0]).filter(function(key) { return key !== 'date'; }));
+
+            var data = color.domain().map(function(name) {
+                return {
+                    name: name,
+                    values: props.data.map(function(d) {
+                        return {date: d.date, value: +d[name]};
+                    })
+                };
+            });
+
+            var x = this._getScaleX('time')
+                    .range([0, width])
+                    .domain(d3.extent(props.data, function(d) { return d.date; })),
+
+                y = this._getScaleX('linear')
+                    .range([height, 0])
+                    .domain([
+                        d3.min(data, function(c) {
+                            return d3.min(c.values, function(v) { return v.value; });
+                        }),
+                        d3.max(data, function(c) {
+                            return d3.max(c.values, function(v) { return v.value; });
+                        })
+                    ]),
+
+	        legendScale = d3.scale.ordinal()
+		    .domain([])
+		    .range([0, 20, 40, 60, 80, 100, 120, 140]),
+
+                scales = {x: x, y: y, legend: legendScale};
+
+            var line = this._getLine(scales);
+
+            this.setState({
+                width: width,
+                height: height,
+                fullWidth: fullWidth,
+                fullHeight: fullHeight,
+                color: color,
+                scales: scales,
+                lineStencil: line,
+                data: data
+            }, cb);
+        },
+
+        _getScaleX: function(type) {
+            if (type === 'linear') {
+                return d3.scale.linear();
+            } else if (type === 'time') {
+                return d3.time.scale();
+            }
+
+            return null;
+        },
+
+        _getLine: function(scales) {
+            return d3.svg.line()
+                .x(function(d) { return scales.x(d.date); })
+                .y(function(d) { return scales.y(d.value); });
+        },
+
+        _drawAxisX: function() {
+            var xAxis = d3.svg.axis()
+                    .scale(this.state.scales.x)
+                    .orient('bottom');
+
+            this.svg.axis.select('.d3-axis__x')
+                .attr('transform', _translate(0, this.state.height))
+                .call(xAxis);
+        },
+
+        _drawAxisY: function() {
+            var yAxis = d3.svg.axis()
+                    .scale(this.state.scales.y)
+                    .orient('left');
+
+            var axis = this.svg.axis.select('.d3-axis__y')
+                    .call(yAxis);
+
+            if (typeof(this.state.yAxisLabel) === 'string') {
+                this._drawAxisLabel(axis, this.state.yAxisLabel, true);
+            }
+        },
+
+        _drawAxisLabel: function(axis, text, rotate) {
+            var label = axis.append('text');
+
+            if (typeof(rotate) === 'boolean' && rotate === true) {
+                label.attr('transform', 'rotate(-90)')
+                    .attr('y', 0 - this.state.margin.left)
+                    .attr('x', 0 - (this.state.height / 2))
+                    .attr('dy', '1em')
+                    .style('text-anchor', 'middle')
+                    .text(text);
+            } else {
+                label.attr('transform',
+                           _translate(this.state.width / 2,
+                                      this.state.height + this.state.margin.bottom))
+                    .style('text-anchor', 'middle')
+                    .text(text);
+            }
+        },
+
+        _drawLegend: function() {
+            var self = this;
+
+            var legend = this.svg.legend
+                    .selectAll('.d3-legend__item')
+                    .data(this.state.data);
+
+            var enter = legend
+                    .enter()
+                    .append('g')
+                    .style('opacity', 0.9)
+                    .attr('class', 'd3-legend__item')
+                    .attr('data-graph-line-id', function(d) {
+                        return 'd3-legend__item--' + d.name;
+                    })
+                    .on('mouseover', function(d) {
+                        self._handleLegendMouseover(this, d);
+                    })
+                    .on('mouseout', function(d) {
+                        self._handleLegendMouseout(this, d);
+                    })
+                    .on('click', function(d) {
+                        self._handleLegendClick(this, d);
+                    });
+
+            enter.append('circle')
+                .attr('cx', this.state.width + 30)
+                .attr('cy', function(d) {
+                    return self.state.scales.legend(d.values[d.values.length-1].value) - 3.1;
+                })
+                .attr('r', 5.5)
+                .style('fill', function(d) {
+                    return self.state.color(d.name);
+                });
+
+            enter.append('text')
+                .attr('x', this.state.width + 40)
+                .attr('y', function(d) {
+                    return self.state.scales.legend(d.values[d.values.length-1].value);
+                })
+                .text(function(d) {
+                    return self.state.legend[d.name];
+                });
+        },
+
+        _handleLegendMouseover: function(self) {
+            var opacity = parseFloat(self.style.opacity);
+
+            if (opacity >= 0.9) {
+                d3.select(self)
+                    .style('opacity', 1);
+            } else {
+                d3.select(self)
+                    .style('opacity', 0.5);
+            }
+        },
+
+        _handleLegendMouseout: function(self) {
+            var opacity = parseFloat(self.style.opacity);
+
+            if (opacity >= 0.9) {
+                d3.select(self)
+                    .style('opacity', 0.9);
+            } else {
+                d3.select(self)
+                    .style('opacity', 0.2);
+            }
+        },
+
+        _handleLegendClick: function(self) {
+            var line = document.getElementById(self.getAttribute('data-graph-line-id'));
+
+            if (line.style.opacity !== '0') {
+                d3.select(line).transition()
+                    .duration(500)
+                    .style('opacity', 0);
+
+                d3.select(self).transition()
+	            .duration(500)
+	            .style('opacity', 0.2);
+            } else {
+                d3.select(line).transition()
+                    .duration(500)
+                    .style('opacity', 1);
+
+                d3.select(self).transition()
+	            .duration(500)
+	            .style('opacity', 0.9);
+            }
+        },
+
+        _drawLine: function() {
+            var self = this;
+
+            var line = this.svg.graph.selectAll('.d3-graph__line')
+                    .data(this.state.data)
+                    .enter()
+                    .append('g')
+                    .attr('class', 'd3-graph__line')
+                    .attr('id', function(d) {
+                        return 'd3-legend__item--' + d.name;
+                    });
+
+            line.append('path')
+                .attr('class', 'line')
+                .attr('d', function(d) {
+                    return self.state.lineStencil(d.values);
+                })
+                .style('stroke', function(d) {
+                    return self.state.color(d.name);
+                });
+        },
+
+        _drawFocus: function() {
+            var self = this;
+
+            var circle = this.svg.focus.selectAll('.d3-graph__focus-circle')
+                    .data(this.state.data)
+                    .enter()
+                    .append('g')
+                    .attr('class', 'd3-graph__focus-circle')
+                    .attr('id', function(d) {
+                        return 'd3-graph__focus-circle--' + d.name;
+                    })
+                    .style('display', 'none');
+
+            circle.append('circle')
+                .attr('r', 4.5);
+
+            circle.append('text')
+                .attr('x', 9)
+                .attr('dy', '.35em');
+
+            this.svg.focusLine = this.svg.focus.append('line')
+                .attr('x1', 0)
+                .attr('y1', 0)
+                .attr('x2', 0)
+                .attr('y2', this.state.height)
+                .style('stroke', 'gray')
+                .style('stroke-width', 0.5)
+                .style('stroke-dasharray', '5,10');
+
+            this.svg.graph.append('rect')
+                .attr('class', 'd3-graph__overlay')
+                .attr('width', this.state.width)
+                .attr('height', this.state.height)
+                .on('mouseover', function() {
+                    self.svg.focusLine.style('display', null);
+                })
+                .on('mouseout', function() {
+                    self.svg.focusLine.style('display', 'none');
+
+                    self.svg.focus.selectAll('.d3-graph__focus-circle')
+                        .style('display', 'none');
+                })
+                .on('mousemove', function() {
+                    self._handleFocusMousemove(this);
+                });
+        },
+
+        _handleFocusMousemove: function(overlay) {
+            var self = this,
+                mouse = d3.mouse(overlay)[0],
+                x0 = this.state.scales.x.invert(mouse);
+
+            var bisectData = function(data) {
+                var i = bisector(data.values, x0, 1),
+                    d0 = data.values[i - 1],
+                    d1 = data.values[i],
+                    d = x0 - d0.date > d1.date - x0 ? d1 : d0;
+
+                return {name: data.name, data: d};
+            };
+
+            this.svg.focusLine.attr('transform',
+                                    _translate(this.state.scales.x(x0),
+                                               0));
+
+            this.state.data.map(function(e) {
+                return bisectData(e);
+            }).map(function(d) {
+                var circle = document.getElementById('d3-graph__focus-circle--' + d.name),
+                    line = document.getElementById('d3-legend__item--' + d.name);
+
+                if (d.data.value > 0 && line.style.opacity !== '0') {
+                    d3.select(circle)
+                        .style('display', null)
+                        .attr('transform',
+                              _translate(self.state.scales.x(d.data.date),
+                                         self.state.scales.y(d.data.value)))
+
+                        .select('text').text(d3.format(',.2f')(d.data.value));
+                } else {
+                    d3.select(circle)
+                        .style('display', 'none');
+                }
+            });
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    d3,
+    _
+);

data/public/js/views/dashboard.js

@@ -1,67 +1,103 @@
 /**@jsx React.DOM*/
+/* global conjur, React, jQuery */
 
-var DashboardSearchForm = React.createClass({
-  mixins: [ conjur.views.mixins.Search ],
+(function(conjur, React, $) {
+    'use strict';
 
-  render: function() {
-    return (
-    <form id="dashboard-search" className="form-inline search" role="search" onSubmit={this.handleSubmit}>
-      <div className="form-group">
-        <input ref="input" type="text" className="form-control" placeholder="Search Conjur" value={this.props.searchText}>
-        </input>
-       </div>
-      <button type="submit" className="btn btn-default search-button">Search</button>
-    </form>
-    );
-  }
-});
+    var OwnedResourcesBox = conjur.views.OwnedResourcesBox,
+        Search = conjur.views.mixins.Search;
 
-var DashboardFrequent = React.createClass({
-  getInitialState: function() {
-    return {resources: [], loaded: false}
-  },
+    var DashboardSearchForm = React.createClass({
+        mixins: [Search],
 
-  componentWillMount: function() {
-    $.get("/api/authz/" + conjur.app.configuration.account + "/resources?owner=" + encodeURIComponent(conjur.app.userId), function(data) {
-      var filtered_data = data.filter( function(item) {
-                   return item.id.split(':')[1]!="secret"; // assets of 'secret' kind are internal
-                });
-      this.setState({resources: filtered_data, loaded: true});
-    }.bind(this));
-  },
+        render: function() {
+            return (
+              <form id="dashboard-search"
+                    className="form-inline search"
+                    role="search"
+                    onSubmit={this.handleSubmit}>
+                <div className="form-group">
+                  <input ref="input"
+                         type="text"
+                         className="form-control"
+                         placeholder="Search Conjur"
+                         value={this.props.searchText} />
+                </div>
+                <button type="submit" className="btn btn-default search-button">
+                  Search
+                </button>
+              </form>
+            );
+        }
+    });
 
-  render: function() {
-    var content,
-        OwnedResourcesBox = conjur.views.OwnedResourcesBox;
+    var DashboardFrequent = React.createClass({
+        getInitialState: function() {
+            return {resources: [], loaded: false};
+        },
 
-    if (this.state.loaded)
-      content = <OwnedResourcesBox resources={this.state.resources} />
-    else
-      content = <span>Loading...</span>
+        componentWillMount: function() {
+            $.get('/api/authz/' +
+                  conjur.app.configuration.account +
+                  '/resources?owner=' +
+                  encodeURIComponent(conjur.app.userId),
+                  function(data) {
+                      var filteredData = data.filter(function(item) {
+                          // assets of 'secret' kind are internal
+                          return item.id.split(':')[1] !== 'secret';
+                      });
 
-    return <section>
-      <h3>Owned assets</h3>
-      {content}
-    </section>;
-  }
-});
+                      this.setState({resources: filteredData, loaded: true});
+                  }.bind(this));
+        },
 
-var Dashboard = React.createClass({
-  render: function(){
-    return (
-      <div className="dashboard">
-        <div className="row">
-          <DashboardSearchForm />
-        </div>
-        <div className="row summary">
-          <div className="col-xs-6">
-            <DashboardFrequent />
-          </div>
-          <div className="col-xs-6 audit">
-            <AuditTable src={'/api/audit/all'} caption={'Recent activity'} compact={true}/>
-          </div>
-        </div>
-      </div>
-    );
-  }
-});
+        render: function() {
+            var content;
+
+            if (this.state.loaded) {
+                content = (
+                  <OwnedResourcesBox resources={this.state.resources} />
+                );
+            } else {
+                content = (
+                  <span>Loading...</span>
+                );
+            }
+
+            return (
+              <section>
+                <h3>Owned assets</h3>
+                {content}
+              </section>
+            );
+        }
+    });
+
+    this.Dashboard = React.createClass({
+        render: function() {
+            var AuditTable = window.AuditTable;
+
+            return (
+              <div className="dashboard">
+                <div className="row">
+                  <DashboardSearchForm />
+                </div>
+                <div className="row summary">
+                  <div className="col-xs-6">
+                    <DashboardFrequent />
+                  </div>
+                  <div className="col-xs-6 audit">
+                    <AuditTable src={'/api/audit/all'} caption={'Recent activity'} compact={true}/>
+                  </div>
+                </div>
+              </div>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    jQuery
+);

data/public/js/views/generic.js

@@ -1,14 +1,17 @@
 /** @jsx React.DOM */
+/* global conjur, React, _ */
 
-(function(conjur, React) {
+(function(conjur, React, _) {
     'use strict';
 
+    var RoleLink = conjur.views.RoleLink;
+
     var GenericListItem = React.createClass({
         render: function() {
-            var recordUrl = '/ui/'
-                    + this.props.data.kind
-                    + '/'
-                    + window.encodeURIComponent(this.props.data.record.identifier);
+            var recordUrl = '/ui/' +
+                    this.props.data.kind +
+                    '/' +
+                    window.encodeURIComponent(this.props.data.record.identifier);
 
             return (
               <tr>
@@ -25,7 +28,7 @@
         }
     });
 
-    var GenericList = this.GenericList = React.createClass({
+    this.GenericList = React.createClass({
         getInitialState: function() {
             return {
                 sort: {
@@ -53,7 +56,7 @@
 
                 var order = (this.state.sort.order === 'asc') ? 'desc' : 'asc';
 
-                if (this.state.sort.column != column) {
+                if (this.state.sort.column !== column) {
                     order = this.state.columns[column].defaultSortOrder;
                 }
 
@@ -74,7 +77,10 @@
             });
 
             items = _.sortBy(items, this.state.sort.column);
-            if (this.state.sort.order === 'desc') items.reverse();
+
+            if (this.state.sort.order === 'desc') {
+                items.reverse();
+            }
 
             var rows = items.map(function (o) {
                 var componentName = _.str.capitalize(
@@ -111,5 +117,6 @@
 }).bind(conjur.views)
 (
     conjur,
-    React
+    React,
+    _
 );