{"id":20337323,"url":"https://github.com/expediadotcom/haystack-ui","last_synced_at":"2025-04-11T22:42:04.496Z","repository":{"id":23663899,"uuid":"99428329","full_name":"ExpediaDotCom/haystack-ui","owner":"ExpediaDotCom","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-27T16:30:47.000Z","size":12173,"stargazers_count":111,"open_issues_count":26,"forks_count":24,"subscribers_count":18,"default_branch":"master","last_synced_at":"2023-11-07T18:38:28.698Z","etag":null,"topics":["haystack","nodejs","react","zipkin"],"latest_commit_sha":null,"homepage":null,"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/ExpediaDotCom.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":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-05T14:39:56.000Z","updated_at":"2023-11-07T18:38:28.699Z","dependencies_parsed_at":"2024-11-19T01:44:53.946Z","dependency_job_id":null,"html_url":"https://github.com/ExpediaDotCom/haystack-ui","commit_stats":null,"previous_names":[],"tags_count":16,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExpediaDotCom%2Fhaystack-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExpediaDotCom%2Fhaystack-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExpediaDotCom%2Fhaystack-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExpediaDotCom%2Fhaystack-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ExpediaDotCom","download_url":"https://codeload.github.com/ExpediaDotCom/haystack-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248493022,"owners_count":21113159,"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":["haystack","nodejs","react","zipkin"],"created_at":"2024-11-14T21:08:38.975Z","updated_at":"2025-04-11T22:42:04.469Z","avatar_url":"https://github.com/ExpediaDotCom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/ExpediaDotCom/haystack-ui.svg?branch=master)](https://travis-ci.org/ExpediaDotCom/haystack-ui)\n[![Coverage Status](https://coveralls.io/repos/github/ExpediaDotCom/haystack-ui/badge.svg?branch=master)](https://coveralls.io/github/ExpediaDotCom/haystack-ui?branch=master\u0026service=github)\n\n\u003cimg src=\"/public/images/assets/logo_with_title_transparent.png\" width=\"300\" /\u003e\n\n# Haystack-UI\n\nHaystack-ui is the web UI for haystack. It is the central place for visualizing processed data from various haystack sub-systems.\nVisualization tools in haystack-ui include -\n\n|                             Traces                             |\n| :------------------------------------------------------------: |\n| Distributed tracing visualization for easy root cause analysis |\n|  ![Trace Timeline](./public/images/assets/trace_timeline.png)  |\n\n|                        Trends                         |\n| :---------------------------------------------------: |\n| Visualization of vital service and operation trending |\n|     ![Trends](./public/images/assets/trends.png)      |\n\n|                           Service Graph                            |\n| :----------------------------------------------------------------: |\n| Real time dependency graph with health and connectivity indicators |\n|     ![Service Graph](./public/images/assets/service_graph.png)     |\n\n|               Alerts and Anomaly Detection                |\n| :-------------------------------------------------------: |\n| UI for displaying, configuring, and subscribing to alerts |\n|       ![Alerts](./public/images/assets/alerts.png)        |\n\n|                         Universal Search                         |\n| :--------------------------------------------------------------: |\n|     Intuitive, sandbox-style searching for accurate results.     |\n| ![Universal Search](./public/images/assets/universal_search.png) |\n\n## Development\n\nIt is a expressjs based single page client side app written in ES6 + React and using Mobx for data flow.\n\n### Pre-requisites\n\nEnsure you have `node \u003e= 10.0` and `npm \u003e= 6.0` installed.\n\nClone the repository including recursive submodules:\n\n```\n$ git clone --recurse-submodules https://github.com/ExpediaDotCom/haystack-ui.git\n$ cd haystack-ui\n```\n\nIf the repository was already cloned, you can initialize and update submodules with `git submodule update --init --recursive`\n\n### Build and Run\n\nThis application uses [webpack](https://webpack.github.io/) for building + bundling resources. To run in developer mode with client and server side hotloading, use:\n\n```\n$ npm install                # install dependencies\n$ npm run start:dev          # start server in dev mode with hotloading\n```\n\nOnce start is successful you can visit [http://localhost:8080/](http://localhost:8080/)\n\nFor running in production mode, use:\n\n```\n$ npm install                # install dependencies\n$ npm run build              # run tests(with coverage), build client side code and emit produciton optimized bundles\n$ npm start                  # start node server\n```\n\n#### Autoformatting in your favorite IDE with Prettier Integration\n\nThis projects supports auto-formatting of source code! Simply find your favorite IDE from the list in the following list: https://prettier.io/docs/en/editors.html\n\nFor VSCode support, perform the following steps:\n\n-   Launch VS Code Quick Open (Ctrl+P)\n-   Paste the following command, and press enter:\n\n```\next install esbenp.prettier-vscode\n```\n\nThis projects has a pre-configured `.vscode/settings.json` which enables format on save. Auto-formatting should execute everytime you save a file.\n\nPrettier is also configured to run in a pre-commit hook to make enforcing consistency of source code between developers easy.\n\n## Testing\n\nHaystack-ui utilizes [Mocha](https://github.com/mochajs/mocha) as it's testing framework, with [Chai](https://github.com/chaijs/chai) as the assertation library, [Enzyme](https://github.com/airbnb/enzyme) for utility, and [JSDOM](https://github.com/tmpvar/jsdom) as a headless browser for rendering React components.\n[ESLint](https://github.com/eslint/eslint) is used as a linter and insurance of code quality.\n\nTo run the test suite, enter the command `npm test`.\n\nTo check code coverage, run `npm run coverage` and open the generated index.html in the created coverage folder\n\n**Note**-\nYou may have to install Cairo dependencies separately for tests to work.\n\n-   **OS X Users** : `brew install pkg-config cairo pango libpng jpeg giflib`\n    -   _NOTE_: If you run into `Package libffi was not found in the pkg-config search path.` errors while running `npm install`, you will need to addtionally run the following command: `export PKG_CONFIG_PATH=\"${PKG_CONFIG_PATH}:/usr/local/opt/libffi/lib/pkgconfig\"`\n-   **Others**: Refer [https://www.npmjs.com/package/canvas#installation](https://www.npmjs.com/package/canvas#installation)\n\n### Docker\n\nWe have provided `make` commands to facilitate building. For creating docker image use -\n\n```\n$ make all\n\n```\n\n## Configuration\n\nHaystack UI can be configured to use one or more stores, each providing user interface for one subsystem in Haystack. Based on what subsystems you have available in your haystack cluster, you can configure corresponding stores and UI will adapt to show interfaces only for the configured subsystems.\nFor more details on this refer - [https://github.com/ExpediaDotCom/haystack-ui/wiki/Configuring-Subsystem-Connectors](https://github.com/ExpediaDotCom/haystack-ui/wiki/Configuring-Subsystem-Stores)\n\n## Haystack-ui as drop-in replacement for Zipkin UI\n\nIf you have an existing zipkin cluster you can use haystack UI as a drop-in replacement for zipkin's UI.\nFor more details on this refer - [https://github.com/ExpediaDotCom/haystack-ui/wiki/Configuring-Subsystem-Connectors#using-haystack-ui-as-replacement-for-zipkin-ui](https://github.com/ExpediaDotCom/haystack-ui/wiki/Configuring-Subsystem-Connectors#using-haystack-ui-as-replacement-for-zipkin-ui)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpediadotcom%2Fhaystack-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexpediadotcom%2Fhaystack-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpediadotcom%2Fhaystack-ui/lists"}