{"id":40465729,"url":"https://github.com/app-net-interface/sample-ui","last_synced_at":"2026-01-20T18:09:20.253Z","repository":{"id":241609914,"uuid":"798483859","full_name":"app-net-interface/sample-ui","owner":"app-net-interface","description":"Sample UI for visualization and connectivity workflows","archived":false,"fork":false,"pushed_at":"2025-08-01T15:55:44.000Z","size":7000,"stargazers_count":0,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-01T17:41:53.952Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/app-net-interface.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-05-09T21:48:41.000Z","updated_at":"2024-05-28T17:58:58.000Z","dependencies_parsed_at":"2025-03-23T03:21:30.713Z","dependency_job_id":"452914be-fbf6-4e44-b0f6-bc55d70e5ef8","html_url":"https://github.com/app-net-interface/sample-ui","commit_stats":null,"previous_names":["app-net-interface/sample-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/app-net-interface/sample-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-net-interface%2Fsample-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-net-interface%2Fsample-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-net-interface%2Fsample-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-net-interface%2Fsample-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/app-net-interface","download_url":"https://codeload.github.com/app-net-interface/sample-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-net-interface%2Fsample-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28608146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: 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-20T18:09:17.890Z","updated_at":"2026-01-20T18:09:20.242Z","avatar_url":"https://github.com/app-net-interface.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sample UI\n\nThis UI provides visualization of resources and interface to deploy connectivity workflows.\n\n\nIt allows you to:\n\n1. discover network domains \n2. create new network domains (stub only) \n3. create connections between two network domains\n4. view connections between network domains \n5. create SLA profiles for aforementioned connections\n\n\n# Tech stack\n\n1. React + TypeScript, redux-toolkit\n2. CRA + Craco\n3. Ant Design, ag-grid community\n4. React Router\n5. grpc\n\n# How to run\n\nYou can decide whether the app should run on stub data or on live vmanage servers. You set this in your local `.env.local` file in the root. If `REACT_APP_BUILD` is set to `live` the app will try to fetch all the data from vmanage and if it's set to `stub` it will try to access json-server with data in `src/_db/db.json`.\nIn both cases you should follow the steps bellow.\n\n1. Run `npm install` from the root folder\n2. Setup vmanage servers and Envoy proxy\n3. Setup `REACT_APP_BUILD` to desired setting\n4. To start the UI run `npm start` from the root. This starts both the actual client and stubbed data from json-server\n\nUI should be available at http://localhost:5001/\n\n\n# Building docker image\n\nTo build your image simply run\n\n```\ndocker build -t sample-ui:1.0 .\n```\n\nTo push your image to ECR registry tag it and then push\n\n```\ndocker tag sample-ui:1.0 229451923406.dkr.ecr.us-west-2.amazonaws.com/awi/sample-ui:1.0\ndocker push 229451923406.dkr.ecr.us-west-2.amazonaws.com/awi/sample-ui:1.0\n```\n\nThe current image uses nginx as a base which helped decreasing the\nimage size to 90 MB and also made it much faster to start the container\nas there is no building process during the start but rather serving\nstatic files.\n\n# Backend Calls\n\nIt is crucial to remember that JS calls implemented in this UI are not sent by the\nUI process/container but they are coming directly from the web browser or any other\nclient used by the user.\n\n![JS Calls Image](docs/js-calls.png)\n\nIn this example, the UI application serves a JS file with a\nlogic that performs a call to the backend service present within\nthe same cluster, reachable from the UI on port `:8000`. The\nproblem is that the call will be performed by the Chromium\nbrowser used by the client and so it will try to send it to\nthe localhost on port 8000 which will most likely fail (unless\nthe user uses the browser on the same host where the backend\nserver runs).\n\nSo the JS files cannot use the addressing used internally within\na server machine or a k8s cluster - these addresses must be\nreachable from the user's device.\n\nOf course, the backend service does not need to be exposed\ndirectly but it will be rather hidden behind a reverse proxy.\nIt, however, gives us another problem - the front-end application\nneeds to be aware of the public address which is used by the\nproxy. It can be solved by a few options:\n\n* using final DNS name - having an actual DNS name associated with\n    our server, we can simply hardcode it. However, it is not a\n    good solution as changing the domain will require rebuilding\n    the front-end application. Additionally, this solution works\n    only if it is expected that there will be only one instance\n    of front-end (SaaS) but if each potential customer can have his own front-end instance deployed on on-prem systems, it\n    becomes a problem (even in case of SaaS we still may want to\n    deploy separate production and testing front-end)\n\n* providing address as a runtime parameter - the second option is\n    to use a variable with the address which is set with the\n    environment variable or commandline argument. That way the\n    entire system can be deployed, the public address retrieved\n    and then the UI application restarted with modified config\n    (config-map in k8s deployment or docker-compose scripts).\n    However, using variables requires JS server which results in\n    higher image size and container start-up time. Serving static\n    JS files with NGinx image saves a lot of size and gives a\n    quick application restart - however it makes it harder to\n    use a configuration variable - such solution would require\n    either some nginx libraries/extensions or simple tools to\n    override every JS file using that address with a proper value\n    (simple sed script for instance). This solution is also\n    problematic if our public address changes quite often - it\n    would require constant front-end restarting.\n\n* do not provide an actual address\n\nThe last solution is the one we use:\n\n![JS Proxying Image](docs/proxying.png)\n\nThe approach is simple. The JS code describes only endpoints for\nbackend calls, for instance `/grpc/Clouds` rather than\n`http://myapp.net.io/grpc/Clouds`. If the address is not provided,\nthe client will use the address it used to download a particular\nJS Document.\n\nFor instance, we have entered our UI by specifying\n`127.0.0.1:8080/index.php` in the web browser. The page defines\none script that calls backend service using `/grpc` call. Since\nthe `index.php` page was downloaded from `127.0.0.1:8080` the\nsame address will be used to complete `/grpc` call giving as a\nresult the address `127.0.0.1:8080/grpc`.\n\nThis solution has a condition - both UI and the backend need\nto be reachable under the same address. For that matter, we need\na reverse proxy to push our front-end requests to the UI and our\nbackend requests to corresponding services. The front-end cannot\nbe in front as the logic above would redirect all backend calls\nback to the UI.\n\nFor that reason, we have introduced a `/grpc` prefix for all\nGRPC backend calls so that we can configure Envoy Proxy to\ndistinguish backend requests starting with `/grpc` prefix from\nthe rest of the calls that should be redirected to the UI.\n\n## Contributing\n\nThank you for interest in contributing! Please refer to our\n[contributing guide](CONTRIBUTING.md).\n\n## License\n\nsample-ui is released under the Apache 2.0 license. See\n[LICENSE](./LICENSE).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-net-interface%2Fsample-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapp-net-interface%2Fsample-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-net-interface%2Fsample-ui/lists"}