Page MenuHome

vue-components.html
No OneTemporary

File Metadata

Created
Tue, Oct 15, 4:33 PM

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="d-flex align-items-center p-1 bg-darker text-small">
<img class="img-icon mx-2" src='/static/flamenco.png' alt='Flamenco logo'>
<span>
{{ serverinfo.manager_name }}
</span>
<span class="text-warning pl-2" v-if="serverinfo.manager_mode != 'production'">
({{ serverinfo.manager_mode }} mode)
</span>
<span class="ml-auto px-2 text-secondary">
<button id='downloadkick' class='btn btn-sm btn-link py-0 text-secondary'>
Kick task downloader
</button>
<a href="/restart-to-websetup" class='btn btn-sm btn-link py-0 text-secondary'>
Setup
</a>
|
<a title="Server" :href="serverinfo.server.url" class="text-secondary">
{{ serverinfo.server.name }}
</a>
|
{{ serverinfo.version }}
</span>
</header>
</script>
<!-- template for the 'status' Vue.js component -->
<script type='text/x-template' id='template_status'>
<div id='status' class="text-secondary">
<p v-if='errormsg' class='error'>{{ errormsg }}</p>
<div v-else class="row white-space-nowrap">
<div class="col-md-6">
<dl class="row ">
<dt class='col-md-4'>Workers</dt>
<dd class='col-md-6'>{{ serverinfo.nr_of_workers }}</dd>
<dt class='col-md-4' title="Number of tasks in database. Probably not all queued.">Tasks</dt>
<dd class='col-md-6'>{{ serverinfo.nr_of_tasks }}</dd>
</dl>
</div>
<div class="col-md-6">
<dl class="row">
<dt class='col-md-4' title="Number of task updates queued for sending to Flamenco Server.">Upstream Queue</dt>
<dd class='col-md-6 pl-4'>{{ serverinfo.upstream_queue_size }}</dd>
<dt class='col-md-4' title="Workers not seen in a long time.">Old Workers</dt>
<dd class='col-md-6 pl-4'>
<idle-worker
v-for="worker in idle_workers"
:key="worker._id"
:worker="worker"
@forget-worker="forgetWorker(worker)">
</idle-worker>
</dd>
</dl>
</div>
</div>
</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="text-danger" title="click to forget worker">(forget)</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 v-if="has_workers">
<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 class='p-2 d-flex justify-content-center align-items-center'>
<input
title="Select All"
type="checkbox"
value="all"
:checked="all_workers_selected"
@input="$emit('toggle-all-workers-selected')"
>
</td>
<th>Name</th>
<th>Status</th>
<th class="text-center">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 title="Current/Last Task">Task</th>
<th>Task Log</th>
<th>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'>
<th colspan='2'></th>
<th colspan='1'>Worker ID</th>
<th colspan='6'>Address</th>
</tr>
<tr class='details'>
<td colspan='2'></td>
<td colspan='1' class="click-to-copy worker-id" :data-clipboard-text="worker._id">
{{ worker._id }}
</td>
<td colspan='6' 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='p-2 d-flex justify-content-center align-items-center'>
<input
type="checkbox"
:id="checkbox_id"
:value="worker._id"
:checked="is_checked"
@input="$emit('worker-selected', $event.target.checked)"
>
<!-- <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='table-cell-nickname'>
<span :class='"status-indicator status-" + worker.status'></span>
<label :for="checkbox_id">{{ worker.nickname }}</label>
</td>
<td class='table-cell-status'>{{ 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 text-center'>
<button v-if="worker.sleep_schedule.schedule_active" class='btn btn-sm btn-link' @click="scheduleSetActive(false)">Yes</button>
<button v-else class='btn btn-sm btn-link text-secondary' @click="scheduleSetActive(true)">No</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 btn-link' @click="$emit('copy-schedule', worker.sleep_schedule)"
:disabled="selected_worker_ids.length == 0 || is_checked"
title='Copy this schedule to all selected workers.'>Copy</button>
<button class='btn btn-sm btn-link px-3' @click="scheduleEditMode()" title='Edit schedule'>Edit</button>
</td>
</template>
<template v-else-if="mode == 'edit_schedule'">
<!-- Worker Schedule editing template -->
<td class='col-sched-edit-active text-center'>
<input type='checkbox' v-model="edit_schedule.schedule_active" class="mt-1">
</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." placeholder='e.g. "mo tu we th fr"'></td>
<td>
<input class='form-control form-control-sm' type='text' @keyup.enter="scheduleSave()" v-model="edit_schedule.time_start" placeholder='e.g. "00:00"'>
</td>
<td>
<input class='form-control form-control-sm' type='text' @keyup.enter="scheduleSave()" v-model="edit_schedule.time_end" placeholder='e.g. "24:00"'>
</td>
<td class='col-sched-edit-actions'>
<button class='btn btn-sm btn-link text-success' @click="scheduleSave()" title='Save Schedule'>Save</button>
<button class='btn btn-sm btn-link' @click="scheduleEditCancel()" title='Cancel Editing'>Cancel</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>
</template>
<template v-else>-none-</template>
</td><td>
<template v-if="worker.current_task && worker.current_job">
<a :href="task_log_url" target="_blank"
title="View the head &amp; tail of this log file">view</a> |
<button class="btn btn-primary btn-sm click-to-copy"
:data-clipboard-text="task_log_curl_command"
onclick="toastr.success('Copied Curl command to your clipboard')"
title="Click to copy a Curl command that downloads this entire task log file">curl</button>
</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">Collapse</template>
<template v-else>Details</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'>
<span
@click="forget_blacklist_entry()"
class="forget-blacklist-entry worker-action"
title="click to forget this blacklist entry">x</span>
{{ created() }}
</td>
</tr>
</script>
<!-- template for the 'action-bar' Vue.js component -->
<script type='text/x-template' id='template_action_bar'>
<form>
<div class="action-bar py-3 mb-3 border-bottom d-flex align-items-center">
<select
class="form-control w-25"
:disabled="selected_worker_ids.length == 0"
v-model="selected_action"
>
<option value="" selected><template v-if="selected_worker_ids.length == 0">Select workers</template><template v-else>Choose an action</template></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="[(selected_worker_ids.length == 0 || !selected_action) ? 'btn-outline-secondary' : 'btn-primary']"
class="btn btn-sm ml-2"
@click.prevent="performWorkerAction"
>Apply Action</button>
<span v-if="selected_worker_ids.length > 0" class="text-muted ml-2">{{ selected_worker_ids.length }} worker<template v-if="selected_worker_ids.length != 1">s</template> selected</span>
<button
class='btn btn-outline-secondary btn-sm ml-auto px-4'
@click.prevent="$emit('toggle-schedule')"><template v-if="show_schedule">Status</template><template v-else>Schedule</template></button>
</div>
</form>
</script>

Event Timeline