Git Product home page Git Product logo

ros-frontend's Introduction

Resource Optimization Service (Frontend)

Resource Optimization is a service that can help you optimize your public cloud workloads on Red Hat Enterprise Linux (RHEL). Read more about it here

Prerequisites

Install

Setup Development Environment

  1. Clone below repositories:
git clone https://github.com/RedHatInsights/insights-chrome.git
git clone https://github.com/RedHatInsights/insights-proxy.git
git clone https://github.com/RedHatInsights/ros-frontend.git
git clone https://github.com/RedHatInsights/ros-backend.git

Note that below file paths are based on assumption that all repositories are cloned in same folder.

  1. Make sure you meet the prerequisites mentioned in both frontend and backend repositories.

  2. To run the whole dev setup, you will need to run commands in multiple terminal tabs.

[TAB 1] Insights Proxy TAB - Follow steps from here i.e

cd ../insights-proxy
npm install
sudo bash scripts/patch-etc-hosts.sh
bash scripts/update.sh

[TAB 2] Insights Chrome TAB - Wait for insights-proxy to finish update script then follow steps from here i.e

cd ../insights-chrome
npm install
npm run build

Open new tab [TAB 3]: ie. for ros-frontend (In case of local ros-backend server)

Make sure current directory is ros-frontend. Open the project in any editor. Add below route change in the file ros-frontend/profiles/local-frontend.js after routes[/apps/${APP_ID}]

routes['/api/ros/v0']                = { host: 'http://localhost:8000' };
routes['/api/inventory/v1']          = { host: 'http://localhost:8001' };

Go to [TAB 1] : Make sure current directory is insights-proxy Run command -

SPANDX_CONFIG=../ros-frontend/profiles/local-frontend.js sh scripts/run.sh

[TAB 3] ROS Frontend TAB - Wait till the above steps finish their execution.

cd ../ros-frontend
npm install
npm run start
  1. Follow the steps mentioned under the ros-backend repository for setting up local backend server.

  2. Once both frontend & backend setup is up and running, go to browser and access it using https://{ci/qa}.foo.redhat.com:1337/insights/ros link.

Running the Tests

Tests can be executed with:

npm run test

Few tests are Snapshot tests used to verify that current test output matches a snapshot taken before. If these changes are legitimate, the snapshots need to be updated with:

npm run test -- -u

Running the lint

// to run lint
npm run lint

// to fix lint errors
npm run lint:js:fix

Deployment

Please refer this link

Documentation

Technology

Major Dependencies used in the Project

Insights-Proxy

insights-proxy - Proxy for the insights frontend container

Spandx

spandx is an HTTP switchboard. It can be used to weave together pieces of a large, complex website by choosing which resources should come from the local system and which should come from a remote environment.

For example, spandx can be pointed to production, but route /static/js to a local directory, which allows testing local JS against the production environment. Code in production, it's fun!

More technically, spandx is a flexible, configuration-based reverse proxy for local development.

Insights-Chrome

insights-chrome- The "wrapper" around your application!

Insights Chrome provides:

  • Standard header and navigation
  • Base CSS/style
  • A JavaScript library for interacting with Insights Chrome

Patternfly

PatternFly is an open source design system created to enable consistency and usability across a wide range of applications and use cases. PatternFly provides clear standards, guidance, and tools that help designers and developers work together more efficiently and build better user experiences.

Frontend-Components

Frontend-components is a monorepo of Red Hat Cloud services Components for applications in a React.js environment. This repo uses a lot of components imported from the frontend-components repo.

ros-frontend's People

Contributors

adonispuente avatar apuntamb avatar dependabot[bot] avatar epwinchell avatar fhlavac avatar gnurag avatar hyperkid123 avatar jason-rh avatar karelhala avatar kgaikwad avatar pgarciaq avatar preetiw avatar r14chandra avatar rvsia avatar saltgen avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.