{"id":43052878,"url":"https://github.com/cloud-native-toolkit/ascent-ui","last_synced_at":"2026-01-31T10:38:26.706Z","repository":{"id":37099969,"uuid":"458932893","full_name":"cloud-native-toolkit/ascent-ui","owner":"cloud-native-toolkit","description":"Frontend of the Ascent tool.","archived":false,"fork":false,"pushed_at":"2025-03-21T23:14:19.000Z","size":17361,"stargazers_count":1,"open_issues_count":19,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-22T03:02:55.037Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloud-native-toolkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-13T21:11:06.000Z","updated_at":"2025-03-21T23:14:09.000Z","dependencies_parsed_at":"2025-02-28T23:32:22.341Z","dependency_job_id":null,"html_url":"https://github.com/cloud-native-toolkit/ascent-ui","commit_stats":null,"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"purl":"pkg:github/cloud-native-toolkit/ascent-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-native-toolkit%2Fascent-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-native-toolkit%2Fascent-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-native-toolkit%2Fascent-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-native-toolkit%2Fascent-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloud-native-toolkit","download_url":"https://codeload.github.com/cloud-native-toolkit/ascent-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-native-toolkit%2Fascent-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28938853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T10:18:23.202Z","status":"ssl_error","status_checked_at":"2026-01-31T10:18:22.693Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-31T10:38:26.650Z","updated_at":"2026-01-31T10:38:26.701Z","avatar_url":"https://github.com/cloud-native-toolkit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ascent UI\n\nThis repository contains the Front-End microservice of the Ascent tool (TechZone Deployer - Builder).\n\nAscent is a tool created by the IBM Ecosystem Engineering team to accelerate the adoption of IBM Software on Hybrid Cloud. Through automation and integration, Ascent enables enterprises to deliver compliant cloud architectures which can be clearly evidenced and communicated with Governance, Risk and Compliance teams.\n\nThis app has been developped using an opinionated set of components for modern web development, including:\n\n* [React](https://facebook.github.io/react/)\n* [Sass](http://sass-lang.com/)\n* [Carbon](https://www.carbondesignsystem.com/)\n\n### Configuring\n\nThere are a number of configuration options available when deploying the application.\n\n#### Application mode\n\nThe ASCENT UI has been built to run in one of two different modes: \"Builder\" and \"FS Control\". In \"FS Control\" mode, the application only shows the financial control information and mappings but none of the architecture builder content. In \"Builder\" mode, the application shows both the builder content and the financial controls content.\n\nTo change the mode for the application, provide an environment variable named `REACT_APP_MODE` with a value of either \"fs-controls\" or \"builder\". If the environment variable is empty or contains a value other than the two defined then the application will default to \"builder\" mode.\n\nIf deploying the container using the helm chart, provide the value in the `mode` variable.\n\n**Note:** The application uses the `react-inject-env` module to update the environment variable value in the built application content.\n\n### Develop on Gitpod\n\nGitpod can provide fully initialized, perfectly set-up developer environments for any kind of software project. A workspace configuration is provided in the `.gitpod.yml` file at the root of this repository. Follow these steps to get started coding on Ascent in a few minutes:\n\n1. Log in to [Gitpod](https://gitpod.io) using your GitHub account.\n2. Grant Gitpod [permissions](https://gitpod.io/integrations) to you GitHub repos\n    - In GitHub integration menu, click **Edit Permissions** and select `public_repo`.\n\n        ![Gitpod integrations](./readme-images/gitpod-permissions.png)\n\n    - In GitHub integration menu, click **Manage on GitHub** and make sure Gitpod has access to the `cloud-native-toolkit` organization.\n\n        ![Gitpod GitHub permissions](./readme-images/gitpod-org.png)\n\n3. Create the required [environment variables](https://gitpod.io/variables) for Ascent in your user settings:\n\n    ![Gitpod environment variables](./readme-images/gitpod-variables.png)\n\n4. Create your [Gitpod workspace](https://gitpod.io/workspaces) by clicking **New Workspace** then paste the URL of this repository.\n\nAter a few seconds you should be ready to code with the BFF and UI started in your workspace!\n\n### Running locally\n\n***Production like build***\n\nFirst you need to specify the configuration environment variables for AppId:\n```bash\nexport APPID_CONFIG='{\"apikey\":...,\"version\":4}'\nexport APP_URI=\"http://localhost:3000\"\n```\n\nA script has been provided to set these values automatically. Follow these steps to set up the environment:\n\n1. Log into the IBM Cloud account using the cli\n   \n    ```shell\n    ibmcloud login\n    ```\n\n2. Get the name of the AppId instance that will be used with the UI\n\n    ```shell\n    ibmcloud resource service-instances\n    ```\n\n3. Source the `scripts/setup-environment.sh` file with the name of the App Id instance\n\n    ```shell\n    source ./scripts/setup-environment.sh \"${APPID_NAME}\"\n    ```\n\nTo run your application locally:\n```bash\nnpm run build\nnpm run start\n```\n\n***Local development***\n\nTo run your application dev mode:\n```bash\nnpm run start:dev\n```\n\nYour application will be running at `http://localhost:3000`.  You can access the `/health` and `/appmetrics-dash` endpoints at the host.\n\n***How to remove the one of the design from code patterns***\n\nIf you want to remove the one of the design from the code pattern. Please follow the below procedure.\n\nThe React code pattern having segregated folder structure. Each design pattern having separate folder for Components, Models, Service,View(UI-patterns).\n\n- Remove the design files from Components, Models, Service,View(UI-patterns).\n- Every Design files having the reference in UI-Shell folder which contains UIShell and  UIShellBody files. So need to remove respective reference.\n\n### Deploying \n\nAfter you have created a new git repo from this git template, remember to rename the project.\nEdit `package.json` and change the default name to the name you used to create the template.\n\nMake sure you are logged into the IBM Cloud using the IBM Cloud CLI and have access \nto you development cluster. If you are using OpenShift make sure you have logged into OpenShift CLI on the command line.\n\n```$bash\nnpm install -g @ibmgaragecloud/cloud-native-toolkit-cli\n```\n\nUse the IBM Garage for Cloud CLI to register the GIT Repo with Tekton or Jenkins \n\n```$bash\noc sync \u003cproject\u003e --dev\noc pipeline\n```\n\nEnsure you have the Cloud-Native Toolkit installed in your cluster to make this method of pipeline registry quick and easy [Cloud-Native Toolkit](https://cloudnativetoolkit.dev/)\n\n### Authentication\n\n### App ID\n\nAuthentication to this application defaults to AppId, you therefore need to set the `$APPID_CONFIG` environment variable, with the following format (create a new application on AppID and copy/paste the configuration):\n```json\n{\n    \"clientId\": \"\u003cclientId\u003e\",\n    \"tenantId\": \"\u003ctenantId\u003e\",\n    \"secret\": \"\u003csecret\u003e\",\n    \"name\": \"\u003cname\u003e\",\n    \"oauthServerUrl\": \"\u003coauthServerUrl\u003e\",\n    \"profilesUrl\": \"\u003cprofilesUrl\u003e\",\n    \"discoveryEndpoint\": \"\u003cdiscoveryEndpoint\u003e\",\n    \"type\": \"\u003ctype\u003e\",\n    \"scopes\": \"\u003cscopes\u003e\"\n} \n```\n\n### OpenShift OAuth\n\nIf running on OpenShift you can also create your own OpenShift `OAuthClient` and use that to log in to ascent, you'll need to set the `$OCP_OAUTH_CONFIG` environment variable, with the following format:\n```json\n{\n    \"authorization_endpoint\": \"\u003cauthorization_endpoint\u003e\",\n    \"token_endpoint\": \"\u003ctoken_endpoint\u003e\",\n    \"clientID\": \"\u003cclientID\u003e\",\n    \"clientSecret\": \"\u003cclientSecret\u003e\",\n    \"api_endpoint\": \"\u003capi_endpoint\u003e\"\n} \n```\n\nThis option will allow you to use OpenShift RBAC and OpenShift users and groups to define roles for your users:\n\n```sh\noc adm groups new ascent-admins\noc adm groups add-users \u003cGROUP_NAME\u003e \u003cUSER_NAME\u003e\n...\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloud-native-toolkit%2Fascent-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloud-native-toolkit%2Fascent-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloud-native-toolkit%2Fascent-ui/lists"}