npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@redhat-cloud-services/frontend-components-inventory-patchman

v1.63.5

Published

[![Build Status](https://app.travis-ci.com/RedHatInsights/patchman-ui.svg?branch=master)](https://app.travis-ci.com/RedHatInsights/patchman-ui) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)]

Downloads

53

Readme

Build Status semantic-release GitHub release codecov Commitizen friendly

Patchman UI

Patch is one of the applications for console.redhat.com. It allows users to display and manage available patches for their registered systems. This repository containes source code for the frontend part of the application which uses the REST API available from Patchman Engine.

Getting Started

The Patchman UI is a sub application under the Red Hat insights platform with Insights chroming app as a wrapper.

There are 2 technologies used for integration with backend and deployment purposes:

  1. Insights Proxy
  2. Webpackproxy

Note: the difference is insights proxy has to be reinitialised everytime you want to develop, while webpack proxy is auto initialized when you run the command npm run start:proxy:beta.

There is a comprehensive quick start guide in the Storybook Documentation to setting up an Insights environment complete with:

Note: You will need to set up the Insights environment if you want to develop with the starter app due to the consumption of the chroming service as well as setting up your global/app navigation through the API.

Run the app for the first time

  1. git clone [email protected]:RedHatInsights/patchman-ui.git

    • clone the Patch UI into your machine
  2. npm install

  3. SPANDX_CONFIG="./config/spandx.config.js" bash $PROXY_PATH/scripts/run.sh

    • If you are using insights proxy, it is time to start it. Otherwise you can skip this step
  4. npm run start

    • use this command if you want to develop Patch UI using insights proxy. The command starts webpack bundler and serves the files with webpack dev server

npm run start:proxy:beta - use this command if you wand to develop Patch UI using webpack proxy starts webpack bundler and serves the files with webpack dev server

Testing

  • npm run verify will run linters and tests
  • Travis is used to test the build for this code.
    • You are always notified on failed builds
    • You are only notified on successful builds if the build before it failed
    • By default, both push events as well as pull_request events send notifications
    • Travis is defaulted to notify #insights-bots
    • npm run test will run only Jest tests
    • npm run test:update is used to update the test snapshots

Deploying

  • The Platform team is using Travis to deploy the application
    • The Platform team will help you set up the Travis instance if this is the route you are wanting to take

Release process

How it works

Any push to the following branches will trigger a build in patchman-ui-build repository which will deploy to corresponding environment.

| Push to branch in this repo | Updated branch in build repo | Environment | Available at | :--------------------------- | :---------------------------- | :---------------- | :----------- | master | stage-beta | stage beta | https://console.stage.redhat.com/preview | stage-stable | stage-stable | stage stable | https://console.stage.redhat.com | prod-beta | prod-beta | production beta | https://console.redhat.com/preview | prod-stable | prod-stable | production stable | https://console.redhat.com

Patternfly

Insights Components

Insights Platform will deliver components and static assets through npm. ESI tags are used to import the chroming which takes care of the header, sidebar, and footer.

Technologies

Webpack

Webpack.config.js

This file exports an object with the configuration for webpack and webpack dev server.

{
    mode: https://webpack.js.org/concepts/mode/,
    devtool: https://webpack.js.org/configuration/devtool/,

    // different bundle options.
    // allows you to completely separate vendor code from app code and much more.
    // https://webpack.js.org/plugins/split-chunks-plugin/
    optimization: {
        chunks: https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks-chunks-all,
        runtimeChunk: https://webpack.js.org/plugins/split-chunks-plugin/#optimization-runtimechunk,

        // https://webpack.js.org/plugins/split-chunks-plugin/#configuring-cache-groups
        cacheGroups: {

            // bundles all vendor code needed to run the entry file
            common_initial: {
                test: // file regex: /[\\/]node_modules[\\/]/,
                name: // filename: 'common.initial',
                chunks: // chunk type initial, async, all
            }
        }
    },

    // each property of entry maps to the name of an entry file
    // https://webpack.js.org/concepts/entry-points/
    entry: {

        // example bunde names
        bundle1: 'src/entry1.js',
        bundle2: 'src/entry2.js'
    },

    // bundle output options.
    output: {
            filename: https://webpack.js.org/configuration/output/#output-filename,
            path: https://webpack.js.org/configuration/output/#output-path,
            publicPath: https://webpack.js.org/configuration/output/#output-publicpath,
            chunkFilename: https://webpack.js.org/configuration/output/#output-chunkfilename
    },
     module: {
         rules: https://webpack.js.org/configuration/module/#module-rules
     },

     // An array of webpack plugins look at webpack.plugins.js
     // https://webpack.js.org/plugins/
     plugins: [],

     // webpack dev serve options
     // https://github.com/webpack/webpack-dev-server
     devServer: {}
}

React

  • High-Order Component

  • Smart/Presentational Components

    • Smart components have access to the redux state
    • Presentational components do not have access to the redux state
    • Smart Components === insights-frontend/app/js/states
    • Presentational Components === insights-frontend/app/js/components
  • State and lifecycle within class components

    • article contains:
      • Adding Lifecycle Methods to a Class
      • Adding Local State to a Class
      • State Updates May Be Asynchronous
      • State Updates are Merged

Redux

Store

A store holds the whole state tree of your application. Redux doesn't have a Dispatcher or support many stores. Instead, there is just a single store with a single root reducing function.

Create Store: createStore(reducer, preloadedState, enhancer)

Actions

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch(). Redux actions should only have two properties, type and payload, as a best practice.

Reducers

Reducers specify how the application's state changes in response to actions sent to the store.

Ex) /src/api/System/getSystems.js

React-redux

React-router-dom

When setting up the routes, the page content is wrapped with a .page__{pageName} class, applied to the #root ID that is determined by the rootClass in the Routes.js which lets you easily reference the page in the styling.

  • BrowserRouter
    • A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL
  • Route
  • Switch
    • Renders the first child <Route> or <Redirect> that matches the location.
  • Redirect
    • navigate to a new location
  • withRouter
    • passes updated match, location, and history props to the wrapped component whenever it renders

Running locally

Have insights-proxy installed under PROXY_PATH

SPANDX_CONFIG="./config/spandx.config.js" bash $PROXY_PATH/scripts/run.sh

Running with inventory

In order to test system detail in inventory application pull inventory UI app, install dependencies and run it

>$ npm install
>$ npm start

With our spandx config, patch and inventory running you should be able to see changes in the system detail of inventory.

Testing - jest

When you want to test your code with unit tests please use jest which is preconfigured in a way to colect codecoverage as well. If you want to see your coverage on server the travis config has been set in a way that it will send data to codecov.io the only thing you have to do is visit their website (register), enable your repository and add CODECOV_TOKEN to your travis web config (do not add it to .travis file, but trough travis-ci.org)

Run SonarQube code analysis

export SONAR_HOST_URL=https://sonar-server
export SONAR_LOGIN=paste-your-generated-token
export SONAR_CERT_URL=https://secret-url-to/ca.crt # optional
podman-compose -f dev/sonar/docker-compose.yml up --build