npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vulpes-ui

v0.15.1

Published

Web-based GUI for Vulpes

Downloads

16

Readme

Vulpes UI

Web-based GUI for Vulpes

Build Status

Vulpes UI

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) |