# Ziti Administration Console Updates

**URL:** <https://openziti.discourse.group/t/ziti-administration-console-updates/1852>\
**Category:** Ziti Administration Console\
**Created:** [November 30, 2023, 9:31pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852 "2023-11-30T21:31:56Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rgalletto](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/rgalletto/32/1508_2.png) [@rgalletto](https://openziti.discourse.group/u/rgalletto)\
**Post date:** [November 30, 2023, 9:31pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/1 "2023-11-30T21:31:56Z")

</div>

## 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:

```auto
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:

```auto
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](https://global.discourse-cdn.com/free1/uploads/netfoundry/original/2X/a/a0dc17df122401bd7260a81dcc25ca7d0ee889f6.gif)

### **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](https://global.discourse-cdn.com/free1/uploads/netfoundry/original/2X/3/35948208bb423c70b89a051ac694184e75cf64a2.gif)

---

<div class="post-metadata">

**Author:** ![qrkourier](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/qrkourier/32/52_2.png) [@qrkourier](https://openziti.discourse.group/u/qrkourier)\
**Post date:** [November 30, 2023, 9:48pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/2 "2023-11-30T21:48:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rgalletto](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/rgalletto/32/1508_2.png) [@rgalletto](https://openziti.discourse.group/u/rgalletto)\
**Post date:** [November 30, 2023, 10:03pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/3 "2023-11-30T22:03:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TheLumberjack](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/thelumberjack/32/113_2.png) [@TheLumberjack](https://openziti.discourse.group/u/TheLumberjack)\
**Post date:** [November 30, 2023, 10:05pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/4 "2023-11-30T22:05:54Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![qrkourier](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/qrkourier/32/52_2.png) [@qrkourier](https://openziti.discourse.group/u/qrkourier)\
**Post date:** [November 30, 2023, 11:23pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/5 "2023-11-30T23:23:04Z")

</div>

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.

```dockerfile
# 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"]

```

---

<div class="post-metadata">

**Author:** ![rgalletto](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/rgalletto/32/1508_2.png) [@rgalletto](https://openziti.discourse.group/u/rgalletto)\
**Post date:** [December 1, 2023, 1:41pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/6 "2023-12-01T13:41:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rgalletto](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/rgalletto/32/1508_2.png) [@rgalletto](https://openziti.discourse.group/u/rgalletto)\
**Post date:** [December 7, 2023, 9:33pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/7 "2023-12-07T21:33:30Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![natashell](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/natashell/32/122_2.png) [@natashell](https://openziti.discourse.group/u/natashell)\
**Post date:** [December 8, 2023, 4:01am UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/8 "2023-12-08T04:01:05Z")

</div>

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:

```auto
# 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

```auto
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:

```auto
ExecStart=/usr/bin/node "/opt/openziti/.ziti/quickstart/network/ziti-console/server.js" node-api

```

---

<div class="post-metadata">

**Author:** ![rgalletto](https://yyz2.discourse-cdn.com/free1/user_avatar/openziti.discourse.group/rgalletto/32/1508_2.png) [@rgalletto](https://openziti.discourse.group/u/rgalletto)\
**Post date:** [December 8, 2023, 1:39pm UTC](https://openziti.discourse.group/t/ziti-administration-console-updates/1852/9 "2023-12-08T13:39:44Z")

</div>

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!
