Mid api and view for managing firmware certified version combination

api/firmware.py

@@ -149,3 +149,17 @@ def post(self):
             body.get("from_fw_version"))
         self.slack_pusher.send_to_deploys_channel(message_text)
 
+
+class FirmwareCertifiedComboAPI(ProtectedRequestHandler):
+    def get(self):
+        self.hello_request(
+            api_url="firmware/certified_combinations",
+            type="GET"
+        )
+
+    def put(self):
+        self.hello_request(
+            api_url="firmware/certified_combinations",
+            type="PUT",
+            body_data=self.request.body
+        )

app.yaml

@@ -1,5 +1,5 @@
 application: 'hello-admin'
-version: 59a
+version: 59c
 
 runtime: python27
 api_version: 1

static/css/firmware_certified_combo.css

@@ -0,0 +1,3 @@
+th {text-align: left !important;}
+table {background-color: white; margin-top: 10px;}
+.submit-new {width: 100%;}

static/js/firmware_certified_combo.js

@@ -0,0 +1,110 @@
+var FW_SEPERATOR = "___";
+
+var NewComboModal = React.createClass({
+    handleSubmit: function() {
+        var topFw = this.refs.topFw.getDOMNode().value;
+        var middleFw = this.refs.middleFw.getDOMNode().value;
+
+        if (!topFw.isWhiteString() && !middleFw.isWhiteString()) {
+            console.log("data", this.props.data);
+            var data = this.props.data;
+            data.push(topFw + FW_SEPERATOR + middleFw);
+            console.log(data);
+            this.props.putFWCertifiedCombo(data);
+            this.props.getFWCertifiedCombo();
+        }
+
+        return false;
+    },
+    render: function() {
+        return <Modal animation={true}>
+            <div className='modal-body'>
+                <div className="modal-title">Add New Firmware Combo</div>
+                <br/>
+                <form onSubmit={this.handleSubmit}>
+                    <input className="form-control" ref="topFw" placeholder="top firmware version"/>
+                    <br/>
+                    <input className="form-control" ref="middleFw" placeholder="middle firmware version"/>
+                    <br/>
+                    <Button className="submit-new" type="submit">Submit</Button>
+                </form>
+            </div>
+            <div className='modal-footer'>
+                <Button className="btn-round btn-fade" onClick={this.props.onRequestHide}>X</Button>
+            </div>
+        </Modal>;
+    }
+});
+
+var FirmwareCertifiedCombo = React.createClass({
+    getInitialState: function() {
+        return {data: [], error: ""};
+    },
+
+    getFWCertifiedCombo: function() {
+        $.ajax({
+            url: "/api/firmware_certified_combo",
+            type: "GET",
+            success: function(response) {
+                console.log(response);
+                this.setState(response);
+            }.bind(this)
+        });
+        return false;
+    },
+
+    putFWCertifiedCombo: function(combo) {
+        $.ajax({
+            url: "/api/firmware_certified_combo",
+            type: "PUT",
+            data: JSON.stringify(combo),
+            success: function(response) {
+                console.log(response);
+            }.bind(this)
+        });
+        return false;
+    },
+
+    componentDidMount: function() {
+        this.getFWCertifiedCombo();
+    },
+
+    removeElement: function(ele) {
+        var updatedData = _.without(this.state.data, ele);
+        this.putFWCertifiedCombo(updatedData);
+        this.setState({data: updatedData});
+    },
+
+    render: function() {
+        return <div>
+            <ModalTrigger modal={<NewComboModal getFWCertifiedCombo={this.getFWCertifiedCombo} putFWCertifiedCombo={this.putFWCertifiedCombo}/>}>
+                <Button><Glyphicon glyph="plus"/> New combination</Button>
+            </ModalTrigger>
+            <br/>
+            <Table>
+                <thead><tr>
+                    <th>Top Firmware Version</th>
+                    <th>Middle Firmware Version</th>
+                    <th>Action</th>
+                </tr></thead>
+                <tbody>{
+                    this.state.data.map(function(d){
+                        var topFw = d.split(FW_SEPERATOR)[0];
+                        var middleFw = d.split(FW_SEPERATOR)[1];
+                        return <tr>
+                            <td>{topFw}</td>
+                            <td>{middleFw}</td>
+                            <td><Button onClick={this.removeElement.bind(this, d)}><Glyphicon glyph="trash" /></Button></td>
+                        </tr>
+                    }.bind(this))
+                }</tbody>
+            </Table>
+            <ModalTrigger modal={<NewComboModal getFWCertifiedCombo={this.getFWCertifiedCombo} putFWCertifiedCombo={this.putFWCertifiedCombo} data={this.state.data}/>}>
+                <Button><Glyphicon glyph="plus"/> New combination</Button>
+            </ModalTrigger>
+
+        </div>;
+    }
+});
+
+React.render(<FirmwareCertifiedCombo />, document.getElementById("firmware-certified-combo"));

