Paganini UI

This repository contains react components to display and manage jobs through paganini.

React components usage

The two main components are JobsTabe, which displays the list of jobs and JobDetails which desplays details of a particular job:

JobsTable

<JobsTable
    paganiniURL='http://localhost:7000/paganini'
    onJobSelect={(job) => console.log(job)}
    filters={{ command_name: 'etl' }}
/>

Props

• paganiniURL (string): base url where paganini endpoints are reachable
• onJobSelect function: callback that receives the selected job when a row is clicked
• filterQuery { [key: string]: string }: any additional query params to be passed to paganini

JobDetails

<JobDetails
    paganiniURL='http://localhost:7000/paganini'
    id='ed12987e-da38-43f1-acf5-e2ff7fdb8da9'
    jobDetailBasePath='/jobs'
/>

Props

• id (string): job id
• showInputData (boolean): enable viewing the input data
• showOutputData (boolean): enable viewing the output data
• enableDarkLogsTheme (boolean): display logs with a dark background
• paganiniURL (string): base url where paganini endpoints are reachable

FileUploadJobButton

<FileUploadJobButton
    commandName='etl'
    buttonLabel={{ it: 'Carica e Procedi', en: 'Upload and Run' }}
    onSubmit={() => console.log('Job submitted')}
/>

Props

• commandName (string): name of the Paganini command to execute
• buttonLabel (StringTranslation, optional): label for the button in multiple languages (default: { it: 'Carica e Procedi', en: 'Upload and Run' })
• onSubmit (function, optional): callback executed after successful job submission

This component provides a file upload button that:

• Allows users to select one or more files
• Reads files via FileReader and converts them to base64
• Submits them to Paganini as a job with files in the input_data.files array

Environment Variables

• PAGANINI_URL (required): Base URL where Paganini endpoints are reachable
• ENABLE_FILES_UPLOAD (optional): Set to true to enable file upload buttons for specific commands. They will be added to the home page. It automatically retrieves commands related to jobs with files as unique input key.
• ENABLE_SUBMIT_DEV (optional): Set to 'true' to enable the submit-dev development page for testing job submissions

Example .env.local:

PAGANINI_URL=http://localhost:7000/api/
ENABLE_FILES_UPLOAD=true
ENABLE_SUBMIT_DEV='true'

Usage as a docker image

docker run -d \
    -e PAGANINI_URL=http://localhost:7000/paganini \
    -e ENABLE_FILES_UPLOAD=true \
    -p 3000:3000 \
    quay.io/deix/paganini-ui