Merge pull request #464 from ExpediaDotCom/co-branding-zipkin

Co branding zipkin

Author: Jason Bulicek

public/images/zipkin-logo.jpg

@@ -49,7 +49,8 @@ router.get('*', (req, res) => {
         tracesTTL: config.connectors.traces.ttl,
         trendsTTL: config.connectors.trends && config.connectors.trends.ttl,
         relatedTracesOptions: config.relatedTracesOptions,
-        tagValuesTransformMap: config.tagValuesTransformMap
+        tagValuesTransformMap: config.tagValuesTransformMap,
+        usingZipkinConnector: (config.connectors.traces.connectorName === 'zipkin')
     });
 
     onFinished(res, () => {

server/routes/index.js

@@ -29,7 +29,8 @@ html
             tracesTTL: !{JSON.stringify(tracesTTL || -1)},
             trendsTTL: !{JSON.stringify(trendsTTL || -1)},
             relatedTracesOptions: !{JSON.stringify(relatedTracesOptions || [])},
-            tagValuesTransformMap: !{JSON.stringify(tagValuesTransformMap || {})}
+            tagValuesTransformMap: !{JSON.stringify(tagValuesTransformMap || {})},
+            usingZipkinConnector: !{JSON.stringify(usingZipkinConnector || false)},
         }
     script(async, defer, src = bundleCommonsJsPath)
     script(async, defer, src = bundleAppJsPath)

server/views/index.pug

@@ -66,6 +66,7 @@
 @font-size-h4:            24px;
 @font-size-h5:            20px;
 @font-size-h6:            14px;
+@font-size-h7:            10px;
 
 //** Unit-less `line-height` for use in components like buttons.
 @line-height-base:        1.846; // 20/14

src/bootstrap/variables.less

@@ -25,6 +25,12 @@ export default () => (
                 <img src="/images/logo-white.png" className="logo universal-search-header__logo" alt="Logo"/>
                 <span className="usb-logo universal-search-header__title">Haystack</span>
             </Link>
+          { window.haystackUiConfig.usingZipkinConnector ?
+            <Link className="usb-logo navbar-brand universal-search-header__container" to="/">
+              <span className="universal-search-header__subtitle">Tracing powered by</span>
+              <img src="/images/zipkin-logo.jpg" className="logo universal-search-header__logo" alt="Logo"/>
+              <span className="usb-logo universal-search-header__title">Zipkin</span>
+            </Link> : window.haystackUiConfig.usingZipkinConnector }
         </div>
     </header>
 );

src/components/layout/slimHeader.jsx

@@ -26,6 +26,12 @@
 
 .universal-search-header__title {
     font-size: @font-size-h5;
+    padding: @padding-xs-horizontal;
+}
+
+.universal-search-header__subtitle{
+    font-size: @font-size-h7;
+    padding: @padding-xs-horizontal;
 }
 
 .universal-search-header__container {