5. Management console

5.1. Introduction

This document aims to explains the ITA system's management console and how to operate it.

5.2. Overview

In the Management console, If the information for non-default menu parts are managed on the ITA database, users can create individual menus fitting the management level.
We recommend that the user contacts the product support when registering/updating or deleting individual menus.
表 5.24 Web contents menu list

No.

Menu group

Menu

1

Management console

Main menu

2

System settings

3

Menu group management

4

Menu management

5

Role/Menu link management

6

Operation deletion management

7

File deletion management

5.3. Page description

This section explains the Management console page.

5.3.1. Accessing the Management console.

The user is moved to the ITA main menu when they log in to the system successfully.
From the Main menu dash board, the user can select the Management console to move to the Management console menu group.
While in the Management console menu group, the user can access the different menus within the menu group.
Main menu

5.5. Appendix

5.5.1. Using original menus

5.5.1.1. Guide

(1) In the Menu management menu, register "Original menu files" and create a new menu.
See Original menu file samples for sample files.
Register new menu

図 5.2 Register new menu

(2) Go to the Role/Menu link management menu and give either "View" or "Edit" permissions to the users.
Role/Menu link management registration

図 5.3 Role/Menu link management registration

(3) The registered menu is displayed.

5.5.1.2. Original menu file samples

Sample①
Press the first picture and the Hello button, and an alert saying "Hello" will display.
Sample①file
Sample①

図 5.4 Sample①

Sample②
A menu similar to other ITA menus will be displayed.
Sample②file
Sample②

図 5.5 Sample②

Sample③
Creating a menu without registering a file.
Sample③

図 5.6 Sample③

5.5.2. JavaScript library information

The JavaScript libraries used by ITA are as following.

5.5.2.1. jQuery

Library that allows JavaScript codes to be written easier.

URL

https://jquery.com/

GitHub

https://github.com/jquery/jquery

License

MIT license

Version

3.5.1

 
<script src="/_/ita/lib/jquery/jquery.js"></script>

5.5.2.2. select2

Library that makes selection boxes easier to use .jQuery must be loaded seperately.

URL

https://select2.org/

GitHub

https://github.com/jquery/jquery

License

MIT license

Version

4.0.13

 
<script defer src="/_/ita/lib/select2/select2.min.js"></script>
<link rel="stylesheet" href="/_/ita/lib/select2/select2.min.css">

5.5.2.3. Ace

High-functionality text editor for Web.

URL

https://ace.c9.io/

GitHub

https://github.com/ajaxorg/ace-builds/

License

BSD license

Version

v1.5.0

モード

json,python,terraform,text,yaml

テーマ

chrome,monokai

 
<script defer src="/_/ita/lib/ace/ace.js"></script>

5.5.2.4. ExcelJS

Reads and operates spreadsheet data and styles. Also writes spreadsheets to either XLSX and JSON.

GitHub

https://github.com/exceljs/exceljs

License

MIT license

Version

4.3.0

 
<script src="/_/ita/lib/exceljs/exceljs.js"></script>

5.5.2.5. diff2html

Generates HTML differences from git diff or unified diff.

URL

https://diff2html.xyz/

GitHub

https://github.com/rtfpessoa/diff2html

License

MIT license

Version

v2.11.3

 
<script src="/_/ita/lib/diff2html/diff2html.min.js"></script>
<link rel="stylesheet" href="/_/ita/lib/diff2html/diff2html.css">

5.5.3. IT Automation JavaScript/CSS information

Information regarding JavaScript/CSS used in ITA. Can be used when displaying a page similar to ITA when creating original menus.

When used, jQuery and language files must be loaded seperately.

<script src="/_/ita/lib/jquery/jquery.js"></script>
<script>let getMessage;</script>
<script type="module">
    import {messageid_ja} from '/_/ita/js/messageid_ja.js';
    getMessage = messageid_ja();
</script>

5.5.3.1. common.js

gathers variable fns to basic functions. Required when using other ITA JavaScripts.

<script src="/_/ita/js/common.js"></script>

Main functions are as following.

5.5.3.1.1. fn.fetch

Sends requests to ITA API.

const result = await fn.fetch( URL, TOKEN, METHOD, BODY );

URL

API end point.Ommit "/api/{organization_id}/workspaces/{workspace_id}/ita".

TOKEN

Specify null for most cases. If using within Worker, fetch and give Token seperately.

METHOD

Methods, such as POST and GET. If omitted, GET.

BODY

For POST, body data. can be omitted.

Usage example

Fetch operation list.

async function operationList(){
    const result = await fn.fetch('/menu/operation_list/filter/', null, 'POST', {"discard": {"NORMAL": "0"}});
    console.log( result );
}
5.5.3.1.2. fn.xhr

Register data. ※Data can be registered with fn.fetch, but this displays a progression var when registering data.

const result = await fn.xhr( URL, FORMDATA );

URL

API Endpoint. "/menu/{menu_name_rest}/maintenance/all/.

FORMDATA

Convert registration to form data.

Useage example

Register 1 operation.

window.addEventListener('DOMContentLoaded', () => {
    registerOperation();
});

