flamenco-manager/static/vue-components.html

<!-- Templates for the Vue.js components -->

<!-- template for the 'header' Vue.js component -->
<script type='text/x-template' id='template_header'>
    <header class='pageheader'><h1><img src='/static/flamenco.png' alt='Flamenco logo'> {{ serverinfo.manager_name }}
        <span id='runmode' v-if="serverinfo.manager_mode != 'production'">({{ serverinfo.manager_mode }} mode)</span>
        <span id='managerversion'>{{ serverinfo.version }}</span>
    </h1></header>
</script>


<!-- template for the 'status' Vue.js component -->
<script type='text/x-template' id='template_status'>
    <div id='status'>
        <p v-if='errormsg' class='error'>{{ errormsg }}</p>
        <dl v-else class="row">
            <dt class='col-md-5'>Nr. of workers</dt>
            <dd class='col-md-7'>{{ serverinfo.nr_of_workers }}</dd>
            <dt class='col-md-5' title="Number of tasks in database. Probably not all queued.">Nr. of tasks</dt>
            <dd class='col-md-7'>{{ serverinfo.nr_of_tasks }}</dd>
            <dt class='col-md-5' title="Number of task updates queued for sending to Flamenco Server.">Upstream Queue</dt>
            <dd class='col-md-7'>{{ serverinfo.upstream_queue_size }}</dd>
            <dt class='col-md-5'>Server</dt>
            <dd class='col-md-7'><a :href="serverinfo.server.url">{{ serverinfo.server.name }}</a></dd>
            <dt class='col-md-5' title="Workers not seen in a long time.">Old workers</dt>
            <dd class='col-md-7'>
                <idle-worker
                    v-for="worker in idle_workers"
                    :key="worker._id"
                    :worker="worker"
                    @forget-worker="forgetWorker(worker)">
                </idle-worker>
            </dd>
        </dl>
    </div>
</script>

<!-- template for the 'idle-worker' Vue.js component -->
<script type='text/x-template' id='template_idle_worker'>
    <span>
        <span class="idle-worker-name" :title="worker._id">{{ worker.nickname }}</span>
        <span @click="$emit('forget-worker', worker)" class="forget-worker worker-action" title="click to forget worker">x</span>
    </span>
</script>

<!-- template for the 'action-button' Vue.js component -->
<script type='text/x-template' id='template_action_button'>
    <a class='worker-action'
        :title="action.title"
        @click="$emit('worker-action', worker_id, action_key)"
    >{{action.icon}}</a>
</script>

<!-- template for the 'worker-table' Vue.js component -->
<script type='text/x-template' id='template_worker_table'>
    <div>
        <action-bar
            :workers="workers"
            :selected_worker_ids="selected_worker_ids"
            :show_schedule="show_schedule"
            @toggle-schedule='show_schedule = !show_schedule'
        ></action-bar>
        <table class="table table-condensed worker">
            <thead>
                <tr>
                    <td><label><input
                        type="checkbox"
                        value="all"
                        :checked="all_workers_selected"
                        @input="$emit('toggle-all-workers-selected')"
                        > Select All</label></td>
                    <th>Nickname</th>
                    <th>Status</th>
                    <th>Scheduled</th>
                    <template v-if="show_schedule">
                        <th>Sleep Days</th>
                        <th>Sleep Start</th>
                        <th>Sleep End</th>
                        <th></th>
                    </template>
                    <template v-else>
                        <th>Cur/last Task</th>
                        <th>Last Seen</th>
                        <th>Software</th>
                    </template>
                </tr>
            </thead>
            <worker-tbody
                v-for="worker in workers"
                :key="worker._id"
                :worker="worker"
                :selected_worker_ids="selected_worker_ids"
                :show_schedule="show_schedule"
                :server="server"
                @worker-selected="$emit('worker-selected', $event, worker._id)"
                @copy-schedule="copySchedule($event)"
            ></worker-tbody>
        </table>
    </div>
</script>

<!-- template for the 'worker-tbody' Vue.js component -->
<script type='text/x-template' id='template_worker_tbody'>
    <tbody :class="'worker status-' + worker.status">
        <worker-row
            :worker="worker"
            :selected_worker_ids="selected_worker_ids"
            :show_schedule="show_schedule"
            :show_details="show_details && !show_schedule"
            @worker-selected="$emit('worker-selected', $event)"
            @copy-schedule="$emit('copy-schedule', $event)"
            @toggle-details="show_details = !show_details"
        ></worker-row>
        <template v-if="show_details && !show_schedule">
            <tr class='details'>
                <td colspan='3'></td>
                <th>Details:</th>
                <th>Worker ID</th>
                <th colspan='2'>Address</th>
            </tr>
            <tr class='details'>
                <td colspan='4'></td>
                <td class="click-to-copy worker-id" :data-clipboard-text="worker._id">
                    {{ worker._id }}
                </td>
                <td colspan='2' class="click-to-copy worker-address" :data-clipboard-text="worker.address">
                    {{ worker.address }}
                </td>
            </tr>
            <tr class='blacklist' v-if="worker.blacklist">
                <td colspan='3'></td>
                <th>Blacklist:</th>
                <th>Job</th>
                <th>Task Type</th>
                <th colspan='2'>Blacklisted On</th>
            </tr>
            <blacklist-row
                v-for="listitem in worker.blacklist"
                :worker="worker"
                :listitem="listitem"
                :key="listitem.job_id + '-' + listitem.task_type"
                :server="server"
                class='blacklist'
            ></blacklist-row>
        </template>
    </tbody>
</script>

