Merge pull request #11 from RedHatInsights/enhancements/pf4-layout-up…

…date

Enhancements/pf4 layout update

package.json

@@ -3,6 +3,7 @@
   "version": "0.2.0",
   "private": false,
   "dependencies": {
+    "@patternfly/patternfly-next": "^1.0.36",
     "@patternfly/react-core": "1.11.0",
     "@red-hat-insights/insights-frontend-components": "^3.8.0",
     "classnames": "^2.2.5",

src/PresentationalComponents/GaugeWidget/GaugeWidget.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { Gauge } from '@red-hat-insights/insights-frontend-components';
+import classNames from 'classnames';
+import propTypes from 'prop-types';
+
+import './_ins-c-gauge-widget.scss';
+
+/**
+ * A smart component that handles all the api calls and data needed by the dumb components.
+ * Smart components are usually classes.
+ *
+ * https://reactjs.org/docs/components-and-props.html
+ * https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43
+ */
+class GaugeWidget extends Component {
+
+    render () {
+        // set the change to positive by default, unless defined as negative
+        // effect sets color on metrics, eg. negative = red, otherwise default = green
+        let effect = this.props.negative ? 'ins-m-negative' : '';
+        // set change arrow icon set to increase by default, unless defined as decrease
+        // changeIndicator sets icon to `up` or `down`, eg. default = up, decrease = down
+        let changeIndicator = this.props.decrease ? 'down' : 'up';
+
+        const gaugeWidgetClasses = classNames(
+            this.props.className,
+            'ins-c-gauge-widget'
+        );
+
+        const changeClasses = classNames(
+            'ins-c-gauge-widget__metrics-change',
+            effect
+        );
+
+        return (
+            <div className={gaugeWidgetClasses} id={this.props.id}>
+                <div className='ins-c-gauge-widget__graph pf-u-text-align-center'>
+                    <div className='ins-c-gauge-widget__metrics'>
+                        <div className='ins-c-gauge-widget__metrics-percentage'>
+                            {this.props.value}%
+                        </div>
+                        <div className={changeClasses}>
+                            <span className='ins-c-gauge-widget__metrics-change-text'>
+                                {this.props.changeValue}% <i className={`fas fa-caret-${changeIndicator}`}></i>
+                            </span>
+                            <span className='ins-c-gauge-widget__metrics-change-timeframe'>
+                                Last {this.props.timeframe} days
+                            </span>
+                        </div>
+                    </div>
+                    <Gauge
+                        label={this.props.label} value={this.props.value} width={this.props.width}
+                        flipFullColors={this.props.flipFullColors} height={this.props.height}
+                        identifier={this.props.identifier}>
+                    </Gauge>
+                </div>
+                <div className='ins-c-gauge-widget__legend'>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default GaugeWidget;
+
+GaugeWidget.propTypes = {
+    children: propTypes.any.isRequired,
+    className: propTypes.string,
+    id: propTypes.string,
+    height: propTypes.number,
+    identifier: propTypes.string,
+    label: propTypes.string,
+    value: propTypes.number,
+    width: propTypes.number,
+    negative: propTypes.bool,
+    changeValue: propTypes.string,
+    decrease: propTypes.bool,
+    flipFullColors: propTypes.bool,
+    timeframe: propTypes.string
+};

src/PresentationalComponents/GaugeWidget/_ins-c-gauge-widget.scss

@@ -0,0 +1,200 @@
+@import '~@patternfly/patternfly-next/sass-utilities/all';
+
+// Gauge widget layout
+.ins-c-gauge-widget {
+  --ins-c-gauge--Width:                                     #{pf-size-prem(200px)};
+  --ins-c-gauge--Height:                                    #{pf-size-prem(200px)};
+
+  // Gauge widget first-child
+  --ins-c-gauge-widget__graph--Width:                       #{pf-size-prem(200px)};
+  --ins-c-gauge-widget__graph--MarginRight:                 var(--pf-global--spacer--md);
+
+  // Legend
+  --ins-c-gauge-widget__legend--FlexBasis--sm:              #{pf-size-prem(140px)};
+  --ins-c-gauge-widget__legend--FlexBasis:                  #{pf-size-prem(160px)};
+
+  // Legend list
+  --ins-c-gauge-widget__legend-list--MarginTop:             var(--pf-global--spacer--sm);
+  --ins-c-gauge-widget__legend-list--MarginBottom:          var(--pf-global--spacer--sm);
+
+  // Count
+  --ins-c-gauge-widget__legend-list-count--Color:           var(--pf-global--Color--100);
+  --ins-c-gauge-widget__legend-list-count--MarginRight:     var(--pf-global--spacer--sm);
+  --ins-c-gauge-widget__legend-list-count--FlexBasis:       auto;
+
+  // Legend items
+  --ins-c-gauge-widget__legend-item--MarginTop:             var(--pf-global--spacer--md);
+
+  // Percentage
+  --ins-c-gauge-widget__metrics-percentage:                 var(--pf-global--FontSize--4xl);
+
+  // Change items
+  --ins-c-gauge-widget__metrics-change-text--MarginRight:   var(--pf-global--spacer--sm);
+
+  // Timeframe
+  --ins-c-gauge-widget__metrics-change-timeframe--Color:    #{$pf-color-black-500};
+
+
+  // ==================================================================
+  // Modifiers
+  // ==================================================================
+
+  // Affect - positive
+  --ins-c-guage-widget__metrics-change--m-positive: var(--pf-global--success-color--100);
+
+  // Affect - negative
+  --ins-c-guage-widget__metrics-change--m-negative: var(--pf-global--danger-color--100);
+
+  // Legend - emphasis
+  --ins-c-gauge-widget__legend--m-emphasis--FontSize: var(--pf-global--FontSize--2xl);
+
+  // Legend - dark text
+  --ins-c-gauge-widget__legend--m-dark--Color: #{$pf-color-black-500};
+
+  // Legend - list item padding
+  --ins-c-gauge-widget__legend-list-item--m-special--MarginBottom: var(--pf-global--spacer--md);
+
+
+  // Base styling
+  display: flex;
+  flex-flow: row wrap;
+
+  // @mobile only
+  @media screen and (max-width: $pf-global--breakpoint--sm) {
+    justify-content: center;
+  }
+
+  @media screen and (min-width: $pf-global--breakpoint--lg) {
+    flex-wrap: nowrap;
+  }
+}
+
+
+// ==================================================================
+// Graph
+// ==================================================================
+
+.ins-c-gauge-widget__graph {
+  display: grid;
+  flex: none;
+  justify-self: center;
+  margin-right: var(--ins-c-gauge-widget__graph--MarginRight);
+
+  // @desktop
+  @media screen and (min-width: $pf-global--breakpoint--sm) {
+    justify-self: left;
+    width: var(--ins-c-gauge-widget__graph--Width);
+  }
+
+  // not sure why gauge container is larger than the gauge itself,
+  // would like to figure that out
+  svg {
+    margin-top: -16px;
+    margin-left: -25px;
+  }
+}
+
+
+// ==================================================================
+// Metrics
+// ==================================================================
+
+.ins-c-gauge-widget__metrics {
+  grid-area: 1 / 1;
+  align-self: center;
+  justify-self: center;
+}
+
+// Percentage
+.ins-c-gauge-widget__metrics-percentage {
+    font-size: var(--ins-c-gauge-widget__metrics-percentage);
+}
+
+// Change
+.ins-c-gauge-widget__metrics-change {
+  // Positive change
+  color: var(--ins-c-guage-widget__metrics-change--m-positive);
+
+  // Negative change
+  &.ins-m-negative {
+    color: var(--ins-c-guage-widget__metrics-change--m-negative);
+  }
+}
+
+// Text
+.ins-c-gauge-widget__metrics-change-text {
+  margin-right: var(--ins-c-gauge-widget__metrics-change-text--MarginRight);
+}
+
+// Timeframe
+.ins-c-gauge-widget__metrics-change-timeframe {
+  color: var(--ins-c-gauge-widget__metrics-change-timeframe--Color);
+}
+
+
+// ==================================================================
+// Legend
+// ==================================================================
+
+.ins-c-gauge-widget__legend {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 0 var(--ins-c-gauge-widget__legend--FlexBasis--sm);
+  align-self: center;
+
+  @media screen and (min-width: $pf-global--breakpoint--md) {
+    flex-basis:  var(--ins-c-gauge-widget__legend--FlexBasis);
+  }
+
+  > * + * {
+    margin-top: var(--ins-c-gauge-widget__legend-item--MarginTop);
+  }
+
+  // Modifier - emphasis, large text
+  .ins-m-emphasis {
+    font-size: var(--ins-c-gauge-widget__legend--m-emphasis--FontSize);
+  }
+
+  // Modifier - dark text
+  .ins-m-dark {
+    color: var(--ins-c-gauge-widget__legend--m-dark--Color);
+  }
+}
+
+
+// List
+// ==================================================================
+
+.ins-c-gauge-widget__legend-list-item {
+  display: flex;
+  align-items: baseline;
+  margin-top: var(--ins-c-gauge-widget__legend-list--MarginTop);
+  margin-bottom: var(--ins-c-gauge-widget__legend-list--MarginBottom);
+
+  // Special cell, add bottom separation
+  &.ins-m-special {
+    margin-bottom: var(--ins-c-gauge-widget__legend-list-item--m-special--MarginBottom);
+  }  
+}
+
+// Count
+.ins-c-gauge-widget__legend-list-count {
+  margin-right: var(--ins-c-gauge-widget__legend-list-count--MarginRight);
+}
+
+// Type
+.ins-c-gauge-widget__legend-list-type {
+  color: var(--ins-c-gauge-widget__legend-list-type--Color);
+}
+
+
+// ==================================================================
+// Donut - move this to the component
+// ==================================================================
+
+.ins-c-gauge {
+  grid-area: 1 / 1;
+  width: var(--ins-c-gauge--Width);
+  height: var(--ins-c-gauge--Height);
+  overflow: hidden;
+}

src/Routes.js

@@ -22,7 +22,8 @@ const Dashboard = asyncComponent(() => import(/* webpackChunkName: "Rules" */ '.
 const InsightsRoute = ({ component: Component, rootClass, ...rest }) => {
     const root = document.getElementById('root');
     root.removeAttribute('class');
-    root.classList.add(`page__${rootClass}`);
+    root.classList.add(`page__${rootClass}`, 'pf-l-page__main');
+    root.setAttribute('role', 'main');
 
     return (<Component {...rest} />);
 };