async function registerOperation(){
    // Form data
    const formData = new FormData();

    // Register data
    const regsterData = [
        {
            parameter: {
                discard: '0',
                operation_name: 'Operation name',
                scheduled_date_for_execution: '2024/12/31 00:00:00'
            },
            file: {},
            type: 'Register'
        }
    ];

    // Add Formdata to Parameter (Convert regsterData to string）
    formData.append('json_parameters', JSON.stringify( regsterData ) );

    // Register
    const result = await fn.xhr('/menu/operation_list/maintenance/all/', formData );

    console.log( result );
}

5.5.3.2. common.css

Style for basic ITA pages. Must be loaded seperately if using ITA JavaScript.

<link rel="stylesheet" href="/_/ita/css/common.css">

5.5.3.3. ui.js

Generates common ITA pages.

<script defer src="/_/ita/js/ui.js"></script>

Usage example

Screates a page with 3 tabs.

<div id="content"></div>

window.addEventListener('DOMContentLoaded', () => {
    // Target
    const $content = $('#content');

    // ui.js
    const ui = new CommonUi();

    // Menu information
    ui.info = {
        menu_info: {
            menu_name: 'Tab menu sample',
            menu_info: 'This is a tab menu sample.'
        }
    };

    // HTML within tabs
    ui.tab1 = function(){ return 'Tab1 Contents'};
    ui.tab2 = function(){ return 'Tab2 Contents'};

    // Tab definition
    // name contains the functions configured above.It will also work as a tab ID.
    // title is displayed in the tab.
    // Specify type: 'blank' and a blank tab will be created.
    const tabs = [
      { name: 'tab1', title: 'Tab １'},
      { name: 'tab2', title: 'Tab ２'},
      { name: 'tab3', title: 'Tab ３', type: 'blank'}
    ];

    // Generates HTML tab
    const tabHtml = ui.contentTab( tabs );

    // Menu title/description field
    const menuHtml = ui.commonContainer( ui.info.menu_info.menu_name, ui.info.menu_info.menu_info, tabHtml );

    // Set tabContent class to the target and set HTML
    $content.addClass('tabContent').html( menuHtml );

    // Since the 3 blank tabs have been created, we will now set the HTML seperately.
    $('#tab3').find('.sectionBody').html('Tab3 Contents');

    // Set the Tab event. Specify the name of the first opened tab to the argument.
    ui.contentTabEvent('#tab1');

    // Set the detailed menu button event
    ui.setCommonEvents();
});

5.5.3.4. table.js

Allows users to viev and edit specified parameter sheet tables.

<script defer src="/_/ita/js/table.js"></script>

const table = new DataTable( ID, MODE, INFO, PARAMS );
const $table = table.setup();

ID

Specify a unique ID.

MODE

view（basic） or history（display history）.

INFO

Menu information. Specify the information fetched in "/menu/{menuNanmeRest}/info/".

PARAMS

Specify required parameters. For more details, see the Usage examples below.

Usage example

Display a Operation list.

<div id="content"></div>

window.addEventListener('DOMContentLoaded', async () => {
    // Target
    const $content = $('#content');

    // Operation list and Menu name（REST）
    const menuNanmeRest = 'operation_list';

    // Fetch Menu information
    const info = await fn.fetch(`/menu/${menuNanmeRest}/info/`);

    // Fetch required parameters
    const params = fn.getCommonParams();
    params.menuNameRest = menuNanmeRest;

    // Create Table
    // The Table's jQuery object is returned in the table.setup().
    const table = new DataTable('operationList', 'view', info, params );
    $content.html( table.setup() );
});

5.5.3.5. dialog.js

Display Dialog.

<script defer src="/_/ita/js/dialog.js"></script>
<link rel="stylesheet" href="/_/ita/css/dialog.css">

const dialog = new Dialog( CONFIG, FUNCTIONS );
dialog.open( CONTENTS );

CONFIG

Dialog structure information.

FUNCTIONS

Function when the Dialog button is pressed.

CONTENTS

HTML of the Dialog body.

Usage example

Display Hello world and Dialog, and divide the OK and Close processes.

window.addEventListener('DOMContentLoaded', async () => {
    const flag = await helloWorld();
    if ( flag ) {
        console.log('OK!');
    } else {
        console.log('CLOSE!!')
    }
});

function helloWorld(){
    return new Promise(function( resolve ){
        // Action when the button is pressed
        const functions = {
            // Function when OK is pressed
            ok: function(){
                this.close();
                resolve( true );
            },
            // Function when Close is pressed.
            close: function(){
                this.close();
                resolve( false );
            }
        };
        // Dialog display definition
        const config = {
            // Modale position, top or center
            position: 'center',
            // Header information
            header: {
                title: 'Dialog test'
            },
            // width
            width: '640px',
            // Footer information
            footer: {
                // Button information
                button: {
                    // Link the key name same as the functions.
                    // text: Display text.
                    // action: button role（positive,restore,duplicat,warning,danger,history,normal,negative）※Only the color will change.
                    // style: Specify Style.
                    ok: { text: 'OK', action: 'default', style: 'width:160px;'},
                    close: { text: 'Close', action: 'normal'}
                }
            }
        };
        const dialog = new Dialog( config, functions );
        dialog.open('<div style="padding:24px;text-align:center;font-size:24px;">Hello World</div>');
    });
}