You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/12/19 14:03:19 UTC
[incubator-dlab] branch DLAB-1239 updated: [DLAB-1239]: Swagger
module separation
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch DLAB-1239
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
The following commit(s) were added to refs/heads/DLAB-1239 by this push:
new c8b6763 [DLAB-1239]: Swagger module separation
c8b6763 is described below
commit c8b67635895144ec17a4c3e4c692c4b0bbec143d
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Dec 19 16:04:08 2019 +0200
[DLAB-1239]: Swagger module separation
---
.../main/resources/webapp/src/app/app.module.ts | 5 +-
.../app/reporting/toolbar/toolbar.component.html | 5 +-
...oolbar.component.css => toolbar.component.scss} | 115 ++++++++++++---------
.../src/app/reporting/toolbar/toolbar.component.ts | 22 ++--
.../main/resources/webapp/src/app/swagger/index.ts | 32 ++++++
5 files changed, 115 insertions(+), 64 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/app.module.ts b/services/self-service/src/main/resources/webapp/src/app/app.module.ts
index aaa125e..e23e14a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/app.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/app.module.ts
@@ -40,10 +40,10 @@ import { ReportingModule } from './reporting/reporting.module';
import { AdministrationModule } from './administration/administration.module';
import { WebterminalModule } from './webterminal';
import { CoreModule } from './core/core.module';
-import { SwaggerComponent } from './swagger/swagger.component';
+import { SwaggerAPIModule } from './swagger';
@NgModule({
- declarations: [AppComponent, SwaggerComponent],
+ declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
@@ -58,6 +58,7 @@ import { SwaggerComponent } from './swagger/swagger.component';
ReportingModule,
AdministrationModule,
WebterminalModule,
+ SwaggerAPIModule,
RouterModule,
AppRoutingModule,
CoreModule.forRoot(),
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.html b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.html
index e425338..9c0b9c0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.html
@@ -16,11 +16,12 @@
~ specific language governing permissions and limitations
~ under the License.
-->
-<section>
+<section class="toolbar">
<div class="info_color" *ngIf="reportData">
<div class="general">
<div><span>Service base name: </span><strong>{{ reportData.service_base_name }}</strong></div>
- <div *ngIf="reportData.tag_resource_id"><span>Resource tag ID: </span><strong>{{ reportData.tag_resource_id }}</strong></div>
+ <div *ngIf="reportData.tag_resource_id"><span>Resource tag ID:
+ </span><strong>{{ reportData.tag_resource_id }}</strong></div>
<div class="report-period info_color" *ngIf="availablePeriodFrom && availablePeriodTo">
<span>Available reporting period from:</span>
<strong>{{ availablePeriodFrom | date }} </strong>
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.css b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.scss
similarity index 66%
rename from services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.css
rename to services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.scss
index 5e82739..c273eab 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.css
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.scss
@@ -17,108 +17,123 @@
* under the License.
*/
-section {
- display: flex;
- justify-content: space-between;
- font-weight: 300;
-}
-section > div {
+section.toolbar {
+ display: flex;
+ justify-content: space-between;
+ font-weight: 300;
+
+ >div {
width: 33%;
-}
-section > div:nth-child(2) {
+ }
+
+ >div:nth-child(2) {
text-align: center;
-}
-section > div:nth-child(3) {
+ }
+
+ >div:nth-child(3) {
text-align: right;
-}
+ }
-.action-butt {
+ .action-butt {
align-self: center;
-}
-.action-butt button:first-child{
- margin-right: 10px;
-}
+ }
-.action-butt .butt-report-range {
+ button {
+ &:first-child {
+ margin-right: 10px;
+ }
+ }
+
+ .butt-report-range {
width: 240px;
margin-right: 10px;
-}
+ }
-.general {
+ .general {
font-size: 13px;
-}
-.general div span {
- width: 190px;
- display: inline-block;
+
+ div {
+ span {
+ width: 190px;
+ display: inline-block;
+ }
+ }
+ }
}
- /* daterangepicker themes */
+/* daterangepicker themes */
#range-picker {
- margin-top: 5px;
+ margin-top: 5px;
}
+
#range-picker path#Shape {
- fill: #36afd5;
+ fill: #36afd5;
}
#range-picker .ng-daterangepicker,
#range-picker .ng-daterangepicker.is-active,
#range-picker .ng-daterangepicker .calendar {
- border: none;
- border-radius: 0;
- box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+ border: none;
+ border-radius: 0;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
#range-picker .ng-daterangepicker .calendar::after {
- border-top: 1px solid rgba(234, 234, 234, 0.64);
- border-left: 1px solid rgba(234, 234, 234, 0.64);
+ border-top: 1px solid rgba(234, 234, 234, 0.64);
+ border-left: 1px solid rgba(234, 234, 234, 0.64);
}
#range-picker .ng-daterangepicker .calendar .side-container .side-button {
- background: #fff;
- color: #718ba6;
- border: none;
- border-radius: 0px;
- box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
+ background: #fff;
+ color: #718ba6;
+ border: none;
+ border-radius: 0px;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
+
#range-picker .ng-daterangepicker .calendar .side-container .side-button.is-active,
#range-picker .ng-daterangepicker .input-section .label-txt {
- color: #35afd5;
+ color: #35afd5;
}
+
#range-picker .ng-daterangepicker .calendar .calendar-container .day-num.is-active,
#range-picker .ng-daterangepicker .calendar .calendar-container .days .day-num:hover {
- background: #35afd5;
- background-clip: padding-box;
+ background: #35afd5;
+ background-clip: padding-box;
}
+
#range-picker .ng-daterangepicker .calendar .calendar-container .day-names,
#range-picker .ng-daterangepicker .calendar .calendar-container .days {
- width: 310px;
+ width: 310px;
}
+
#range-picker .ng-daterangepicker .calendar .day.is-within-range.is-first-weekday,
#range-picker .ng-daterangepicker .calendar .day.is-within-range.is-last-weekday {
- background-clip: padding-box;
+ background-clip: padding-box;
}
#range-picker .ng-daterangepicker .calendar .calendar-container .day.is-within-range {
- background: #e9f8fc
+ background: #e9f8fc
}
#range-picker .ng-daterangepicker .input-section .cal-icon svg path {
- fill: #35afd5;
+ fill: #35afd5;
}
#range-picker .ng-daterangepicker .input-section .value-txt {
- color: #718ba6;
+ color: #718ba6;
}
#range-picker .ng-daterangepicker .input-section .value-txt.untouched,
#range-picker .ng-daterangepicker .input-section .label-txt.untouched {
- color: #fff;
+ color: #fff;
}
+
#range-picker .ng-daterangepicker .input-section .value-txt.untouched::after {
- content: 'Select date';
- position: absolute;
- top: 22px;
- left: 34px;
- color: #718ba6;
+ content: 'Select date';
+ position: absolute;
+ top: 22px;
+ left: 34px;
+ color: #718ba6;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.ts
index af51d0a..aaa0e8d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.ts
@@ -24,7 +24,7 @@ import { DICTIONARY } from '../../../dictionary/global.dictionary';
@Component({
selector: 'dlab-toolbar',
templateUrl: './toolbar.component.html',
- styleUrls: ['./toolbar.component.css'],
+ styleUrls: ['./toolbar.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ToolbarComponent implements OnInit, AfterViewInit {
@@ -34,7 +34,7 @@ export class ToolbarComponent implements OnInit, AfterViewInit {
availablePeriodFrom: string;
availablePeriodTo: string;
- rangeOptions = {'YTD': 'Year To Date', 'QTD': 'Quarter To Date', 'MTD': 'Month To Date', 'reset': 'All Period Report'};
+ rangeOptions = { 'YTD': 'Year To Date', 'QTD': 'Quarter To Date', 'MTD': 'Month To Date', 'reset': 'All Period Report' };
options: NgDateRangePickerOptions;
rangeLabels: any;
@@ -55,11 +55,11 @@ export class ToolbarComponent implements OnInit, AfterViewInit {
}
ngOnInit() {
- if (localStorage.getItem('report_period')) {
- const availableRange = JSON.parse(localStorage.getItem('report_period'));
- this.availablePeriodFrom = availableRange.start_date;
- this.availablePeriodTo = availableRange.end_date;
- }
+ if (localStorage.getItem('report_period')) {
+ const availableRange = JSON.parse(localStorage.getItem('report_period'));
+ this.availablePeriodFrom = availableRange.start_date;
+ this.availablePeriodTo = availableRange.end_date;
+ }
}
ngAfterViewInit() {
@@ -86,11 +86,13 @@ export class ToolbarComponent implements OnInit, AfterViewInit {
for (let label = 0; label < rangeLabels.length; ++label)
if (rangeLabels[label].classList.contains('untouched')) {
rangeLabels[label].classList.remove('untouched');
- }
+ }
const reportDateRange = dateRange.split('-');
- this.setRangeOption.emit({start_date: reportDateRange[0].split('/').join('-'),
- end_date: reportDateRange[1].split('/').join('-')});
+ this.setRangeOption.emit({
+ start_date: reportDateRange[0].split('/').join('-'),
+ end_date: reportDateRange[1].split('/').join('-')
+ });
}
rebuild($event): void {
diff --git a/services/self-service/src/main/resources/webapp/src/app/swagger/index.ts b/services/self-service/src/main/resources/webapp/src/app/swagger/index.ts
new file mode 100644
index 0000000..61da422
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/swagger/index.ts
@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SwaggerComponent } from './swagger.component';
+
+export * from './swagger.component';
+
+@NgModule({
+ imports: [CommonModule],
+ declarations: [SwaggerComponent],
+ exports: [SwaggerComponent]
+})
+export class SwaggerAPIModule { }
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org