How to Quickly Build Applications Using the @zowe/cli npm Package (Part 2)

Published in

Zowe

5 min readNov 11, 2019

For Part 1, you saw how to get started calling into the @zowe/cli package. Next, you’ll see how to do something more interesting by adding a graphical UI component with Electron that obtains z/OS job information:

Some familiarity with web development (HTML, CCS, JavaScript / TypeScript) will help make sense of all this; however, links are provided throughout to learn it all along the way.

Electron is the basis for many modern desktop apps. For example:

Electron allows you to write cross-platform (Windows, Mac, and Linux) applications using web technologies (HTML, CSS, and JavaScript). It’s built with Chromium (which the Chrome browser uses) and Node.js (which @zowe/cli uses).

Unlike a pure web application that only runs in a browser, Electron also allows for calling of Node.js APIs (to work more closely with the operating system and access Zowe CLI profiles).

Technology Choices

We’ll continue with the concept of the last project but won’t be using it as a starting point. There are many starter projects for Electron that you can clone and quickly get started (a main advantage for building on open source).

The hard part is picking a UI framework.

React, Angular, Vue, or many other choices

There are plenty of articles to describe how, why, or when to use one over the other. This project will use Angular (version 8) and Angular Material for theming.

Education Resources

In low-level z/OS programming, may have only one resource to learn how to call and use a service. For open source, distributed tools, there are endless resources! Find your favorite YouTube, blogs, books, Stack Overflow entry, etc…

One recommendation: Tour of Heroes is a great tutorial to learn angular. It takes a long time, but is worthwhile to complete if you want to learn Angular.

Getting Started — Template Project

Here is a good template project for Angular with Electron.

Fork the repo to have a copy to experiment with:

Then:

git clone https://github.com/<your-repo>/electron-jquery-bootstrap
cd electron-jquery-bootstrap && npm install
npm start

When the app starts on your screen; it looks something like this:

Default app startup — the debug Window on the right side is automatically launched but can be turned off

Add @zowe/cli

With a working template Electron app, it’s time to customize it by applying some concepts described in Part 1.

First, you can add the @zowe/cli package: npm install --save @zowe/cli

Next, closely following the previous snippet (using @zowe/cli's GetJobs methods) you can add code to home.component.ts:

Angular component calling GetJobs

With the component change above, customize the HTML to display z/OS job values in Electron Angular UI:

Using Angular *ngFor to loop through an print all jobs returned

Now, the app should show jobs in the default UI:

Not too impressive yet but it is arguably better looking than console output (the background is fun 😃)

@zowe/imperative

In the same way that you can call into the @zowe/cli APIs from TypeScript, you can also call into the @zowe/cli infrastructure component — the @zowe/imperative package.

The home.component.ts code snippet above uses hard-coded credentials and connection information (which isn’t ideal).

If you use the Zowe CLI command line or the Zowe VS Code Extension, you might notice a convenient feature → “profiles”. Profiles simply store connection information (much like a PuTTY session) and are shareable across both the CLI and VS Code extension (meaning you don’t need to maintain duplicate sets of connection data).

Loading profiles through @zowe/imperative means Electron apps can also share the same profiles as the CLI and VS Code extension.

Node.js API doc isn’t published yet for @zowe/imperative, but you can clone the repo and run npm run typedoc to generate it yourself (also check out the wiki).

Load Profile Data

For the most part, calling into @zowe/imperative is best understood looking at code samples. The takeaway from this snippet is that “imperative” needs to be initialized, and after which, you can make calls to programmatically load a profile, like zosmf.

UI Customization & Services

The exact steps to fully customize this UI are skipped because they’re:

specific to Angular and not all UI frameworks
better described in other articles
not focused how to call @zowe/cli APIs.

The final project is customized to use services to call into @zowe/imperative and @zowe/cli.

[WIP] Final Product

Although not completely functional, you can see how this project shapes into a modern desktop application to view z/OS job information in an easily consumable way.

This isn’t an absolute requirement, but it’s probably the right way to go.

The cool part is that we built a traditional z/OS job output display but with the benefits of modern UI tooling for filtering, sorting, and pagination.

Conclusion

Part 1 dealt with the basics of calling the @zowe/cli package from a Node.js / TypeScript application.

Part 2 (this) builds on Part 1 to show calling the @zowe/imperative and tying in UI tooling (Electron with Angular). The repo is here (hopefully I’ll finish this project in my spare time).

With this basis, you can quickly create new mainframe applications and tools by stringing together @zowe/cli, @zowe/imperative, Zowe REST APIs, Electron, UI frameworks, and many other tools.