The "wrapper" around your application!
Insights Chrome provides:
- Standard header and navigation
- Base CSS/style
- A JavaScript library for interacting with Insights Chrome
For more detailed information about chrome and what it provides, look through the detailed documentation.
You can include/use chrome in your development project by running the insights-proxy in front of your application and using the following HTML template.
<!doctype html>
<html>
<head>
<!-- your own HEAD tags -->
<esi:include src="/@@env/chrome/snippets/head.html" />
</head>
<body>
<esi:include src="/@@env/chrome/snippets/body.html"/>
</body>
</html>Then, render your application to the "root" element. With React, for instance:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import getBaseName from './Utilities/getBaseName';
ReactDOM.render(
<Router basename={ getBaseName(window.location.pathname) }>
<App />
</Router>,
document.getElementById('root')
);Insights Chrome comes with a Javacript API that allows applications to control navigation, global filters, etc.
// initialize chrome
insights.chrome.init();
// identify yourself (the application). This tells Chrome which global navigation element should be active
insights.chrome.identifyApp('advisor');There is numerous of task for building this application. You can run individual tasks or run them in batch to build the entire app or to watch files.
To run each task you have to first install dependencies npm install and then you are free to use any task as you wish.
If you want to watch file changes for each build just pass -- -w to specific task (this is not applicable to
npm run build:js:watch because it's somewhat specific).
-
Building of styles
> npm run build:sass -
Building of javascripts
> npm run build:js -
Building of javascripts and watching files when they change
> npm run watch:js -
Building of HTML partials
> npm run build:pug -
Running tests
> npm run test
-
Run build of whole application just once
> npm run build -
Watching file changes and trigger build every time something changes
> npm run start
-
Install all dependencies
> npm install -
Run build command in watch mode
> npm run watch -
Open new terminal, navigate to build directory
cd ./build -
Run the proxy
SPANDX_CONFIG={path-to-app}/profiles/local-frontend.js \ LOCAL_CHROME=true \ bash {path-to-insights-proxy}/scripts/run.sh
Where SPANDX_CONFIG can be any config for your application (here is an example for insights-frontend-starter-app), just make sure your application is running npm start in said application.
After permorming these tasks you can access ci.foo.redhat.com:1337/{bundle}/{app}, where bundle and app are defined in your local-frontend.js and observe changes as you save them.
You can have custom spandx config with all frontend apps specified if you want to, the .js file just have to export routes object with at least 2 paths
Example local-frontend.js file (aka spandx config)
/*global module*/
const SECTION = 'insights';
const APP_ID = 'starter';
const FRONTEND_PORT = 8002;
const routes = {};
routes[`/beta/${SECTION}/${APP_ID}`] = { host: `https://localhost:${FRONTEND_PORT}` };
routes[`/${SECTION}/${APP_ID}`] = { host: `https://localhost:${FRONTEND_PORT}` };
routes[`/beta/apps/${APP_ID}`] = { host: `https://localhost:${FRONTEND_PORT}` };
routes[`/apps/${APP_ID}`] = { host: `https://localhost:${FRONTEND_PORT}` };
module.exports = { routes };There are some localStorage values for you to enable debuging information or enable some values that are in experimental state. If you want to enable them call const iqe = insights.chrome.enable.iqe() for instance to enable such service. This function will return callback to disable such feature so calling iqe() will remove such item from localStorage.
Available function:
iqe- to enable some iqe functions for QE purposesinvTags- to enable experimental tags in inventoryjwtDebug- to enable debugging of JWTremediationsDebug- to enable debug buttons in remediations appshortSession- to enable short session in order to test automatic logoutsforcePendo- to force Pendo initializtionappFilter- to enable new application filter in any environment
More detailed documentation can be found in the docs section
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent