Metrics and Resource-sidebar updated to pf4 Button component

frontend/public/components/monitoring/_monitoring.scss

@@ -1,6 +1,5 @@
 .query-browser__toggle-graph {
-  padding-right: 0;
-  margin-bottom: 8px;
+  margin-bottom: 5px;
   float: right;
 }
 
@@ -10,16 +9,12 @@
 }
 
 .query-browser__clear-icon {
-  border: none;
-  color: $color-pf-black-600;
-  font-size: 18px;
-  height: 18px;
-  line-height: 18px;
-  padding: 0;
-  position: absolute;
-  right: 6px;
-  top: 6px;
-  width: 18px;
+  font-size: 18px !important;
+  padding: 4px !important;
+  position: absolute !important;
+  right: 0;
+  top: 0;
+  width: 30px;
 }
 
 .query-browser__dropdown--subtitle {
@@ -29,13 +24,10 @@
 .query-browser__expand-button {
   border: none;
   height: 30px;
-  margin-left: 18px;
-  padding: 0;
-  width: 30px;
+  padding: 0 14px !important; // align with series buttons
 }
 
 .query-browser__expand-icon {
-  color: $color-pf-black-600;
   font-size: 30px;
   vertical-align: middle;
 }
@@ -87,7 +79,7 @@
 
 .query-browser__query {
   line-height: 1;
-  margin: 0 15px;
+  margin: 0 15px 0 0;
   width: 100%;
 }
 
@@ -100,7 +92,7 @@
 }
 
 .query-browser__query-input {
-  padding-right: 24px !important;
+  padding-right: 28px !important;
   resize: vertical;
 }
 
@@ -121,9 +113,10 @@
   border: 1px solid transparent;
   border-radius: var(--pf-global--BorderRadius--sm);
   height: 20px;
+  padding: 0 !important;
   width: 20px;
   &--disabled {
-    border-color: #888;
+    border: 1px solid #888 !important;
   }
 }
 

frontend/public/components/monitoring/metrics.tsx

@@ -191,9 +191,14 @@ const ToggleGraph_ = ({ hideGraphs, toggle }) => {
   const icon = hideGraphs ? <ChartLineIcon /> : <CompressIcon />;
 
   return (
-    <button type="button" className="btn btn-link query-browser__toggle-graph" onClick={toggle}>
-      {hideGraphs ? 'Show' : 'Hide'} Graph {icon}
-    </button>
+    <Button
+      type="button"
+      className="pf-m-link--align-right query-browser__toggle-graph"
+      onClick={toggle}
+      variant="link"
+    >
+      {icon} {hideGraphs ? 'Show' : 'Hide'} Graph
+    </Button>
   );
 };
 export const ToggleGraph = connect(
@@ -263,18 +268,19 @@ const MetricsDropdown = connect(
 const ExpandButton = ({ isExpanded, onClick }) => {
   const title = `${isExpanded ? 'Hide' : 'Show'} Table`;
   return (
-    <button
+    <Button
       aria-label={title}
-      className="btn btn-link query-browser__expand-button"
+      className="query-browser__expand-button"
       onClick={onClick}
       title={title}
+      variant="plain"
     >
       {isExpanded ? (
         <AngleDownIcon className="query-browser__expand-icon" />
       ) : (
         <AngleRightIcon className="query-browser__expand-icon" />
       )}
-    </button>
+    </Button>
   );
 };
 
@@ -310,7 +316,7 @@ const SeriesButton_: React.FC<SeriesButtonProps> = ({
 
   return (
     <div className="query-browser__series-btn-wrap">
-      <button
+      <Button
         aria-label={title}
         className={classNames('query-browser__series-btn', {
           'query-browser__series-btn--disabled': isDisabled,
@@ -319,6 +325,7 @@ const SeriesButton_: React.FC<SeriesButtonProps> = ({
         style={colorIndex === null ? undefined : { backgroundColor: colors[colorIndex] }}
         title={title}
         type="button"
+        variant="plain"
       />
     </div>
   );
@@ -443,14 +450,15 @@ const QueryInput_: React.FC<QueryInputProps> = ({
         spellCheck={false}
         value={text}
       />
-      <button
-        className="btn btn-link query-browser__clear-icon"
+      <Button
+        className="query-browser__clear-icon"
         aria-label="Clear Query"
         onClick={onClear}
         type="button"
+        variant="plain"
       >
         <TimesIcon />
-      </button>
+      </Button>
       {!_.isEmpty(allSuggestions) && (
         <ul className="pf-c-dropdown__menu query-browser__metrics-dropdown-menu">
           {_.map(allSuggestions, (suggestions, title) => (

frontend/public/components/sidebars/explore-type-sidebar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
-import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { Breadcrumb, BreadcrumbItem, Button } from '@patternfly/react-core';
 
 import {
   getDefinitionKey,
@@ -94,13 +94,14 @@ export const ExploreType: React.FC<ExploreTypeProps> = (props) => {
                 {isLast ? (
                   crumb
                 ) : (
-                  <button
+                  <Button
                     type="button"
-                    className="btn btn-link btn-link--no-btn-default-values"
                     onClick={(e) => breadcrumbClicked(e, i)}
+                    isInline
+                    variant="link"
                   >
                     {crumb}
-                  </button>
+                  </Button>
                 )}
               </BreadcrumbItem>
             );
@@ -135,13 +136,14 @@ export const ExploreType: React.FC<ExploreTypeProps> = (props) => {
                   </p>
                 )}
                 {path && (
-                  <button
+                  <Button
                     type="button"
-                    className="btn btn-link btn-link--no-btn-default-values"
                     onClick={(e) => drilldown(e, name, definition.description, path)}
+                    isInline
+                    variant="link"
                   >
                     View Details
-                  </button>
+                  </Button>
                 )}
               </li>
             );