From e521a2b07bb02f6349c1d4ae8efec98ba6f0ce85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Seux?= <g.seux@criteo.com>
Date: Mon, 20 Jul 2020 17:16:25 +0200
Subject: [PATCH] Add feature to diagnose stalled deployments (#34)

* Correct readme for testing

Change-Id: I5de7a4324dc424ab663e3ed8ac793c072c78e51f

* Add feature to diagnose stalled deployments

This will allow to give feedback to users when they don't get new tasks
scheduled.

Change-Id: I9f59cde8f5682983b4acc2dde8d3d4e0e8dcef1d
---
 README.md                                     |  2 +-
 src/js/components/AlertDialogComponent.jsx    |  8 +++-
 .../components/AppPageControlsComponent.jsx   | 16 +++++++
 src/js/config/config.js                       | 11 +++++
 src/js/config/runtimeConfig.js                | 11 +++++
 src/js/mixins/AppActionsHandlerMixin.jsx      | 47 +++++++++++++++++++
 6 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index fdf5c502a..01f3f7b6c 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,6 @@ For complete beginners (like me):
 
 You can access marathon UI bundled with marathon on http://localhost:8080.
 
-To access **your local marathon ui**, use http://localhost:8081/dev.
+To access **your local marathon ui**, use http://localhost:8081/dev/ (don't forget the trailing /)
 
 http://localhost:8080 expose a version of marathon ui that you have built outside of docker (you don't need to)
diff --git a/src/js/components/AlertDialogComponent.jsx b/src/js/components/AlertDialogComponent.jsx
index 4cc6a7707..96e17e44c 100644
--- a/src/js/components/AlertDialogComponent.jsx
+++ b/src/js/components/AlertDialogComponent.jsx
@@ -37,6 +37,12 @@ var AlertDialogComponent = React.createClass({
     var data = props.data;
     var className = classNames("dialog", data.severity);
 
+    const addLineBreaks = string => string.split("\n").map((text, index) => (
+      <div>
+      {text}<br/>
+      </div>
+    ));
+
     return (
       <ModalComponent
           className={className}
@@ -47,7 +53,7 @@ var AlertDialogComponent = React.createClass({
           {data.title}
         </div>
         <div className="modal-body">
-          {data.message}
+          {addLineBreaks(data.message)}
         </div>
         <div className="modal-footer">
           <button
diff --git a/src/js/components/AppPageControlsComponent.jsx b/src/js/components/AppPageControlsComponent.jsx
index 15f2afc08..898b1c604 100644
--- a/src/js/components/AppPageControlsComponent.jsx
+++ b/src/js/components/AppPageControlsComponent.jsx
@@ -39,6 +39,21 @@ var AppPageControlsComponent = React.createClass({
     );
   },
 
+  getDeploymentDiagnosticButton: function () {
+    var props = this.props;
+
+    if (props.model.status === AppStatus.RUNNING) {
+      return null;
+    }
+
+    return (
+      <button className="btn btn-lg btn-warning"
+          onClick={this.handleDeploymentDiagnostic}>
+        Diagnose deployment
+      </button>
+    );
+  },
+
   handleClickOutside: function () {
     this.setState({
       isDropdownActivated: false
@@ -77,6 +92,7 @@ var AppPageControlsComponent = React.createClass({
           Application Restart
         </button>
         {this.getResetDelayButton()}
+        {this.getDeploymentDiagnosticButton()}
         <div className="dropdown app-controls">
           <button className="btn btn-lg btn-default"
               onClick={this.toggleDropdown}>
diff --git a/src/js/config/config.js b/src/js/config/config.js
index df6365a96..83bfd90fd 100644
--- a/src/js/config/config.js
+++ b/src/js/config/config.js
@@ -58,6 +58,17 @@ var config = Object.assign({
     return null;
   },
 
+  // The generate build a link to diagnose broken deployments
+  // It returns a url on which a GET will be made.
+  // the api calls is expected to return a json of the form:
+  // {
+  //   success: true
+  //   hints: [ String, String, [..] ]
+  // }
+  deploymentDiagnosisUrlGenerate: function () {
+    return null;
+  },
+
   serviceDomain: "",
   version: ("@@TEAMCITY_UI_VERSION".indexOf("@@TEAMCITY") === -1) ?
     "@@TEAMCITY_UI_VERSION" :
diff --git a/src/js/config/runtimeConfig.js b/src/js/config/runtimeConfig.js
index fa969df3e..3f749e1a3 100644
--- a/src/js/config/runtimeConfig.js
+++ b/src/js/config/runtimeConfig.js
@@ -22,6 +22,17 @@ var runtimeConfig = {
   },
   taskSandboxLinkGenerator: function (executorId) {
     return "http://mesos-sandbox-ui/?executorId=" + executorId;
+  },
+
+  // The generate build a link to diagnose broken deployments
+  // It returns a url on which a GET will be made.
+  // the api calls is expected to return a json of the form:
+  // {
+  //   success: true
+  //   hints: [ String, String, [..] ]
+  // }
+  deploymentDiagnosisUrlGenerate: function() {
+    return null;
   }
 
 };
diff --git a/src/js/mixins/AppActionsHandlerMixin.jsx b/src/js/mixins/AppActionsHandlerMixin.jsx
index 13e67a12f..aaaf4327f 100644
--- a/src/js/mixins/AppActionsHandlerMixin.jsx
+++ b/src/js/mixins/AppActionsHandlerMixin.jsx
@@ -1,5 +1,6 @@
 import React from "react";// eslint-disable-line no-unused-vars
 
+import config from "../config/config";
 import AppsActions from "../actions/AppsActions";
 import AppsEvents from "../events/AppsEvents";
 import AppsStore from "../stores/AppsStore";
@@ -170,6 +171,52 @@ var AppActionsHandlerMixin = {
     QueueActions.resetDelay(this.props.model.id);
   },
 
+  handleDeploymentDiagnostic: function () {
+    var appId = this.props.model.id;
+    var uri = config.deploymentDiagnosisUrlGenerate();
+    if (uri == null) {
+      console.log("config.deploymentDiagnosisUrlGenerate returned null " +
+                  "so not doing anything");
+      return;
+    }
+    // first dialog will disappear when second one will appear
+    const loadingDiagId = DialogActions.alert({
+      actionButtonLabel: "Ack",
+      message: "Diagnosis in progress, it will take a few seconds",
+      title: `Diagnosis of ${appId}`
+    });
+    fetch(uri)
+      .then(res => res.json())
+      .then(
+        (result) => {
+          var message = "Diagnosis results:\n";
+          result["hints"].forEach(function (hint) {
+            message += `- ${hint}\n`;
+          });
+          if (result["hints"].length > 0) {
+            message += "hope it helps!";
+          } else {
+            message += "no hint :(";
+          }
+          const dialogId = DialogActions.alert({
+            actionButtonLabel: "Ack",
+            message: message,
+            title: `Diagnosis of ${appId}`
+          });
+        },
+        // Note: it's important to handle errors here
+        // instead of a catch() block so that we don't swallow
+        // exceptions from actual bugs in components.
+        (error) => {
+          const dialogId = DialogActions.alert({
+            actionButtonLabel: "Ack",
+            message: `${error}`,
+            title: `Failure to diagnose ${appId}`
+          });
+        }
+      );
+  },
+
   handleRestartApp: function () {
     var appId = this.props.model.id;