diff --git a/app/src/app/pages/clear-water/clear-water.component.html b/app/src/app/pages/clear-water/clear-water.component.html index 7cfe341296..afd750d1df 100644 --- a/app/src/app/pages/clear-water/clear-water.component.html +++ b/app/src/app/pages/clear-water/clear-water.component.html @@ -1,131 +1,150 @@
-
-
-
- -
-
CLEARWATER SCORE
-
{{cw_score.current}}
-
- -
-
    -
  • -
    Organization
    goal
    -
    {{cw_score.organizationGoal}}
    -
    • -
  • -
    Organization
    Average
    -
    {{cw_score.organizationAverage}}
    -
    • -
  • -
    Total
    warnings
    -
    {{cw_obj.warnings}}
    -
    • -
  • -
    Total
    errors
    -
    {{cw_obj.errors}}
    -
    • -
  • -
    Description
    -
    {{cw_message}}
    -
    • - -
-
- -
- - - -
-
+
+ +
+
+
+ + +
+
+
+
Creation
+
+ +
+
+
+
Completion
+
+ +
+ +
+ Done. Please check your e-mail for PR details. + + Current Status: {{statusInfo}} + . + . + . +
-
+
+ +
+
+
+
+
CLEARWATER SCORE
+
+
{{cw_score.current}}
+
+
-
+
+
    +
  • +
    Organization
    goal
    +
    {{cw_score.organizationGoal}}
    +
    • +
  • +
    Organization
    Average
    +
    {{cw_score.organizationAverage}}
    +
    • +
  • +
    Total
    warnings
    +
    {{cw_obj.warnings}}
    +
    • +
  • +
    Total
    errors
    +
    {{cw_obj.errors}}
    +
    • +
  • +
    Description
    +
    {{cw_message}}
    +
    • -
    - - -
    Hide Warnings
    +
-
- - - + +
+ +
-
- -
-
-
{{row.heading}} - {{row.status}} {{row.issues.length}} issues -
-
-
-
-
{{row.description}}
-
Reduces your score by {{row.score}}
-
- - - - - - - - - - - - -
MESSAGELOCATION
- {{each.message}} - - {{each.location}} -
- VIEW DETAILS +
-
-
- +
+
+ + + +
+ +
+ + +
Hide Warnings
-
-
- Congratulations! This API has no issues -
-
-
- - - Back - - +
+ + + +
+
+
+
+ Clearwater Score Trend +
+
+
+
+
+
+
+ +
+
+
+
-
{{oneObject.heading}} - {{oneObject.status}} {{oneObject.issues.length}} issues +
+ +
+
+
{{row.heading}} + {{row.status}} {{row.issues.length}} issues +
-
+
-
{{oneObject.description}}
-
Reduces your score by {{oneObject.score}}
+
{{row.description}}
+
Reduces your score by {{row.score}}
- + + - - + + @@ -135,28 +154,79 @@
MESSAGELOCATIONMESSAGELOCATION
{{each.message}}
+ VIEW + DETAILS +
+
+
+
+ +
+ Congratulations! This API has no issues +
+ +
+
+ + + Back + + +
+ + +
{{oneObject.heading}} + {{oneObject.status}} {{oneObject.issues.length}} + issues +
+
+
+
{{oneObject.description}}
+
Reduces your score by {{oneObject.score}}
+
+ + + + + + + + + + + + + +
MESSAGELOCATION
+ {{each.message}} + + {{each.location}} +
+
+
-
-
-
+
+
+
- +
-
-
- -
-
Oops!

-
Something went wrong while fetching your data
REFRESH to give it another try.
-
If the problem persists, contact us.
+
+
+ +
+
Oops!

