From 68bfd226fb7e9851ddbfa90c40b40cf1ebe51659 Mon Sep 17 00:00:00 2001
From: Augustin Husson <husson.augustin@gmail.com>
Date: Tue, 1 Feb 2022 15:39:35 +0100
Subject: [PATCH] Add Prometheus Logo (#10233)

* Add Prometheus logo in react UI

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>

* Use REM

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>

* increase the margin top of the navbar-brand

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

Co-authored-by: Julien Pivotto <roidelapluie@inuits.eu>
---
 .../react-app/public/prometheus_logo_grey.svg | 19 +++++++++++++++++++
 web/ui/react-app/src/Navbar.tsx               |  6 ++++++
 web/ui/react-app/src/themes/_shared.scss      |  9 +++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 web/ui/react-app/public/prometheus_logo_grey.svg

diff --git a/web/ui/react-app/public/prometheus_logo_grey.svg b/web/ui/react-app/public/prometheus_logo_grey.svg
new file mode 100644
index 0000000000..b914095ecf
--- /dev/null
+++ b/web/ui/react-app/public/prometheus_logo_grey.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="115.333px" height="114px" viewBox="0 0 115.333 114" enable-background="new 0 0 115.333 114" xml:space="preserve">
+<g id="Layer_2">
+</g>
+<g>
+	<path fill="#EEEEEE" d="M56.667,0.667C25.372,0.667,0,26.036,0,57.332c0,31.295,25.372,56.666,56.667,56.666
+		s56.666-25.371,56.666-56.666C113.333,26.036,87.961,0.667,56.667,0.667z M56.667,106.722c-8.904,0-16.123-5.948-16.123-13.283
+		H72.79C72.79,100.773,65.571,106.722,56.667,106.722z M83.297,89.04H30.034v-9.658h53.264V89.04z M83.106,74.411h-52.92
+		c-0.176-0.203-0.356-0.403-0.526-0.609c-5.452-6.62-6.736-10.076-7.983-13.598c-0.021-0.116,6.611,1.355,11.314,2.413
+		c0,0,2.42,0.56,5.958,1.205c-3.397-3.982-5.414-9.044-5.414-14.218c0-11.359,8.712-21.285,5.569-29.308
+		c3.059,0.249,6.331,6.456,6.552,16.161c3.252-4.494,4.613-12.701,4.613-17.733c0-5.21,3.433-11.262,6.867-11.469
+		c-3.061,5.045,0.793,9.37,4.219,20.099c1.285,4.03,1.121,10.812,2.113,15.113C63.797,33.534,65.333,20.5,71,16
+		c-2.5,5.667,0.37,12.758,2.333,16.167c3.167,5.5,5.087,9.667,5.087,17.548c0,5.284-1.951,10.259-5.242,14.148
+		c3.742-0.702,6.326-1.335,6.326-1.335l12.152-2.371C91.657,60.156,89.891,67.418,83.106,74.411z"/>
+</g>
+</svg>
diff --git a/web/ui/react-app/src/Navbar.tsx b/web/ui/react-app/src/Navbar.tsx
index 3963c2e318..8ef4acb8fd 100644
--- a/web/ui/react-app/src/Navbar.tsx
+++ b/web/ui/react-app/src/Navbar.tsx
@@ -28,6 +28,12 @@ const Navigation: FC<NavbarProps> = ({ consolesLink, agentMode }) => {
     <Navbar className="mb-3" dark color="dark" expand="md" fixed="top">
       <NavbarToggler onClick={toggle} className="mr-2" />
       <Link className="pt-0 navbar-brand" to={agentMode ? '/agent' : '/graph'}>
+        <img
+          src={`${pathPrefix}/prometheus_logo_grey.svg`}
+          className="d-inline-block align-top"
+          alt="Prometheus logo"
+          title="Prometheus"
+        />
         Prometheus{agentMode && ' Agent'}
       </Link>
       <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
diff --git a/web/ui/react-app/src/themes/_shared.scss b/web/ui/react-app/src/themes/_shared.scss
index c47d07f8b2..e0af8191c2 100644
--- a/web/ui/react-app/src/themes/_shared.scss
+++ b/web/ui/react-app/src/themes/_shared.scss
@@ -104,6 +104,15 @@ button.execute-btn {
   margin-bottom: 20px;
 }
 
+.navbar-brand img {
+  padding-right: 1rem;
+  height: 1.9rem;
+}
+
+.navbar-brand {
+  margin-top: 4px;
+}
+
 input[type='checkbox']:checked + label {
   color: #286090;
 }