vulpes-ui
v0.15.1
Published
Web-based GUI for Vulpes
Downloads
16
Readme
Vulpes UI
Web-based GUI for Vulpes
About
Vulpes-UI is a plugin for the Vulpes platform that provides a web-based user interface to manage Vulpes jobs. Vulpes provides a Service
which can be used to connect with Vulpes-UI to display jobs and their properties. Vulpes-UI provides a basic API (not related to Vulpes-API) for handling UI events.
This UI provides many useful features:
- Add jobs to a Vulpes service
- Start/Stop/Delete jobs
- Track inheritance and job chains
- Generate lightweight reports
- Batch import jobs (using templates)
Installation
Install by running npm install vulpes-ui --save
. Vulpes-UI depends on vulpes as a peer dependency, so you must have that installed as well.
Usage
Usage is simple enough - we recommend attaching the Vulpes UI router to the root /
route:
const express = require("express");
const { Service } = require("vulpes");
const { createVulpesRouter } = require("vulpes-ui");
const app = express();
const port = 3000;
// Create a new service
const service = new Service();
service.initialise().then(() => {
app.use("/", createVulpesRouter(service));
app.listen(port, () => {
console.log(`Application listening on port ${port}`);
});
});
The method createVulpesRouter
takes a Vulpes Service
instance:
// Returns an Express router instance
createVulpesRouter(service);
The returned value is a router instance from express-promise-router
.
Data Aspects
Vulpes UI reacts to various states of job data, many of which you can affect by setting result data or something similar.
Job Progress
Vulpes UI can render a progress bar on jobs that are:
- Running
- Returning progress metrics as they proceed
Job progress metrics are to be stored in result data, which can be set even while the job is running. The properties are as follows (note the hidden-property prefix %
):
%progressCurrent
: The current progress value - a number greater than or equal to 0.%progressMax
: The maximum progress value - a number greater than or equal to 0, but greater than or equal to%progressCurrent
.
For example: if a job was processing images, and 108
out of 165
had been processed, you might set %progressCurrent
to 108
and %progressMax
to 165
which would render 65% in the UI.
Attachments / Assets
The UI can display attachments when added to result data correctly. An attachment's property key must be in the following format: %attachment:facbe41f-7889-426b-9388-20da2ad667fc
. The latter part after the colon is a v4 UUID.
The value of these properties must be an object with the following properties:
| Property | Type | Required | Description |
|---------------|---------------|-----------|-------------------------------------------|
| title
| String
| Yes | The title of the attachment |
| created
| Number
| Yes | JS timestamp of when it was created |
| mime
| String
| Yes | The MIME type of the attachment |
| data
| String
| Yes | Base64 encoded data of the attachment (data URI) |