feat: Add Drawer component (#338)

* Add the drawer component * Update the drawer * Delete the separate drawer btn component * Update the drawer * Update the theme colors * Update the component & add the docs * Update the drawer breakpoint * Fix the cluster tasks table jumping width issue
filecoin-project · Dec 5, 2024 · a3eb4c6 · a3eb4c6
1 parent 7cc1214
commit a3eb4c6
Show file tree

Hide file tree

Showing 5 changed files with 314 additions and 59 deletions.
diff --git a/web/static/cluster-tasks.mjs b/web/static/cluster-tasks.mjs
@@ -1,33 +1,48 @@
-import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
+import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
 import RPCCall from '/lib/jsonrpc.mjs';
 
-customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
-    static get properties() {
-        return {
-            data: { type: Array },
-            showBackgroundTasks: { type: Boolean },
-        };
-    }
+class ClusterTasks extends LitElement {
+  static get properties() {
+    return {
+      data: { type: Array },
+      showBackgroundTasks: { type: Boolean },
+    };
+  }
 
-    constructor() {
-        super();
-        this.data = [];
-        this.showBackgroundTasks = false;
-        this.loadData();
-    }
+  static get styles() {
+    return css`
+      th, td {
+        &:nth-child(1) { width: 8ch; }
+        &:nth-child(2) { width: 16ch; }
+        &:nth-child(3) { width: 10ch; }
+        &:nth-child(4) { width: 10ch; }
+        &:nth-child(5) { min-width: 20ch; }
+        
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    `
+  }
 
-    async loadData() {
-        this.data = (await RPCCall('ClusterTaskSummary')) || [];
-        setTimeout(() => this.loadData(), 1000);
-        this.requestUpdate();
-    }
+  constructor() {
+    super();
+    this.data = [];
+    this.showBackgroundTasks = false;
+    this.loadData();
+  }
 
-    toggleShowBackgroundTasks(e) {
-        this.showBackgroundTasks = e.target.checked;
-    }
+  async loadData() {
+    this.data = (await RPCCall('ClusterTaskSummary')) || [];
+    setTimeout(() => this.loadData(), 1000);
+    this.requestUpdate();
+  }
 
-    render() {
-        return html`
+  toggleShowBackgroundTasks(e) {
+    this.showBackgroundTasks = e.target.checked;
+  }
+
+  render() {
+    return html`
       <link
         href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet"
@@ -40,18 +55,18 @@ customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
         onload="document.body.style.visibility = 'initial'"
       />
 
-      <!-- Toggle for showing background tasks -->
-      <label>
-        <input
-          type="checkbox"
-          @change=${this.toggleShowBackgroundTasks}
-          ?checked=${this.showBackgroundTasks}
-        />
-        Show background tasks
-      </label>
-
-      <table class="table table-dark">
-        <thead>
+        <!-- Toggle for showing background tasks -->
+        <label>
+          <input
+            type="checkbox"
+            @change=${this.toggleShowBackgroundTasks}
+            ?checked=${this.showBackgroundTasks}
+          />
+          Show background tasks
+        </label>
+      
+        <table class="table table-dark">
+          <thead>
           <tr>
             <th>SpID</th>
             <th style="min-width: 128px">Task</th>
@@ -62,10 +77,7 @@ customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
         </thead>
         <tbody>
           ${this.data
-            .filter(
-                (entry) =>
-                    this.showBackgroundTasks || !entry.Name.startsWith('bg:')
-            )
+            .filter((entry) =>this.showBackgroundTasks || !entry.Name.startsWith('bg:'))
             .map(
                 (entry) => html`
                 <tr>
@@ -75,9 +87,7 @@ customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
                   <td>${entry.SincePostedStr}</td>
                   <td>
                     ${entry.OwnerID
-                    ? html`<a href="/pages/node_info/?id=${entry.OwnerID}"
-                          >${entry.Owner}</a
-                        >`
+                    ? html`<a href="/pages/node_info/?id=${entry.OwnerID}">${entry.Owner}</a>`
                     : ''}
                   </td>
                 </tr>
@@ -86,5 +96,7 @@ customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
         </tbody>
       </table>
     `;
-    }
-});
+  }
+}
+
+customElements.define('cluster-tasks', ClusterTasks);
diff --git a/web/static/index.html b/web/static/index.html
@@ -17,21 +17,24 @@
     <script type="module" src="pipeline-porep.mjs"></script>
     <script type="module" src="actor-summary.mjs"></script>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <style>
-        .logo {
-            display: inline-block;
+        .drawer {
+          display: block;
         }
 
-        .dash-tile {
-            display: flex;
-            flex-direction: column;
-            padding: 0.75rem;
-            background: #3f3f3f;
+        .wide-content {
+          display: none;
+        }
+
+        @media (min-width: 2210px) {
+          .drawer {
+            display: none;
+          }
 
-            & b {
-                padding-bottom: 0.5rem;
-                color: deeppink;
-            }
+          .wide-content {
+            display: block;
+          }
         }
     </style>
 </head>
@@ -109,8 +112,15 @@ <h2>24h task counts</h2>
             <div class="row">
                 <div class="col-md-auto" style="max-width: 1000px">
                     <div class="info-block">
-                        <h2>Cluster Tasks</h2>
-                        <cluster-tasks></cluster-tasks>
+                        <div class="wide-content">
+                            <h2>Cluster Tasks</h2>
+                            <cluster-tasks></cluster-tasks>
+                        </div>
+
+                        <ui-drawer class="drawer" label="Cluster Tasks">
+                            <h2 slot="title">Cluster Tasks</h2>
+                            <cluster-tasks slot="content"></cluster-tasks>
+                        </ui-drawer>
                     </div>
                 </div>
                 <div class="col-md-auto">
@@ -120,4 +130,4 @@ <h2>Cluster Tasks</h2>
     </curio-ux>
 </body>
 
-</html>
+</html>