Merge pull request tmobile#47 in CAP/jazz_webapp from metrics-units t…

…o master * commit 'd9aed7c4aaf5c769bf967fa0dc9b3269e4db0fae': sorting metric data moving documentation remove mockdata minus adding units
rjsughosh · Aug 3, 2018 · c22d438 · c22d438
2 parents 9f0a066 + d9aed7c
commit c22d438
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 63 deletions.
diff --git a/app/src/app/pages/environment-codequality/env-codequality-section.component.html b/app/src/app/pages/environment-codequality/env-codequality-section.component.html
@@ -41,6 +41,8 @@
     <metrics-carousel [metrics]="graphDataRaw.metrics"
                       (indexChange)="selectMetric($event)"
                       [index]="metricsIndex"
-                      [options]="{listProperty: 'values', valuesProperty: 'value', nameProperty: 'name'}"></metrics-carousel>
+                      [options]="{listProperty: 'values',
+                       valueProperty: 'value',
+                        nameProperty: 'name'}"></metrics-carousel>
   </div>
 </div>
diff --git a/app/src/app/pages/environment-codequality/env-codequality-section.component.ts b/app/src/app/pages/environment-codequality/env-codequality-section.component.ts
@@ -119,6 +119,7 @@ export class EnvCodequalitySectionComponent implements OnInit {
         if (response && response.data && response.data.metrics && response.data.metrics.length) {
           this.sectionStatus = 'resolved';
           this.graphDataRaw = response.data;
+          this.sortAllMetricData(this.graphDataRaw);
           this.selectMetric(this.metricsIndex);
         } else {
           this.sectionStatus = 'empty';
@@ -178,5 +179,15 @@ export class EnvCodequalitySectionComponent implements OnInit {
     window.open(this.selectedMetric.metric.link, '_blank');
   }
 
+  sortAllMetricData(graphData) {
+    graphData.metrics.forEach((metric) => {
+      let datapoints = metric.values
+        .sort((pointA, pointB) => {
+          return moment(pointA.ts).diff(moment(pointB.ts));
+        });
+      metric.values = datapoints;
+    })
+  }
+
 }
 
diff --git a/app/src/app/pages/landing/landing.component.html b/app/src/app/pages/landing/landing.component.html
@@ -252,8 +252,6 @@ <h3 class="feature-title center">About Us</h3>
 				<ul class="footer">
 					<li><div class ="home-footer icon-tmobile-logo"></div></li>
 					<li><a class="center pointer" (click)='onNavigate($event)'>Privacy</a></li>
-					<li><a class="center hide">Blog</a></li>
-					<li><a class="center pointer" (click)='onNavigate($event)'>Docs</a></li>
 				</ul>
 		</div>
 		<div class="section-content-text bottom-parallax-padding copyright">

diff --git a/app/src/app/pages/service-metrics/service-metrics.component.html b/app/src/app/pages/service-metrics/service-metrics.component.html
@@ -37,7 +37,10 @@
         <metrics-carousel [metrics]="selectedAsset?.metrics"
                           [selected]="selectedMetric"
                           (selectedChange)="setMetric($event)"
-                          [options]="{listProperty: 'datapoints',valueProperty: selectedAsset.statistics, nameProperty: 'metric_name'}"></metrics-carousel>
+                          [options]="{listProperty: 'datapoints',
+                          valueProperty: selectedAsset.statistics,
+                           nameProperty: 'metric_name',
+                           footerProperty: 'Unit'}"></metrics-carousel>
       </div>
     </div>
   </div>

diff --git a/app/src/app/pages/service-metrics/service-metrics.component.ts b/app/src/app/pages/service-metrics/service-metrics.component.ts
@@ -157,6 +157,7 @@ export class ServiceMetricsComponent implements OnInit, AfterViewInit {
         statistics: this.filters.getFieldValueOfLabel('AGGREGATION')
       }
     };
