From b3d4d40fd4fd0ccbea4f8bcac71c38fe247c5972 Mon Sep 17 00:00:00 2001 From: Alexander Matyushentsev Date: Wed, 23 Aug 2017 14:56:03 -0700 Subject: [PATCH] UI cleanup for Timeline, Fixtures and Application screens --- saas/axops/src/ui/src/app/app.scss | 2 +- .../common/artifacts/artifacts.component.ts | 3 + .../src/app/common/artifacts/artifacts.html | 2 +- .../src/app/common/pie-chart/pie-chart.scss | 4 ++ .../common/workflow-tree/workflow-tree.scss | 15 +++-- .../+applications/app-graph/app-graph.html | 4 +- .../+applications/app-graph/app-graph.scss | 4 +- .../app-overview/app-overview.html | 2 +- .../application-details.html | 12 ++-- .../application-details.scss | 17 ++++- .../application-panel/application-panel.html | 6 +- .../application-panel/application-panel.scss | 1 + .../deployment-details.html | 10 +-- .../deployment-details.scss | 29 +++++++-- .../config-management-overview.html | 4 +- .../fixture-classes/fixture-classes.html | 12 ++-- .../fixture-classes/fixture-classes.scss | 10 +++ .../fixture-instance-attributes-panel.html | 6 +- .../fixture-instance-details.scss | 4 +- .../fixture-instances/fixture-instances.html | 26 ++++---- .../fixture-instances/fixture-instances.scss | 17 ++++- .../fixture-template-panel.html | 4 +- .../fixture-usage-chart.component.ts | 41 ++---------- .../fixture-usage-chart.html | 15 +++++ .../fixture-usage-chart.scss | 65 +++++++++++++++++-- .../+timeline/job-details/job-details.html | 17 ++--- .../+timeline/job-details/job-details.scss | 18 +++-- .../job-fixtures-box.component.ts | 7 +- .../job-fixtures-box/job-fixtures-box.html | 19 ++++-- .../job-fixtures-box/job-fixtures-box.scss | 4 -- .../navigation/navigation.component.scss | 2 + saas/axops/src/ui/src/assets/styles/main.scss | 4 ++ 32 files changed, 257 insertions(+), 129 deletions(-) create mode 100644 saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.html diff --git a/saas/axops/src/ui/src/app/app.scss b/saas/axops/src/ui/src/app/app.scss index 8ab465bd35e5..c4ab3666ac2f 100644 --- a/saas/axops/src/ui/src/app/app.scss +++ b/saas/axops/src/ui/src/app/app.scss @@ -45,7 +45,7 @@ } .tabs__content &[ax-infinite-scroll] { - height: calc(100vh - 164px); + height: calc(100vh - 156px); } &.ax-inifnite-scroll--without-filter-bar[ax-infinite-scroll] { diff --git a/saas/axops/src/ui/src/app/common/artifacts/artifacts.component.ts b/saas/axops/src/ui/src/app/common/artifacts/artifacts.component.ts index fd64bbc4adb4..50819c291c17 100644 --- a/saas/axops/src/ui/src/app/common/artifacts/artifacts.component.ts +++ b/saas/axops/src/ui/src/app/common/artifacts/artifacts.component.ts @@ -53,6 +53,9 @@ export class ArtifactsComponent implements OnDestroy { } } + @Input() + public isFullWidthContent: boolean = false; + @Output() public selectedCountChanged: EventEmitter = new EventEmitter(); diff --git a/saas/axops/src/ui/src/app/common/artifacts/artifacts.html b/saas/axops/src/ui/src/app/common/artifacts/artifacts.html index 9a0640eb7083..903da567c95e 100644 --- a/saas/axops/src/ui/src/app/common/artifacts/artifacts.html +++ b/saas/axops/src/ui/src/app/common/artifacts/artifacts.html @@ -1,4 +1,4 @@ -
+
diff --git a/saas/axops/src/ui/src/app/common/pie-chart/pie-chart.scss b/saas/axops/src/ui/src/app/common/pie-chart/pie-chart.scss index 53e2ae1ff7d3..df25c90ab442 100644 --- a/saas/axops/src/ui/src/app/common/pie-chart/pie-chart.scss +++ b/saas/axops/src/ui/src/app/common/pie-chart/pie-chart.scss @@ -1,4 +1,8 @@ .pie-chart { + width: 130px; + height: 130px; + margin: auto; + .nvd3.nv-pie path { stroke: transparent; stroke-width: 0px; diff --git a/saas/axops/src/ui/src/app/common/workflow-tree/workflow-tree.scss b/saas/axops/src/ui/src/app/common/workflow-tree/workflow-tree.scss index 024af9390226..d6e3fed9dba0 100644 --- a/saas/axops/src/ui/src/app/common/workflow-tree/workflow-tree.scss +++ b/saas/axops/src/ui/src/app/common/workflow-tree/workflow-tree.scss @@ -30,14 +30,13 @@ $connectorColor: #8FA4B1; } &__table-headline { - border-left: 1px solid #e8e8e8; - color: #A3A3A3; + border-left: 1px solid $ax-color-gray-5; + color: $ax-color-gray-5; margin-left: 80px; padding-left: 5px; height: 40px; font-size: 12px; text-align: left; - font-weight: lighter; } &__node { @@ -309,8 +308,8 @@ $connectorColor: #8FA4B1; &__task-details-artifacts { position: absolute; - z-index: 1; - top: 18px; + z-index: 2; + top: 7px; right: 16px; &--btn-pos { @@ -318,6 +317,12 @@ $connectorColor: #8FA4B1; vertical-align: middle; } } + + &__second-bar { + height: 48px; + display: block; + width: 100%; + } } .workflow-fixtures-logs { diff --git a/saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.html b/saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.html index 1cf10fbc5c1e..cb96515b5a38 100644 --- a/saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.html +++ b/saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.html @@ -1,6 +1,6 @@
-
+
@@ -41,7 +41,7 @@
-
diff --git a/saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.scss b/saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.scss index 4c86d01f272a..53d25132fb15 100644 --- a/saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.scss +++ b/saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.scss @@ -13,6 +13,7 @@ $node-width: 200px; display: inline-block; padding: 0.8em; margin-bottom: 1.5em; + border: 1px solid $white-color; border-radius: $border-radius; label { @@ -23,6 +24,7 @@ $node-width: 200px; width: $node-width - 60px - 35px; display: inline-block; vertical-align: middle; + font-size: 14px; } &--selected { @@ -88,7 +90,7 @@ $node-width: 200px; &__node-icon { color: $ax-success-color; position: absolute; - font-size: 28px; + font-size: 26px; &--progress { color: $ax-running-color; diff --git a/saas/axops/src/ui/src/app/views/+applications/app-overview/app-overview.html b/saas/axops/src/ui/src/app/views/+applications/app-overview/app-overview.html index 3ecd6908cd86..14a050f30c19 100644 --- a/saas/axops/src/ui/src/app/views/+applications/app-overview/app-overview.html +++ b/saas/axops/src/ui/src/app/views/+applications/app-overview/app-overview.html @@ -87,7 +87,7 @@
- +
\ No newline at end of file diff --git a/saas/axops/src/ui/src/app/views/+applications/application-details/application-details.html b/saas/axops/src/ui/src/app/views/+applications/application-details/application-details.html index c634351bc89f..4d33a6723955 100644 --- a/saas/axops/src/ui/src/app/views/+applications/application-details/application-details.html +++ b/saas/axops/src/ui/src/app/views/+applications/application-details/application-details.html @@ -60,7 +60,7 @@ - Logs for {{logsInfo?.pod.name}} + Logs for {{logsInfo?.pod.name}}
@@ -82,7 +82,7 @@ - Pod: {{consoleInfo?.pod?.name}} + Pod: {{consoleInfo?.pod?.name}} @@ -91,11 +91,15 @@ - Spendings: {{application?.name}} + Spendings: {{application?.name}}
- +
+
+ +
+
diff --git a/saas/axops/src/ui/src/app/views/+applications/application-details/application-details.scss b/saas/axops/src/ui/src/app/views/+applications/application-details/application-details.scss index 4432c3c88428..f8d04196b18c 100644 --- a/saas/axops/src/ui/src/app/views/+applications/application-details/application-details.scss +++ b/saas/axops/src/ui/src/app/views/+applications/application-details/application-details.scss @@ -24,7 +24,7 @@ $padding: 50px; } &__spendings { - background-color: $white-color; + background-color: $ax-color-gray-2; position: absolute; left: 0; right: 0; @@ -45,7 +45,7 @@ $padding: 50px; font-size: 12px; height: $top-bar-height; line-height: $top-bar-height; - border-bottom: 1px solid $ax-color-gray-2; + border-bottom: 1px solid $ax-color-gray-3; padding-left: $padding; & > a > i { @@ -56,12 +56,14 @@ $padding: 50px; &__header { height: $top-bar-height; background-color: $ax-color-gray-2; + border-bottom: 1px solid $ax-color-gray-3; &--title { display: inline-block; padding-left: $padding; line-height: $top-bar-height; - font-weight: 300; + font-weight: 500; + font-size: .925em; & > a > i { font-size: 20px; @@ -69,4 +71,13 @@ $padding: 50px; } } } + + &__panel-header { + font-weight: 500; + font-size: .925em; + + & > strong { + font-weight: 500; + } + } } diff --git a/saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.html b/saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.html index 4902616f1cd5..02edd6e88f3f 100644 --- a/saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.html +++ b/saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.html @@ -27,16 +27,16 @@
-
+
{{ application.jira_issues?.length || 0 }}
JIRA issues
-
+
Endpoint
-
+
Endpoints diff --git a/saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.scss b/saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.scss index ae5927441b5e..1868ccb5b3c0 100644 --- a/saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.scss +++ b/saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.scss @@ -23,6 +23,7 @@ $applications-status-width: 200px; &__item-value { font-size: 2em; + color: $ax-color-gray-6; &--highlight { color: $ax-color-teal-6; diff --git a/saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.html b/saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.html index 8ae8511dd365..1cae63c081d9 100644 --- a/saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.html +++ b/saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.html @@ -73,7 +73,7 @@

{{ activeEditScale ? 'EDIT SCAL
-

{{ 'End Points' | translate | uppercase }}

+

{{ 'End Points' | translate | uppercase }}

@@ -137,8 +137,8 @@

{{ 'End Points' | translate | uppercase }}

-

{{ 'Recent Revision' | translate | uppercase }}

-

{{ 'View Revision History' | translate | uppercase }}

+

{{ 'Recent Revision' | translate | uppercase }}

+ {{ 'View Revision History' | translate | uppercase }}
@@ -147,7 +147,7 @@

{{ 'View Revision Histor

-

{{ 'Volume' | translate | uppercase }}

+

{{ 'Volume' | translate | uppercase }}

@@ -181,7 +181,7 @@

{{ 'Volume' | translate | uppercase }}

-

{{ 'Spending for last 30 days' | translate | uppercase }}

+

{{ 'Spending for last 30 days' | translate | uppercase }}

diff --git a/saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.scss b/saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.scss index 380eec7ece5f..ecfdc1fdf054 100644 --- a/saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.scss +++ b/saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.scss @@ -1,6 +1,6 @@ @import '../../../../assets/styles/config'; -$top-bar-height: 56px; +$top-bar-height: 50px; $round-btn-size: 35px; $counter-background-size: 90px; $counter-background-active-size: 140px; @@ -19,13 +19,17 @@ $padding: 50px; text-overflow: ellipsis; } - h2 { + h3 { display: inline-block; color: $ax-color-gray-6; - font-size: 15px; + font-size: 16px; + font-weight: 500; text-transform: uppercase; - margin-bottom: 5px; - margin-top: 30px; + margin: 30px 0 10px; + } + + &__action-btn { + margin: 30px 0 10px; } &__close-btn { @@ -35,8 +39,15 @@ $padding: 50px; padding-right: $padding; } + &__header { + background-color: $ax-color-gray-2; + border-bottom: 1px solid $ax-color-gray-3; + height: $top-bar-height; + } + &__content { padding: 40px $padding; + background-color: $ax-color-gray-2; &--stream { @@ -81,10 +92,10 @@ $padding: 50px; &__panel { position: relative; border-radius: $border-radius; - border: 1px solid $ax-color-gray-3; height: 100%; - box-shadow: 0 1px 5px $ax-color-gray-3; + box-shadow: 2px 3px 1px $ax-color-gray-4; overflow: hidden; + background-color: white; & > h3 { color: $ax-color-gray-6; @@ -100,6 +111,10 @@ $padding: 50px; padding: 5px 10px; } + &--inner-padding { + padding: 20px; + } + &--additional-vertical-padding { padding-top: 20px; padding-bottom: 20px; diff --git a/saas/axops/src/ui/src/app/views/+config-management/config-management-overview/config-management-overview.html b/saas/axops/src/ui/src/app/views/+config-management/config-management-overview/config-management-overview.html index 4338ba851f5c..b421afc75551 100644 --- a/saas/axops/src/ui/src/app/views/+config-management/config-management-overview/config-management-overview.html +++ b/saas/axops/src/ui/src/app/views/+config-management/config-management-overview/config-management-overview.html @@ -12,7 +12,7 @@
-
+
Name
@@ -23,7 +23,7 @@
-
+
{{config.name}} diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.html b/saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.html index 903940fc8dd8..3a81916a1645 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.html +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.html @@ -36,14 +36,18 @@
-
AVAILABLE FIXTURES: {{group.enabledClass.stats.available}}
-
TOTAL FIXTURES: {{group.enabledClass.stats.total}}
+
+ Available Fixtures: {{group.enabledClass.stats.available}} +
+
+ Total Fixtures: {{group.enabledClass.stats.total}} +
-
- Repo/Branch: +
+ Repo/Branch: {{ group.enabledClass.repo + '/' + group.enabledClass.branch }}
diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.scss b/saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.scss index 66d4c11a1fa1..3683247b8aaa 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.scss +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.scss @@ -127,6 +127,11 @@ text-transform: uppercase; } + &__top-des { + font-size: 13px; + color: $ax-color-gray-6; + } + &__des { color: $ax-color-gray-5; } @@ -146,6 +151,11 @@ padding: 6px 0 12px; } + &__repo { + font-size: 12px; + color: $ax-color-gray-5; + } + &__menu { float: right; width: 6%; diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-instance-attributes-panel/fixture-instance-attributes-panel.html b/saas/axops/src/ui/src/app/views/+fixtures/fixture-instance-attributes-panel/fixture-instance-attributes-panel.html index c72576d5c4b8..718b78618fe4 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-instance-attributes-panel/fixture-instance-attributes-panel.html +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-instance-attributes-panel/fixture-instance-attributes-panel.html @@ -1,11 +1,11 @@ - + -

{{messages.title}}

-

Please specify the attributes for: {{fixtureClass.name}}

+
{{messages.title}}
+
Please specify the attributes for: {{fixtureClass.name}}
diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-instance-details/fixture-instance-details.scss b/saas/axops/src/ui/src/app/views/+fixtures/fixture-instance-details/fixture-instance-details.scss index 72ab291c2172..325d8876c5be 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-instance-details/fixture-instance-details.scss +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-instance-details/fixture-instance-details.scss @@ -50,8 +50,8 @@ } &__chart { - width: 100%; - background: linear-gradient(135deg, $ax-color-teal-8 0%, $ax-color-teal-5 100%); + min-height: 180px; + background-color: $ax-color-gray-1; padding-top: 4em; border-bottom-right-radius: 4px; border-top-right-radius: 4px; diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-instances/fixture-instances.html b/saas/axops/src/ui/src/app/views/+fixtures/fixture-instances/fixture-instances.html index 9809ca6d4533..6ef8988084a4 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-instances/fixture-instances.html +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-instances/fixture-instances.html @@ -7,29 +7,31 @@
{{instance.name}}
{{instance.creator}} created on: {{instance.ctime | axShortDateTime}}
-
STATUS:
+
STATUS:
{{instance.description}}
-
+
-
+
{{attribute.name | uppercase }}:
-
+
{{attribute.value}}
-
- - - -
-
+
+
+ +
+ + + +
diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-instances/fixture-instances.scss b/saas/axops/src/ui/src/app/views/+fixtures/fixture-instances/fixture-instances.scss index 78df5ff97a50..c6d4d6291076 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-instances/fixture-instances.scss +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-instances/fixture-instances.scss @@ -20,7 +20,7 @@ &__attributes { position: relative; overflow: visible !important; - background-color: $ax-color-teal-1; + background-color: $ax-color-gray-1; padding-top: 2em; } @@ -28,12 +28,23 @@ position: absolute; top: 1em; right: 1em; + line-height: 1em; } &__chart { - background: linear-gradient(135deg, $ax-color-teal-8 0%, $ax-color-teal-5 100%); - padding-top: 1em; + background-color: $ax-color-gray-1; + padding-top: 0.5em; border-top-right-radius: 4px; border-bottom-right-radius: 4px; + position: relative; + } + + &__separator { + position: absolute; + left: 0; + width: 1px; + top: 17px; + height: 80%; + background-color: $ax-color-gray-3; } } \ No newline at end of file diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-template-panel/fixture-template-panel.html b/saas/axops/src/ui/src/app/views/+fixtures/fixture-template-panel/fixture-template-panel.html index 0c86edc7aa65..33d10e65f7e4 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-template-panel/fixture-template-panel.html +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-template-panel/fixture-template-panel.html @@ -6,8 +6,8 @@ -

{{messages.title}}

-

Select the repo/branch where you want to enable and use {{ templateGroup && templateGroup[0].name }} fixtures.

+
{{messages.title}}
+
Select the repo/branch where you want to enable and use {{ templateGroup && templateGroup[0].name }} fixtures.
diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.component.ts b/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.component.ts index 568ce64a18fb..5d009927d45c 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.component.ts +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.component.ts @@ -3,40 +3,12 @@ import { FixtureInstance } from '../../../model'; @Component({ selector: 'ax-fixture-usage-chart', - template: ` -
- -

DEPLOYMENTS: {{usageInfo.deploymentsCount}}

-

WORKFLOWS: {{usageInfo.workflowsCount}}

-
`, + templateUrl: './fixture-usage-chart.html', styles: [ require('./fixture-usage-chart.scss') ] }) export class FixtureUsageChartComponent { - public chartOptions = { - chart: { - type: 'pieChart', - height: 120, - margin: { top: 0, left: 0, right: 0, bottom: 0 }, - showLabels: false, - duration: 500, - labelThreshold: 0.01, - labelSunbeamLayout: true, - showLegend: false, - donut: true, - donutRatio: 0.54, - tooltip: { enabled: false }, - color: [ - // deployment color - '#1FBDD0', - // workflow color - '#95D58F', - // not used - '#F5FBFD' - ] - } - }; - public usageInfo = { deploymentsCount: 0, workflowsCount: 0 }; public chartData = []; + public usageInfo = { deploymentsCount: 0, workflowsCount: 0 }; @Input() public set fixture(fixture: FixtureInstance) { @@ -45,11 +17,10 @@ export class FixtureUsageChartComponent { workflowsCount: (fixture.referrers || []).filter(ref => !ref.application_id).length }; if (fixture.concurrency && fixture.concurrency > 0) { - this.chartData = [ - { y: this.usageInfo.deploymentsCount }, - { y: this.usageInfo.workflowsCount }, - { y: fixture.concurrency - (this.usageInfo.deploymentsCount + this.usageInfo.workflowsCount) - }]; + this.chartData = []; + this.chartData.push({label: 'Deployments', value: this.usageInfo.deploymentsCount, color: '#bf86f1'}); + this.chartData.push({label: 'Workflows', value: this.usageInfo.workflowsCount, color: '#0055b9'}); + this.chartData.push({label: '', value: fixture.concurrency - (this.usageInfo.deploymentsCount + this.usageInfo.workflowsCount), color: '#ccd6dd'}); } else { this.chartData = [{y: 0}, {y: 0}, {y: 1}]; } diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.html b/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.html new file mode 100644 index 000000000000..a82bd97d39f3 --- /dev/null +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.html @@ -0,0 +1,15 @@ +
+
+
+ +
+ + Total +
+
+
+
+ DEPLOYMENTS: {{usageInfo.deploymentsCount}} + WORKFLOWS: {{usageInfo.workflowsCount}} +
+
\ No newline at end of file diff --git a/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.scss b/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.scss index a667870b627e..38ad1c6ff82e 100644 --- a/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.scss +++ b/saas/axops/src/ui/src/app/views/+fixtures/fixture-usage-chart/fixture-usage-chart.scss @@ -1,28 +1,79 @@ @import '../../../../assets/styles/config'; .fixture-usage-chart { - &__title { - color: $ax-color-teal-1; + display: block; + position: relative; + min-width: 200px; + + &__legend { + display: block; + position: relative; + width:100%; + margin: auto; + text-align: center; + padding-bottom: 20px; + line-height: 0; + margin-top: 10px; + font-weight: 400; + } + + &__legend-item { + color: $ax-color-gray-5; text-align: center; margin-bottom: 0.1em; + margin-left: 0.5em; + margin-right: 0.5em; + font-size: 1em; &::before { content: ' '; display: inline-block; - width: 0.5em; - height: 0.5em; - border-radius: 1em; + width: 1em; + height: 1em; + border-radius: 50%; + vertical-align: middle; background-color: white; margin-bottom: 2px; margin-right: 2px; } &--deployments::before { - background-color: $ax-color-teal-5; + background-color: #bf86f1; } &--workflows::before { - background-color: $ax-success-color-light; + background-color: #0055b9; + } + } + + &__center { + display: block; + position: relative; + width: 50%; + margin: auto; + } + + &__total-counter { + position: absolute; + top: 44px; + left: 50%; + transform: translate(-50%); + color: $ax-color-gray-5; + + & > label { + display: block; + font-weight: 300; + font-size: 2.5em; + line-height: 1em; + text-align: center; + } + + & > span { + display: block; + font-size: .8em; + font-weight: 400; + line-height: 1em; + text-align: center; } } } diff --git a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.html b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.html index 102b1a8e58db..b2bdc60d2114 100644 --- a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.html +++ b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.html @@ -55,11 +55,11 @@
  • + axButtonWave class="ax-button ax-button--base-o" (click)="showNodeDetails(cell, 'logs')" + *ngIf="cell.workflow.value.template.type === 'container'">LOGS
    • -
    • -
    • +
    • +
@@ -186,7 +186,7 @@ - Recent Commits on Branch: {{ task.commit.branch }} + Recent Commits on Branch: {{ task.commit.branch }}
@@ -197,7 +197,7 @@ - Jobs History for Template: {{task.template.name}} + Jobs History for Template: {{task.template.name}} @@ -206,9 +206,10 @@ - Workflow Step: {{ selectedNode?.name }} + Workflow Step: {{ selectedNode?.name }} +
@@ -292,7 +293,7 @@
- + diff --git a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.scss b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.scss index fc038b2abaea..da2d29a6013a 100644 --- a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.scss +++ b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.scss @@ -27,6 +27,10 @@ li { list-style-type: none; margin-bottom: 1em; + + button { + width: 85px; + } } } } @@ -197,10 +201,13 @@ padding: 16px 22px; font-size: 16px; cursor: pointer; - border: 1px solid transparent; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + border-right: 1px solid transparent; + border-left: 5px solid transparent; &:hover { - background-color: #dbf0f2; + background-color: $ax-color-gray-2; } &:not(:last-child)::before { @@ -220,9 +227,10 @@ } &--selected { - background-color: #dbf0f2; - border-top-color: #00bdce; - border-bottom-color: #00bdce; + background-color: $ax-color-gray-2; + border-left: 5px solid $ax-color-teal-6; + border-top: 1px solid $ax-color-gray-3; + border-bottom: 1px solid $ax-color-gray-3; } &--succeeded { diff --git a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.component.ts b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.component.ts index d5c2704d39ac..d2c10f8508dd 100644 --- a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.component.ts +++ b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core'; +import * as _ from 'lodash'; import { Task } from '../../../../model'; import { TaskService } from '../../../../services'; @@ -37,18 +38,20 @@ export class JobFixturesBoxComponent { @Input() public set task (val: Task) { - if (val) { + if (!_.isEqual(val, new Task)) { let tree = JobTreeNode.createFromTask(val); let totalNumberOfSteps = tree.getFlattenNodes().length; this.fixtures = tree.getAllUsedFixtures().map( fixture => Object.assign({}, fixture, { chartData: [{y: fixture.steps.length}, {y: totalNumberOfSteps - fixture.steps.length}] })); + this.fixturesLoader = false; } else { - this.fixtures = []; + this.fixturesLoader = true; } } public fixtures: FixtureInfo[] = []; public selectedFixture: FixtureInfo = null; + public fixturesLoader: boolean = false; constructor(private taskService: TaskService) {} diff --git a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.html b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.html index 949673ec6ad8..a748e44a70e1 100644 --- a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.html +++ b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.html @@ -2,7 +2,7 @@
-
+
{{fixture.name}}
@@ -27,18 +27,23 @@
+ +
+ +
+ +
+
{{ 'There are no fixtures.' | translate }}
+
+ + {{selectedFixture.name}} +
-
-

- {{selectedFixture.name}} -

-
- diff --git a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.scss b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.scss index 9f35060086a8..98a739caae7f 100644 --- a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.scss +++ b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-fixtures-box/job-fixtures-box.scss @@ -68,10 +68,6 @@ color: $ax-color-gray-7; } - .white-box { - margin-top: 40px; - } - .white-box &__details-title { font-size: 2em; padding-left: 1em; diff --git a/saas/axops/src/ui/src/app/views/layout/navigation/navigation.component.scss b/saas/axops/src/ui/src/app/views/layout/navigation/navigation.component.scss index 6c9ac49f3037..e5e52ced27de 100644 --- a/saas/axops/src/ui/src/app/views/layout/navigation/navigation.component.scss +++ b/saas/axops/src/ui/src/app/views/layout/navigation/navigation.component.scss @@ -321,6 +321,7 @@ $nav-break-height-sm: 746px; line-height: 50px; vertical-align: middle; padding-right: 2em; + font-weight: 800; } p { @@ -335,6 +336,7 @@ $nav-break-height-sm: 746px; &__swipe, &__swipe .swipe { display: inline-block; vertical-align: middle; + margin-left: 60px; } hr { diff --git a/saas/axops/src/ui/src/assets/styles/main.scss b/saas/axops/src/ui/src/assets/styles/main.scss index 1bc3589c1d5c..0532fd6d2036 100644 --- a/saas/axops/src/ui/src/assets/styles/main.scss +++ b/saas/axops/src/ui/src/assets/styles/main.scss @@ -173,6 +173,10 @@ div.validation-default-message, div.validation-message { font-weight: bold; } +.marked { + color: $ax-color-gray-6; +} + .error-msg { font-size: 13px; line-height: 13px !important;