Skip to content

Commit b6c8664

Browse files
JulusianJulusian
committed
wip: some of settings tools
1 parent ed39bf1 commit b6c8664

File tree

8 files changed

+216
-222
lines changed

8 files changed

+216
-222
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function Settings(): JSX.Element | null {
2626
return (
2727
<div className="mx-5 mt-5 has-statusbar">
2828
<Row>
29-
<Col xs={12} sm={5} md={4} lg={3} className="settings-menu">
29+
<Col xs={12} sm={5} md={4} lg={3} className="settings-menu mb-4">
3030
<ErrorBoundary>
3131
<SettingsMenu />
3232
</ErrorBoundary>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ export default translateWithTracker<IProps, IState, ITrackedProps>((props: IProp
252252
const { t } = this.props
253253

254254
return (
255-
<div className="studio-edit mod mhl mvn">
255+
<div className="studio-edit mx-4">
256256
<div className="properties-grid">
257257
<label className="field">
258258
<LabelActual label={t('Blueprint ID')} />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default translateWithTracker<IDeviceSettingsProps, IDeviceSettingsState,
143143
const latencies = getExpectedLatency(device)
144144

145145
return (
146-
<div className="studio-edit mod mhl mvn">
146+
<div className="studio-edit mx-4">
147147
<div className="row">
148148
<div className="col c12 rl-c6">
149149
<h2 className="mhn mtn">{t('Generic Properties')}</h2>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ export const MigrationView = translateWithTracker<IProps, IState, ITrackedProps>
258258
const { t } = this.props
259259

260260
return (
261-
<div className="studio-edit mod mhl mvs">
261+
<div className="studio-edit mx-4">
262262
<div>
263263
<div>
264264
<div>

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

Lines changed: 160 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { ClientAPI } from '@sofie-automation/meteor-lib/dist/api/client'
2020
import { hashSingleUseToken } from '../../lib/lib'
2121
import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
2222
import { withTranslation } from 'react-i18next'
23+
import Button from 'react-bootstrap/esm/Button'
2324

2425
interface IProps {
2526
match: {
@@ -266,182 +267,176 @@ const SnapshotsViewContent = withTranslation()(
266267
const { t } = this.props
267268

268269
return (
269-
<div className="studio-edit mod mhl mvn">
270+
<div className="studio-edit mx-4">
271+
<h2 className="my-2">{t('Take a Snapshot')}</h2>
270272
<div>
273+
<h3 className="my-2">{t('Full System Snapshot')}</h3>
274+
<p className="my-2">
275+
<span className="text-s vsubtle">
276+
{t(
277+
'A Full System Snapshot contains all system settings (studios, showstyles, blueprints, devices, etc.)'
278+
)}
279+
</span>
280+
</p>
281+
271282
<div>
272-
<h2 className="mhn mtn">{t('Take a Snapshot')}</h2>
283+
<button
284+
className="btn btn-primary"
285+
onClick={() => {
286+
this.takeSystemSnapshot(null)
287+
}}
288+
>
289+
{t('Take a Full System Snapshot')}
290+
</button>
291+
</div>
292+
293+
{this.props.studios.length > 1 ? (
273294
<div>
274-
<h3 className="mhn">{t('Full System Snapshot')}</h3>
275-
<p className="mhn">
276-
<span className="text-s vsubtle">
277-
{t(
278-
'A Full System Snapshot contains all system settings (studios, showstyles, blueprints, devices, etc.)'
279-
)}
280-
</span>
295+
<h3 className="my-2">{t('Studio Snapshot')}</h3>
296+
<p className="my-2 text-s dimmed field-hint">
297+
{t('A Studio Snapshot contains all system settings related to that studio')}
281298
</p>
282-
<div>
283-
<button
284-
className="btn btn-primary"
285-
onClick={() => {
286-
this.takeSystemSnapshot(null)
287-
}}
288-
>
289-
{t('Take a Full System Snapshot')}
290-
</button>
291-
</div>
292-
{this.props.studios.length > 1 ? (
293-
<div>
294-
<h3 className="mhn">{t('Studio Snapshot')}</h3>
295-
<p className="mhn text-s dimmed field-hint">
296-
{t('A Studio Snapshot contains all system settings related to that studio')}
297-
</p>
298-
{_.map(this.props.studios, (studio) => {
299-
return (
300-
<div key={unprotectString(studio._id)}>
301-
<button
302-
className="btn btn-primary"
303-
onClick={() => {
304-
this.takeSystemSnapshot(studio._id)
299+
{_.map(this.props.studios, (studio) => {
300+
return (
301+
<div key={unprotectString(studio._id)}>
302+
<button
303+
className="btn btn-primary"
304+
onClick={() => {
305+
this.takeSystemSnapshot(studio._id)
306+
}}
307+
>
308+
{t('Take a Snapshot for studio "{{studioName}}" only', { studioName: studio.name })}
309+
</button>
310+
</div>
311+
)
312+
})}
313+
</div>
314+
) : null}
315+
</div>
316+
317+
<h2 className="mb-4">{t('Restore from Snapshot File')}</h2>
318+
319+
<p className="my-2">
320+
<UploadButton
321+
accept="application/json,.json"
322+
className="btn btn-outline-secondary me-2"
323+
onChange={(e) => this.onUploadFile(e)}
324+
key={this.state.uploadFileKey}
325+
>
326+
<FontAwesomeIcon icon={faUpload} />
327+
<span>{t('Upload Snapshot')}</span>
328+
</UploadButton>
329+
<span className="text-s vsubtle mls">{t('Upload a snapshot file')}</span>
330+
</p>
331+
<p className="my-2">
332+
<UploadButton
333+
accept="application/json,.json"
334+
className="btn btn-outline-secondary me-2"
335+
onChange={(e) => this.onUploadFile(e, 'debug')}
336+
key={this.state.uploadFileKey2}
337+
>
338+
<FontAwesomeIcon icon={faUpload} />
339+
<span>{t('Upload Snapshot (for debugging)')}</span>
340+
</UploadButton>
341+
<span className="text-s vsubtle mls">
342+
{t(
343+
'Upload a snapshot file (restores additional info not directly related to a Playlist / Rundown, such as Packages, PackageWorkStatuses etc'
344+
)}
345+
</span>
346+
</p>
347+
<p className="my-2">
348+
<UploadButton
349+
accept="application/json,.json"
350+
className="btn btn-outline-secondary me-2"
351+
onChange={(e) => this.onUploadFile(e, 'ingest')}
352+
key={this.state.uploadFileKey2}
353+
>
354+
<FontAwesomeIcon icon={faUpload} />
355+
<span>{t('Ingest from Snapshot')}</span>
356+
</UploadButton>
357+
<span className="text-s vsubtle mls">
358+
{t('Reads the ingest (NRCS) data, and pipes it throught the blueprints')}
359+
</span>
360+
</p>
361+
362+
<h2 className="mb-4">{t('Restore from Stored Snapshots')}</h2>
363+
<div>
364+
<table className="table">
365+
<tbody>
366+
<tr>
367+
<th></th>
368+
<th>Type</th>
369+
<th>Name</th>
370+
<th>Comment</th>
371+
{this.state.removeSnapshots ? <th></th> : null}
372+
</tr>
373+
{_.map(this.props.snapshots, (snapshot) => {
374+
return (
375+
<tr key={unprotectString(snapshot._id)}>
376+
<td>
377+
<Button
378+
variant="outline-secondary"
379+
onClick={() => {
380+
this.restoreStoredSnapshot(snapshot._id)
381+
}}
382+
>
383+
{t('Restore')}
384+
</Button>
385+
</td>
386+
<td>{snapshot.type}</td>
387+
<td>
388+
<a href={`/api/private/snapshot/retrieve/${snapshot._id}`} target="_blank" rel="noreferrer">
389+
{snapshot.name}
390+
</a>
391+
</td>
392+
<td>
393+
{this.state.editSnapshotId === snapshot._id ? (
394+
<div className="secondary-control-after">
395+
<EditAttribute collection={Snapshots} obj={snapshot} attribute="comment" type="multiline" />
396+
397+
<button className="action-btn" onClick={() => this.editSnapshot(snapshot._id)}>
398+
<FontAwesomeIcon icon={faWindowClose} />
399+
</button>
400+
</div>
401+
) : (
402+
<a
403+
href="#"
404+
onClick={(e) => {
405+
e.preventDefault()
406+
this.editSnapshot(snapshot._id)
305407
}}
306408
>
307-
{t('Take a Snapshot for studio "{{studioName}}" only', { studioName: studio.name })}
308-
</button>
309-
</div>
310-
)
311-
})}
312-
</div>
313-
) : null}
314-
</div>
315-
</div>
316-
<h2 className="mb-4">{t('Restore from Snapshot File')}</h2>
317-
<div className="mdi">
318-
<p className="mhn">
319-
<UploadButton
320-
accept="application/json,.json"
321-
className="btn btn-secondary"
322-
onChange={(e) => this.onUploadFile(e)}
323-
key={this.state.uploadFileKey}
324-
>
325-
<FontAwesomeIcon icon={faUpload} />
326-
<span>{t('Upload Snapshot')}</span>
327-
</UploadButton>
328-
<span className="text-s vsubtle mls">{t('Upload a snapshot file')}</span>
329-
</p>
330-
<p className="mhn">
331-
<UploadButton
332-
accept="application/json,.json"
333-
className="btn btn-secondary"
334-
onChange={(e) => this.onUploadFile(e, 'debug')}
335-
key={this.state.uploadFileKey2}
336-
>
337-
<FontAwesomeIcon icon={faUpload} />
338-
<span>{t('Upload Snapshot (for debugging)')}</span>
339-
</UploadButton>
340-
<span className="text-s vsubtle mls">
341-
{t(
342-
'Upload a snapshot file (restores additional info not directly related to a Playlist / Rundown, such as Packages, PackageWorkStatuses etc'
343-
)}
344-
</span>
345-
</p>
346-
<p className="mhn">
347-
<UploadButton
348-
accept="application/json,.json"
349-
className="btn btn-secondary"
350-
onChange={(e) => this.onUploadFile(e, 'ingest')}
351-
key={this.state.uploadFileKey2}
352-
>
353-
<FontAwesomeIcon icon={faUpload} />
354-
<span>{t('Ingest from Snapshot')}</span>
355-
</UploadButton>
356-
<span className="text-s vsubtle mls">
357-
{t('Reads the ingest (NRCS) data, and pipes it throught the blueprints')}
358-
</span>
359-
</p>
360-
</div>
361-
<h2 className="mb-4">{t('Restore from Stored Snapshots')}</h2>
362-
<div>
363-
<table className="table">
364-
<tbody>
365-
<tr>
366-
<th></th>
367-
<th>Type</th>
368-
<th>Name</th>
369-
<th>Comment</th>
370-
{this.state.removeSnapshots ? <th></th> : null}
371-
</tr>
372-
{_.map(this.props.snapshots, (snapshot) => {
373-
return (
374-
<tr key={unprotectString(snapshot._id)}>
409+
<span className="text-s vsubtle">{multilineText(snapshot.comment)}</span>
410+
</a>
411+
)}
412+
</td>
413+
{this.state.removeSnapshots ? (
375414
<td>
376-
<button
377-
className="btn mod mhm"
415+
<Button
416+
variant="outline-secondary"
378417
onClick={() => {
379-
this.restoreStoredSnapshot(snapshot._id)
418+
this.removeStoredSnapshot(snapshot._id)
380419
}}
381420
>
382-
{t('Restore')}
383-
</button>
384-
</td>
385-
<td>{snapshot.type}</td>
386-
<td>
387-
<a href={`/api/private/snapshot/retrieve/${snapshot._id}`} target="_blank" rel="noreferrer">
388-
{snapshot.name}
389-
</a>
421+
{t('Remove')}
422+
</Button>
390423
</td>
391-
<td>
392-
{this.state.editSnapshotId === snapshot._id ? (
393-
[
394-
<EditAttribute
395-
key={0}
396-
collection={Snapshots}
397-
obj={snapshot}
398-
attribute="comment"
399-
type="multiline"
400-
/>,
401-
<button key={1} className="action-btn" onClick={() => this.editSnapshot(snapshot._id)}>
402-
<FontAwesomeIcon icon={faWindowClose} />
403-
</button>,
404-
]
405-
) : (
406-
<a
407-
href="#"
408-
onClick={(e) => {
409-
e.preventDefault()
410-
this.editSnapshot(snapshot._id)
411-
}}
412-
>
413-
<span className="text-s vsubtle">{multilineText(snapshot.comment)}</span>
414-
</a>
415-
)}
416-
</td>
417-
{this.state.removeSnapshots ? (
418-
<td>
419-
<button
420-
className="btn mod mhm btn-secondary"
421-
onClick={() => {
422-
this.removeStoredSnapshot(snapshot._id)
423-
}}
424-
>
425-
{t('Remove')}
426-
</button>
427-
</td>
428-
) : null}
429-
</tr>
430-
)
431-
})}
432-
</tbody>
433-
</table>
434-
<div>
435-
<a
436-
href="#"
437-
onClick={(e) => {
438-
e.preventDefault()
439-
this.toggleRemoveView()
440-
}}
441-
>
442-
{t('Show "Remove snapshots"-buttons')}
443-
</a>
444-
</div>
424+
) : null}
425+
</tr>
426+
)
427+
})}
428+
</tbody>
429+
</table>
430+
<div>
431+
<a
432+
href="#"
433+
onClick={(e) => {
434+
e.preventDefault()
435+
this.toggleRemoveView()
436+
}}
437+
>
438+
{t('Show "Remove snapshots"-buttons')}
439+
</a>
445440
</div>
446441
</div>
447442
</div>

0 commit comments

Comments
 (0)