Fix some styling issues in the system info page

server/sonar-web/src/main/js/apps/system/components/ChangeLogLevelForm.tsx

@@ -87,7 +87,9 @@ export default class ChangeLogLevelForm extends React.PureComponent<Props, State
                   checked={level === newLevel}
                   onChange={this.handleLevelChange}
                 />
-                <label htmlFor={`loglevel-${level}`}>{level}</label>
+                <label className="text-middle" htmlFor={`loglevel-${level}`}>
+                  {level}
+                </label>
               </p>
             ))}
             <div className="alert alert-info spacer-top">{this.props.infoMsg}</div>

server/sonar-web/src/main/js/apps/system/components/PageActions.tsx

@@ -20,6 +20,7 @@
 import * as React from 'react';
 import ChangeLogLevelForm from './ChangeLogLevelForm';
 import RestartForm from '../../../components/common/RestartForm';
+import EditIcon from '../../../components/icons-components/EditIcon';
 import { getBaseUrl } from '../../../helpers/urls';
 import { translate } from '../../../helpers/l10n';
 
@@ -53,7 +54,7 @@ export default class PageActions extends React.PureComponent<Props, State> {
     }
   }
 
-  handleLogsLevelOpen = (event: React.SyntheticEvent<HTMLElement>) => {
+  handleLogsLevelOpen = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({ openLogsLevelForm: true });
   };
@@ -80,10 +81,11 @@ export default class PageActions extends React.PureComponent<Props, State> {
           <strong className="little-spacer-left">{this.state.logLevel}</strong>
           <a
             id="edit-logs-level-button"
-            className="spacer-left icon-edit"
+            className="spacer-left link-no-underline"
             href="#"
-            onClick={this.handleLogsLevelOpen}
-          />
+            onClick={this.handleLogsLevelOpen}>
+            <EditIcon className="little-spacer-top" />
+          </a>
         </span>
         {this.props.canDownloadLogs && (
           <div className="display-inline-block dropdown spacer-left">
@@ -98,7 +100,7 @@ export default class PageActions extends React.PureComponent<Props, State> {
                   id="logs-link"
                   download="sonarqube_app.log"
                   target="_blank">
-                  Compute Engine
+                  Main Process
                 </a>
               </li>
               <li>
@@ -107,7 +109,7 @@ export default class PageActions extends React.PureComponent<Props, State> {
                   id="ce-logs-link"
                   download="sonarqube_ce.log"
                   target="_blank">
-                  Main Process
+                  Compute Engine
                 </a>
               </li>
               <li>

server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/ChangeLogLevelForm-test.tsx.snap

@@ -41,6 +41,7 @@ exports[`should display some warning messages for non INFO levels 1`] = `
           value="INFO"
         />
         <label
+          className="text-middle"
           htmlFor="loglevel-INFO"
         >
           INFO
@@ -59,6 +60,7 @@ exports[`should display some warning messages for non INFO levels 1`] = `
           value="DEBUG"
         />
         <label
+          className="text-middle"
           htmlFor="loglevel-DEBUG"
         >
           DEBUG
@@ -77,6 +79,7 @@ exports[`should display some warning messages for non INFO levels 1`] = `
           value="TRACE"
         />
         <label
+          className="text-middle"
           htmlFor="loglevel-TRACE"
         >
           TRACE
@@ -155,6 +158,7 @@ exports[`should render correctly 1`] = `
           value="INFO"
         />
         <label
+          className="text-middle"
           htmlFor="loglevel-INFO"
         >
           INFO
@@ -173,6 +177,7 @@ exports[`should render correctly 1`] = `
           value="DEBUG"
         />
         <label
+          className="text-middle"
           htmlFor="loglevel-DEBUG"
         >
           DEBUG
@@ -191,6 +196,7 @@ exports[`should render correctly 1`] = `
           value="TRACE"
         />
         <label
+          className="text-middle"
           htmlFor="loglevel-TRACE"
         >
           TRACE

server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/PageActions-test.tsx.snap

@@ -13,11 +13,15 @@ exports[`should render correctly 1`] = `
       INFO
     </strong>
     <a
-      className="spacer-left icon-edit"
+      className="spacer-left link-no-underline"
       href="#"
       id="edit-logs-level-button"
       onClick={[Function]}
-    />
+    >
+      <EditIcon
+        className="little-spacer-top"
+      />
+    </a>
   </span>
   <div
     className="display-inline-block dropdown spacer-left"
@@ -40,7 +44,7 @@ exports[`should render correctly 1`] = `
           id="logs-link"
           target="_blank"
         >
-          Compute Engine
+          Main Process
         </a>
       </li>
       <li>
@@ -50,7 +54,7 @@ exports[`should render correctly 1`] = `
           id="ce-logs-link"
           target="_blank"
         >
-          Main Process
+          Compute Engine
         </a>
       </li>
       <li>
@@ -107,11 +111,15 @@ exports[`should render without restart and log download 1`] = `
       INFO
     </strong>
     <a
-      className="spacer-left icon-edit"
+      className="spacer-left link-no-underline"
       href="#"
       id="edit-logs-level-button"
       onClick={[Function]}
-    />
+    >
+      <EditIcon
+        className="little-spacer-top"
+      />
+    </a>
   </span>
   <a
     className="button spacer-left"

server/sonar-web/src/main/js/apps/system/styles.css

@@ -23,8 +23,8 @@
 
 .system-info-health-card .boxed-group-header > .alert {
   display: inline-block;
-  margin-bottom: -3px;
-  margin-top: -3px;
+  margin-bottom: -6px;
+  margin-top: -6px;
 }
 
 .system-info-health-card .boxed-group-inner {

server/sonar-web/src/main/js/components/icons-components/EditIcon.tsx

@@ -0,0 +1,41 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+
+interface Props {
+  className?: string;
+  size?: number;
+}
+
+export default function EditIcon({ className, size = 14 }: Props) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      width={size}
+      height={size}>
+      <path
+        fill="currentColor"
+        d="M3.918 11.918l0.711-0.711-1.836-1.836-0.711 0.711v0.836h1v1h0.836zM8.004 4.668q0-0.172-0.172-0.172-0.078 0-0.133 0.055l-4.234 4.234q-0.055 0.055-0.055 0.133 0 0.172 0.172 0.172 0.078 0 0.133-0.055l4.234-4.234q0.055-0.055 0.055-0.133zM7.582 3.168l3.25 3.25-6.5 6.5h-3.25v-3.25zM12.918 3.918q0 0.414-0.289 0.703l-1.297 1.297-3.25-3.25 1.297-1.289q0.281-0.297 0.703-0.297 0.414 0 0.711 0.297l1.836 1.828q0.289 0.305 0.289 0.711z"
+      />
+    </svg>
+  );
+}

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -2215,7 +2215,7 @@ background_tasks.search_by_task_or_component=Search by Task or Component
 system.application_nodes_title=Application Nodes
 system.are_you_sure_to_restart=Are you sure you want to restart the server?
 system.cluster_log_level.info=Changes apply to all Application nodes but not to Search nodes.
-system.current_health_of_x=Current health status of {1}
+system.current_health_of_x=Current health status of {0}
 system.download_logs=Download Logs
 system.download_system_info=Download System Info
 system.is_restarting=Server is restarting. This page will be automatically refreshed.