dbug fe: add refresh buttons

pkg/interface/dbug/src/js/components/searchable-list.js

@@ -40,7 +40,8 @@ export class SearchableList extends Component {
       items = items.map(item => (<div key={item.key} style={{marginTop: '4px'}}>{item.jsx}</div>));
     }
 
-    return (<div style={{border: '1px solid grey', padding: '4px'}}>
+    return (<div style={{position: 'relative', border: '1px solid grey', padding: '4px'}}>
+      {props.children}
       <div>{searchBar}</div>
       <div>{items}</div>
     </div>);

pkg/interface/dbug/src/js/components/summary.js

@@ -26,7 +26,7 @@ export class Summary extends Component {
     const { props } = this;
 
     return (
-      <details onToggle={this.onToggle} {...props} style={{border: '1px solid black', padding: '4px', ...props.style}}>
+      <details onToggle={this.onToggle} {...props} style={{border: '1px solid black', padding: '4px', position: 'relative', ...props.style}}>
         <summary>
           {props.summary}
         </summary>

pkg/interface/dbug/src/js/reducers/local.js

@@ -37,7 +37,11 @@ export class LocalReducer {
   apps(obj, state) {
     const data = _.get(obj, 'apps', false);
     if (data) {
-      state.apps = data;
+      Object.keys(data).map(app => {
+        if (!state.apps[app]) {
+          state.apps[app] = data[app];
+        }
+      });
     }
   }
 

pkg/interface/dbug/src/js/views/ames.js

@@ -256,6 +256,12 @@ export class Ames extends Component {
         </>);
 
         return (<>
+          <button
+            style={{position: 'absolute', top: 0, right: 0}}
+            onClick={()=>{this.loadPeerDetails(who)}}
+          >
+            refresh
+          </button>
           {status}
           {snd}
           {rcv}
@@ -289,7 +295,9 @@ export class Ames extends Component {
     const items = [...knownItems, ...alienItems];
 
     return (
-      <SearchableList placeholder="ship name" items={items} />
+      <SearchableList placeholder="ship name" items={items}>
+        <button onClick={this.loadTimers}>refresh</button>
+      </SearchableList>
     );
   }
 }

pkg/interface/dbug/src/js/views/apps.js

@@ -65,6 +65,12 @@ export class Apps extends Component {
           </>)};
         })
         deets = (<>
+          <button
+            style={{position: 'absolute', top: 0, right: 0}}
+            onClick={()=>{this.loadAppDetails(app)}}
+          >
+            refresh
+          </button>
           <div style={{maxHeight: '500px', overflow: 'scroll'}}>
             <pre>{data.state.join('\n')}</pre>
           </div>
@@ -93,10 +99,9 @@ export class Apps extends Component {
           "h-100 w-100 pa3 pt4 overflow-x-hidden " +
           "bg-gray0-d white-d flex flex-column"
         }>
-        <div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
-          refresh?
-        </div>
-        <SearchableList placeholder="app name" items={apps} />
+        <SearchableList placeholder="app name" items={apps}>
+          <button onClick={this.loadApps}>refresh</button>
+        </SearchableList>
       </div>
     );
   }

pkg/interface/dbug/src/js/views/behn.js

@@ -47,7 +47,9 @@ export class Behn extends Component {
 
     return (
       <table><tbody>
-      <SearchableList placeholder="duct" items={items} />
+        <SearchableList placeholder="duct" items={items}>
+          <button onClick={this.loadTimers}>refresh</button>
+        </SearchableList>
       </tbody></table>
     );
   }

pkg/interface/dbug/src/js/views/eyre.js

@@ -47,7 +47,9 @@ export class Eyre extends Component {
 
     return (
       <table><tbody>
-      <SearchableList placeholder="binding" items={items} />
+        <SearchableList placeholder="binding" items={items}>
+          <button onClick={this.loadBindings}>refresh</button>
+        </SearchableList>
       </tbody></table>
     );
   }

pkg/interface/dbug/src/js/views/spider.js

@@ -50,8 +50,12 @@ export class Spider extends Component {
   }
 
   render() {
-    if (Object.keys(this.props.threads).length === 0)
-      return 'no running threads';
-    return this.renderThreads(this.props.threads);
+    return (<>
+      <button onClick={this.loadThreads}>refresh</button><br/>
+      { Object.keys(this.props.threads).length === 0
+        ? 'no running threads'
+        : this.renderThreads(this.props.threads)
+      }
+    </>);
   }
 }