+
Something went wrong while fetching your data
REFRESH to give it another try.
+
+
If the problem persists, contact us.
- - diff --git a/app/src/app/pages/clear-water/clear-water.component.scss b/app/src/app/pages/clear-water/clear-water.component.scss index a7e2350dcb..7711fd37eb 100644 --- a/app/src/app/pages/clear-water/clear-water.component.scss +++ b/app/src/app/pages/clear-water/clear-water.component.scss @@ -204,18 +204,23 @@ margin-bottom: 1rem; color: #666666; font-weight: bold; text-align: center; - margin-bottom: 1rem; + margin-bottom: 1.5rem; } .score-val{ background: #EB9508; border-radius: 50%; - padding: 1rem; - width: 4rem; - height: 4rem; + width: 5rem; + height: 5rem; margin: auto; color: white; - font-size: 1.5rem; + font-size: 2.5rem; + display:flex; + justify-content: center; + align-items: center; + div{ + align-self: center; + } } .loadingpage{ @@ -272,9 +277,12 @@ search-box{ position: fixed; transform: translateX(100%); transition: 0.6s transform ease-in-out ; - + right: 0; top:0; + overflow-y: scroll !important; + height: 100vh; + overflow-x: hidden; } .slide-in{ transform: translateX(0%); @@ -299,4 +307,242 @@ search-box{ margin-left:2rem; } -} \ No newline at end of file +} + + +// ################################## + +.current-meter-bar{ + .status-result{ + top:-1.5px; + position: absolute; + z-index: 2; + border-radius: 50%; + width: 1.5rem; + height: 1.5rem; + background-color: #d8d8d8; + box-shadow: 0 2px 4px 0 rgba(143, 143, 143, 0.5); + border: 2px solid #fff; + // left:0; + &:nth-child(2){ + left: calc(0% - 0.75rem); + } + // &:nth-child(3){ + // left: calc(25% - 1rem); + // .status-lable{ + // right:-1.5rem; + // } + // } + // &:nth-child(4){ + // left: calc(50% - 1rem); + // .status-lable{ + // right:-4rem; + // } + // } + // &:nth-child(5){ + // left: calc(75% - 1rem); + // .status-lable{ + // right:-2rem; + // } + // } + &:nth-child(3){ + left: calc(100% - 1rem); + .status-lable{ + right:0rem; + } + } + } + .status-result-delete{ + top:-1.5px; + position: absolute; + z-index: 2; + border-radius: 50%; + width: 1.5rem; + height: 1.5rem; + background-color: #d8d8d8; + box-shadow: 0 2px 4px 0 rgba(143, 143, 143, 0.5); + border: 2px solid #fff; + // left:0; + // &:nth-child(2){ + // left: calc(0% - 0.75rem); + // } + // &:nth-child(3){ + // left: calc(33% - 1rem); + // .status-lable{ + // right: -3rem; + // } + // } + // &:nth-child(4){ + // left: calc(66% - 1rem); + // .status-lable{ + // right: -3rem; + // } + // } + &:nth-child(2){ + left: calc(100% - 1rem); + .status-lable{ + right:0rem; + } + } + } + .status-lable{ + position: absolute; + top: 2rem; + font-size: 12px; + white-space: nowrap; + } + .status-icon{ + display: inline-block; + width: 100%; + text-align: center; + font-size: 10px; + } + .icon-icon-confirmcheck:before{ + color: #fff; + font-size: 0.5rem; + position: relative; + bottom: 0.35rem; + } + .icon-icon-close:before { + color: #fff; + font-size: 0.5rem; + position: relative; + bottom: 0.35rem; + } +} +.under-progress{ + color: #999; +} +.under-progress-bar{ + background-color: #26D5C2 !important; + box-shadow: 0px 0px 3px 1px #26D5C2!important; + .status-lable{ + color: #26D5C2; + } +} +.completed{ + color:#5cae01; +} +.completed-bar{ + background-color: #5cae01 !important; + box-shadow: 0px 0px 3px 1px #5cae01!important; + .status-lable{ + color:#5cae01; + } +} +.deletion-bar{ + background-color: red !important; + box-shadow: 0px 0px 3px 1px red!important; + width: 100%!important; + // background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(88,99,34)), color-stop(1, rgb(79,98,43)) ); + .status-lable{ + color:red!important; + } +} +.current-status-wrap{ + z-index: 101!important; + margin-bottom: 2rem; + padding:2rem 3rem; + background-color: #fff; + text-align: center; + position: relative; + border-radius: 3px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11); + .current-meter-bar{ + height: 16px; + position: relative; + margin: 1rem 0 1rem 0; + background: #d8d8d8; + -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); + -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); + box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); + span{ + display: block; + height: inherit; + background-color: #5cae01; + background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(88,99,34)), color-stop(1, rgb(79,98,43)) ); + background-image: -moz-linear-gradient( center bottom, rgb(88,99,34) 37%, rgb(79,98,43) 69% ); + -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); + -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); + box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); + position: relative; + overflow: hidden; + width:0%; + } + span:after{ + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); + z-index: 1; + -webkit-background-size: 4px 4px; + -moz-background-size: 4px 4px; + -webkit-animation: move 3s linear infinite; + -moz-animation: move 3s linear infinite; + border-radius: 8px; + overflow: hidden; + background-size: 35px 35px; + background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.2) 0px, rgba(255,255,255,0.35) 1px, transparent 0, transparent 5px); + } + } +} +@keyframes move { + 0% { + background-position: 0 0; + } + 100% { + background-position: 50px 50px; + } +} +.progress-bar-section{ + .closeicon{ + position: absolute; + top: 8px; + right: 8px; + color: #999; + cursor: pointer; + font-size: 1rem; + cursor: pointer; + &:hover{ + color:#333; + transform: rotate(90deg); + transition: 0.1s transform; + } + } +} + +.graph-cover { + background-color: white; + margin: 1rem; + position: relative; + width: 65%; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11); + border-radius: 3px; + + @media(max-width: $screen-sm) { + width: 100%; + } +} + +.jz-chart-content { + position: relative; +} + +.graph-title { + padding: 1.6rem 0; +} +.jz-chart{ +min-height: 22rem; +padding:0rem 0.5rem 2.5rem 0.5rem; +} + +.graph-section-cover{ + /deep/.chartjs-render-monitor{ + height: 25rem !important; + } +} + + diff --git a/app/src/app/pages/clear-water/clear-water.component.ts b/app/src/app/pages/clear-water/clear-water.component.ts index 7644cccbef..c28c57a2d0 100644 --- a/app/src/app/pages/clear-water/clear-water.component.ts +++ b/app/src/app/pages/clear-water/clear-water.component.ts @@ -1,7 +1,13 @@ -import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core'; +import { Component, OnInit ,Input,Output,EventEmitter, ViewChild} from '@angular/core'; import { RequestService ,MessageService} from "../../core/services"; import { Router, ActivatedRoute } from '@angular/router'; - +import { Observable } from 'rxjs/Rx'; +import { Subscription } from 'rxjs/Subscription'; +import * as _ from "lodash"; +import * as moment from 'moment'; +import { environment } from './../../../environments/environment'; +import { DataService } from '../data-service/data.service'; +import { SwaggerSidebarComponent } from './../../secondary-components/swagger-sidebar/swagger-sidebar.component'; @Component({ selector: 'clear-water', @@ -10,40 +16,121 @@ import { Router, ActivatedRoute } from '@angular/router'; }) export class ClearWaterComponent implements OnInit { -@Output() open_sidebar:EventEmitter = new EventEmitter(); -@Input() service: any = {}; -env:string; -swagger_json; -error:boolean=true; -cw_score:any = {}; -cw_message:any = ''; -cw_keysList; -cw_results; -oneObject:any; -isloaded:boolean = false; -expandText: string = 'Expand all'; -tableHeader = []; -errMessage; -search_text:string; -loadingState:string='default'; -paginationSelected: Boolean = false; -warningSelected:boolean; -search_bar:string; -searchDetail_bar:string; -detailView:boolean = true; -slideSidebar:boolean = false; -cw_obj:any={}; -private subscription:any; -private http:any; -obj:any = {}; -congratulations:boolean = false; -close: boolean = false; -closed: boolean = false; + @Output() open_sidebar: EventEmitter = new EventEmitter(); + @Input() service: any = {}; + @ViewChild('swaggerSidebar') swaggerSidebar : SwaggerSidebarComponent; + env: string; + swagger_json; + error: boolean = true; + cw_score: any = {}; + cw_message: any = ''; + cw_keysList; + cw_results; + oneObject: any; + isloaded: boolean = false; + expandText: string = 'Expand all'; + evaluatePublish:string = 'EVALUATE'; + tableHeader = []; + errMessage; + search_text: string; + loadingState: string = 'default'; + paginationSelected: Boolean = false; + warningSelected: boolean; + search_bar: string; + reqJson:any; + searchDetail_bar: string; + detailView: boolean = true; + slideSidebar: boolean = false; + cw_obj: any = {}; + private subscription: any; + private http: any; + obj: any = {}; + congratulations: boolean = false; + close: boolean = false; + closed: boolean = false; + hidden:boolean = true; + options: any = { + "fromDateISO": "2018-09-19T11:26:32.065Z", + "fromDateValue": 1537356392065, + "stepSize": 900000, + "toDateISO": "2018-09-20T11:26:34.543Z", + "toDateValue": 1537442794543, + "tooltipXFormat": "MMM DD YYYY, h:mm a", + "xAxisFormat": "h:mm a", + "yMax": 100, + "yMin": 0, + } + public graphData; + historicalChangeTrendURI: string; + isSlidebarLoading:boolean = false; + isGraphloaded:boolean = false; + graphError:boolean = false; + +datasets; + +graphPointsata = [{ + + "Timestamp": "2018-06-22T17:03:18.239Z", + "Sum": 0, +}, +{ + "Timestamp": "2018-06-22T17:18:37.707Z", + "Sum": 67, +}, +{ + "Timestamp": "2018-06-27T15:15:23.985Z", + "Sum": 62, +}, +{ + "Timestamp": "2018-06-28T21:07:05.160Z", + "Sum": 62, +}, +{ + "Timestamp": "2018-07-02T16:14:47.094Z", + "Sum": 48, +}, +{ + "Timestamp": "2018-07-05T14:53:43.135Z", + "Sum": 48, +}, +{ + "Timestamp": "2018-07-06T17:33:59.536Z", + "Sum": 48, +}, +{ + "Timestamp": "2018-07-17T21:36:29.604Z", + "Sum": 50, +}, +{ + "Timestamp": "2018-07-25T21:29:25.983Z", + "Sum": 50, +}, +{ + "Timestamp": "2018-07-28T19:37:29.123Z", + "Sum": 46, +}, +{ + "Timestamp": "2018-07-31T18:28:17.367Z", + "Sum": 48, +}, +{ + "Timestamp": "2018-08-02T14:43:01.762Z", + "Sum": 46, +}, +{ + "Timestamp": "2018-08-14T21:55:38.705Z", + "Sum": 50, +}, +{ + "Timestamp": "2018-08-17T18:25:08.614Z", + "Sum": 50, +}]; constructor( - private request:RequestService, + private request: RequestService, private route: ActivatedRoute, private router: Router, + private data : DataService ) { this.http = request; @@ -51,102 +138,171 @@ closed: boolean = false; -viewDetails(obj){ - this.search_bar=''; - this.searchDetail_bar=""; - var index=this.cw_results.indexOf(obj) - this.oneObject = this.cw_results[index]; - this.oneObject['heading']=this.cw_keysList[index]; -} - -expandall(){ - for(var i=0;i { + return moment(pointA.dateTimeGMT).diff(moment(pointB.dateTimeGMT)); + }) + .map((dataPoint) => { + return { + x: moment(dataPoint.dateTimeGMT).valueOf(), + y: parseInt(dataPoint[valueProperty]) + }; + }); + + let timeRange = { + format: 'h: mm a', + range: moment().subtract(1, 'day').toISOString() // setting from date as 24hrs + }; + let options = { + tooltipXFormat: 'MM DD YYYY, h:mm a', + fromDateISO: timeRange.range, + fromDateValue: moment(timeRange.range).valueOf(), + toDateISO: moment().toISOString(), + s: moment().valueOf(), + xAxisFormat: timeRange.format, + stepSize: 1000, + yMin: values.length ? + .9 * (values.map((point) => { + return point.y; + }) + .reduce((a, b) => { + return Math.min(a, b); + })) : 0, + yMax: 100 + }; + + return { + datasets: [values], + options: options + }; + } + + openSidebar() { + this.slideSidebar = true; + this.isGraphloaded = false; + setTimeout(() => { + this.isGraphloaded = true; + },600) + document.getElementsByClassName('view-container')[0].classList.add('set-width'); + + } + closeSidebar() { + this.slideSidebar = false; + this.isGraphloaded = false; + setTimeout(() => { + this.isGraphloaded = true; + },600) + let item = document.getElementsByClassName('view-container')[0]; + if (item) { item.classList.remove('set-width'); + } + + } + callapi(event) { + this.isloaded = false; + // this.getData(event); + this.getGraphData(event, 'sidebar'); + } + onCWDetailsearch(data) { + this.searchDetail_bar = data.searchString; } -} -callapi(event){ - this.isloaded=false; - this.getData(event); -} -onCWDetailsearch(data){ - this.searchDetail_bar = data.searchString; -} + onCWsearch(data) { + this.search_bar = data.searchString; + } -onCWsearch(data){ - this.search_bar = data.searchString; -} + onRequestId(requestID){ + this.servicePublishStatus(requestID); + } -getData(payload?){ - var body; - if(!payload){ - var swaggerAsset = this.service.assets.find((asset) => { - return asset.type === 'swagger_url'; - }); + + getSwaggerUrl(serviceAssets) { + const swaggerAsset = serviceAssets.find((asset) => { + return asset.type === 'swagger_url'; + }); + if (swaggerAsset) { this.http.get(swaggerAsset.provider_id).subscribe( (response) => { - this.swagger_json=response; + this.swagger_json = response; + this.getGraphData(this.swagger_json); }, - (error) =>{ - console.log('error',error) - + (error) => { + console.log('error', error); + this.isloaded = true; + this.error = true; + } ); - - body = { - "url": swaggerAsset && swaggerAsset.provider_id + } + } + + getGraphData(swagger_json , sidebar?) { + let swaggerLintPayload; + if(sidebar === "sidebar"){ + swaggerLintPayload = { + 'swaggerDoc': swagger_json, }; } else{ - body = payload; + swaggerLintPayload ={ + 'swaggerDoc': swagger_json, + 'ntid': 'jazz', + 'swaggerId': `${this.service.domain}_${this.service.name}_${this.env}` + }; } - this.subscription = this.http.post('/jazz/apilinter',body).subscribe( - (response) => { - this.obj=response; - if(this.obj.results.errors == 0 && this.obj.results.warnings == 0){ - this.congratulations=true; + + this.subscription = this.http.post(environment.urls.swaggerApiUrl, swaggerLintPayload) + .subscribe( + (response) => { + this.obj = response; + if (this.obj.results.errors == 0 && this.obj.results.warnings == 0) { + this.congratulations = true; } this.cw_obj = response.results; - this.cw_score=response.results.score; - this.cw_message=response.results.message; + this.cw_score = response.results.score; + this.cw_message = response.results.message; var arr = response.results.details; - this.isloaded=true; + this.isloaded = true; this.error = false; this.cw_keysList = Object.keys(arr).map(key => { return key; @@ -154,30 +310,176 @@ getData(payload?){ this.cw_results = Object.keys(arr).map(key => { return arr[key]; }); - for(var i=0;i { + this.graphData = this.formatGraphData(response.changeHistory); + setTimeout(() => { + this.isGraphloaded = true; + },1000) + + }, + (error) => { + console.log('error', error) + this.graphError = true; + }); + } + else{ + this.swaggerSidebar.enableButton(true); + } }, (error) => { - this.isloaded=true; + this.isloaded = true; this.error = true; - }); - + }); } - - refresh(){ - this.isloaded=false; - this.getData(); + refresh() { + this.isloaded = false; + this.getSwaggerUrl(this.service.assets); } ngOnInit() { - this.env=this.route.snapshot.params['env']; - this.getData(); + + this.env = this.route.snapshot.params['env']; + this.getSwaggerUrl(this.service.assets); + if(this.env == 'prod'){ + this.evaluatePublish = 'EVALUATE / PUBLISH'; + try{ + this.reqJson = JSON.parse(localStorage.getItem('cw_request_id'+"_"+this.service.name+"_"+this.service.domain)); + if(this.reqJson){ + this.servicePublishStatus(this.reqJson.request_id); + } + } + catch(e){ + console.log(e) + } + } } - ngOnDestroy(){ + + ngOnDestroy() { this.closeSidebar(); + this.hidden=true; + this.env=this.route.snapshot.params['env']; } + + + + progressCompleted: boolean = true; + creating: boolean = true; + statusprogress: number = 5; + animatingDots: any; + deleting: boolean = false; + private intervalSubscription: Subscription; + service_request_id: any; + statusCompleted: boolean = true; + serviceStatusCompleted: boolean = false; + serviceStatusCompletedD: boolean = false; + serviceStatusPermissionD: boolean = false; + serviceStatusRepoD: boolean = false; + serviceStatusValidateD: boolean = false; + serviceStatusStarted: boolean = true; + serviceStatusStartedD: boolean = false; + statusFailed: boolean = false; + statusInfo: string = 'Starting'; + service_error: boolean = true; + + servicePublishStatus(message) { + this.statusCompleted = false; + this.statusInfo = "Starting"; + this.serviceStatusCompleted = false; + this.statusCompleted = false; + this.progressCompleted = false; + this.service_error = true; + this.statusFailed = false; + if(message || message===null){ + this.statusprogress = 5; + this.hidden = false; + this.intervalSubscription = Observable.interval(3000) + .switchMap((response) => this.http.get('/jazz/request-status?id='+message)) + .subscribe( + response => { + let dataResponse = {}; + dataResponse.list = response; + var respStatus = dataResponse.list.data; + let currentStatus = respStatus.events[respStatus.events.length - 1].name; + if (respStatus.status.toLowerCase() === 'completed' && currentStatus === 'CLEARWATER_SEND_NOTIFICATION') { + this.serviceStatusCompleted = true; + this.serviceStatusPermissionD = true; + this.serviceStatusRepoD = true; + this.serviceStatusValidateD = true; + this.statusInfo = 'Wrapping things up'; + this.statusprogress = 100; + this.hidden = true; + this.intervalSubscription.unsubscribe(); + this.statusInfo = "Completed"; + localStorage.removeItem('cw_request_id_' + this.service.name + '_' + this.service.domain); + setTimeout(() => { + this.service_error = false; + this.statusCompleted = true; + this.swaggerSidebar.enableButton(true); + }, 5000); + } else if (respStatus.status.toLowerCase() === 'failed') { + this.statusFailed = true; + this.service_error = true; + this.serviceStatusStarted = false; + this.serviceStatusStartedD = true; + this.serviceStatusCompletedD = true; + this.serviceStatusPermissionD = true; + this.serviceStatusRepoD = true; + this.serviceStatusValidateD = true; + this.statusInfo = 'Creation failed'; + localStorage.removeItem('cw_request_id_' + this.service.name + '_' + this.service.domain); + setTimeout(() => { + this.statusCompleted = true; + }, 5000); + + } else { + this.statusCompleted = false; + + if (currentStatus === 'CLEARWATER_SEND_NOTIFICATION') { + // this.serviceStatusCompleted = true; + this.statusInfo = 'Sending Notification'; + this.statusprogress = 93; + localStorage.removeItem('cw_request_id_' + this.service.name + '_' + this.service.domain); + } else if (currentStatus === 'CLEARWATER_RAISE_PR') { + this.serviceStatusPermissionD = true; + this.statusInfo = 'Raising PR'; + this.statusprogress = 85; + } else if (currentStatus === 'CLEARWATER_FORK_REPO') { + this.serviceStatusRepoD = true; + this.statusInfo = 'Forking Repository'; + this.statusprogress = 60; + } else if (currentStatus === 'CLEARWATER_GET_ARTIFACTS') { + this.serviceStatusValidateD = true; + this.statusInfo = 'Getting Artifacts'; + this.statusprogress = 35; + } else if (currentStatus === 'CLEARWATER_INITIALIZATION') { + this.serviceStatusStartedD = true; + this.statusInfo = 'Initializing Clear Water'; + this.statusprogress = 20; + }else if (currentStatus === 'CALL_CLEARWATER_PUBLISH_WORKFLOW') { + this.serviceStatusStartedD = true; + this.statusInfo = 'Publishing Service'; + this.statusprogress = 10; + } + } + document.getElementById('current-status-val').setAttribute("style", "width:" + this.statusprogress + '%'); + }, + error => { + + this.service_error = false; + this.servicePublishStatus(undefined); + } + ) + } +} + + + } 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 index d353fd8dfe..0e5de88afa 100644 --- a/app/src/app/pages/environment-codequality/env-codequality-section.component.ts +++ b/app/src/app/pages/environment-codequality/env-codequality-section.component.ts @@ -98,6 +98,7 @@ export class EnvCodequalitySectionComponent implements OnInit { selectMetric(index) { this.metricsIndex = index; this.selectedMetric = this.graphDataRaw.metrics[index]; + // debugger this.selectedMetricGraphData = this.formatGraphData(this.selectedMetric, this.filterData); } diff --git a/app/src/app/pages/environment-detail/environment-detail.component.scss b/app/src/app/pages/environment-detail/environment-detail.component.scss index 21fa073381..4efadcdf7d 100644 --- a/app/src/app/pages/environment-detail/environment-detail.component.scss +++ b/app/src/app/pages/environment-detail/environment-detail.component.scss @@ -161,7 +161,7 @@ .refresh-button { position: absolute; cursor: pointer; - top: .8rem; + top: 2rem; right: 12px; font-size: 1rem; text-transform: uppercase; @@ -184,5 +184,5 @@ /deep/.sidebar-wrp .sidebar-inr{ overflow-y:auto !important; } - -} \ No newline at end of file + +} diff --git a/app/src/app/pages/environment-detail/environment-detail.component.ts b/app/src/app/pages/environment-detail/environment-detail.component.ts index 205337181a..8ce0e77d6e 100644 --- a/app/src/app/pages/environment-detail/environment-detail.component.ts +++ b/app/src/app/pages/environment-detail/environment-detail.component.ts @@ -35,7 +35,7 @@ export class EnvironmentDetailComponent implements OnInit { status_inactive: boolean = false; swagger_error: boolean = false; - tabData = ['overview', 'deployments', 'code quality', 'assets', 'logs', 'clear water']; + tabData = ['overview', 'deployments', 'code quality', 'assets', 'logs', 'clearwater']; envSelected: string = ''; endpoint_env: string = ''; environment = { @@ -108,15 +108,17 @@ export class EnvironmentDetailComponent implements OnInit { if (service === undefined) { return {}; } else { - return { + let _service = { id: service.id, name: service.service, serviceType: service.type, runtime: service.runtime, status: service.status, domain: service.domain, - repository: service.repository + repository: service.repository, + created_by: service.created_by } + return _service; } }; @@ -173,7 +175,7 @@ export class EnvironmentDetailComponent implements OnInit { setTabs() { if (this.service.serviceType === 'api' || this.service.type === 'api') { - this.tabData = ['overview', 'deployments', 'assets', 'metrics', 'code quality', 'logs', 'clear water']; + this.tabData = ['overview', 'deployments', 'assets', 'metrics', 'code quality', 'logs', 'clearwater']; } else if (this.service.serviceType === 'function' || this.service.type === 'function') { this.tabData = ['overview', 'deployments', 'assets', 'metrics', 'code quality', 'logs']; } else if (this.service.serviceType === 'website' || this.service.type === 'website') { diff --git a/app/src/app/pages/service-overview/internal/service-overview.component.html b/app/src/app/pages/service-overview/internal/service-overview.component.html index d205802dfe..328cc0251a 100644 --- a/app/src/app/pages/service-overview/internal/service-overview.component.html +++ b/app/src/app/pages/service-overview/internal/service-overview.component.html @@ -174,7 +174,7 @@
  • -
    Creator
    +
    Created By
    {{service.created_by}}
  • diff --git a/app/src/app/primary-components/tabs/tabs.component.ts b/app/src/app/primary-components/tabs/tabs.component.ts index 2a71e0e37a..61eddb664e 100644 --- a/app/src/app/primary-components/tabs/tabs.component.ts +++ b/app/src/app/primary-components/tabs/tabs.component.ts @@ -31,7 +31,7 @@ export class TabsComponent implements OnInit { 'deployments': true, 'code quality': true, 'assets': true, - 'clear water': true + 'clearwater': true }; constructor() { @@ -65,7 +65,7 @@ export class TabsComponent implements OnInit { if (tabs[i] == 'metrics') this.disableobj['metrics'] = false; if (tabs[i] == 'assets') this.disableobj['assets'] = false; if (tabs[i] == 'logs') this.disableobj['logs'] = false; - if (tabs[i] == 'clear water') this.disableobj['clear water'] = false; + if (tabs[i] == 'clearwater') this.disableobj['clearwater'] = false; } } diff --git a/app/src/app/secondary-components/chartjs-linegraph/chartjs-linegraph.component.ts b/app/src/app/secondary-components/chartjs-linegraph/chartjs-linegraph.component.ts index 24d05aca6f..e39a2162b9 100644 --- a/app/src/app/secondary-components/chartjs-linegraph/chartjs-linegraph.component.ts +++ b/app/src/app/secondary-components/chartjs-linegraph/chartjs-linegraph.component.ts @@ -26,6 +26,8 @@ export class ChartjsLinegraphComponent implements OnInit, OnChanges { } ngOnChanges(changes?) { + this.datasets; + this.options; this.render(); this._datasets = this.datasets.map(this.modifyDataSet); this._options = this.getOptions(this.options); diff --git a/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.html b/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.html index 4f70ef5327..5fb1de543d 100644 --- a/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.html +++ b/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.html @@ -1,20 +1,57 @@
    -
    -
    -
    +
    +
    +
    {{service.name}}
    +
    +
    + +
    +
    +
    +
    Evaluate
    +
    +
    +
    Change your swagger here and evaluate against Clearwater Linter
    Note: Changes here will not be persisted.
    +
    -
    -
    {{i + 1}}
    -
    - +
    +
    {{i + 1}}
    +
    +
    - FORMAT JSON - + FORMAT JSON +

    {{validityMessage}}

    -
    - -
    +
    + +
    +
    +
    +
    Publish + +
    +
    +
    +
    Publish your swagger to Clearwater repository
    +
    +
    + Description +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    + +
    diff --git a/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.scss b/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.scss index c6e8a1e79b..6ea915bda5 100644 --- a/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.scss +++ b/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.scss @@ -2,168 +2,276 @@ @import './../../pages/services-list/services-list.component.scss'; @import './../../pages/clear-water/clear-water.component.scss'; -.sidebar-wrp .sidebar-inr{ - overflow-y: hidden; +.sidebar-wrp .sidebar-inr { + overflow-y: hidden; } -.bar-cover{ - min-height: 100vh; - min-width: 47rem; - right:0; - z-index:2; - border:2px solid #efefef; - padding:7rem 3.5rem 2.5rem 2.5rem;; - background-color: #efefef; - box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5); +.bar-cover { + min-height: 100vh; + min-width: 47rem; + right: 0; + z-index: 2; + border: 2px solid #efefef; + padding: 7rem 3.5rem 2.5rem 2.5rem; + ; + background-color: #efefef; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5); + - } -.empty-row-default{ - position: relative; - text-align: center; - padding: 3rem 1.25rem; - top: 25%; - font-size: 18px; - font-weight: 500; +.empty-row-default { + position: relative; + text-align: center; + padding: 3rem 1.25rem; + top: 25%; + font-size: 18px; + font-weight: 500; } -.btn-cover{ - display: flex; - justify-content: space-between; - padding-right: 1.5rem; - a{ - margin:0.5rem 0; - } +.btn-cover { + display: flex; + justify-content: space-between; + + a { + margin: 0.5rem 0; + } } -.close-icon{ - position: absolute; - right: 1REM; - top: 1rem; - font-size: 1.2rem; - color: #ed008c; +.close-icon { + position: absolute; + right: 1REM; + top: 1rem; + font-size: 1.2rem; + color: #ed008c; } .sidebar-loading { - height: 100%; - overflow-y: hidden; + height: 100%; + overflow-y: hidden; } -.empty-row{ - position: absolute; - top:40%; - left:50%; - .loading-row{ - background: transparent; +.empty-row { + position: absolute; + top: 40%; + left: 50%; - } + .loading-row { + background: transparent; + + } } -.cw-cover{ - flex-direction: column; +.cw-cover { + flex-direction: column; } -.cw-top-part{ - display: flex; - justify-content: space-between; +.cw-top-part { + display: flex; + justify-content: space-between; } -.cw-message{ - width: 100%; - text-align: center; - padding: 0 0 3rem 0; - font-weight: bold; +.cw-message { + width: 100%; + text-align: center; + padding: 0 0 3rem 0; + font-weight: bold; } -.cw-score{ - width:100% +.cw-score { + width: 100% } -.cw-values{ - width:100%; - ul{ - display: flex; - justify-content: space-around; - margin-top: 2.5rem; - } - li{ +.cw-values { + width: 100%; + + ul { + display: flex; + justify-content: space-around; + margin-top: 2.5rem; + } - display: flex; - flex-direction: column; - // height: 2rem; - div{ - // border:1px solid black; + li { + + display: flex; + flex-direction: column; + + // height: 2rem; + div { + // border:1px solid black; - } } + } } -.fg-overlay{ -position: absolute; -top:40%; -text-align: center; -padding:1rem; -border-radius:3px; -width: 100%; -font-size: 1.5rem; +.fg-overlay { + position: absolute; + top: 40%; + text-align: center; + padding: 1rem; + border-radius: 3px; + width: 100%; + font-size: 1.5rem; } -.removepadding{ - padding:0; +.removepadding { + padding: 0; } -.no-btn{ - margin:1rem; +.no-btn { + margin: 1rem; } -btn-jazz-primary{ - /deep/button.btn-primary{ - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; +btn-jazz-primary { + /deep/button.btn-primary { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } } + +.closeicon { + font-size: 1.2rem; + color: #ed008c; + position: absolute; + top: 0; + right: 0; + + &:hover { + transform: rotate(90deg); + transition: 0.15s transform; + } } -.closeicon{ - font-size: 1.2rem; - color: #ed008c; - position: absolute; - top:0; - right:0; - &:hover{ - transform: rotate(90deg); - transition: 0.15s transform; - } -} -.bk-btn{ - /deep/button.btn-primary{ + +.bk-btn { + /deep/button.btn-primary { margin: 1rem auto !important; display: block !important; - } + } +} + +.json-cover { + display: flex; + max-height: 50vh; + margin: 1rem 0; + font-size: 1rem; + + >div { + background: #2b343e; + overflow-y: hidden; + } + + .json-input-area { + width: 100%; + background: #2b343e; + color: #ddd; + overflow-y: scroll; + } + +} + +.line-numbers { + border-radius: 5px 0 0 5px; + width: 4rem; + padding: 2px 2px 2.5rem 2px; + color: #ddd; + text-align: right; } -.json-cover{ - display:flex; - max-height: 75vh; - margin:1rem 0; - padding-top:2rem; - - >div{ - background: #2b343e; - overflow-y: hidden; +.details { + border:1px solid #333; + summary::-webkit-details-marker { + color: #ed008c !important; + font-size: 120% !important; + margin: 7px 1rem 0 0 !important; + } +} +.sidebar-summary{ + &:hover{ + color:#ed008c; + } + + display: flex; + align-items:center; + outline:none; + cursor:pointer; + font-size: 1.4rem; +} + +.publish-body{ + margin-bottom: 1rem; + visibility: hidden; + display:none; + height: 0; + opacity:0; + max-height: 0; + .publish-sections{ + &:last-child{ + display:flex; + justify-content: flex-end; + } + + .publish-sections-header{ + margin:1.5rem 0 0.5rem 0; + font-weight: bold; + } - .json-input-area{ + .summary-2nd{ + margin-top:1.5rem; + } + .publish-sections-textinput{ + .det-value-input{ + border: 1px solid #ccc; + border-radius: 7px; width:100%; - background: #2b343e; - color:#ddd; - overflow-y: scroll; + } + .det-text-area{ + height: 8rem; + } + } - + } } +.swaggerhelp-text{ + font-size: 1rem; + padding-left: 2.5rem; + color: #aaa; +} +.icon-icon-up{ + margin-right: 1rem; + color:#ed008c; -.line-numbers { - border-radius: 5px 0 0 5px; - width: 4rem; - padding: 2px 2px 2.5rem 2px; - color:#ddd; - } \ No newline at end of file +} +.bodyshow{ + display: block; + visibility: visible; + height: auto; + opacity:1; + max-height:1000px; + transition:all 0.3s; + +} +.rotate-90{ + transform: rotate(90deg); + transition: all 0.3s; + font-size:1rem; +} +.rotate-180{ + transform: rotate(180deg); + transition: all 0.3s; + font-size:1rem; +} +.sidebar-details{ + border-top:1px solid #bbb; + padding: 1rem 0; +} +.service-name{ + font-size:2rem; + font-weight: bold; + margin-bottom: 1rem; +} + +.textForm-area{ + height:5rem !important; + padding:10px; +} diff --git a/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.ts b/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.ts index d108f7272e..498caa4f4a 100644 --- a/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.ts +++ b/app/src/app/secondary-components/swagger-sidebar/swagger-sidebar.component.ts @@ -10,6 +10,8 @@ import { Router, ActivatedRoute } from '@angular/router'; import { RequestService ,MessageService} from "../../core/services"; import {RelaxedJsonService} from "../../core/helpers/relaxed-json.service"; import {ToasterService} from 'angular2-toaster'; +import { DataService } from '../../pages/data-service/data.service'; +import { environment } from './../../../environments/environment'; @Component({ @@ -21,11 +23,14 @@ export class SwaggerSidebarComponent implements OnInit { @Input() service: any = {}; @Input() envSelected: any = {}; + @Input() ispublishing: boolean; + @Input() assets: any = []; + @Input() swagger_json: any; @Output() onClose: EventEmitter = new EventEmitter(); @Output() evaluate: EventEmitter = new EventEmitter(); + @Output() onRequestId: EventEmitter = new EventEmitter(); swaggerAsset:any; - swagger_json:any; validityMessage:string; valid:boolean = true; isloaded:string = 'default'; @@ -35,9 +40,16 @@ export class SwaggerSidebarComponent implements OnInit { cw_results; cw_obj:any={}; obj:any = {}; - assets; foundAsset; + applicationInput:any = ""; + foobarInput:any = ""; + notesInput:any = ""; + evaluateBody:boolean = true; + publishBody:boolean = false; public lineNumberCount: any = new Array(40).fill(''); + requestId:string; + publishBtnText:string = "PUBLISH"; + environmentVars = environment.urls || {}; private http:any; @@ -47,16 +59,24 @@ export class SwaggerSidebarComponent implements OnInit { private router: Router, private request:RequestService, private relaxedJson: RelaxedJsonService, + private data : DataService ) { this.http = request; } - - - ngOnInit() { + } + formatSwagger(){ + if(this.swagger_json && typeof(this.swagger_json) !== 'string' ){ + this.swagger_json = JSON.stringify(this.swagger_json); + this.swagger_json = this.stringToPrettyString(this.swagger_json); + } + } + enableButton(event){ + this.ispublishing = false; + this.publishBtnText = "PUBLISH"; } closeBar(){ @@ -92,9 +112,8 @@ export class SwaggerSidebarComponent implements OnInit { EvaluateJSON(){ this.formatJSON(); - var payload = { - "swaggerDoc":this.swagger_json - } + var payload = JSON.parse(this.swagger_json); + this.ispublishing = true; this.evaluate.emit(payload); } @@ -169,13 +188,47 @@ export class SwaggerSidebarComponent implements OnInit { goback(){ this.isloaded='default'; } - ngOnChanges(){ - if(this.service.hasOwnProperty('id')){ - this.getassets(); - + summaryClicked(position){ + if(position === "top"){ + this.evaluateBody = !this.evaluateBody; + } + else{ + this.publishBody = !this.publishBody; } } + publish(){ + this.ispublishing = true; + this.publishBtnText = "PUBLISHING"; + let payload = { + service_id : this.service.id, + service_name : this.service.name, + domain : this.service.domain, + description: this.notesInput, + username : this.service.created_by + } + this.http.post('/jazz/publish-to-clearwater', payload).subscribe((Response) => { + this.notesInput = ''; + localStorage.setItem('cw_request_id' + "_" + payload.service_name + "_" + payload.domain, JSON.stringify( + { service: this.service.name, + domain: this.service.domain, + request_id: Response.data.request_id + })); + this.onRequestId.emit(Response.data.request_id); + }, + (err) => { + this.notesInput = ''; + this.publishBtnText = "PUBLISH"; + this.ispublishing = false; + }); + } + ngOnChanges(){ + if(this.service.hasOwnProperty('id') && !this.assets && !this.swagger_json){ + this.getassets(); + }else{ + this.formatSwagger(); + } + } } diff --git a/app/src/environments/environment.prod.ts b/app/src/environments/environment.prod.ts index 79c11775c6..2698248b0e 100644 --- a/app/src/environments/environment.prod.ts +++ b/app/src/environments/environment.prod.ts @@ -49,11 +49,13 @@ export const environment = { envName : "jazz", multi_env:false, serviceTabs:['overview','access control','metrics','logs'], - environmentTabs:['overview','deployments','code quality','assets', 'metrics', 'logs','clear water'], + environmentTabs:['overview','deployments','code quality','assets', 'metrics', 'logs','clearwater'], urls:{ docs_link: "https://docs.jazz.corporate.t-mobile.com/", content_base: "https://docs.jazz.corporate.t-mobile.com/external-content", - swagger_editor: 'http://editor.cloud-api.corporate.t-mobile.com/?url=' + swagger_editor: 'http://editor.cloud-api.corporate.t-mobile.com/?url=', + swaggerApiUrl: 'https://swagger-lint-ui-DLAB03.dev.px-npe01.cf.t-mobile.com/api-center-of-excellence/v1/swagger-lint', + clearwaterAppUrl: 'http://flows.corporate.t-mobile.com/' }, userJourney: { registrationMessage: '' diff --git a/app/src/environments/environment.ts b/app/src/environments/environment.ts index 48b05e8506..485a856471 100644 --- a/app/src/environments/environment.ts +++ b/app/src/environments/environment.ts @@ -49,11 +49,13 @@ export const environment = { envName: "jazz", multi_env: false, serviceTabs: ['overview', 'access control', 'metrics', 'logs'], - environmentTabs: ['overview', 'deployments', 'code quality', 'assets', 'metrics', 'logs', 'clear water'], + environmentTabs: ['overview', 'deployments', 'code quality', 'assets', 'metrics', 'logs', 'clearwater'], urls: { docs_link: "https://docs.jazz.corporate.t-mobile.com", content_base: "https://docs.jazz.corporate.t-mobile.com/external-content", - swagger_editor: 'http://editor.cloud-api.corporate.t-mobile.com/?url=' + swagger_editor: 'http://editor.cloud-api.corporate.t-mobile.com/?url=', + swaggerApiUrl: 'https://swagger-lint-ui-DLAB03.dev.px-npe01.cf.t-mobile.com/api-center-of-excellence/v1/swagger-lint', + clearwaterAppUrl: 'http://flows.corporate.t-mobile.com/' }, userJourney: { registrationMessage: ''