Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
Code Issues Projects Releases Wiki Activity

Show history inside feature table

Browse Source
This commit is contained in:
Gard Rimestad 2014-11-17 11:15:10 +01:00
parent cf3eaefb46
commit df2ddbfb45
4 changed files with 65 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
public/js/components/feature/Feature.jsx
View File

@ -1,13 +1,29 @@
var React = require('react');
var FeatureForm = require('./FeatureForm');
var LogEntryList = require('../log/LogEntryList');
var eventStore = require('../../stores/EventStore');
var Feature = React.createClass({
getInitialState: function() {
return {
editMode: false
editMode: false,
showHistory: false,
events: []
};
},
handleEventsResponse: function(response) {
this.setState({events: response});
},
toggleHistory: function() {
eventStore.getEventsByName(this.props.feature.name).then(this.handleEventsResponse);
this.setState({showHistory: !this.state.showHistory});
},
toggleEditMode: function() {
this.setState({editMode: !this.state.editMode});
},
@ -34,29 +50,44 @@ var Feature = React.createClass({
renderViewMode: function() {
return (
<tr>
<td width="20">
<span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status">
</span>
</td>
<td>
{this.props.feature.name}
</td>
<tbody>
<tr>
<td width="20">
<span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status">
</span>
</td>
<td>
{this.props.feature.name}
</td>
<td className='opaque smalltext word-break' width="600">
{this.props.feature.description || '\u00a0'}
</td>
<td className='opaque smalltext word-break' width="600">
{this.props.feature.description || '\u00a0'}
</td>
<td>
{this.props.feature.strategy}
</td>
<td>
{this.props.feature.strategy}
</td>
<td className="rightify">
<input type='button' value='Edit' onClick={this.toggleEditMode}/>
</td>
</tr>
<td className="rightify">
<input type='button' value='Edit' onClick={this.toggleEditMode}/>
<input type='button' value='History' onClick={this.toggleHistory} />
</td>
</tr>
{this.state.showHistory ? this.renderHistory() : this.renderEmptyRow()}
</tbody>
);
},
renderEmptyRow: function() {
return (<tr />);
},
renderHistory: function() {
return (<tr>
<td colSpan="5"><LogEntryList events={this.state.events} /></td>
</tr>);
}
});
module.exports = Feature;

4
public/js/components/feature/FeatureList.jsx
View File

@ -24,9 +24,7 @@ var FeatureList = React.createClass({
<th></th>
</tr>
</thead>
<tbody>
{featureNodes}
</tbody>
{featureNodes}
</table>
</div>
);

7
public/js/components/log/LogEntry.jsx
View File

@ -7,6 +7,9 @@ var LogEntry = React.createClass({
render: function() {
var d = new Date(this.props.event.createdAt);
var localEventData = JSON.parse(JSON.stringify(this.props.event.data));
delete localEventData.description;
delete localEventData.name;
return (
<tr>
<td>
@ -14,10 +17,10 @@ var LogEntry = React.createClass({
kl. {d.getHours() + "." + d.getMinutes()}
</td>
<td>
{this.props.event.type}
<strong>{this.props.event.data.name}</strong><em>[{this.props.event.type}]</em>
</td>
<td>
<code className='JSON'>{JSON.stringify(this.props.event.data)}</code>
<code className='JSON'>{JSON.stringify(localEventData)}</code>
</td>
<td>{this.props.event.createdBy}</td>
</tr>

9
public/js/stores/EventStore.js
View File

@ -10,7 +10,16 @@ var EventStore = {
method: 'get',
type: TYPE
});
},
getEventsByName: function (name) {
return reqwest({
url: 'events/' + name,
method: 'get',
type: TYPE
});
}
};
module.exports = EventStore;