Show refused offers

.travis.yml

@@ -1,6 +1,5 @@
 language: node_js
 before_install:
-  - npm install -g npm
   - npm cache clear
   - npm install -g gulp
 node_js:

src/js/actions/QueueActions.js

@@ -42,6 +42,23 @@ var QueueActions = {
         });
       });
   },
+  getOfferStats: function (appId) {
+    this.request({
+      url: `${config.apiURL}v2/queue/${appId}/stats`
+    })
+      .success(function (data) {
+        AppDispatcher.dispatch({
+          actionType: QueueEvents.OFFER_STATS,
+          data: data.body
+        });
+      })
+      .error(function (error) {
+        AppDispatcher.dispatch({
+          actionType: QueueEvents.OFFER_STATS_ERROR,
+          data: error
+        });
+      });
+  },
   request: ajaxWrapper
 };
 

src/js/components/AppDebugInfoComponent.jsx

@@ -5,8 +5,10 @@ import AppsStore from "../stores/AppsStore";
 import AppsActions from "../actions/AppsActions";
 import AppsEvents from "../events/AppsEvents";
 import AppTaskStatsListComponent from "../components/AppTaskStatsListComponent";
+import QueueActions from "../actions/QueueActions";
 import TaskMesosUrlComponent from "../components/TaskMesosUrlComponent";
 import UnspecifiedNodeComponent from "../components/UnspecifiedNodeComponent";
