Cockpit-react-v1 NPM

Available Scripts / Getting started

Since the project has a dependency for our own azure artifact library (@ui/cockpit-components), we need to setup the authorization for this;

Please goto the link below and then click on the 'Connect to Feed' link and follow the instructions for local authorization; https://usi.visualstudio.com/USIP/_artifacts/feed/usi-npm/Npm/@ui%2Fcockpit-components/overview

Ensure you are using Node version 14.16.1 or more to run the project.

Use Mockoon CLI to mock API (quick way to run the API)

link to Mockoon: https://github.com/mockoon/mockoon/tree/main/packages/cli#installation

Download and install Mockoon execute npm install -g @mockoon/cli
Download new Cockpit mock API from here: https://www.dropbox.com/s/ta8ozyir18qsf1m/new_cockpit_mock_version_v1.json?dl=0
execute mockoon-cli start --data "~/path/to/new_cockpit_mock_v1.json"

Use Mockoon to open API environment so that you can run the API and/or make changes

Download new Cockpit mock API from here: https://www.dropbox.com/s/ta8ozyir18qsf1m/new_cockpit_mock_version_v1.json?dl=0
Download Mockoon https://mockoon.com/download/
Install Mockoon and run Mockoon
Download new Cockpit mock API from here: https://www.dropbox.com/s/ta8ozyir18qsf1m/new_cockpit_mock_version_v1.json?dl=0
Open new Cockpit environment Click 'File', 'Open Environment' then select the downloaded API.
Run the API Click the green run icon

`npm install`

We are using our own registry so you need get authentication, run the following:

npm install -g vsts-npm-auth vsts-npm-auth -F -config .npmrc

now run: npm install

Installs all the dependencies

`npm start`

Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.\ See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.\ It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\ Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Summary of the Site and Core Components

Summary

This project is a React-based application using styled-components for theming and Keycloak for authentication. It features a customizable dashboard with various tiles that display information and charts. The layout and components are dynamically loaded based on configuration data fetched at runtime.

Core Components

App.tsx

ThemeProvider: Applies theming across the application.
KeycloakProvider: Handles authentication using Keycloak.
useEffect: Sets the document title based on configuration data.
Configured Theming: Applies default and configured theming for the application.

Layout.tsx

KeycloakContext: Provides logout functionality.
SidebarWrapper: Manages the sidebar and its contents.
BottomLinks: Provides navigation links including logout and other important pages.

SidebarWrapper.tsx

useTheme: Retrieves theme data.
useConfig: Fetches configuration data including menu items.
Sidebar: Renders the sidebar with menu items based on configuration.

Grid.tsx

DateAndWeatherWrapper: Displays date and weather information.
LogoTile: Shows the main logo.
MainGrid: Renders the main content grid.
SideGrid: Manages the layout of side elements.

MainGrid.tsx

useGrid: Fetches grid data.
useTiles: Fetches tile data.
useLayout: Fetches layout data for the grid.
ReactGridLayout: Manages the layout and arrangement of tiles within the grid.

TileController.tsx

useTile: Fetches data for individual tiles.
useComponents: Fetches component data associated with tiles.
TileComponentController: Renders components within a tile based on their type (infoBox, pieChart, chart).

TileComponentController.tsx

ComponentTypeEnum: Enum defining types of components.
Renders Components: Depending on the type, it renders InfoBox, PieChart, or Chart components with the necessary props and data.