Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI cleanup for Timeline, Fixtures and Application screens #18

Merged
merged 1 commit into from
Aug 23, 2017
Merged

UI cleanup for Timeline, Fixtures and Application screens #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion saas/axops/src/ui/src/app/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] {
Expand Down
3 changes: 3 additions & 0 deletions saas/axops/src/ui/src/app/common/artifacts/artifacts.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ export class ArtifactsComponent implements OnDestroy {
}
}

@Input()
public isFullWidthContent: boolean = false;

@Output()
public selectedCountChanged: EventEmitter<number> = new EventEmitter<number>();

Expand Down
2 changes: 1 addition & 1 deletion saas/axops/src/ui/src/app/common/artifacts/artifacts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="ax-container">
<div [ngClass]="{'ax-container': !isFullWidthContent}">
<table class="ax-table artifacts__table">
<thead>
<tr class="header">
Expand Down
4 changes: 4 additions & 0 deletions saas/axops/src/ui/src/app/common/pie-chart/pie-chart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
.pie-chart {
width: 130px;
height: 130px;
margin: auto;

.nvd3.nv-pie path {
stroke: transparent;
stroke-width: 0px;
Expand Down
15 changes: 10 additions & 5 deletions saas/axops/src/ui/src/app/common/workflow-tree/workflow-tree.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -309,15 +308,21 @@ $connectorColor: #8FA4B1;

&__task-details-artifacts {
position: absolute;
z-index: 1;
top: 18px;
z-index: 2;
top: 7px;
right: 16px;

&--btn-pos {
display: inline-block;
vertical-align: middle;
}
}

&__second-bar {
height: 48px;
display: block;
width: 100%;
}
}

.workflow-fixtures-logs {
Expand Down
4 changes: 2 additions & 2 deletions saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="app-graph">
<div *ngIf="application">
<div class="row" *ngFor="let deployment of deployments; let isFirstDeployment=first; let isLastDeployment=last; trackBy: trackByDeploymentName">
<div class="row" *ngFor="let deployment of deployments; trackBy: trackByDeploymentName; let isFirstDeployment=first; let isLastDeployment=last">
<div class="columns small-4 app-graph__nodes-column">
<div *ngIf="isFirstDeployment" class="app-graph__node app-graph__node--app">
<div class="app-graph__connector-right"></div>
Expand Down Expand Up @@ -41,7 +41,7 @@
</div>
</div>
<div class="columns small-4 app-graph__nodes-column">
<div *ngFor="let instance of deployment.instances; let isLastInstance=last; trackBy: trackByPodName" class="app-graph__node clickable"
<div *ngFor="let instance of deployment.instances; trackBy: trackByPodName; let isLastInstance=last;" class="app-graph__node clickable"
(click)="podSelected.emit({deployment: deployment.name, pod: instance.name})">
<i class="ax-icon-pod app-graph__node-icon"></i>
<div *ngIf="!isLastInstance" class="app-graph__connector-down"></div>
Expand Down
4 changes: 3 additions & 1 deletion saas/axops/src/ui/src/app/views/+applications/app-graph/app-graph.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -23,6 +24,7 @@ $node-width: 200px;
width: $node-width - 60px - 35px;
display: inline-block;
vertical-align: middle;
font-size: 14px;
}

&--selected {
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion saas/axops/src/ui/src/app/views/+applications/app-overview/app-overview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
</div>
</div>
<div class="ax-container" *ngIf="firstLoading">
<ax-loader-list-mockup [itemHeight]="60"></ax-loader-list-mockup>
<ax-loader-list-mockup [itemHeight]="104"></ax-loader-list-mockup>
</div>
</div>
</div>
12 changes: 8 additions & 4 deletions saas/axops/src/ui/src/app/views/+applications/application-details/application-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@

<ax-sliding-panel [show]="logsInfo" (closePanel)="closeLogPanel()">
<sliding-panel-header>
Logs for <strong>{{logsInfo?.pod.name}}</strong>
<span class="application-details__panel-header">Logs for <strong>{{logsInfo?.pod.name}}</strong></span>
</sliding-panel-header>
<sliding-panel-body *ngIf="logsInfo">
<div class="application-details__logs-content">
Expand All @@ -82,7 +82,7 @@

<ax-sliding-panel [show]="consoleInfo" (closePanel)="closeConsolePanel()">
<sliding-panel-header>
Pod: <strong>{{consoleInfo?.pod?.name}}</strong>
<span class="application-details__panel-header">Pod: <strong>{{consoleInfo?.pod?.name}}</strong></span>
</sliding-panel-header>
<sliding-panel-body *ngIf="consoleInfo">
<ax-sys-console [consoleAccessSettings]="consoleInfo"></ax-sys-console>
Expand All @@ -91,11 +91,15 @@

<ax-sliding-panel [show]="showSpendingsPanel" (closePanel)="closeSpendingsPanel()">
<sliding-panel-header>
Spendings: <strong>{{application?.name}}</strong>
<span class="application-details__panel-header">Spendings: <strong>{{application?.name}}</strong></span>
</sliding-panel-header>
<sliding-panel-body *ngIf="application">
<div class="application-details__spendings">
<ax-app-spendings-chart [appName]="application.name"></ax-app-spendings-chart>
<div>
<div class="deployment-details__panel deployment-details__panel--inner-padding">
<ax-app-spendings-chart [appName]="application.name"></ax-app-spendings-chart>
</div>
</div>
</div>
</sliding-panel-body>
</ax-sliding-panel>
17 changes: 14 additions & 3 deletions saas/axops/src/ui/src/app/views/+applications/application-details/application-details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ $padding: 50px;
}

&__spendings {
background-color: $white-color;
background-color: $ax-color-gray-2;
position: absolute;
left: 0;
right: 0;
Expand All @@ -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 {
Expand All @@ -56,17 +56,28 @@ $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;
}
}
}
}

