Giter Site home page Giter Site logo

jiridostal / vulnerability-ui Goto Github PK

View Code? Open in Web Editor NEW

This project forked from janelznic/vulnerability-ui

0.0 2.0 0.0 11.02 MB

Vulnerability User Interface

License: Apache License 2.0

Dockerfile 0.23% JavaScript 96.22% CSS 2.45% HTML 1.10%

vulnerability-ui's Introduction

Build Status GitHub release

Vulnerability UI

Important note: This is just a draft/experiment.

Getting Started

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

Run developer setup

  1. Use https://github.com/RedHatInsights/insights-proxy/blob/master/scripts/patch-etc-hosts.sh to patch your /etc/hosts

  2. docker-compose up

    • starts webpack bundler and serves the files with webpack dev server
    • every code change will be visible inside container immediately

Testing

  • Travis is used to test the build for this code.
    • npm run test will run linters and tests

Deploying

  • any push to the master branch will deploy to the vulnerability-ui-build ci-beta branch
  • any push to the ci-stable branch will deploy to the vulnerability-ui-build ci-stable branch
  • any push to the qa-beta branch will deploy to the vulnerability-ui-build qa-beta branch
  • any push to the qa-stable branch will deploy to the vulnerability-ui-build qa-stable branch
  • any push to the prod-beta branch will deploy to the vulnerability-ui-build prod-beta branch
  • any push to the prod-stable branch will deploy to the vulnerability-ui-build prod-stable branch
  • Pull requests (based on master) will not be pushed to the vulnerability-ui-build master branch
    • If the PR is accepted and merged, master will be rebuilt and will deploy to the vulnerability-ui-build ci-beta branch

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

9eb7991... Update Travis release scripts and alter publicPath for "production" build when branch is beta. (#50)

vulnerability-ui's People

Contributors

chambridge avatar iphands avatar janelznic avatar jharting avatar jiridostal avatar karelhala avatar ryelo avatar semantic-release-bot avatar

Watchers

 avatar  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.