1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-01 00:08:27 +01:00

Show history inside feature table

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

View File

@ -1,13 +1,29 @@
var React = require('react'); var React = require('react');
var FeatureForm = require('./FeatureForm'); var FeatureForm = require('./FeatureForm');
var LogEntryList = require('../log/LogEntryList');
var eventStore = require('../../stores/EventStore');
var Feature = React.createClass({ var Feature = React.createClass({
getInitialState: function() { getInitialState: function() {
return { 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() { toggleEditMode: function() {
this.setState({editMode: !this.state.editMode}); this.setState({editMode: !this.state.editMode});
}, },
@ -34,6 +50,7 @@ var Feature = React.createClass({
renderViewMode: function() { renderViewMode: function() {
return ( return (
<tbody>
<tr> <tr>
<td width="20"> <td width="20">
<span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status"> <span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status">
@ -53,10 +70,24 @@ var Feature = React.createClass({
<td className="rightify"> <td className="rightify">
<input type='button' value='Edit' onClick={this.toggleEditMode}/> <input type='button' value='Edit' onClick={this.toggleEditMode}/>
<input type='button' value='History' onClick={this.toggleHistory} />
</td> </td>
</tr> </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; module.exports = Feature;

View File

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

View File

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

View File

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