&__panel-header {
font-weight: 500;
font-size: .925em;

& > strong {
font-weight: 500;
}
}
}
6 changes: 3 additions & 3 deletions saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,16 @@
</div>

<div class="application-panel__item" *ngIf="isJiraConfigured">
<div class="application-panel__item-value application-panel__item-value--highlight">
<div class="application-panel__item-value">
<a (click)="toggleIssuesPanel(application); $event.stopPropagation();">{{ application.jira_issues?.length || 0 }}</a></div>
<div class="application-panel__item-name">JIRA issues</div>
</div>
<div class="application-panel__item" *ngIf="application.endpoints && application.endpoints.length">
<div class="application-panel__item-value application-panel__item-value--highlight">
<div class="application-panel__item-value">
<i class="fa fa-external-link"></i></div>
<div class="application-panel__item-name" *ngIf="application.endpoints.length === 1">
<a href="//{{application.endpoints[0]}}" target="_blank">Endpoint</a></div>
<div class="application-panel__item-name application-panel__item-value--highlight" *ngIf="application.endpoints.length > 1">
<div class="application-panel__item-name" *ngIf="application.endpoints.length > 1">
<ax-dropdown isMenu="true">
<ax-dropdown-anchor>
<span class="application-panel__item-dropdown">Endpoints
Expand Down
1 change: 1 addition & 0 deletions saas/axops/src/ui/src/app/views/+applications/application-panel/application-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ $applications-status-width: 200px;

