UI Configurations

UI Configuration (DevOps)

UI configuration for the application

Overview

This page offers details of the DIGIT UI configuration required to enable it in any environment. Browse through the configuration details listed below:

DevOps Configuration

Build Configuration

eGov recommends CD/CI be set up before developing on top of DIGIT. This ensures that new modules can be developed and deployed in a streamlined way. DIGIT ships with CI as code as part of the DevOps repository. Run the CI installer to set up DIGIT CD/CI before developing it on DIGIT.

Step 1: Add entry in build-config.yaml file in the master branch of the forked repository. This will set up the job pipeline in Jenkins. Make sure to add the same config to the feature branch you are working on. Refer to build-config.yaml.

Add the below content for digit-ui.

# Health Frontend Build pipelines
  - name: builds/Digit-Frontend/health/workbench-ui
    build:
      - work-dir: health/micro-ui/
        dockerfile: health/micro-ui/web/workbench/Dockerfile
        image-name: workbench-ui

Step 2: Go to the Jenkins build page, select "Job Builder" and click on "Build now". This will pull the config from build_config.yaml and identify all modules that need to be built.

Step 3: Go to your Jenkins build page once the build is done. The service will appear under the repository path in which it has been added, that is, if the service is added under frontend, it will show up in the frontend section as below,

To learn more about the build and deployment process, visit:

Build & Deploy

Helmchart Configuration

Step 1: Add an entry in the helm chart of the frontend directory in the master branch of the forked DIGIT-DevOps repository.

Step 2: Deploy-as-code/helm/charts/frontend/digit-ui

Reference Directory

Environment Configuration

Step 1: Locate the following "deploy-as-code/helm/environments/unified-health-dev.yaml" in the DevOps repository of your organization.

Step 2: Add the below code block within the environment YAML file used to deploy the Works platform -

Copy


workbench-ui:
  custom-js-injection: |
    sub_filter.conf: "
      sub_filter  '<head>' '<head>
      <script src=https://egov-dev-assets.s3.ap-south-1.amazonaws.com/analytics/analytics.js type=text/javascript></script>      
      <script src={{INSERT_YOUR_AWS_BUCKET_NAME}}/globalConfigsWorkbenchDev.js type=text/javascript></script>
      ';"

Step 3: Modify the development environment sample file as per requirements.

Global Configuration

This section contains the configuration that applies globally to all UI modules. These need to be configured before the configuration of service-specific UI.

Steps to create a globalconfig.js file:

Create a config file (globalconfigs.js) with the below-mentioned config (refer to code below).
Configure all the images/logos required in the S3 and add links as footerBWLogoURL , footerLogoURL.
Mention the state tenant ID as stateTenantId.
If any User roles have to be made invalid add as invalidEmployeeRoles.
Then push this global config file into your S3 bucket as globalconfigs.js
Mention the globalconfig file URL in your Environment config.

Copy:


 var globalConfigs = (function () {
  var stateTenantId = '<<INSERT_INSTANCE_TENANT_ID>>'
  var contextPath = 'workbench-ui';
  var configModuleName = 'commonMuktaUiConfig';
  var centralInstanceEnabled = false;
  var localeRegion = "IN";
  var localeDefault = "en";
  var mdmsContext = "egov-mdms-service";
  var footerBWLogoURL = '{{INSERT_YOUR_AWS_BUCKET_NAME}}/digit-footer-bw.png';
  var footerLogoURL = '{{INSERT_YOUR_AWS_BUCKET_NAME}}/digit-footer.png';
  var digitHomeURL = 'https://www.digit.org/';
  var hrmsContext = "health-hrms";
  var projectContext= "health-project";
  var invalidEmployeeRoles = ["CBO_ADMIN", "ORG_ADMIN", "ORG_STAFF", "SYSTEM"]
  var getConfig = function (key) {
    if (key === 'STATE_LEVEL_TENANT_ID') {
      return stateTenantId;
    }
    else if (key === 'ENABLE_SINGLEINSTANCE') {
      return centralInstanceEnabled;
    } else if (key === 'DIGIT_FOOTER_BW') {
      return footerBWLogoURL;
    } else if (key === 'DIGIT_FOOTER') {
      return footerLogoURL;
    } else if (key === 'DIGIT_HOME_URL') {
      return digitHomeURL;
   } else if (key === 'CONTEXT_PATH') {
      return contextPath;
    } else if (key === 'UICONFIG_MODULENAME') {
      return configModuleName;
    } else if (key === "LOCALE_REGION") {
      return localeRegion;
    } else if (key === "LOCALE_DEFAULT") {
      return localeDefault;
    } else if (key === "MDMS_CONTEXT_PATH") {
      return mdmsContext;
    } else if (key === "PROJECT_SERVICE_PATH") {
      return projectContext;
    } else if (key === "HRMS_CONTEXT_PATH") {
      return hrmsContext;
    } else if (key === "MDMS_V2_CONTEXT_PATH") {
      return mdmsContext;
    } else if (key === "MDMS_V1_CONTEXT_PATH") {
      return mdmsContext;
    } if (key === 'INVALIDROLES') {
      return invalidEmployeeRoles;
    }
  };
  return {
    getConfig
  };
}());

AWS S3 Bucket Configuration

The S3 bucket has to be configured by the DevOps team, to store all the assets being used in the application like Logos, globalConfigs, etc.

Steps to create a new AWS Bucket -

Create a new AWS S3 Bucket
Update the Bucket Policy with the following content, to make the bucket public

Copy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::works-dev-asset/*"
        }
    ]
}

Update the Cross-Origin Resource Sharing (CORS) configuration with the following content

Copy:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

To proxy the same bucket in any environment and make the necessary changes in the environment.yaml file located in the DevOps repository's configmaps under egov-config, follow the steps below:
- Add the s3-assets-bucket: "pg-egov-assets"

Copy:

 configmaps:
    egov-config:
      data:
        s3-assets-bucket: "(pg-egov-assets|egov-playground-assets|egov-uat-assets)"

After adding the proxy in the environment file, restart the s3-proxy build in the environment with config enabled.

PreviousConfiguration NextSteps to Enable a New Campaign Type in Console

Was this helpful?