Develop web applications series: Build a web application using SAS Viya Jobs
In the previous article of this series, I've described how you can create a web application based on React and how you can authenticate users against SAS Viya environment from that application. So far, the different pages of the application only contain the page title.
This article is the third one in the Develop web applications series:
- Present the options for extracting data
- Build a React application
- Build a web application using SAS Viya Jobs (this article!)
- Build a web application using SAS Cloud Analytic Service
- Build a web application using SAS Compute Server
- Build a web application using SAS Micro Analytic Service
In this article, I will drive you through the steps to retrieve data from the SAS environment using SAS Viya Jobs. We will be building out the Jobs tab and on the page we will display two dropdown boxes to select a library and table then a submit button to retrieve the data to populate a table. The result will be similar to this:
Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.
Reusable components
As we have seen in the previous article, React is designed in such a way that we can reuse components. To continue with the theme to build reusable components for the other tabs we will build out, let's create four components:
- A dropdown box to select a library
- A dropdown box to select a table
- A table that will display the data
- A loader that will be displayed whenever the application is waiting for data from the SAS Viya environment
The library selector
The library selector is a stateless component. It gets properties from the parent component. The properties are in the form of data (a list of libraries) and a function to handle the changes in the selection. In order to get a consistent layout, we will again use the react-bootstrap components (which needs to be imported). In our project, create a directory named Selectors under the components directory. Create a new file named LibrarySelector.js and write the following code in it.
As you can see in the code, we are importing the react-boostrap components we need and then create a function that returns a Form.Group which contains a Label and a list of options that are coming from the props.data variable.
The table selector
This component is also a stateless component and will work the same way as the LibrarySelector. So, you should create a file named TableSelector.js under the same directory as the LibrarySelector. The file needs the following content:
As you can see, the code are pretty similar to the LibrarySelector. We might have created a single file to handle the library and table selection and pass an additional props to identify if it was for tables or libraries. I've chosen to have separate files in case we want to handle the table and library selection differently in the future.
The table viewer
To display the data retrieved from SAS Viya, the application use a tabular format. Luckily, the react-boostrap library comes with a table component. Create a new directory under components directory and name it TableViewer. In that new directory, create a new file and name it: TableViewer.js. The content of the file should be:
As you might have guessed by know, this component is again stateless, but compared to the dropdown boxes, this component only receives data and no function.
The loading component
This component will be displayed whenever the application is waiting for SAS Viya to provide data. This is again a stateless component. It will just get a true/false flag in the form of a status variable in the props. If the status is true, the spinner component will be displayed. If the status is false, nothing will be displayed. Create a file named Loading.js under components directory and write the following content to it:
Specific components for the Jobs page
So far, we've seen components that will be reused in most pages of our application. It is now time to use them to build the specific page for the SAS Viya jobs under the Jobs tab. We will create a specific content. A JobSelector component which will be a form that uses the dropdown boxes and a submit button to handle the library and table selection and submit the request to populate the table. Thanks to the reusable components, the work to create a page will be reduced. Under components/Selectors directory, create a file and name it: JobSelector.js. The file has multiple sections:
- The import statements
This section imports the reusable components we have created and the other components provided natively by React and react-bootstrap. In addition, we are importing the authentication context and the axios instance that we have defined in the previous article of this series. - The JobSelector function definition and the selection handlers
This section defines the function and defines the different variables that are needed to get the authentication context, handle the states and define the functions that are passed to the LibrarySelector and TableSelector components. - Within the function, the React hook to extract the list of libraries
This section handles the request to get the list of libraries. It checks if the user is authenticated and has a CSRF token. Then it calls a SAS Viya Job to extract the list of libraries. When the data is retrieved from SAS Viya, the data is passed to the libraries state. - Within the function, the React hook to extract the list of tables
This section handles the request to get the list of libraries. It checks if the user is authenticated. Then it calls a SAS Viya Job to extract the list of libraries. When the data is retrieved from SAS Viya, the data is passed to the tables state. - The return statement of the JobSelector function
This section defines the layout of the JobSelector component that we will use in next stage. As you can, see the TableSelector will only be enabled when the user has selected a library. The same applies to the Display button which will be only enabled when the user has selected a table. - The export statement
This section is closing the function and exporting the component for later use.
Jobs page
Now that all the components are created, it it time to update the Jobs.js file under pages directory. Once again the file has multiple sections:
- The import statements
As earlier, we are here importing all the components that are used in the page. - The Jobs function definition
- Within the function, the React hook to validate the authentication
The React hook checks whether the user is authenticated or not. If he is not, he is routed to the logon page. - Within the function, the React hook to handle the CSRF token
To execute SAS Viya jobs from the web, a CSRF token is required. The SAS Job Execution service has a specific CSRF endpoint to generate the token. This hook checks wether a CSRF token already exists and generate one if needed. - Within the function, the React hook to get the data for the table
This hook calls the SAS Viya job to get the data that will be displayed in the table. It needs therefore to pass the CSRF token. - The function handling the selection
In order to refresh the components, the states for the table data and for the selection are updated. As a side effect, the components are updated and effect hooks are triggered. - The return statement of the Jobs function
- The export statement
We have now a fully functional page that will get data from a SAS Viya Job. At this stage, you most probably would like to view the SAS code for the job!
SAS Viya Job
For this web application, I've made the choice to create a single job. The job will return data in the form of a JSON object. Depending on the parameters that will be passed, the job will return different results:
- a list of libraries
- a list of tables
- columns and rows to build a table
I've created three different macros for each purpose:
- getLibraries
- getTables
- getData
A fourth macro named execute acts as a wrapper.
Here is the SAS code:
In this application, the SAS Viya Job has been created in SAS Studio and saved as /gelcontent/Demo/VISUAL/Jobs/extractData. If you saved it in another location, please don't forget to update the different hooks that are calling the job.
The job has been created with the following parameters:
If you need more information about SAS Viya Jobs and how to create a job using SAS Studio, please refer to Create a SAS Viya Job with a prompt using Task Prompts.
Specific considerations
When building an application that is based on SAS Viya Jobs, you should keep in mind that by default each call to the job will spin up a SAS Compute Server. As a result, your application may feel a bit slow in Viya 4. In Viya 3, starting a SAS Compute Server was a matter of milliseconds. With Viya 4, a new Kubernetes node needs to be started and this process may take a bit more time than just starting the compute server. Starting with Viya 2020.1.4, it is possible to configure a pool of available servers. This new functionality gives the opportunity to the SAS Viya Administrator to specify the number of Compute Servers which should be always available for processing. This option can be set on the SAS Job Execution compute context in order to pre-start a number of compute servers to reduce the lag between the user request from the web application and the server sending the response.
Conclusion
In this article, we've seen how to create reusable components. It will reduce the lines of code for the other articles in the series. We have also seen that with a few lines of SAS code, we can extract data from the SAS Viya environment using SAS Viya Jobs. You also learned that starting with Viya 2020.1.4, the performance can be improved by configuring a pool a compute servers.
The code for this article can be downloaded here.
This article is the third one in the Develop web applications series:
- Present the options for extracting data
- Build a React application
- Build a web application using SAS Viya Jobs (this article!)
- Build a web application using SAS Cloud Analytic Service
- Build a web application using SAS Compute Server
- Build a web application using SAS Micro Analytic Service
Find more articles from SAS Global Enablement and Learning here.
