— Avi 2018/07/10 02:49

As our project shares the same header with all the applications, It was decided to have one common header which could be re-used across all the application.

Usage:

First would be the configuration: (it can be inside grails config or your YAML files)

commonHeader{
  config = "ext"
  version = "1.0"
  url = "https://sfqa.errigal.com/errigal-common-header/"
}

The configuration is per environment, it is safe to use SFQA for your local development as well.

The next thing to do would be to load the header code itself.

<script src="${grailsApplication.config.commonHeader.url}/conf/${grailsApplication.config.commonHeader.config}.js"></script>
<script src="${grailsApplication.config.commonHeader.url}/commonHeader-${grailsApplication.config.commonHeader.version}.js"></script>

That should pretty much be it. The script will load the required config and JS files. These files are located within Apache(in the LB).

Available APIs

  ERRIGAL_HEADER.setAppTitle(String title);
  ERRIGAL_HEADER.setLoginUserName(String username);
  ERRIGAL_HEADER.addCSS(String customCss);
  

Available functions that you can override: (These will be called whenever you click these links)

  ERRIGAL_HEADER.home = function(){}
  ERRIGAL_HEADER.logout = function(){}
  ERRIGAL_HEADER.admin= function(){}
  ERRIGAL_HEADER.support = function(){}
  

Recipes:

To change the links in the drop down menu:

//set the following to what the App requires.
var myLink = window.ERRIGAL_HEADER.getLink('linkKey'); //use "let" in newer Apps
myLink.show = false; //etc etc
//then re-render the DOM
window.ERRIGAL_HEADER.initHeader(document.body);

To change the default config, you may have to change the actual config file being loaded:

for example: https://sfqa.errigal.com/errigal-common-header/conf/ext.js

to change the above, edit /var/www/errigal-common-header/conf/ext.js

Environment Configuration

• In the ansible scripts per customer configuration the following parameter is configured (true or false) to open the IDMS links in a new tab: openInNewWindow
• cssFileDir: ('http://0.0.0.0:8000/src/customerCss/atc.css'). Ability to specify a different css file in order to customise certain header features per customer.
• hidePoweredByLogo: true / false - determines whether the powered by logo is shown in the right hand corner

Deployment Playbooks

ansible-playbook -i ../env-configuration/nvqa/hosts deploy_common_header_config.yml --diff  --ask-vault-pass

ansible-playbook -i ../env-configuration/nvqa/hosts deploy_common_header_app.yml --diff --ask-vault-pass -e checkout=master

In order to run the header app locally and see changes applied to another Errigal application you need to specify the common header settings in the app Config.groovy / application.yml file.

Step1 - Run the header project locally using - python3 -m http.server or python -m SimpleHTTPServer 8000

Step2 - Run an Errigal App locally with the following attributes specified in the config file.

commonHeader{
  config = "atc" // customer config
  version = "2.0" // header version
  url = "http://localhost:8000/errigal-common-header/"
}