Address PR comments

prometheus · Mar 24, 2021 · cc3acd7 · cc3acd7
1 parent d1729c9
commit cc3acd7
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 19 deletions.
diff --git a/web/ui/react-app/src/App.scss b/web/ui/react-app/src/App.scss
@@ -234,13 +234,13 @@ body.bootstrap-dark {
     font-weight: 600;
   }
 
-  .rule_cell {
+  .rule-cell {
     white-space: pre-wrap;
     display: block;
     font-family: monospace;
   }
 
-  .alert_cell {
+  .alert-cell {
     padding: 15px;
   }
 

diff --git a/web/ui/react-app/src/Theme.tsx b/web/ui/react-app/src/Theme.tsx
@@ -36,7 +36,7 @@ export const ThemeToggle: FC = () => {
         </Button>
         <Button
           color="secondary"
-          title="Use browser preferred theme"
+          title="Use browser-preferred theme"
           active={userPreference === 'auto'}
           onClick={() => setTheme('auto')}
         >

diff --git a/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx b/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx
@@ -28,7 +28,7 @@ const CollapsibleAlertPanel: FC<CollapsibleAlertPanelProps> = ({ rule, showAnnot
         <strong>{rule.name}</strong> ({`${rule.alerts.length} active`})
       </Alert>
       <Collapse isOpen={open} className="mb-2">
-        <pre className="alert_cell">
+        <pre className="alert-cell">
           <code>
             <div>
               name: <Link to={createExpressionLink(`ALERTS{alertname="${rule.name}"}`)}>{rule.name}</Link>

diff --git a/web/ui/react-app/src/pages/graph/ExpressionInput.tsx b/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
@@ -215,10 +215,10 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
                   value={value}
                 />
                 <InputGroupAddon addonType="append">
-                  <Button title="Open metrics explorer" onClick={this.openMetricsExplorer}>
+                  <Button className="metrics-explorer" title="Open metrics explorer" onClick={this.openMetricsExplorer}>
                     <FontAwesomeIcon icon={faGlobeEurope} />
                   </Button>
-                  <Button color="primary" onClick={executeQuery} style={{ width: 84 }}>
+                  <Button color="primary" className="execute-query" onClick={executeQuery}>
                     Execute
                   </Button>
                 </InputGroupAddon>

diff --git a/web/ui/react-app/src/pages/rules/RulesContent.tsx b/web/ui/react-app/src/pages/rules/RulesContent.tsx
@@ -85,7 +85,7 @@ export const RulesContent: FC<RouteComponentProps & RulesContentProps> = ({ resp
                 {g.rules.map((r, i) => {
                   return (
                     <tr key={i}>
-                      <td className="rule_cell">
+                      <td className="rule-cell">
                         {r.alerts ? (
                           <GraphExpressionLink title="alert" text={r.name} expr={`ALERTS{alertname="${r.name}"}`} />
                         ) : (

diff --git a/web/ui/react-app/src/themes/dark.scss b/web/ui/react-app/src/themes/dark.scss
@@ -4,12 +4,12 @@
 @import '~bootstrap/scss/variables';
 @import '~@forevolve/bootstrap-dark/scss/_dark-variables.scss';
 
-$config-yaml-color: $white;
-$config-yaml-bg: $jumbotron-bg;
+$config-yaml-color: $black;
+$config-yaml-bg: $gray-500;
 $config-yaml-border: $gray-700;
 
-$alert_cell-color: $white;
-$rule_cell-bg: $gray-900;
+$alert-cell-color: $white;
+$rule-cell-bg: $gray-900;
 
 .bootstrap-dark {
   @import './shared.scss';

diff --git a/web/ui/react-app/src/themes/light.scss b/web/ui/react-app/src/themes/light.scss
@@ -4,11 +4,11 @@
 @import '~bootstrap/scss/variables';
 
 $config-yaml-color: #333;
-$config-yaml-bg: $jumbotron-bg;
+$config-yaml-bg: #f5f5f5;
 $config-yaml-border: #ccc;
 
-$alert_cell-color: inherit;
-$rule_cell-bg: #f5f5f5;
+$alert-cell-color: inherit;
+$rule-cell-bg: #f5f5f5;
 
 .bootstrap {
   @import './shared.scss';

diff --git a/web/ui/react-app/src/themes/shared.scss b/web/ui/react-app/src/themes/shared.scss
@@ -8,13 +8,13 @@ input[type='checkbox']:checked + label {
   border-bottom: 1px solid $nav-tabs-border-color;
 }
 
-.rule_cell {
-  background-color: $rule_cell-bg;
+.rule-cell {
+  background-color: $rule-cell-bg;
 }
 
-.alert_cell {
-  color: $alert_cell-color;
-  background: $rule_cell-bg;
+.alert-cell {
+  color: $alert-cell-color;
+  background: $rule-cell-bg;
 }
 
 .config-yaml {
@@ -23,11 +23,22 @@ input[type='checkbox']:checked + label {
   border: 1px solid $config-yaml-border;
 }
 
+button.metrics-explorer {
+  color: $input-group-addon-color;
+  background-color: $input-group-addon-bg;
+  border: $input-border-width solid $input-group-addon-border-color;
+}
+
 .metrics-explorer .metric:hover {
   color: $dropdown-link-hover-color;
   background-color: $dropdown-link-hover-bg;
 }
 
+button.execute-query {
+  border: $input-border-width solid darken($primary, 5%);
+  width: 84px;
+}
+
 .graph-controls .clear-time-btn,
 .table-controls .clear-time-btn {
   background-color: $input-bg;