project-zot / zui

UI for zot registry

zot UI

A graphical user interface to interact with a zot server instance.

Built with React JS and Material UI.

TL;DR

To start this app, run

npm install

npm start

If zui is ran separately from the zot back-end, the manual host configuration must be changed in the ./src/host.js file

const hostConfig = {
  auto:false, 
  default:'http://localhost:5000' // replace with zot host
}

The app will open in your default browser. If not, you can manually open http://localhost:3000.

Available Scripts

In the project directory, run:

npm install

Do this first. Installs all dependencies needed by the app.

npm start

Runs the app in the development mode. It should open your app in your default browser. If not, you can manually open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
The app is ready to be deployed!

See this section about deployment for more information.

Learn More

This project was bootstrapped with Create React App, and built with React JS and Material UI.

To learn React, check out the React documentation.

To learn Material UI, check out the Material UI Library.

zui's Issues

ZUI Mocks: experiment with more color themes

Experiment with more themes for ZUI / project website: maybe one warm color and black/grey.

Update Repo Details Page look and feel to match the latest mock-ups

Repo cards: show user specific metadata

• is this repo starred by the current user?
• ability to star this repo
• show total star count for this repo
• is this repo bookmarked by the current user?
• ability to bookmark this repo

Fix newest tag display in Repo Cards

Describe the bug
The repository cards are supposed to display the newest uploaded tag for the image.

To Reproduce
Steps to reproduce the behavior:

1. Go to HomePage
2. Image cards don't correctly display newest tag info

Expected behavior
Image cards should display newest tag after uploader's username

Screenshots

ZUI: Implement filtering feature

ZUI: the scale of the UI is too large - the tiles are too large

We want to see more tiles when loading the list with the latest images.

ZUI mocks: Image/Tag page - Vulnerabilities

ZUI mocks: update mocks for image signatures in repo tiles

Implement tests for login page

Show dependencies for a specific repo/image

From GraphQL schema:

BaseImageList(image: String!): [ImageSummary!]

Global search: use pagination

Show dependants for a specific repo/image

From GraphQL schema:

 DerivedImageList(image: String!): [ImageSummary!]

Implement Image:Tag page

Show image history on the Image:Tag page

Update makefile to exclude dev dependency vulnerabilities

ZUI: populate fields based on image annotations

  org.opencontainers.image.description: base is a minimal glibc-based Linux system
  org.opencontainers.image.licenses:    GPL-2.0-or-later
  org.opencontainers.image.revision:    72aa5c8
  org.opencontainers.image.source:      https://github.com/project-stacker/c3
  org.opencontainers.image.title:       base-debian-amd64
  org.opencontainers.image.url:         https://github.com/project-stacker/c3
  org.opencontainers.image.vendor:      Cisco Systems, Inc.
  org.opencontainers.image.version:     bullseye

Zui should leverage Zot API which exposes configuration

Determine if local authentication is enabled.
If local authentication is enabled, the user should be allowed to change his password.

ZUI: Fix async call cancellation

ZUI - use pagination on RepoListWithNewestImage for the home page

This is in order to benefit from the sorting by UpdateTime, and have pagination

setup ci/cd, unit test framework

Is your feature request related to a problem? Please describe.

Currently, we are focused only on feature development, but currently lacking automated testing.

Describe the solution you'd like

Add a framework/workflow to build upon.

Implement global search results feature

ZUI mocks: Tag page - Overview, Layers, Dependencies, Dependants

Use new zot logo in zui

ZUI - do not show logout button unless we enable user authentication

Implement tests for explore page

ZUI - Show layer hashes in the image:tag layers tab

ZUI mocks: Layer page - Tags (maybe include SBOM tab too)

ZUI mocks: update mocks for Vulnerability information in repo tiles

ZUI: update color scheme with latest mockups

ZUI - use a spinner while data is loading

At least for the query to get the most recent images, ideally for all queries.

ZUI: Hide bookmarks section if there are no bookmarks to show

Don't show any bookmarks if the user is not logged in or does not have bookmarks configured

Implement tests for image page

Update Repo Card look and feel to match the latest mock-ups

We should not show ZUI login screen if the authentication is disabled

Currently the front-end makes a call to zot in order to verify the need for credentials.
Until the browser receives the reply from the backend it will show the login screen. We need to fix this.

Show more information on who signed a specific image:tag

Display detailed image signature information in ZUI

ZUI: fix the title and descriptions used in image:tag screen

"Title" to be used for short "description" under the repo name.
"Description" to be used for the long "description" on the overview tab of the repo.

Implement freetype search feature

ZUI: Refactor backend response mapping

Automatically get hostname for api request

Add Landing Page, links to either

• Sign In Page, if auth is configured
• Explore Repositories Page, if auth is not configured

Update repo details to leverage RepoInfo with RepoSummary information

Clarify intended behavior when user selects and image or a layer from freetype search results

Do we need to implement a details view for an image? Do we need to implement a details view for a layer?
Current mocks only cover a repo. They don't cover an image (image is a repo plus a tag). They don't cover the layer.

Update repo cards to include download counter

Update front-end code to leverage RepoSummary returned by ImageListWithLatestTag

ZUI: supporting changing local user password

Depends on project-zot/zot#698

Update Home Page look and feel to match the latest mock-ups

Implement tests for home page

react-scripts vulnerabilities

Describe the bug
npm install and npm audit that are used in the build of the application reports vulnerabilities tied to the react-scripts package.

To Reproduce
Steps to reproduce the behavior:

1. Run npm install or npm audit inside the project directory
2. Vulnerabilities reported

Expected behavior
We always expect no vulnerabilities to be reported, however this is a vulnerability for a development dependency that has no impact on the production build of the app.
Additional context
The issue will be automatically fixed when PR, estimated to be on the next major version.
This issue is discussed in more detail here

Show bookmarked repos in Home Page

Define requirements for zot server administration using zui