Set up the GUAC Visualizer

The GUAC Visualizer is an experimental utility that can be used to interact with GUAC services. It acts as a way to visualize the software supply chain graph, as well as a means to explore the supply chain and prototype policies.

Table of contents

Requirements

Installation

Step 1. Getting started

Get the guac-visualizer source code here.

cd into it:

cd guac-visualizer

Step 2. Install dependencies 

yarn install

Step 3. Run the visualizer locally: 

yarn dev

You can then go to localhost:3000 in your browser to start using the visualizer.

...

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5

...

Using the GUAC visualizer will look something like this:

image

Configuration

When running the development server , or as a container app, the visualizer app server needs some configuration. The default configuration is stored in the .env file.

The most important configuration setting is NEXT_PUBLIC_GUACGQL_SERVER_URL, which points to the running GUAC GraphQL server. The default configuration file uses http://localhost:8080.

You have multiple options to change the configuration to your local needs:

  • provide environment variable (typical for execution environment, like kubernetes)
  • create file .env.local, which then contains local configurations (typical during development)

If these two options are not fitting for you, there are even more options for changing the configuration, please read the next.js documentation chapter on environment variables.

Troubleshooting

If you get an error when guac-visualizer tries to render, you may need to update the generated graphql code. To do this:

  1. Clone the GUAC repo
  2. Ensure the paths in the codegen.ts file in this repository are correct. If you cloned GUAC into a directory next to this repo’s directory, you will not need to change the paths.
  3. Run yarn graphql-codegen to update the GraphQL code.