git.iko.soy/bridge
on ee5bed0 help sign in
bridge/src/components/HostedShip.js
153 lines 3.7 kB history raw
1import React, { useEffect, useCallback } from 'react';
2import { Grid, ErrorText } from 'indigo-react';
4import cn from 'classnames';
6import { useHosting } from 'store/hosting';
8import BridgeForm from 'form/BridgeForm';
10import { GenerateButton, ForwardButton } from './Buttons';
12import 'style/hosted-ship.scss';
13import useKeyfileGenerator from 'lib/useKeyfileGenerator';
15export default function HostedShip({
16 // useHostedShip
18 // additional from parent
19 className,
20}) {
21 const ship = useHosting();
22 const { syncStatus } = ship;
23 console.log(ship);
25 const { keyfile } = useKeyfileGenerator();
27 const createShip = useCallback(() => ship.create(keyfile), [ship, keyfile]);
29 const renderStatus = () => {
30 if (ship.missing || ship.booting) {
31 return (
32 <Grid.Item
33 full
34 as={GenerateButton}
35 solid
36 success
37 disabled={ship.booting}
38 loading={ship.booting}
39 onClick={createShip}>
40 Boot Urbit OS
41 </Grid.Item>
42 );
43 } else if (ship.running || ship.connecting) {
44 return (
45 <Grid.Item
46 full
47 as={ForwardButton}
48 solid
49 success
50 disabled={ship.connecting}
51 loading={ship.connecting}
52 onClick={ship.getEvents}>
53 Connect
54 </Grid.Item>
55 );
56 } else if (ship.connected) {
57 return (
58 <Grid.Item
59 full
60 as={GenerateButton}
61 solid
62 success
63 onClick={ship.getStatus}>
64 Disconnect
65 </Grid.Item>
66 );
67 } else if (ship.unknown || ship.querying) {
68 return (
69 <Grid.Item
70 full
71 as={GenerateButton}
72 accessory={ship.error ? '↺' : '->'}
73 solid
74 success
75 disabled={ship.querying}
76 loading={ship.querying}
77 onClick={syncStatus}>
78 Query
79 </Grid.Item>
80 );
81 }
82 };
84 const renderEvents = (title, detail, events) => {
85 return (
86 <>
87 <Grid.Item
88 full
89 as={ForwardButton}
90 accessory=""
91 disabled
92 detail={detail}>
93 {title}
94 </Grid.Item>
95 <Grid.Item full>
96 <ul className="hosting-events">
97 {events.length === 0 && <li>&lt;Waiting&gt;</li>}
98 {events.map(event => (
99 <li>{event}</li>
100 ))}
101 </ul>
102 </Grid.Item>
103 </>
104 );
105 };
107 return (
108 <>
109 <Grid className={cn(className, 'mt1')}>
110 <BridgeForm>
111 {() => (
112 <>
113 {ship.error && (
114 <Grid.Item full as={ErrorText} className="mv1">
115 {ship.error.message}
116 </Grid.Item>
117 )}
118 {renderStatus()}
119 {!ship.unknown && (
120 <Grid.Item
121 full
122 as={ForwardButton}
123 accessory=""
124 disabled
125 detail={ship.state}
126 detailClassName="mono">
127 Ship Status
128 </Grid.Item>
129 )}
130 </>
131 )}
132 </BridgeForm>
134 {ship.connected && (
135 <>
136 <Grid.Divider />
137 {renderEvents('Run', 'Terminal events', ship.runEvents)}
138 {renderEvents(
139 'New',
140 'Pier creation and boot events',
141 ship.newEvents
142 )}
143 {renderEvents(
144 'Sys',
145 'Hosting platform events',
146 ship.sysEvents.map(e => e.object.message)
147 )}
148 </>
149 )}
150 </Grid>
151 </>
152 );