Skip to content

Commit 3ce666b

Browse files
0x-r4bbitiurimatias
authored andcommitted
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.
1 parent de8f217 commit 3ce666b

File tree

2 files changed

+34
-21
lines changed

2 files changed

+34
-21
lines changed

packages/cockpit/ui/src/components/Console.js

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,26 @@ const convert = new Convert({newline: true, escapeXML: true});
1616
class Console extends Component {
1717
constructor(props) {
1818
super(props);
19-
// Add embark to the start of the list
20-
this.processes = [...props.processes];
21-
this.processes.unshift({name: 'embark', state: 'running'});
2219

23-
this.state = {value: '', isLoading: true, options: [], activeTab: EMBARK_PROCESS_NAME};
20+
this.state = {
21+
value: '',
22+
isLoading: true,
23+
options: [],
24+
activeTab: EMBARK_PROCESS_NAME,
25+
processes: this.getProcesses()
26+
};
27+
}
28+
29+
getProcesses() {
30+
const processes = [...this.props.processes];
31+
processes.unshift({name: 'embark', state: 'running'});
32+
return processes;
33+
}
34+
35+
componentDidUpdate(prevProps) {
36+
if (prevProps.processes.length !== this.props.processes.length) {
37+
this.setState({ processes: this.getProcesses() });
38+
}
2439
}
2540

2641
handleSubmit(event) {
@@ -52,7 +67,7 @@ class Console extends Component {
5267
renderNav() {
5368
return (
5469
<Nav tabs>
55-
{this.processes.map((process) => (
70+
{this.state.processes.map((process) => (
5671
<NavItem key={process.name}>
5772
<NavLink
5873
className={classnames({ active: this.state.activeTab === process.name })}
@@ -90,7 +105,7 @@ class Console extends Component {
90105

91106
return (
92107
<TabContent activeTab={this.state.activeTab}>
93-
{this.processes.map(process => (
108+
{this.state.processes.map(process => (
94109
<TabPane key={process.name} tabId={process.name}>
95110
<Logs>
96111
{processLogs

packages/cockpit/ui/src/containers/HomeContainer.js

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -53,21 +53,19 @@ class HomeContainer extends Component {
5353
<PageHead title="Dashboard" description="Overview of available services and logs. Interact with Embark using the console. Summary of deployed contracts." />
5454
<ServicesContainer />
5555

56-
<DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes, postCommand, postCommandSuggestions, processLogs, commandSuggestions}) => (
57-
<Card>
58-
<CardBody>
59-
<CardTitle>Console</CardTitle>
60-
<Console activeProcess={this.state.activeProcess}
61-
postCommand={postCommand}
62-
postCommandSuggestions={postCommandSuggestions}
63-
processes={processes}
64-
processLogs={processLogs}
65-
commandSuggestions={commandSuggestions}
66-
isEmbark={() => this.isEmbark}
67-
updateTab={processName => this.updateTab(processName)} />
68-
</CardBody>
69-
</Card>
70-
)} />
56+
<Card>
57+
<CardBody>
58+
<CardTitle>Console</CardTitle>
59+
<Console activeProcess={this.state.activeProcess}
60+
postCommand={this.props.postCommand}
61+
postCommandSuggestions={this.props.postCommandSuggestions}
62+
processes={this.props.processes}
63+
processLogs={this.props.processLogs}
64+
commandSuggestions={this.props.commandSuggestions}
65+
isEmbark={() => this.isEmbark}
66+
updateTab={processName => this.updateTab(processName)} />
67+
</CardBody>
68+
</Card>
7169

7270
<Card>
7371
<CardBody>

0 commit comments

Comments
 (0)