&__item-value {
font-size: 2em;
color: $ax-color-gray-6;

&--highlight {
color: $ax-color-teal-6;
Expand Down
10 changes: 5 additions & 5 deletions saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ <h3 [ngClass]="{ 'bold-text': activeEditScale }">{{ activeEditScale ? 'EDIT SCAL


<div *ngIf="currentDeployment">
<h2>{{ 'End Points' | translate | uppercase }}</h2>
<h3>{{ 'End Points' | translate | uppercase }}</h3>
<div class="deployment-details__panel deployment-details__panel--inner-small-padding deployment-details__panel--gradient-background">
<table class="ax-table ax-table--light ax-table--no-background">
<thead>
Expand Down Expand Up @@ -137,8 +137,8 @@ <h2>{{ 'End Points' | translate | uppercase }}</h2>
</div>

<div>
<h2>{{ 'Recent Revision' | translate | uppercase }}</h2>
<h2 class="fr"><a (click)="navigateToRevisionHistory()">{{ 'View Revision History' | translate | uppercase }}</a></h2>
<h3>{{ 'Recent Revision' | translate | uppercase }}</h3>
<a class="fr deployment-details__action-btn" (click)="navigateToRevisionHistory()">{{ 'View Revision History' | translate | uppercase }}</a>
<div class="deployment-details__panel deployment-details__panel--inner-small-padding deployment-details__panel--gradient-background">
<div (click)="onShowHistoryDetails.emit({id: currentDeployment.id})" class="clickable">
<ax-deployment-history-cell [deployment]="currentDeployment"></ax-deployment-history-cell>
Expand All @@ -147,7 +147,7 @@ <h2 class="fr"><a (click)="navigateToRevisionHistory()">{{ 'View Revision Histor
</div>

<div *ngFor="let volume of volumes">
<h2>{{ 'Volume' | translate | uppercase }}</h2>
<h3>{{ 'Volume' | translate | uppercase }}</h3>
<div class="deployment-details__panel deployment-details__panel--inner-small-padding deployment-details__panel--gradient-background">
<div class="row">
<div class="columns small-4">
Expand Down Expand Up @@ -181,7 +181,7 @@ <h2>{{ 'Volume' | translate | uppercase }}</h2>
</div>

<div>
<h2>{{ 'Spending for last 30 days' | translate | uppercase }}</h2>
<h3>{{ 'Spending for last 30 days' | translate | uppercase }}</h3>
<div class="deployment-details__panel deployment-details__panel--additional-vertical-padding" *ngIf="currentDeployment">
<ax-app-spendings-chart [showTitle]="false" [showTimeRange]="false" [appName]="currentDeployment.app_name" [deploymentName]="currentDeployment.name">
</ax-app-spendings-chart>
Expand Down
29 changes: 22 additions & 7 deletions saas/axops/src/ui/src/app/views/+applications/deployment-details/deployment-details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
Expand All @@ -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 {

Expand Down Expand Up @@ -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;
Expand All @@ -100,6 +111,10 @@ $padding: 50px;
padding: 5px 10px;
}

&--inner-padding {
padding: 20px;
}

&--additional-vertical-padding {
padding-top: 20px;
padding-bottom: 20px;
Expand Down
4 changes: 2 additions & 2 deletions ...c/app/views/+config-management/config-management-overview/config-management-overview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</div>
</div>

<div class="ax-table-list" *ngIf="configurations.length && !loading">
<div class="ax-table-list ax-table-list--clickable" *ngIf="configurations.length && !loading">
<div class="ax-table-list__head">
<div class="row">
<div class="columns small-2">Name</div>
Expand All @@ -23,7 +23,7 @@
</div>

<div *ngFor="let config of configurations; let i = index">
<div class="ax-table-list__row clickable" (click)="editSelectedConfig(config)">
<div class="ax-table-list__row" (click)="editSelectedConfig(config)">
<div class="row">
<div class="columns small-2 title-text">
<span ax-tooltip="{{config.name}}">{{config.name}}</span>
Expand Down
12 changes: 8 additions & 4 deletions saas/axops/src/ui/src/app/views/+fixtures/fixture-classes/fixture-classes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,18 @@
</div>
<div class="fixture-classes__content">
<div class="clearfix">
<div class="pull-left"><span class="fixture-classes__des">AVAILABLE FIXTURES:</span> {{group.enabledClass.stats.available}}</div>
<div class="pull-right"><span class="fixture-classes__des">TOTAL FIXTURES:</span> {{group.enabledClass.stats.total}}</div>
<div class="pull-left fixture-classes__top-des">
Available Fixtures: <strong>{{group.enabledClass.stats.available}}</strong>
</div>
<div class="pull-right fixture-classes__top-des">
Total Fixtures: <strong>{{group.enabledClass.stats.total}}</strong>
</div>
</div>
<div class="fixture-classes__progress">
<ax-progress-bar [progress]="group.enabledClass.stats.percentage"></ax-progress-bar>
</div>
<div class="text-truncate">
<span class="fixture-classes__des">Repo/Branch:</span>
<div class="fixture-classes__repo text-truncate">
Repo/Branch:
{{ group.enabledClass.repo + '/' + group.enabledClass.branch }}
</div>
</div>
Expand Down
Loading