Add close worker button to worker info page (#8742)

Author: jrbourbeau

distributed/http/scheduler/info.py

@@ -11,6 +11,7 @@
 from tornado import escape
 from tornado.websocket import WebSocketHandler
 
+import dask
 from dask.typing import Key
 from dask.utils import format_bytes, format_time
 
@@ -32,6 +33,10 @@
 
 logger = logging.getLogger(__name__)
 
+API_ENABLED = "distributed.http.scheduler.api" in dask.config.get(
+    "distributed.scheduler.http.routes"
+)
+
 
 class Workers(RequestHandler):
     @log_errors
@@ -40,6 +45,7 @@ def get(self):
             "workers.html",
             title="Workers",
             scheduler=self.server,
+            api_enabled=API_ENABLED,
             **merge(
                 self.server.__dict__,
                 self.server.__pdict__,
@@ -62,6 +68,7 @@ def get(self, worker):
             "worker.html",
             title="Worker: " + worker,
             scheduler=self.server,
+            api_enabled=API_ENABLED,
             Worker=worker,
             **merge(
                 self.server.__dict__,
@@ -134,6 +141,7 @@ def get(self, task: str) -> None:
             title=f"Task: {key!r}",
             Task=key,
             scheduler=self.server,
+            api_enabled=API_ENABLED,
             **merge(
                 self.server.__dict__,
                 self.server.__pdict__,

distributed/http/templates/worker-table.html

@@ -12,6 +12,10 @@
             <th> Services</th>
             <th> Logs </th>
             <th> Last seen </th>
+            {% if api_enabled %}
+            <th>  </th>
+            {% else %}
+            {% end %}
         </tr>
     </thead>
     <tbody>
@@ -33,7 +37,40 @@
             {% end %}
             <td> <a href="../logs/{{ url_escape(ws.address) }}.html">logs</a></td>
             <td> {{ format_time(time() - ws.last_seen) }} </td>
+            {% if api_enabled %}
+            <td>
+                <form action="" id="close-worker" method="post" name="asdf">
+                    <button class="button is-default" name="{{ws.address}}">Close</button>
+                </form>
+            </td>
+            {% else %}
+            {% end %}
         </tr>
         {% end %}
     </tbody>
 </table>
+
+<script>
+    const forms = document.querySelectorAll("#close-worker");
+    forms.forEach(p =>
+        p.addEventListener("submit", (event) => {
+        let submitter = event.submitter;
+        let handler = submitter.id;
+        event.preventDefault();
+        closeWorker(submitter.name);
+        })
+    );
+
+    async function closeWorker(address) {
+        try {
+            const response = await fetch("../../api/v1/retire_workers", {
+                method: "POST",
+                body: JSON.stringify({workers: [address]}),
+            });
+            console.log(await response.json());
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+</script>