UI cleanup for Timeline, Fixtures and Application screens (argoproj#18)

wokeGit · Nov 20, 2017 · 757e286 · 757e286
1 parent f289b9e
commit 757e286
Show file tree

Hide file tree

Showing 32 changed files with 257 additions and 129 deletions.
diff --git 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
@@ -53,6 +53,9 @@ export class ArtifactsComponent implements OnDestroy {
         }
     }
 
+    @Input()
+    public isFullWidthContent: boolean = false;
+
     @Output()
     public selectedCountChanged: EventEmitter<number> = new EventEmitter<number>();
 

diff --git 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 @@
-<div class="ax-container">
+<div [ngClass]="{'ax-container': !isFullWidthContent}">
     <table class="ax-table artifacts__table">
         <thead>
         <tr class="header">

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
@@ -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
@@ -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,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 {

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
@@ -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>
@@ -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>

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
@@ -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
@@ -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>
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
@@ -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">
@@ -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>
@@ -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>
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
@@ -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,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;
+        }
+    }
 }
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
@@ -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

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
@@ -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
@@ -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>
@@ -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>
@@ -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">
@@ -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>

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
@@ -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/...c/app/views/+config-management/config-management-overview/config-management-overview.html b/...c/app/views/+config-management/config-management-overview/config-management-overview.html
@@ -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>
@@ -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>

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
@@ -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>
-Original file 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 @@