Skip to content

Commit 283c5e5

Browse files
JulusianJulusian
committed
wip: settings
1 parent b6c8664 commit 283c5e5

File tree

5 files changed

+235
-245
lines changed

5 files changed

+235
-245
lines changed

‎packages/webui/src/client/ui/Settings/DevicePackageManagerSettings.tsx‎

Lines changed: 129 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { PeripheralDeviceId } from '@sofie-automation/corelib/dist/dataModel/Ids
1111
import { PeripheralDevices } from '../../collections'
1212
import { eventContextForLog } from '../../lib/clientUserAction'
1313
import { logger } from '../../lib/logging'
14+
import Row from 'react-bootstrap/Row'
15+
import Col from 'react-bootstrap/Col'
16+
import Button from 'react-bootstrap/Button'
1417

1518
interface IDevicePackageManagerSettingsProps {
1619
deviceId: PeripheralDeviceId
@@ -86,149 +89,137 @@ export const DevicePackageManagerSettings: React.FC<IDevicePackageManagerSetting
8689
}
8790

8891
return (
89-
<div>
90-
<div className="row">
91-
<h2 className="mhn mtn">{t('Package Manager status')}</h2>
92-
</div>
93-
<div className="row">
94-
<div className="col c12 rl-c6">
95-
<button className="btn btn-secondary btn-tight" onClick={() => reloadStatus()}>
96-
{t('Reload statuses')}
97-
</button>
98-
</div>
99-
</div>
92+
<Row>
93+
<Col xs={12}>
94+
<h2 className="my-4">{t('Package Manager status')}</h2>
95+
<Button variant="outline-secondary" size="sm" className="mb-2" onClick={() => reloadStatus()}>
96+
{t('Reload statuses')}
97+
</Button>
98+
{status?.updated ? (
99+
<p>
100+
{t('Updated')}: {new Date(status.updated).toLocaleString()}
101+
</p>
102+
) : null}
103+
</Col>
104+
100105
{status ? (
101-
<div>
102-
{status.updated ? (
103-
<div className="row">
104-
<div className="col c12">
105-
{t('Updated')}: {new Date(status.updated).toLocaleString()}
106-
</div>
107-
</div>
108-
) : null}
109-
<div className="row">
110-
<div className="col c12 rl-c6">
111-
<h3 className="">{t('Package Manager')}</h3>
112-
<table className="table">
113-
<tbody>
114-
{Object.entries<any>(status.packageManager || {}).map(([key, value]) => {
115-
return (
116-
<tr key={key}>
117-
<td>{key}</td>
118-
<td>{JSON.stringify(value)}</td>
119-
</tr>
120-
)
121-
})}
122-
</tbody>
123-
</table>
124-
</div>
125-
<div className="col c12 rl-c6">
126-
<h3 className="">{t('Expectation Manager')}</h3>
127-
<div>Id: {status.expectationManager?.id}</div>
128-
{status.expectationManager?.updated ? (
129-
<div>
130-
{t('Updated')}: {new Date(status.expectationManager.updated).toLocaleString()}
131-
</div>
132-
) : null}
133-
<div>
134-
<h4 className="">{t('Statistics')}</h4>
135-
<table className="table">
136-
<tbody>
137-
{Object.entries<any>(status.expectationManager?.expectationStatistics || {}).map(
138-
([key, value]) => {
139-
return (
140-
<tr key={key}>
141-
<td>{key}</td>
142-
<td>{JSON.stringify(value)}</td>
143-
</tr>
144-
)
145-
}
146-
)}
147-
</tbody>
148-
</table>
149-
</div>
106+
<>
107+
<Col xs={12} xxl={6}>
108+
<h3 className="">{t('Package Manager')}</h3>
109+
<table className="table">
110+
<tbody>
111+
{Object.entries<any>(status.packageManager || {}).map(([key, value]) => {
112+
return (
113+
<tr key={key}>
114+
<td>{key}</td>
115+
<td>{JSON.stringify(value)}</td>
116+
</tr>
117+
)
118+
})}
119+
</tbody>
120+
</table>
121+
</Col>
122+
<Col xs={12} xxl={6}>
123+
<h3 className="">{t('Expectation Manager')}</h3>
124+
<div>Id: {status.expectationManager?.id}</div>
125+
{status.expectationManager?.updated ? (
150126
<div>
151-
<h4 className="">{t('Times')}</h4>
152-
<table className="table">
153-
<tbody>
154-
{Object.entries<any>(status.expectationManager?.times || {}).map(([key, value]) => {
155-
return (
156-
<tr key={key}>
157-
<td>{key}</td>
158-
<td>{JSON.stringify(value)}</td>
159-
</tr>
160-
)
161-
})}
162-
</tbody>
163-
</table>
127+
{t('Updated')}: {new Date(status.expectationManager.updated).toLocaleString()}
164128
</div>
165-
<div>
166-
<h4 className="">{t('Connected Workers')}</h4>
167-
<TableFromObjectArray dataObjs={status.expectationManager?.workerAgents} />
168-
</div>
169-
</div>
170-
</div>
171-
<div className="row">
172-
<div className="col c12">
173-
<h4 className="">{t('Work-in-progress')}</h4>
174-
<TableFromObjectArray dataObjs={status.expectationManager?.worksInProgress} />
175-
</div>
176-
</div>
177-
<div className="row">
178-
<div>
179-
<h3 className="">{t('WorkForce')}</h3>
180-
<div className="col c12 rl-c12">
181-
<h4 className="">{t('Connected Workers')}</h4>
182-
<TableFromObjectArray
183-
dataObjs={status.workforce?.workerAgents}
184-
rowFcn={(workerAgent) => (
185-
<button
186-
className="btn btn-secondary btn-tight"
187-
onClick={(e) => killApp(eventContextForLog(e)[0], workerAgent.id)}
188-
>
189-
{t('Kill (debug)')}
190-
</button>
191-
)}
192-
/>
193-
</div>
194-
</div>
195-
<div>
196-
<h4 className="">{t('Connected Expectation Managers')}</h4>
197-
<TableFromObjectArray dataObjs={status.workforce?.expectationManagers} />
198-
</div>
199-
<div>
200-
<h4 className="">{t('Connected App Containers')}</h4>
201-
<table className="table">
202-
<tbody>
203-
<tr>
204-
<th>Id</th>
205-
<th>Initialized</th>
206-
<th>Available apps</th>
207-
</tr>
208-
{status.workforce?.appContainers?.map((appContainer) => {
209-
return (
210-
<tr key={appContainer.id}>
211-
<td>{appContainer.id}</td>
212-
<td>{appContainer.initialized ? 'true' : 'false'}</td>
213-
<td>
214-
<ul>
215-
{appContainer.availableApps.map((availableApp, index) => {
216-
return <li key={index}>{availableApp.appType}</li>
217-
})}
218-
</ul>
219-
</td>
220-
</tr>
221-
)
222-
})}
223-
</tbody>
224-
</table>
225-
</div>
226-
</div>
227-
</div>
129+
) : null}
130+
131+
<h4 className="">{t('Statistics')}</h4>
132+
<table className="table">
133+
<tbody>
134+
{Object.entries<any>(status.expectationManager?.expectationStatistics || {}).map(([key, value]) => {
135+
return (
136+
<tr key={key}>
137+
<td>{key}</td>
138+
<td>{JSON.stringify(value)}</td>
139+
</tr>
140+
)
141+
})}
142+
</tbody>
143+
</table>
144+
145+
<h4 className="">{t('Times')}</h4>
146+
<table className="table">
147+
<tbody>
148+
{Object.entries<any>(status.expectationManager?.times || {}).map(([key, value]) => {
149+
return (
150+
<tr key={key}>
151+
<td>{key}</td>
152+
<td>{JSON.stringify(value)}</td>
153+
</tr>
154+
)
155+
})}
156+
</tbody>
157+
</table>
158+
159+
<h4 className="">{t('Connected Workers')}</h4>
160+
<TableFromObjectArray dataObjs={status.expectationManager?.workerAgents} />
161+
</Col>
162+
163+
<Col xs={12}>
164+
<h4 className="">{t('Work-in-progress')}</h4>
165+
<TableFromObjectArray dataObjs={status.expectationManager?.worksInProgress} />
166+
</Col>
167+
168+
<Col xs={12}>
169+
<h3 className="">{t('WorkForce')}</h3>
170+
171+
<h4 className="">{t('Connected Workers')}</h4>
172+
<TableFromObjectArray
173+
dataObjs={status.workforce?.workerAgents}
174+
rowFcn={(workerAgent) => (
175+
<Button
176+
variant="outline-secondary"
177+
size="sm"
178+
onClick={(e) => killApp(eventContextForLog(e)[0], workerAgent.id)}
179+
>
180+
{t('Kill (debug)')}
181+
</Button>
182+
)}
183+
/>
184+
</Col>
185+
186+
<Col xs={12}>
187+
<h4 className="">{t('Connected Expectation Managers')}</h4>
188+
<TableFromObjectArray dataObjs={status.workforce?.expectationManagers} />
189+
</Col>
190+
191+
<Col xs={12}>
192+
<h4 className="">{t('Connected App Containers')}</h4>
193+
<table className="table">
194+
<tbody>
195+
<tr>
196+
<th>Id</th>
197+
<th>Initialized</th>
198+
<th>Available apps</th>
199+
</tr>
200+
{status.workforce?.appContainers?.map((appContainer) => {
201+
return (
202+
<tr key={appContainer.id}>
203+
<td>{appContainer.id}</td>
204+
<td>{appContainer.initialized ? 'true' : 'false'}</td>
205+
<td>
206+
<ul>
207+
{appContainer.availableApps.map((availableApp, index) => {
208+
return <li key={index}>{availableApp.appType}</li>
209+
})}
210+
</ul>
211+
</td>
212+
</tr>
213+
)
214+
})}
215+
</tbody>
216+
</table>
217+
</Col>
218+
</>
228219
) : (
229-
<div>{t('No status loaded')}</div>
220+
<Col xs={12}>{t('No status loaded')}</Col>
230221
)}
231-
</div>
222+
</Row>
232223
)
233224
}
234225

0 commit comments

Comments
 (0)