{"size": 3048, "ext": "js", "max_stars_repo_path": "src_js/orchestrator/vt.js", "max_stars_repo_name": "hat-open/hat-manager", "max_stars_repo_stars_event_min_datetime": "2022-02-01T13:43:13.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-01T13:43:13.000Z", "max_issues_repo_path": "src_js/orchestrator/vt.js", "max_issues_repo_name": "hat-open/hat-manager", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src_js/orchestrator/vt.js", "max_forks_repo_name": "hat-open/hat-manager", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.4255319149, "max_line_length": 107, "alphanum_fraction": 0.3359580052}
import r from '@hat-open/renderer';
import * as u from '@hat-open/util';

import * as common from './common';


export function main() {
    const deviceId = r.get('deviceId');

    return ['div.page.orchestrator',
        header(deviceId),
        components(deviceId)
    ];
}


function header(deviceId) {
    const address = r.get('remote', 'devices', deviceId, 'data', 'address');

    return ['div.header',
        ['label', 'Address'],
        ['input', {
            props: {
                value: address
            },
            on: {
                change: evt => common.setAddress(deviceId, evt.target.value)
            }
        }]
    ];
}


function components(deviceId) {
    const components = r.get('remote', 'devices', deviceId, 'data', 'components');

    return ['div.components',
        ['table',
            ['thead',
                ['tr',
                    ['th.col-component', 'Component'],
                    ['th.col-delay', 'Delay'],
                    ['th.col-revive', 'Revive'],
                    ['th.col-status', 'Status'],
                    ['th.col-action', 'Action']
                ]
            ],
            ['tbody', components.map(component =>
                ['tr',
                    ['td.col-component', component.name],
                    ['td.col-delay', String(component.delay)],
                    ['td.col-revive',
                        ['input', {
                            props: {
                                type: 'checkbox',
                                checked: component.revive
                            },
                            on: {
                                change: evt => common.setRevive(deviceId, component.id, evt.target.checked)
                            }
                        }]
                    ],
                    ['td.col-status', component.status],
                    ['td.col-action',
                        ['button', {
                            props: {
                                title: 'Stop',
                                disabled: u.contains(
                                    component.status, ['STOPPING', 'STOPPED'])
                            },
                            on: {
                                click: _ => common.stop(deviceId, component.id)
                            }},
                            ['span.fa.fa-times']
                        ],
                        ['button', {
                            props: {
                                title: 'Start',
                                disabled: u.contains(
                                    component.status,
                                    ['STARTING', 'RUNNING', 'STOPPING'])
                            },
                            on: {
                                click: _ => common.start(deviceId, component.id)
                            }},
                            ['span.fa.fa-play']
                        ]
                    ]
                ]
            )]
        ]
    ];
}
