fix(cockpit/console): ensure console for processes is rendered

Prior to this commit, `Console` would only be rendered when Embark's API returns at least one registered process from `/embark-api/processes`. `Console` itself would then add another processes "embark" resulting in two tabs with console output. This used to work fine because Embark always registered at least a blockchain process. In cd934f8 however, this has changed. With Ganache being the default blockchain, there's no longer a processes registered for this service, resulting in an empty list for `processes` inside Cockpit, causing `Console` not to render at all. Which also means the `embark` process logs aren't rendered either. This commit removes the requirement of `processes` being non-empty so that embark process logs are always shown. It also fixes `Console` to updates its own `processes` state when its properties change. This is needed because it's no longer guarded by `DataWrapper`, which previously ensured `Console` is only rendered when there are processes. Kudos to @jrainville for helping me cracking this nut.
embarklabs · Apr 2, 2020 · 3ce666b · 3ce666b
1 parent de8f217
commit 3ce666b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/packages/cockpit/ui/src/components/Console.js b/packages/cockpit/ui/src/components/Console.js
@@ -16,11 +16,26 @@ const convert = new Convert({newline: true, escapeXML: true});
 class Console extends Component {
   constructor(props) {
     super(props);
-    // Add embark to the start of the list
-    this.processes = [...props.processes];
-    this.processes.unshift({name: 'embark', state: 'running'});
 
-    this.state = {value: '', isLoading: true, options: [], activeTab: EMBARK_PROCESS_NAME};
+    this.state = {
+      value: '',
+      isLoading: true,
+      options: [],
+      activeTab: EMBARK_PROCESS_NAME,
+      processes: this.getProcesses()
+    };
+  }
+
+  getProcesses() {
+    const processes = [...this.props.processes];
+    processes.unshift({name: 'embark', state: 'running'});
+    return processes;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.processes.length !== this.props.processes.length) {
+      this.setState({ processes: this.getProcesses() });
+    }
   }
 
   handleSubmit(event) {
@@ -52,7 +67,7 @@ class Console extends Component {
   renderNav() {
     return (
       <Nav tabs>
-        {this.processes.map((process) => (
+        {this.state.processes.map((process) => (
           <NavItem key={process.name}>
             <NavLink
               className={classnames({ active: this.state.activeTab === process.name })}
@@ -90,7 +105,7 @@ class Console extends Component {
 
     return (
       <TabContent activeTab={this.state.activeTab}>
-        {this.processes.map(process => (
+        {this.state.processes.map(process => (
           <TabPane key={process.name} tabId={process.name}>
             <Logs>
               {processLogs

diff --git a/packages/cockpit/ui/src/containers/HomeContainer.js b/packages/cockpit/ui/src/containers/HomeContainer.js
@@ -53,21 +53,19 @@ class HomeContainer extends Component {
         <PageHead title="Dashboard" description="Overview of available services and logs. Interact with Embark using the console. Summary of deployed contracts." />
         <ServicesContainer />
 
-        <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes, postCommand, postCommandSuggestions, processLogs, commandSuggestions}) => (
-          <Card>
-            <CardBody>
-              <CardTitle>Console</CardTitle>
-              <Console activeProcess={this.state.activeProcess}
-                       postCommand={postCommand}
-                       postCommandSuggestions={postCommandSuggestions}
-                       processes={processes}
-                       processLogs={processLogs}
-                       commandSuggestions={commandSuggestions}
-                       isEmbark={() => this.isEmbark}
-                       updateTab={processName => this.updateTab(processName)} />
-            </CardBody>
-          </Card>
-        )} />
+        <Card>
+          <CardBody>
+            <CardTitle>Console</CardTitle>
+            <Console activeProcess={this.state.activeProcess}
+                      postCommand={this.props.postCommand}
+                      postCommandSuggestions={this.props.postCommandSuggestions}
+                      processes={this.props.processes}
+                      processLogs={this.props.processLogs}
+                      commandSuggestions={this.props.commandSuggestions}
+                      isEmbark={() => this.isEmbark}
+                      updateTab={processName => this.updateTab(processName)} />
+          </CardBody>
+        </Card>
 
         <Card>
           <CardBody>