Ziti Administration Console Updates

Ziti Administration Console
1

Ziti Administration Console Updates

A new ZAC is on the way! We’ve been working behind the scenes to migrate the Ziti Administration Console to a new Angular user interface. The ZAC features you've come to know and love should remain relatively unchanged, however we will be incrementally updating pages with some new designs and enhancements. For example, we’ve updated the Identities page with a new data table and a redesigned create/edit form. You can see a preview of these changes in the attached screenshots at the end of this article.

What does this mean for ZAC users?

With this update there will be a few additional requirements in the installation and setup steps:

- Angular CLI

Users must have the Angular CLI installed and available on your command line. The ZAC project uses Angular v16. To install the CLI globally, run the following command:

npm install -g @angular/cli@16

*Note: This will make ng globally available on the command line, so you may need to append sudo to the above command if you require elevated privileges.

- Building the application from source

Below is the new sequence of commands to install, build, and serve ZAC:

npm install
ng build ziti-console-lib     ## New Step
ng build ziti-console-node    ## New Step
node server.js
*Note: ZAC still requires Node.js to be installed. minimum v16

- Building and running in Docker

The setup to run ZAC in a Docker container should remain the same with the addition of one new argument that must be passed when running the container: ... node-api

Below is the full command to run the ZAC image in Docker:

sudo docker run -d --name zac -p 1408:1408 openziti/zac

When is this change expected to take place

The changes are scheduled to be released late next week. (week of Dec. 7th)

Why are we making this change?

Unification

We want to create a unified user experience between CloudZiti & OpenZiti for managing a Ziti Network. The goal is to bring both the ZAC (OpenZiti) UI and the CloudZiti UI together under a common framework (Angular)

Extensibility

With both projects leveraging a shared framework (Angular), CloudZiti (or other 3rd parties) can import and extend ZAC features & components without reproduction/duplication of efforts. So when ZAC enables a new feature from OpenZiti, it’s readily available for CloudZiti as well.

What if I have issues running the new ZAC?

We expect this transition to be seamless. However If you do have any trouble getting up and running with the new Angular ZAC, please don’t hesitate to reach out to us on discourse. We will address any issues ASAP.

Preview of UI updates:

New Identities List Table:

Updated data-table display with the following new features:

  • Show/Hide columns
  • Re-order/re-arrange columns
  • “Pin” columns to the left
  • View & remove applied filters via “pills” in the search box header

data-table

New Identities Create/Edit Form:

Updated design & layout of the Identities create/edit including the following new features:

  • Responsive layout and styling of form fields
  • “Show More” toggle for advanced configuration settings
  • “Raw” view of data-model in JSON editor
  • “Side modal” display w/ left side navigation unobstructed

ident-form

2 Likes
2

Will settings.json still work to pre-configure lists of edgeControllers and fabricControllers?

3

Yep, all the pre-configured settings should still be consumed and applied when running the Node.js server.

1 Like
4

This also depends on how ZAC is delivered/deployed. Using the "node" approach won't be affected as I understand it, but longer term I'm not sure this functionality will stay. I would love to hear from anyone in the community that uses this functionality (other than OpenZiti devs)

5

The only thing I ever configure is the URL to the OpenZiti Controller's management API.

I chatted with Clint about this. If I understood his proposal, then this is accurate:

If I'm accessing the console through that same HTTP origin as the management API, then the console's static files reference the API with an unqualified URL path like href="/edge/management/v1/{CRUD}" instead of a qualified path that includes a separate domain name, because it's the same domain name.

One more thing: we also imagined how to deploy the new console: Docker multi-stage build. That is, a Dockerfile like this copies the static files from the console build into the controller's deployment container.

# openziti/ziti-controller
FROM openziti/ziti-console:1.2.3 as ziti-console
FROM openziti/ziti-cli:2.3.4
COPY --from ziti-console /app /app
USER ziggy
ENTRYPOINT [ "ziti", "controller" ]
CMD [ "run" ]
6

If I'm accessing the console through that same HTTP origin as the management API, then the console's static files reference the API with an unqualified URL path like href="/edge/management/v1/{CRUD}" instead of a qualified path that includes a separate domain name, because it's the same domain name.

Yes in this scenario, if the app is hosted as the same domain & port as the management API then the console could use relative paths for data service requests. This would also avoid things like CORS issues which is something the current Node.js server implementation helps mitigate.

2 Likes
7

Hey Everyone, just to update, these changes have been merged and should now be available in the openziti/ziti-console repository. Please don't hesitate to reach out if you have any questions.

Thanks!

1 Like
8

Good Night everyone!

I just update ZAC, and it's great!
Just a heads up, in my environment (not Docker, but a Droplet running ubuntu), in order to get ZAC running I had to:

# This one from the ziti-console directory, or I used to get the error: 
# "Could not find the '@angular-devkit/build-angular:ng-packagr' builder's node package."

sudo npm install  -D -g @angular/cli@16.0.0-next.0

And I run also the command

ng build ziti-console-node  ## It wasn't listed in the instructions but it's in the Dockerfile

The systemctl service file just need to add the node-api parameter:

ExecStart=/usr/bin/node "/opt/openziti/.ziti/quickstart/network/ziti-console/server.js" node-api
1 Like
9

Hi natashell, Thanks for sharing!

Sounds like a permission issue with installing the Angular CLI tool on the command line. I will make a note in the instructions that appending sudo to the install step may be necessary on linux.

We also made a slight change to the package names that was not reflected in the initial discourse post and has now been updated. Thanks for catching that!

1 Like