+import RejectionStatsComponent from "../components/RejectionStatsComponent";
 
 function invalidateValue(value, suffix) {
   if (value == null || value === "") {
@@ -28,6 +30,7 @@ var AppDebugInfoComponent = React.createClass({
   },
 
   getInitialState: function () {
+    QueueActions.getOfferStats(this.props.appId);
     return {
       app: AppsStore.getCurrentApp(this.props.appId)
     };
@@ -43,6 +46,7 @@ var AppDebugInfoComponent = React.createClass({
 
   handleRefresh: function () {
     AppsActions.requestApp(this.props.appId);
+    QueueActions.getOfferStats(this.props.appId);
   },
 
   onAppsChange: function () {
@@ -62,6 +66,8 @@ var AppDebugInfoComponent = React.createClass({
       );
     }
 
+    lastTaskFailure.id = lastTaskFailure.id || lastTaskFailure.taskId;
+
     const timestamp = lastTaskFailure.timestamp;
     const timeStampText = new Date(timestamp) > new Date()
       ? "Just now"
@@ -86,7 +92,7 @@ var AppDebugInfoComponent = React.createClass({
         <dd>
           <span>{version}</span> ({new Moment(version).fromNow()})
         </dd>
-        <dt>Mesos Details</dt>
+        <dt>Mesos details</dt>
         <dd><TaskMesosUrlComponent task={lastTaskFailure}/></dd>
       </dl>
     );
@@ -145,6 +151,7 @@ var AppDebugInfoComponent = React.createClass({
           onClick={this.handleRefresh}>
           ↻ Refresh
         </button>
+        <RejectionStatsComponent appId={this.props.appId} />
         <div className="panel-group flush-top">
           <div className="panel panel-header panel-inverse">
             <div className="panel-heading">

src/js/components/RejectionStatsComponent.jsx

@@ -0,0 +1,97 @@
+import React from "react/addons";
+
+import QueueStore from "../stores/QueueStore";
+import QueueActions from "../actions/QueueActions";
+import QueueEvents from "../events/QueueEvents";
+
+var lazy = require("lazy.js");
+
+var RejectionStatsComponent = React.createClass({
+  displayName: "RejectionStatsComponent",
+
+  propTypes: {
+    appId: React.PropTypes.string.isRequired
+  },
+
+  getInitialState: function () {
+    return {
+      stats: QueueStore.currentStats
+    };
+  },
+
+  componentWillMount: function () {
+    QueueStore.on(QueueEvents.OFFER_STATS, this.onAppsChange);
+  },
+
+  componentWillUnmount: function () {
+    QueueStore.removeListener(QueueEvents.OFFER_STATS, this.onAppsChange);
+  },
+
+  handleRefresh: function () {
+    QueueActions.getOfferStats(this.props.appId);
+  },
+
+  onAppsChange: function () {
+    this.setState({
+      stats: QueueStore.currentStats
+    });
+  },
+
+  getCountRejections: function () {
+    return this.state.stats.count;
+  },
+
+  getRejections: function () {
+    var count = this.state.stats.count;
+    var details = this.state.stats.details;
+    if (details!=null) {
+      var keys = Object.keys(details);
+      return lazy(keys)
+        .map(function (key) {
+          return (
+            <tr key={key}>
+              <td className="text-center text-muted">{key}</td>
+              <td className="text-center text-muted">{details[key]}</td>
+              <td className="text-center text-muted">
+                {(100 - (details[key]*100)/count).toFixed(2)}%</td>
+            </tr>
+          );
+        })
+        .value();
+    }
+  },
+
+  lastRejectionsTable: function () {
+    return (
+      <div>
+        <table className="table table-fixed">
+          <thead>
+          <tr>
+            <th className="text-center"><span>Resources</span></th>
+            <th className="text-center"><span>Rejected Count</span></th>
+            <th className="text-center"><span>Matches</span></th>
+          </tr>
+          </thead>
+          <tbody>
+          {this.getRejections()}
+          </tbody>
+        </table>
+      </div>
+    );
+
+  },
+
+  render: function () {
+    return (
+      <div className="panel-group flush-top">
+        <div className="panel panel-header panel-inverse">
+          <div className="panel-heading">
+            Last {this.getCountRejections()} Rejections
+          </div>
+        </div>
+        {this.lastRejectionsTable()}
+      </div>);
+  }
+});
+
+export default RejectionStatsComponent;

src/js/events/QueueEvents.js

@@ -3,7 +3,9 @@ const QueueEvents = {
   REQUEST: "QUEUE_EVENTS_REQUEST",
   REQUEST_ERROR: "QUEUE_EVENTS_REQUEST_ERROR",
   RESET_DELAY: "QUEUE_EVENTS_RESET_DELAY",
-  RESET_DELAY_ERROR: "QUEUE_EVENTS_RESET_DELAY_ERROR"
+  RESET_DELAY_ERROR: "QUEUE_EVENTS_RESET_DELAY_ERROR",
+  OFFER_STATS: "OFFER_STATS",
+  OFFER_STATS_ERROR: "OFFER_STATS_ERROR"
 };
 
 export default Object.freeze(QueueEvents);

src/js/stores/QueueStore.js

@@ -7,7 +7,8 @@ import queueScheme from "./schemes/queueScheme";
 import Util from "../helpers/Util";
 
 const storeData = {
-  queue: []
+  queue: [],
+  currentStats: {}
 };
 
 function processQueue(queue = []) {
@@ -21,6 +22,10 @@ var QueueStore = Util.extendObject(EventEmitter.prototype, {
     return Util.deepCopy(storeData.queue);
   },
 
+  get currentStats() {
+    return Util.deepCopy(storeData.currentStats);
+  },
+
   getDelayByAppId: function (appId) {
     var timeLeftSeconds = 0;
 
@@ -61,6 +66,19 @@ AppDispatcher.register(function (action) {
         action.appId
       );
       break;
+    case QueueEvents.OFFER_STATS:
+      storeData.currentStats = action.data;
+      QueueStore.emit(
+        QueueEvents.OFFER_STATS,
+        action.data
+      );
+      break;
+    case QueueEvents.OFFER_STATS_ERROR:
+      QueueStore.emit(
+        QueueEvents.OFFER_STATS_ERROR,
+        action.data.body
+      );
+      break;
   }
 });
 

src/test/scenarios/rejectedOfferStats.test.js

@@ -0,0 +1,41 @@
+import {expect} from "chai";
+import nock from "nock";
+import expectAsync from "./../helpers/expectAsync";
+
+import config from "../../js/config/config";
+
+import QueueActions from "../../js/actions/QueueActions";
+import QueueEvents from "../../js/events/QueueEvents";
+import QueueStore from "../../js/stores/QueueStore";
+
+describe("rejected offer stats", function () {
+
+  before(function (done) {
+    done();
+  });
+
+  it("respond sucessfully on matching app", function (done) {
+    var response = {
+      "count" : 2,
+      "details": { "mem" : 1,
+        "cpu" : 2
+      }
+    };
+
+    var appId = "app-1";
+
+    nock(config.apiURL)
+      .get("/v2/queue/app-1/stats")
+      .reply(200, response);
+
+    QueueStore.once(QueueEvents.OFFER_STATS, function (data) {
+      expectAsync(function () {
+        expect(data.count).to.equal(2);
+        expect(data.details.mem).to.equal(1);
+      }, done);
+    });
+
+    QueueActions.getOfferStats(appId);
+  });
+
+});

src/test/units/AppDebugInfoComponent.test.js

@@ -1,5 +1,5 @@
 import {expect} from "chai";
-import {shallow} from "enzyme";
+import {shallow, mount} from "enzyme";
 import nock from "nock";
 
 import config from "../../js/config/config";
@@ -20,18 +20,18 @@ import expectAsync from "./../helpers/expectAsync";
 describe("App debug info component", function () {
 
   describe("Last task failure", function () {
+    var info = {
+      "version": "1.2.3",
+      "frameworkId": "framework1",
+      "leader": "leader1.dcos.io",
+      "marathon_config": {
+        "marathon_field_1": "mf1",
+        "mesos_master_url": "http://master.dcos.io:5050",
+        "mesos_leader_ui_url" : "http://leader1.dcos.io:5050"
+      }
+    };
 
     before(function (done) {
-      var info = {
-        "version": "1.2.3",
-        "frameworkId": "framework1",
-        "leader": "leader1.dcos.io",
-        "marathon_config": {
-          "marathon_field_1": "mf1",
-          "mesos_master_url": "http://leader1.dcos.io:5050"
-        }
-      };
-
       nock(config.apiURL)
         .get("/v2/info")
         .reply(200, info);
@@ -45,17 +45,20 @@ describe("App debug info component", function () {
     });
 
     it("should show failed task", function (done) {
+      var task = {
+        appId: "/python",
+        host: "slave1.dcos.io",
+        message: "Slave slave1.dcos.io removed",
+        state: "TASK_LOST",
+        taskId: "python.83c0a69b-256a-11e5-aaed-fa163eaaa6b7",
+        slaveId: "slaveABC",
+        timestamp: "2015-08-05T09:08:56.349Z",
+        version: "2015-07-06T12:37:28.774Z"
+      };
+
       var app = Util.extendObject(appScheme, {
         id: "/python",
-        lastTaskFailure: {
-          appId: "/python",
-          host: "slave1.dcos.io",
-          message: "Slave slave1.dcos.io removed",
-          state: "TASK_LOST",
-          taskId: "python.83c0a69b-256a-11e5-aaed-fa163eaaa6b7",
-          timestamp: "2015-08-05T09:08:56.349Z",
-          version: "2015-07-06T12:37:28.774Z"
-        }
+        lastTaskFailure: task
       });
 
       nock(config.apiURL)
@@ -67,7 +70,7 @@ describe("App debug info component", function () {
 
       AppsStore.once(AppsEvents.CHANGE, () => {
         expectAsync(() => {
-          this.component = shallow(<AppDebugInfoComponent appId="/python" />);
+          this.component = mount(<AppDebugInfoComponent appId="/python" />);
           var nodes = this.component.find("dd");
 
           var taskId = nodes.at(0).text().trim();
@@ -76,6 +79,7 @@ describe("App debug info component", function () {
           var host = nodes.at(3).text().trim();
           var timestamp = nodes.at(4).find("span").text().trim();
           var version = nodes.at(5).find("span").text().trim();
+          var details = nodes.at(6).find("a").props().href;
 
           expect(taskId)
             .to.equal("python.83c0a69b-256a-11e5-aaed-fa163eaaa6b7");
@@ -84,6 +88,8 @@ describe("App debug info component", function () {
           expect(host).to.equal("slave1.dcos.io");
           expect(timestamp).to.equal("2015-08-05T09:08:56.349Z");
           expect(version).to.equal("2015-07-06T12:37:28.774Z");
+          expect(details).to.equal(info.marathon_config.mesos_leader_ui_url + "/#/slaves/" +
+            task.slaveId + "/frameworks/framework1/executors/" + task.taskId);
         }, done);
       });
 
@@ -141,7 +147,7 @@ describe("App debug info component", function () {
         expectAsync(() => {
           this.component = shallow(<AppDebugInfoComponent appId="/python" />);
           var message =
-            this.component.children().at(2).find(".panel-body").text();
+            this.component.children().at(3).find(".panel-body").text();
           expect(message).to.equal("This app does not have failed tasks");
         }, done);
       });
@@ -183,7 +189,7 @@ describe("App debug info component", function () {
     it("scale or restart field has no recent operation", function () {
       var message = this.component
         .children()
-        .at(1)
+        .at(2)
         .find(".panel-body")
         .find("dd")
         .at(0)
@@ -194,7 +200,7 @@ describe("App debug info component", function () {
     it("last configuration change has correct date", function () {
       var message = this.component
         .children()
-        .at(1)
+        .at(2)
         .find(".panel-body")
         .find("dd")
         .at(1)