Skip to content

Commit

Permalink
feat(style): UI refresh
Browse files Browse the repository at this point in the history
  • Loading branch information
anotherchrisberry committed Mar 28, 2017
1 parent 5a1566d commit 9b77b53
Show file tree
Hide file tree
Showing 85 changed files with 1,261 additions and 928 deletions.
Expand Up @@ -20,6 +20,7 @@ module.exports = angular.module('spinnaker.core.pipeline.stage.aws.cloneServerGr
templateUrl: require('./cloneServerGroupStage.html'),
executionDetailsUrl: require('./cloneServerGroupExecutionDetails.html'),
executionStepLabelUrl: require('./cloneServerGroupStepLabel.html'),
accountExtractor: (stage) => stage.context.credentials,
validators: [
{ type: 'requiredField', fieldName: 'targetCluster', fieldLabel: 'cluster' },
{ type: 'requiredField', fieldName: 'target' },
Expand Down
Expand Up @@ -11,6 +11,7 @@ module.exports = angular.module('spinnaker.core.pipeline.stage.aws.shrinkCluster
cloudProvider: 'aws',
templateUrl: require('./shrinkClusterStage.html'),
executionDetailsUrl: require('core/pipeline/config/stages/shrinkCluster/templates/shrinkClusterExecutionDetails.template.html'),
accountExtractor: (stage) => stage.context.credentials,
validators: [
{ type: 'requiredField', fieldName: 'cluster' },
{ type: 'requiredField', fieldName: 'shrinkToSize', fieldLabel: 'shrink to [X] Server Groups'},
Expand Down
41 changes: 23 additions & 18 deletions app/scripts/modules/core/application/application.html
@@ -1,25 +1,30 @@
<div class="page-header application-header navbar">
<h2 ng-if="!application.notFound">
<span class="application-name">{{application.name}}</span>
<component-refresher state="application.activeState || application"
template-url="refreshTooltipTemplate"
refresh="application.refresh(true)"></component-refresher>
</h2>

<div class="page-header">
<div ng-if="application.notFound">
<h1 class="text-center">&lt;404&gt;</h1>
<h2 class="text-center">Application Not Found</h2>

<p class="text-center">Please check your URL - we can't find any data for <em>{{application.name}}</em>.</p>
<p class="text-center" style="margin-bottom: 20px">Please check your URL - we can't find any data for <em>{{application.name}}</em>.</p>
</div>
<application-nav application="application"></application-nav>
<div class="page-button pull-right" ng-if="application.attributes.pdApiKey">
<button class="btn btn-xs btn-danger btn-page-owner"
ng-click="ctrl.pageApplicationOwner()"
uib-tooltip="Page application owner">
<span class="glyphicon glyphicon-phone-alt"></span>
</button>
<div class="container application-header">
<h2 ng-if="!application.notFound">
<i class="fa fa-window-maximize"></i>
<span class="application-name">{{application.name}}</span>
<component-refresher state="application.activeState || application"
template-url="refreshTooltipTemplate"
refresh="application.refresh(true)"></component-refresher>
</h2>
<application-nav application="application"></application-nav>
<div class="header-right">
<secondary-application-nav application="application"></secondary-application-nav>
<div class="page-button" ng-if="application.attributes.pdApiKey">
<button class="btn btn-xs btn-danger btn-page-owner"
ng-click="ctrl.pageApplicationOwner()"
uib-tooltip="Page application owner">
<i class="fa fa-phone"></i>
</button>
</div>
</div>
</div>
</div>
<div class="scrollable-columns">
<div class="container scrollable-columns">
<div class="secondary-panel" ui-view="insight"></div>
</div>
78 changes: 31 additions & 47 deletions app/scripts/modules/core/application/application.less
Expand Up @@ -3,80 +3,65 @@
.application-header {
margin-top: 0;
margin-bottom: 0;
background-color: #f8f8f8;
display: flex;
flex: 0 0 auto;
padding: 15px 15px 0;
z-index: 5;
border: 0;
.header-right {
flex: 1 1 auto;
text-align: right;
}
.application-name {
display: inline-block;
margin-right: 10px;
}
.page-button {
margin-top: 30px;
display: inline-block;
margin-top: 15px;
@media (min-width: 708px) and (max-width: 1200px) {
margin-top: 16px;
}
.btn-danger {
color: @unhealthy_red;
background-color: transparent;
background-color: @unhealthy_red;
border-color: transparent;
padding: 0 5px;
font-size: 14px;
}
}
h2 {
min-width: 200px;
margin-right: 50px;
font-weight: 700;
display: flex;
.fa {
.encircled;
margin-right: 5px;
width: 36px;
height: 36px;
line-height: 32px;
font-size: 16px;
margin-left: 0;
}
@media (min-width: 708px) and (max-width: 1200px) {
float: left;
font-size: 160%;
min-width: 120px;
margin-right: 30px;
margin-top: 15px;
.fa {
width: 28px;
height: 28px;
line-height: 24px;
font-size: 14px;
}
}
min-width: 200px;
margin-right: 50px;

a {
font-size: 75%;
display: inline-block;
margin-right: 20px;
}
font-weight: 700;
display: inline-block;
}
ul {
@media (min-width: 992px) and (max-width: 1200px) {
li {
margin-top: 10px;
font-size: 90%;
}
}
@media (min-width: 708px) and (max-width: 992px) {
li {
margin-top: 10px;
font-size: 85%;
}
}
display: inline-block;
vertical-align: bottom;
text-transform: uppercase;
font-size: 110%;
& > li {
margin-left: 0;
& > a {
border-radius: 0;
border-bottom: 3px solid transparent;
transition: border-bottom-color .2s, background-color .2s, color .2s;
}
}
a.active {
color: @spinnaker-link-hover;
border-bottom: 3px solid @spinnaker-link-color;
}
a {
&:focus, &:hover {
border-bottom: 3px solid @spinnaker-link-hover;
}
}
}
border-bottom: 1px solid @mid_light_grey;
padding-bottom: 0;
}

.glyphicon-cloud {
Expand All @@ -99,7 +84,6 @@
}

.filter-tags {
border-top: 1px solid @mid_light_grey;
padding: 5px 15px 0;
.filter-tag {
strong {
Expand Down
3 changes: 3 additions & 0 deletions app/scripts/modules/core/application/application.module.js
Expand Up @@ -2,6 +2,8 @@

let angular = require('angular');

import {SECONDARY_APPLICATION_NAV_COMPONENT} from './nav/secondaryNav.component';

module.exports = angular
.module('spinnaker.application', [
require('./application.controller.js'),
Expand All @@ -12,4 +14,5 @@ module.exports = angular
require('./inferredApplicationWarning.service.js'),
require('./config/appConfig.dataSource'),
require('./nav/applicationNav.component'),
SECONDARY_APPLICATION_NAV_COMPONENT,
]);
124 changes: 59 additions & 65 deletions app/scripts/modules/core/application/applications.html
@@ -1,72 +1,66 @@
<div class="container applications global-search-header">
<div class="row">
<div class="col-md-3">
<h2 data-purpose="view-header">Applications</h2>
</div>
<div class="col-md-4 col-sm-12">
<form class="form form-horizontal">
<div class="form-group">
<div class="col-md-12">
<input type="search"
placeholder="Search applications"
class="form-control input-md"
focus
ng-model="viewState.applicationFilter"
ng-change="ctrl.filterApplications()"/>
</div>
</div>
</form>
</div>
<div class="col-md-offset-3 col-md-2 pull-right">
<insight-menu data-purpose="applications-menu"
actions="menuActions"
right-align="true">
</insight-menu>
<div class="infrastructure">
<div class="infrastructure-section search-header">
<div class="container">
<h2 class="header-section">
<span class="search-label">Applications</span>
<input type="search"
placeholder="Search applications"
class="form-control input-md"
focus
ng-model="viewState.applicationFilter"
ng-change="ctrl.filterApplications()"/>
</h2>
<div class="header-actions">
<insight-menu data-purpose="applications-menu"
actions="menuActions"
right-align="true">
</insight-menu>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="container">
<h2 ng-if="!applicationsLoaded" class="text-center" style="margin-bottom: 250px">
<span class="glyphicon glyphicon-asterisk glyphicon-spinning"></span>
</h2>
<table ng-if="applicationsLoaded" class="table table-hover">
<thead>
<tr>
<th width="20%" sort-toggle key="name" label="Name" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
<th width="20%" sort-toggle key="createTs" label="Created" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
<th width="20%" sort-toggle key="updateTs" label="Updated" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
<th width="25%" sort-toggle key="email" label="Owner" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
<th sort-toggle key="accounts" label="Account(s)" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
</tr>
</thead>
<tbody>
<tr class="clickable" ng-repeat="application in ctrl.resultPage()" ui-sref=".application.insight.clusters({ application: application.name.toLowerCase() })">
<td>
<a href ui-sref=".application.insight.clusters({ application: application.name.toLowerCase() })">
{{ application.name.toLowerCase() }}
</a>
</td>
<td>
{{ application.createTs | timestamp }}
</td>
<td>
{{ application.updateTs | timestamp }}
</td>
<td>
{{ application.email }}
</td>
<td>
{{ application.accounts }}
</td>
</tr>
</tbody>
</table>
<uib-pagination ng-if="applicationsLoaded"
items-per-page="pagination.itemsPerPage"
total-items="filteredApplications.length"
max-size="pagination.maxSize"
ng-model="pagination.currentPage"
></uib-pagination>
<div class="infrastructure-section">
<table ng-if="applicationsLoaded" class="table table-hover">
<thead>
<tr>
<th width="20%" sort-toggle key="name" label="Name" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
<th width="20%" sort-toggle key="createTs" label="Created" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
<th width="20%" sort-toggle key="updateTs" label="Updated" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
<th width="25%" sort-toggle key="email" label="Owner" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
<th sort-toggle key="accounts" label="Account(s)" sort-model="viewState.sortModel" on-change="ctrl.filterApplications()"></th>
</tr>
</thead>
<tbody>
<tr class="clickable" ng-repeat="application in ctrl.resultPage()" ui-sref=".application.insight.clusters({ application: application.name.toLowerCase() })">
<td>
<a href ui-sref=".application.insight.clusters({ application: application.name.toLowerCase() })">
{{ application.name.toLowerCase() }}
</a>
</td>
<td>
{{ application.createTs | timestamp }}
</td>
<td>
{{ application.updateTs | timestamp }}
</td>
<td>
{{ application.email }}
</td>
<td>
{{ application.accounts }}
</td>
</tr>
</tbody>
</table>
<uib-pagination ng-if="applicationsLoaded"
items-per-page="pagination.itemsPerPage"
total-items="filteredApplications.length"
max-size="pagination.maxSize"
ng-model="pagination.currentPage"
></uib-pagination>
</div>
</div>
</div>
Expand Up @@ -2,6 +2,8 @@ import {DATA_SOURCE_ALERTS_COMPONENT} from 'core/entityTag/dataSourceAlerts.comp

let angular = require('angular');

require('./applicationNav.component.less');

module.exports = angular
.module('spinnaker.core.application.nav.component', [
require('angular-ui-router'),
Expand All @@ -12,29 +14,33 @@ module.exports = angular
application: '<',
},
template: `
<ul class="nav nav-pills" ng-if="!$ctrl.application.notFound">
<li ng-repeat="dataSource in $ctrl.application.dataSources" ng-if="dataSource.visible !== false && !dataSource.disabled">
<a ui-sref="{{dataSource.sref}}"
analytics-on="click"
analytics-category="Application Nav"
analytics-event="{{dataSource.title}}"
ng-class="{active: $ctrl.isActive(dataSource)}">
{{dataSource.label}}
<ds-alerts alerts="dataSource.alerts"
application-name="$ctrl.application.name"
tab-name="{{dataSource.key}}"></ds-alerts>
<span class="badge"
ng-if="dataSource.badge && $ctrl.application[dataSource.badge].data.length">
{{$ctrl.application[dataSource.badge].data.length}}
</span>
<span class="small glyphicon glyphicon-exclamation-sign"
ng-if="dataSource.badge && $ctrl.application[dataSource.badge].loadFailure"
uib-tooltip="There was an error loading data for {{dataSource.title}}. We'll try again shortly."></span>
</a>
</li>
</ul>
<div ng-if="!$ctrl.application.notFound" class="nav-section">
<a ng-repeat="dataSource in $ctrl.getDataSources()"
ui-sref="{{dataSource.sref}}"
analytics-on="click"
analytics-category="Application Nav"
analytics-event="{{dataSource.title}}"
ng-class="{active: $ctrl.isActive(dataSource)}">
<i ng-if="dataSource.icon" class="ds-icon fa fa-{{dataSource.icon}}"></i>
{{dataSource.label}}
<ds-alerts alerts="dataSource.alerts"
application-name="$ctrl.application.name"
tab-name="{{dataSource.key}}"></ds-alerts>
<span class="badge"
ng-if="dataSource.badge && $ctrl.application[dataSource.badge].data.length">
{{$ctrl.application[dataSource.badge].data.length}}
</span>
<span class="small glyphicon glyphicon-exclamation-sign"
ng-if="dataSource.badge && $ctrl.application[dataSource.badge].loadFailure"
uib-tooltip="There was an error loading data for {{dataSource.title}}. We'll try again shortly."></span>
</a>
</div>
`,
controller: function ($state) {
this.isActive = (dataSource) => $state.includes(dataSource.activeState);

this.getDataSources = () => {
return (this.application.dataSources || []).filter(ds => ds.visible !== false && !ds.disabled && ds.primary);
};
}
});

0 comments on commit 9b77b53

Please sign in to comment.