<!-- template for the 'worker-row' Vue.js component -->
<script type='text/x-template' id='template_worker_row'>
    <tr :id="worker._id" class="worker-row">
        <td class='col-narrow'><label><input
            type="checkbox"
            :id="checkbox_id"
            :value="worker._id"
            :checked="is_checked"
            @input="$emit('worker-selected', $event.target.checked)"
            ></label>
            <action-button v-for="action_key in actions_for_worker"
                :key="action_key"
                :action_key="action_key"
                :worker_id="worker._id"
                @worker-action="performWorkerAction"
                ></action-button>
        </td>
        <td class='col-narrow'><label :for="checkbox_id">{{ worker.nickname }}</label></td>
        <td class='col-narrow'>{{ worker.status || '-none-' }}
            <span v-if="worker.status_requested">
                <span v-if="worker.lazy_status_request" title="Status change queued for after current task is finished.">⇢</span>
                <span v-else title="Immediate status change is requested.">→</span>
                {{ worker.status_requested}}</span>
        </td>

        <template v-if="mode != 'edit_schedule'">
            <td class='col-sched-edit-active'>
                <button v-if="worker.sleep_schedule.schedule_active" class='btn btn-sm btn-schedule-active' @click="scheduleSetActive(false)">✓</button>
                <button v-else class='btn btn-sm btn-schedule-inactive' @click="scheduleSetActive(true)">✗</button>
            </td>
        </template>
        <template v-if="mode == 'show_schedule'">
            <!-- Worker Schedule viewing template -->
            <td :class="worker.sleep_schedule.days_of_week ? '' : 'implied'">{{ worker.sleep_schedule.days_of_week || 'every day'}}</td>
            <td :class="worker.sleep_schedule.time_start ? '' : 'implied'">{{ worker.sleep_schedule.time_start || '00:00'}}</td>
            <td :class="worker.sleep_schedule.time_end ? '' : 'implied'">{{ worker.sleep_schedule.time_end || '24:00'}}</td>
            <td class='col-sched-edit-actions'>
                <button class='btn btn-sm' @click="scheduleEditMode()" title='Edit'>✎</button>
                <button class='btn btn-sm' @click="$emit('copy-schedule', worker.sleep_schedule)"
                    :disabled="selected_worker_ids.length == 0 || is_checked"
                    title='Copy this schedule to all selected workers.'>⎘</button>
            </td>
        </template>
        <template v-else-if="mode == 'edit_schedule'">
            <!-- Worker Schedule editing template -->
            <td class='col-sched-edit-active'><input class='form-check-input' type='checkbox' v-model="edit_schedule.schedule_active"></td>
            <td><input class='form-control form-control-sm' type='text' @keyup.enter="scheduleSave()" v-model="edit_schedule.days_of_week"
                title="Space-separated list of day names. The first two letters of each day are enough."></td>
            <td><input class='form-control form-control-sm' type='text' @keyup.enter="scheduleSave()" v-model="edit_schedule.time_start"></td>
            <td><input class='form-control form-control-sm' type='text' @keyup.enter="scheduleSave()" v-model="edit_schedule.time_end"></td>
            <td class='col-sched-edit-actions'>
                <button class='btn btn-sm' @click="scheduleSave()" title='Save Schedule'>💾</button>
                <button class='btn btn-sm' @click="scheduleEditCancel()" title='Cancel Editing'>✖</button>
            </td>
        </template>
        <template v-else>
            <!-- Worker Info template -->
            <td>
                <template v-if="worker.current_task">
                    <a :href="task_server_url">{{ task_id_text }}</a>
                    <template v-if="worker.current_task_status">
                        ({{ worker.current_task_status }}
                        <template v-if="worker.current_task_updated">
                            {{ current_task_updated() }}
                        </template>
                        )
                    </template>
                    <a v-if="worker.current_task && worker.current_job"
                        :href="task_log_url" target="_blank">(log)</a>
                </template>
                <template v-else>-none-</template>
            </td>
            <td :title="last_activity_abs">{{ last_activity_rel() }}</td>
            <td>
                <button
                    class='btn btn-link btn-sm' style='float: right'
                    title="Toggle Worker Details"
                    @click.prevent="$emit('toggle-details')">
                    <template v-if="show_details">▼</template>
                    <template v-else>▶</template>
                </button>
                {{ worker_software }}
            </td>
        </template>
    </tr>
</script>

<!-- template for the 'blacklist-row' Vue.js component -->
<script type='text/x-template' id='template_blacklist_row'>
    <tr>
        <td colspan='4'></td>
        <td><a :href="job_id_url" :title="'Open on ' + server.name" target='_blank'>{{ job_id_text }}</a></td>
        <td>{{ listitem.task_type }}</td>
        <td colspan='2'>{{ created() }}</td>
    </tr>
</script>

<!-- template for the 'action-bar' Vue.js component -->
<script type='text/x-template' id='template_action_bar'>
    <form class='container'>
        <div class="action-bar row">
            <select
                class="form-control form-control-sm col-md-3"
                :disabled="selected_worker_ids.length == 0"
                v-model="selected_action"
                >
                <option value="" selected><template v-if="selected_worker_ids.length == 0">select workers and </template>choose an action</option>
                <option v-for="(action, key) in actions" :value="key">{{ action.label }}</option>
            </select>
            <button
                type="button"
                :disabled="selected_worker_ids.length == 0 || !selected_action"
                class="btn btn-primary btn-sm"
                @click.prevent="performWorkerAction"
                >Apply to {{ selected_worker_ids.length }} worker<template v-if="selected_worker_ids.length != 1">s</template></button>
                <button
                    class='btn btn-primary btn-sm ml-auto'
                    @click.prevent="$emit('toggle-schedule')">Show <template v-if="show_schedule">Status</template><template v-else>Schedule</template></button>

        </div>
    </form>
</script>