Slurm Script Generator

The page contains detailed instructions on how to modify/add changes to the Slurm Script Generator

Overview

The Slurm Script Generator is very useful for the HPC users to generate the Slurm script(resource request) by filling out the form in Slurm Script Generator.

If you want to make any changes to the form, you need to have the following repositories in your local workstation

Clone the Repository

Make sure that the SSH key is set up between your local machine and the remote GitLab Server. Refer to the page → Setting Up GitLab on how to connect and setup SSH keys.

URLs for docs-ui and docs-site GitLab repositories.

Folder

GitLab URL

docs-ui

https://gitlab.nmsu.edu/hpc/hpc-antora-ui

docs-site

https://gitlab.nmsu.edu/hpc/docs-site
To clone the repository using SSH, follow the below steps.
1. In the GitLab repository, select Clone and then copy the Clone with SSH URL.
2. Then, type the following command in your local machine.
  
  Syntax :
```
git clone <clone with SSH URL>
```

The below section reviews the docs-ui and docs-site folders and how it renders the Slurm script generator in the website.

The Docs-site Folder

The page responsible for generating the Slurm script is located in the following path, ./content/home/tools/slurm-script-generator.adoc in the docs-site folder. The page slurm-script-generator.adoc has the following contents.

= Slurm Script Generator
:page-layout: custom-slurm-script-gen

The first line says that the title of the page will be Slurm Script Generator. The second line mentions that the page layout will be custom-slurm-script-gen. This layout is present in the docs-ui folder and discussed below.

The Slurm Script Generator can be opened from Tools → Slurm Script Generator from the Home page of HPC website.

The Docs-ui Folder

The folder structure for docs-ui is shown below.

docs-ui
|_preview-src
|_src
  |_css
  |_helpers
  |_img
  |_layouts
  |_partials
|_gulpfile.js
|_package.json
|_..

The folders which are responsible for rendering the Slurm Script Generator are layouts, partials, css and js.

Layouts & Partials

layouts
|_404.hbs
|_custom-form.hbs
|_custom-home.hbs
|_custom-slurm-script-gen.hbs
|_default.hbs

In the slurm-script-generator.adoc file, the page layout has been mentioned as custom-slurm-script-gen. Thus, Antora basically finds this specific layout from the ui-bundle.zip instead of the default layout. The other pages in the website except Home(landing page), Forms and Slurm Script Generator will have the default layout.
From the custom-slurm-script-gen layout, the corresponding partials will be loaded and content will be rendered using those partials, css, and js files.

Layout(custom-slurm-script-gen.hbs)

<!DOCTYPE html>
<html lang="en">
<head>
    {{> head defaultPageTitle='Untitled'}}
</head>
<body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
    {{> header}}
    {{> custom-body-slurm-script-gen}}
    {{> footer}}
</body>
</html>

The header of the page gets loaded from {{> header}} partial, body gets loaded from {{> custom-body-slurm-script-gen}} and the footer information is rendered using {{> footer}}. All these files are present in the partials folder.

partials
|_header.hbs
|_footer.hbs
|_body-slurm-script-gen.hbs
|_main-slurn.hbs
|_..

Check the below section for more information about these partials.

The header and footer of the Slurm Script Generator page is rendered using the header.hbs and footer.hbs.

Partials(custom-body-slurm-script-gen.hbs)

It imports the content from custom-main-slurm.hbs and renders the body.

<div class="body-slurm">
{{> nav}}
{{> custom-main-slurm}}
</div>

Partials(custom-main-slurm.hbs)

This file imports the js file from the path /js/vendor/slurm-script.js and this is where the entire logic for Slurm Script Generator is present.

<main class="article">
  {{> toolbar}}
    {{#if (eq page.layout '404')}}
    {{> article-404}}
    {{else}}
    <div class="container">
        <div id="content">
            <div id="NMSUJobScriptGenerator">
                <script src="{{uiRootPath}}/js/vendor/custom-slurm-script.js"></script>
            </div>
        </div>
    </div>
    {{/if}}
</main>

Js File

The code to generate the Slurm Script Generator dynamically is present here. If you want to make changes to the logic, this is the only file you need to modify. It’s located in the path ./src/js/custom-slurm-script.js relative to the docs-ui folder.

CSS File

Regarding CSS and styling, Antora looks for the CSS files in the ./src/css/ folder. The CSS file custom-slurm-script-gen.css is responsible for the styling aspects of the Slurm Script Generator which in the path ./src/css/ustom-slurm-script-gen.css. If you want to make changes to improve the styling, modify this file and preview your changes.

How to Preview Locally?

After identifying the files that you want to change and making the desired changes, you need to test your changes locally. To do a local preview, run the following command from the docs-ui folder.

docs-ui$ make preview

Open localhost:5252 from your browser.
Go to Content → Slurm Script Generator from the navigation pane.

Navigation

Output

Slurm Script Output

Before making any changes to Slurm Script Generator CSS and JavaScript files, create your own branch and then add/modify changes to it. To learn more about branches, committing files and Git commands, refer to → Git commands for HPC documentation

The Docs-site Integration

To integrate your Slurm Script Generator changes into the docs-site folder, follow the below steps. From your docs-ui folder, run the following command first.

docs-ui$ make build

Output:

+ gulp bundle
[17:25:58] Using gulpfile ~/Desktop/hpc/docs/docs-ui/gulpfile.js
[17:25:58] Starting 'bundle'...
[17:25:58] Starting 'clean'...
[17:25:58] Finished 'clean' after 58 ms
..
[17:26:06] Finished 'bundle:pack' after 84 ms
[17:26:06] Finished 'bundle' after 8.66 s

New UI bundle will be inside the build directory as ui-bundle.zip under the docs-ui repository.

docs-ui
|_ ui
  |_ ui-bundle.zip

After the ui-bundle is built, refer to → Publish UI changes to docs site on how to use the latest UI bundle for docs-site.

Now, preview your docs-site locally by running the following command.

docs-site$ make preview

Open localhost:3000 and go to Tools→Slurm Script Generator from the home page to preview the Slurm Script generator changes in your website locally.