Web-based GUI for Vulpes
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)
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 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.
Vulpes UI reacts to various states of job data, many of which you can affect by setting result data or something similar.
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.
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) |