+
     return this.http.post(request.url, request.body)
       .toPromise()
       .then((response) => {
@@ -225,6 +226,7 @@ export class ServiceMetricsComponent implements OnInit, AfterViewInit {
     }
 
     if (this.selectedAsset) {
+      this.sortAssetData(this.selectedAsset);
       this.setMetric();
       this.sectionStatus = 'resolved';
     } else {
@@ -292,5 +294,14 @@ export class ServiceMetricsComponent implements OnInit, AfterViewInit {
     }
   }
 
+  sortAssetData(asset) {
+    asset.metrics.forEach((metric) => {
+      let datapoints = metric.datapoints
+        .sort((pointA, pointB) => {
+          return moment(pointA.Timestamp).diff(moment(pointB.Timestamp));
+        });
+      metric.datapoints = datapoints;
+    })
+  }
 
 }
diff --git a/app/src/app/secondary-components/footer/footer.component.html b/app/src/app/secondary-components/footer/footer.component.html
@@ -6,9 +6,8 @@
 
     <div class='ft-links'>
       <ul>
-        <li class=''><a tabindex="-1" target="_blank" href='https://docs.jazz.corporate.t-mobile.com'>DOCS</a></li>
-        <li class='mid'><a tabindex="-1" (click)='goToAbout("features")' > FEATURES</a></li>
-        <li class=''><a tabindex="-1" (click)='goToAbout("about")' >CONTACTS</a></li>
+        <li><a tabindex="-1" (click)='goToAbout("features")' > FEATURES</a></li>
+        <li><a tabindex="-1" (click)='goToAbout("about")' >CONTACTS</a></li>
       </ul>
     </div>
   </div>

diff --git a/app/src/app/secondary-components/footer/footer.component.scss b/app/src/app/secondary-components/footer/footer.component.scss
@@ -15,13 +15,15 @@ section{
     font-size: 1rem;
 }
 
-.ft-links ul
-{
+.ft-links ul {
     list-style: none;
     text-align: center;
     // margin:0 30%;
     margin: 1rem auto;
     padding:0;
+    > * + * {
+      border-left:2px solid #acacac;
+    }
 }
 
 .ft-links li{

diff --git a/app/src/app/secondary-components/jazz-header/jazz-header.component.html b/app/src/app/secondary-components/jazz-header/jazz-header.component.html
@@ -11,7 +11,8 @@
             <li (click)="goToAbout('features')" [class.hide] = 'noLink'> Features</li>
             <li (click)="goToAbout('about')" [class.hide] = 'noLink'>About Us</li>
             <li (click)="startUserJourney()" [class.hide] = 'noLink'>Tutorial</li>
-          <li [class.hide]="isLoggedIn">
+            <li (click)="openDocs()">DOCUMENTATION</li>
+            <li [class.hide]="isLoggedIn">
                 <div class="login">
                     <btn-jazz-primary newclass="login" text="LOGIN" (click)="toggleLoginPanel()"></btn-jazz-primary>
                 </div>
@@ -26,15 +27,8 @@
                             <div class="icon-icon-profile" (click)="profileClick()" title="Logged in as user"></div>
                             <div class="profile-options" [ngClass]="{'fade': profileClicked , 'fade-out': !profileClicked}">
                                 <ul>
-                                    <li class="hide" (click)="profileClicked = !profileClicked">
-                                        <div class="profile-list"><span class="icon-icon-settings"></span> Settings
-                                        </div>
-                                    </li>
-                                    <li class="" (click)="profileClicked = !profileClicked">
-                                        <div class="profile-list" (click)='openFeedbackForm()'><span class="icon-icon-feedback"></span>Feedback</div>
-                                    </li>
                                     <li (click)="profileClicked = !profileClicked">
-                                        <div class="profile-list" (click)='onNavigate($event)'><span class="icon-icon-help"></span>Help</div>
+                                        <div class="profile-list" (click)='openFeedbackForm()'><span class="icon-icon-feedback"></span>Feedback</div>
                                     </li>
                                     <li (click)="profileClicked = !profileClicked;logout()">
                                         <div class="profile-list"><span class="icon-icon-logout"></span>Logout</div>
@@ -50,7 +44,6 @@
         <div class="dashboardLinksMobileView" (click)="openSection()">
             <ul id="mobileLinks">
                 <li (click)="goToAbout('features')"> Features</li>
-                <li class="hide" (click)="goToAbout('releaseCalendars')"> Release Calendar</li>
                 <li (click)="goToAbout('about')">About Us</li>
                 <li [class.hide]="isLoggedIn" (click)="toggleLoginPanel()"> Login</li>
                 <li [class.hide]="!isLoggedIn" (click)="logout()">Logout</li>
@@ -65,32 +58,32 @@
             </div>
         </div>
         <div class="header-section right">
-            <div class="header-profile-section">
-                <div class="notification hide" [ngClass]="{'active': notificationsAvailable}">
-                    <span class="icon-icon-notifcation"></span>
-                </div>
+          <ul class="dashboardLinks">
+            <li (click)="openDocs()" class="logged-in-docs">DOCUMENTATION</li>
+            <li>
+              <div class="header-profile-section">
                 <div class="profile" (clickOutside)="profileClicked = false">
-                    <div class="icon-icon-profile" (click)="profileClick()" title="Logged in as {{loggedinUser}}"></div>
-                    <div class="profile-options" [ngClass]="{'fade': profileClicked , 'fade-out': !profileClicked}">
-                        <ul>
-                            <li class="hide" (click)="profileClicked = !profileClicked">
-                                <div class="profile-list"><span class="icon-icon-settings"></span> Settings
-                                </div>
-                            </li>
-                            <li class="" (click)="profileClicked = !profileClicked">
-                                <div class="profile-list" (click)='openFeedbackForm()'><span class="icon-icon-feedback"></span>Feedback</div>
-                            </li>
-                            <li (click)="profileClicked = !profileClicked">
-                                <div class="profile-list" (click)='onNavigate($event)'><span class="icon-icon-help"></span>Help</div>
-                            </li>
-                            <li (click)="profileClicked = !profileClicked;logout()">
-                                <div class="profile-list"><span class="icon-icon-logout"></span>Logout</div>
-                            </li>
-                        </ul>
-                        <div class="white-triangle"></div>
-                    </div>
+                  <div class="icon-icon-profile" (click)="profileClick()" title="Logged in as {{loggedinUser}}"></div>
+                  <div class="profile-options" [ngClass]="{'fade': profileClicked , 'fade-out': !profileClicked}">
+                    <ul>
+                      <li (click)="profileClicked = !profileClicked">
+                        <div class="profile-list" (click)='openFeedbackForm()'><span class="icon-icon-feedback"></span>Feedback</div>
+                      </li>
+                      <li (click)="profileClicked = !profileClicked;startUserJourney()">
+                        <div class="profile-list">
+                          <span class="icon-icon-help"></span>Tutorial
+                        </div>
+                      </li>
+                      <li (click)="profileClicked = !profileClicked;logout()">
+                        <div class="profile-list"><span class="icon-icon-logout"></span>Logout</div>
+                      </li>
+                    </ul>
+                    <div class="white-triangle"></div>
+                  </div>
                 </div>
-            </div>
+              </div>
+            </li>
+          </ul>
         </div>
     </div>
 </header>

diff --git a/app/src/app/secondary-components/jazz-header/jazz-header.component.scss b/app/src/app/secondary-components/jazz-header/jazz-header.component.scss
@@ -178,13 +178,19 @@ $break-small         : 840px;
     @media screen and (max-width: $break-small ) {
          display: none;	
 	}
+    .logged-in-docs {
+      font-family: Lato;
+      font-size: 13px;
+    }
     .header-profile-section{
         margin-top: 0;
     }
     .profile-options ul li{
         display: list-item;
         height: initial;
         color: grey;
+
+
         :hover{
             background-color: #ed008c;
             color: #fff;

diff --git a/app/src/app/secondary-components/jazz-header/jazz-header.component.ts b/app/src/app/secondary-components/jazz-header/jazz-header.component.ts
@@ -8,6 +8,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AuthenticationService, MessageService, RequestService } from '../../core/services/index';
 import { ToasterService} from 'angular2-toaster';
+import {environment} from "../../../environments/environment";
 
 @Component({
     selector: 'jazz-header',
@@ -73,13 +74,18 @@ export class JazzHeaderComponent implements OnInit {
       return this.router.navigate(['/user-journey']);
     }
 
+    openDocs() {
+      window.open(environment.urls['docs_link'], '_blank');
+    }
+
     onNavigate(){
         window.open('https://docs.jazz.corporate.t-mobile.com')
     }
 
     goToLanding(){
         this.router.navigateByUrl('');// Route to landing page
     }
+
     openSection(){
         var el = document.getElementById("mobileLinks");
         if(el.offsetHeight == 0)
@@ -118,8 +124,7 @@ export class JazzHeaderComponent implements OnInit {
 
     }
 
-    toast_pop(error,oops,errorMessage)
-    {
+    toast_pop(error,oops,errorMessage) {
         var tst = document.getElementById('toast-container');
 
          tst.classList.add('toaster-anim');                            
@@ -133,6 +138,7 @@ export class JazzHeaderComponent implements OnInit {
     preventDefault(e){
         e.preventDefault();
     }
+
     openFeedbackForm(){
         this.isFeedback=true;
         this.model.userFeedback='';
@@ -142,6 +148,7 @@ export class JazzHeaderComponent implements OnInit {
         this.isLoading = false;
         this.buttonText='SUBMIT';
     }
+
     mailTo(){
         location.href='mailto:[email protected]?subject=Jazz: Feedback/Issue&body=' + this.model.userFeedback;
     }

diff --git a/app/src/app/secondary-components/metrics-carousel/metrics-carousel.component.html b/app/src/app/secondary-components/metrics-carousel/metrics-carousel.component.html
@@ -8,10 +8,10 @@
            (click)="selectCard(metric)">
         <div class='metrics-name'>{{metricName(metric)}}</div>
         <div class="metrics-card-content">
-          <div class='metrics-data' *ngIf="getRecentValue(metric)">
-            {{getRecentValue(metric)}}
-          </div>
-          <div class="metrics-name" *ngIf="!getRecentValue(metric)">No Data</div>
+            {{getRecentValue(metric) || '-'}}
+        </div>
+        <div class="metrics-footer" *ngIf="getRecentValue(metric) && options.footerProperty">
+          {{metric[options.listProperty][0][options.footerProperty]}}
         </div>
       </div>
     </div>

diff --git a/app/src/app/secondary-components/metrics-carousel/metrics-carousel.component.scss b/app/src/app/secondary-components/metrics-carousel/metrics-carousel.component.scss
@@ -19,12 +19,15 @@
 }
 
 .metrics-card {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
   border-radius: 3px;
   background-color: #fdfdfd;
   border: solid 1px #dddddd;
   width: 135px;
-  display: inline-block;
-  padding: 0.5rem;
+  padding: .65rem 0.5rem;
   text-align: center;
   font-size: 1rem;
   color: #000;
@@ -68,21 +71,20 @@
   }
 }
 
+.metrics-name {
+  font-size: 14px;
+  font-weight: bold;
+  color: #555555;
+  text-transform: capitalize;
+}
+
 .metrics-card-content {
   flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
+  font-size: 24px;
 }
 
-.metrics-name {
-  font-size: 1.2rem;
-  font-weight: bold;
-  text-align: center;
-  color: #666;
-  height: 2rem;
-  margin: 0.75rem 0 0.5rem;
-  text-transform: capitalize;
+.metrics-footer {
+  font-size: 12px;
 }
 
 .metrics-data {

diff --git a/app/src/app/secondary-components/metrics-carousel/metrics-carousel.component.ts b/app/src/app/secondary-components/metrics-carousel/metrics-carousel.component.ts
@@ -13,10 +13,12 @@ export class MetricsCarouselComponent implements OnInit {
   //nameProperty -> refers to name of each metric on this.metrics
   //listProperty -> refers to list of data points on this.metrics
   // valueProperty -> refers to the data value (y coordinate) of each datapoint in the this.metrics[listProperty]
+  // footerProperty -> refers to value shown below valueProperty data
   @Input() options = {
     nameProperty: 'name',
     listProperty: 'values',
     valueProperty: 'value',
+    footerProperty: null
   };
 
   private _selected;

diff --git a/app/src/environments/environment.ts b/app/src/environments/environment.ts
@@ -9,7 +9,7 @@ export const environment = {
   environmentTabs:['overview','deployments','code quality','assets', 'metrics', 'logs','clear water'],
   urls:{
     docs_link:"https://docs.jazz.corporate.t-mobile.com",
-    content_base: "https://d35w9xh2k53vcv.cloudfront.net/external-content",
+    content_base: "https://docs.jazz.corporate.t-mobile.com/external-content",
     swagger_editor: 'http://editor.cloud-api.corporate.t-mobile.com/?url='
   },
   userJourney: {