template/base.html

@@ -77,6 +77,7 @@
                 <span class="sidebar-group list-group-item">Firmware</span>
                 <span {% if title == "Firmware"%} class="list-group-item-active"{% endif %}><a href="/firmware" class="list-group-item">Firmware History</a></span>
                 <span {% if title == "Firmware Upgrade Path"%} class="list-group-item-active"{% endif %}><a href="/firmware_path" class="list-group-item">Upgrade Path</a></span>
+                <span {% if title == "Firmware Certified Combo"%} class="list-group-item-active"{% endif %}><a href="/firmware_certified_combo" class="list-group-item">Version Combos</a></span>
                 <div class="list-group-separator list-group-item"><hr></div>
 
                 <span class="sidebar-group list-group-item">Data</span>

template/firmware_certified_combo.html

@@ -0,0 +1,10 @@
+{% extends "base_latest_react.html" %}
+{% block extrastatic %}
+    <link rel="stylesheet" type="text/css" href="/static/css/firmware_certified_combo.css" />
+    <script type="text/javascript" src="/static/js/third-party/underscore.min.js"></script>
+    <script type="text/jsx" src="/static/js/firmware_certified_combo.js"></script>
+{% endblock %}
+
+{% block content %}
+    <div id="firmware-certified-combo"></div>
+{% endblock %}

url/api_urls.py

@@ -23,7 +23,7 @@
 from api.trends import TrendsAPI
 from api.uptime import SenseUptimeAPI
 from api.event import SenseEventsAPI
-from api.firmware import FirmwareAPI
+from api.firmware import FirmwareAPI, FirmwareCertifiedComboAPI
 from api.firmware import FirmwareHistoryAPI
 from api.firmware import FirmwareInfoAPI
 from api.firmware import FirmwareUnhashAPI
@@ -182,5 +182,6 @@
     ('/api/dropout_devices/?$', DropoutDevicesAPI),
     ('/api/pill_latest/pair/?$', LatestPillsAPI),
     ('/api/pill_latest/data/?$', LatestPillsDataAPI),
+    ('/api/firmware_certified_combo/?$', FirmwareCertifiedComboAPI),
 ]
 

url/view_urls.py

@@ -1,7 +1,7 @@
 from view.views import AccountProfileView, RoomConditionsMinuteView, TimelineV2View, LogsFacetHistoryView, \
     TimelineLogsView, TimelineLogsHistoryView, DustCalibrationLeftOverView, HeartbeatView, KeyStoreBatchView, \
     LogsLevelView, ESStatusView, ESAggregationView, FeedbackView, DropoutDevicesView, InsightsView, TrendsView, \
-    LatestPillsView
+    LatestPillsView, FirmwareCertifiedComboView
 from view.views import ActiveDevicesHistoryView
 from view.views import AlarmRingsHistoryView
 from view.views import AlarmsView
@@ -107,4 +107,5 @@
     ('/trends/?$', TrendsView),
     ('/dropout_devices/?$', DropoutDevicesView),
     ('/latest_pills/?$', LatestPillsView),
+    ('/firmware_certified_combo/?$', FirmwareCertifiedComboView),
 ]

view/views.py

@@ -306,4 +306,9 @@ def get(self):
 class LatestPillsView(ProtectedRequestHandler):
     def get(self):
         self.render_to_response(template_file='latest_pills.html',
-                                context={'title': "Latest Pills"})
+                                context={'title': "Latest Pills"})
+
+class FirmwareCertifiedComboView(ProtectedRequestHandler):
+    def get(self):
+        self.render_to_response(template_file='firmware_certified_combo.html',
+                                context={'title': "Firmware Certified Combo"})