{"id":18620540,"url":"https://github.com/simonsobs/ocs-web","last_synced_at":"2025-11-03T12:30:21.819Z","repository":{"id":40241853,"uuid":"470963462","full_name":"simonsobs/ocs-web","owner":"simonsobs","description":"Browser-rendered control panels for OCS","archived":false,"fork":false,"pushed_at":"2024-02-02T00:27:30.000Z","size":444,"stargazers_count":3,"open_issues_count":7,"forks_count":0,"subscribers_count":26,"default_branch":"main","last_synced_at":"2024-02-02T01:32:53.644Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonsobs.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-03-17T11:21:23.000Z","updated_at":"2024-05-29T23:28:52.038Z","dependencies_parsed_at":"2023-10-15T16:18:33.346Z","dependency_job_id":"5a2dbc2b-29c5-4207-ab9a-06c1bcae52a5","html_url":"https://github.com/simonsobs/ocs-web","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsobs%2Focs-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsobs%2Focs-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsobs%2Focs-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsobs%2Focs-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonsobs","download_url":"https://codeload.github.com/simonsobs/ocs-web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239413885,"owners_count":19634330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-11-07T04:06:53.331Z","updated_at":"2025-11-03T12:30:21.787Z","avatar_url":"https://github.com/simonsobs.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ocs-web\n\n[![build](https://img.shields.io/github/actions/workflow/status/simonsobs/ocs-web/build.yaml?branch=main)](https://github.com/simonsobs/ocs-web/actions/workflows/build.yaml)\n\n## Background\n\nThis is browser-based control panel system for\n[OCS](https://github.com/simonsobs/ocs), written in Vue 3.\n\n## Project setup\n\nRun this to fetch all dependencies into the project `node_modules`\ndirectory:\n\n```\n$ npm install\n```\n\n## Development\n\n### Compiles and hot-reloads for development\n\n```\nnpm run serve\n```\n\nThis will run [vue-cli-service\nserve](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve)\nunder the hood, and you can pass additional arguments to that if you\nprotect them with `--`.  For example:\n\n```\nnpm run serve -- --port 8888 --mode production\n```\n\n### Compiles and minifies for production\n\nTo compile for production into the `dist/` directory:\n\n```\nnpm run build\n```\n\n### Lints and fixes files\n\n```\nnpm run lint\n```\n\n### Customize Vue configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n\n## Configuration\n\nThere are two ways to configure pre-set crossbar server connections, which\nusers can then select in the ocs-web interface. These configurations are not\nstrictly required, since there is always a \"custom\" field, which users can enter\nconnection details into. In practice, they are quite useful.\n\n### config.json\n\nYou can setup OCS configs by editing `public/config.json`, prior to\nbuild. After build, you can alter `dist/config.json`.\n\nIn the nginx docker image, you can mount a `config.json` to\n`/app/dist/config.json`.\n\nThe schema for config.json is like this::\n\n```\n{\"crossbars\": [\n    {\"name\": \"ocs-8001\",\n     \"url\": \"ws://localhost:8001/ws\",\n     \"realm\": \"test_realm\",\n     \"addr_root\": \"observatory\"},\n    {\"name\": \"ocs-8002\",\n     \"url\": \"ws://localhost:8002/ws\",\n     \"realm\": \"test_realm\",\n     \"addr_root\": \"platform2\"}\n    ]\n}\n```\n\nNote that `realm` and `addr_root` are optional, and will default to\nvalues `test_realm` and `observatory`.\n\nLimited custom skinning can be added to a crossbar configuration.  For\nexample:\n\n```\n{\"crossbars\": [\n    {\"name\": \"ocs-8001\",\n     \"url\": \"ws://localhost:8001/ws\",\n     \"realm\": \"test_realm\",\n     \"addr_root\": \"observatory\",\n     \"styling\": {\n       \"banner\": \"My OCS\",\n       \"background\": \"#ff8888\"}\n    }\n  ]\n}\n```\n\nThe text in `banner` will appear in the top banner bar, instead of a\nstring constructed from the \"name\".  The color specified for\n`background` will be used to fill the top banner bar and the side bar\n(clickable Agent listing).\n\n\n### Environment variables\n\n**Note:** This method isn't supported when using the pre-built docker image.\n\nPlace configuration into `.env.local` before building. (See\nhttps://cli.vuejs.org/guide/mode-and-env.html#environment-variables\nfor general info.)\n\n#### `VUE_APP_OCS_ADDRS`\n\nThis variable carries zero or more \"OCS configs\".  Each \"OCS config\"\nis defined by a name (e.g. \"My OCS\"; this is only used in this\napplication), the URL of the WAMP router's websocket server\n(e.g. \"ws://example.com/crossbar/ws\"), the WAMP realm\n(e.g. \"ocsrealm\"), and the OCS \"address root\" (e.g. \"observatory\").\n\nEach OCS config is constructed by joining those four things together\nwith commas; multiple OCS configs are separated by semicolons.  So the\nresult should look like this:\n\n```\nVUE_APP_OCS_ADDRS=My OCS,ws://example.com/crossbar/ws,ocsrealm,observatory\n```\n\n(If 3 or fewer tokens are specified, then the address root defaults to\n\"observatory\"; if only 2 tokens are specified then the realm defaults\nto \"test_realm\".)\n\nHere's a multi-config example:\n```\nVUE_APP_OCS_ADDRS=Lab1,ws://localhost:8001/ws,test_realm;Lab2,ws://localhost:8002/ws,test_realm,platform2\n```\n\n(In addition to these \"static\" OCS configs, the \"custom\" config is\nalways available in the interface, and cookies are used to keep a\nuser's custom URL and realm saved in their browser.)\n\n## Docker\n\nThe Dockerfile in this directory will produce an image that serves the built\nproduct from `npm run build` via an nginx server.\n\nTo build the image and tag it as \"ocs-web\":\n```\ndocker build -t ocs-web .\n```\n\nTo launch the image as a test:\n```\ndocker run -p 8080:80 --rm ocs-web\n```\n\nThen browse to http://localhost:8080/\n\nHere is a docker-compose.yaml that declares a service running the\nocs-web image and mounts in a configuration file:\n```\nversion: '2'\nservices:\n  ocs-web-1:\n    image: ocs-web\n    ports:\n      - 8080:80\n    volumes:\n      - ./config.json:/app/dist/config.json:ro\n```\n\n# Development tips\n\n## Mocking Jagent\n\nFor development in cases where you can't run the real agent, you can\nrun a dummy agent with an interface specified in a yaml file.  See the\ndocstring header in agent/agent.py, and any yaml definition files in\nthat directory for configuration examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsobs%2Focs-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonsobs%2Focs-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsobs%2Focs-web/lists"}