Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
HAWKULAR-202: Namespace CSS Classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ammendonca
ammendonca committed May 22, 2015
1 parent a2aba2b commit 1fb3ae5
Show file tree
Hide file tree
Showing 10 changed files with 261 additions and 292 deletions.
12 changes: 6 additions & 6 deletions ui/console/src/main/scripts/plugins/directives/plugins/sidebar/html/sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,23 @@
</nav>
</div> -->

<div class="screen-top-nav">
<div class="hk-screen-top-nav">
<div>
<div class="row top-row">
<div class="row hk-top-row">
<div class="col-xs-6">
<a ng-show="isAppServerPage()" href="/hawkular-ui/app/app-list" class="back">« All Application Servers</a>
<a ng-hide="isAppServerPage()" href="/hawkular-ui/url/url-list" class="back">« All URLs</a>
</div>
<div class="col-xs-6">
<div class="date-range dropdown">
<div class="hk-date-range dropdown">
<i class="fa fa-calendar"></i>
<div class="input" dropdown-toggle>
<div class="hk-input" dropdown-toggle>
{{offsetName}} <span class="additional-info">({{getFormattedDate()}})</span>
</div>
<div class="dropdown-menu infotip bottom-right">
<div class="arrow"></div>
<div class="dropdown-menu-content">
<span class="label">Last</span>
<span class="hk-label">Last</span>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Hour'}" ng-click="setRange({hour: 1})">1h</button>
<button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last 12 Hours'}" ng-click="setRange({hours: 12})">12h</button>
Expand All @@ -43,7 +43,7 @@
</div>
</div>
</div>
<div class="heading">
<div class="hk-heading">
<h1 ng-init="isAppServerPage() ? getAppServerFromId(hkParams.resourceId) : getUrlFromId(hkParams.resourceId)">{{resourceName}}</h1>
</div>
<div ng-transclude></div>
Expand Down
18 changes: 10 additions & 8 deletions ui/console/src/main/scripts/plugins/directives/plugins/topbar/less/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,16 @@
@import "../../../../../libs/patternfly/components/bootstrap/less/mixins.less";
@import "../../../../../libs/patternfly/less/variables.less";

.screen-top-nav {
.hk-screen-top-nav {

margin-bottom: @grid-gutter-width/2;

.back {
.hk-back {
display: inline-block;
font-size: @font-size-base + 1;
}

.heading {
.hk-heading {
margin-bottom: @grid-gutter-width/4;
}

Expand All @@ -36,7 +36,7 @@
margin-bottom: 0;
}

.nav-tabs-container {
.hk-nav-tabs-container {
border-bottom: 1px solid @table-border-color;
text-align: center;
}
Expand Down Expand Up @@ -67,15 +67,15 @@

// date range

.date-range {
.hk-date-range {

text-align: right;

.fa {
margin-right: @grid-gutter-width/4;
}

.input {
.hk-input {
border-bottom-color: #dddddd;
border-bottom-width: 1px;
border-bottom-style: solid;
Expand All @@ -102,8 +102,9 @@
}
}

&.open .input {
&.open .hk-input {
border-bottom: 2px solid @link-color;
margin-bottom: 0;
}

.dropdown-menu {
Expand All @@ -116,9 +117,10 @@
.dropdown-menu-content {
padding: 15px;

.label {
.hk-label {
color: @gray-dark;
display: inline-block;
margin-right: @grid-gutter-width/4;
padding-left: 0;
}

Expand Down
64 changes: 32 additions & 32 deletions ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/add-url.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<div ng-controller="HawkularMetrics.AddUrlController as vm">
<div ng-class="{'fade-in sc-insert-url sec-urls-list text-center': vm.resourceList.length === 0}">
<div ng-class="{'hk-fade-in hk-urls-list text-center': vm.resourceList.length === 0}">
<h1 class="text-center">Hello {{userDetails.firstName}}!</h1>
<i class="fa fa-line-chart" ng-show="vm.resourceList.length === 0"></i>
<h2 ng-show="vm.resourceList.length === 0">Collect metrics from a website that you want to monitor.</h2>
<form class="form-horizontal add-url" name="addUrlForm" role="form" novalidate ng-submit="vm.addUrl(vm.resourceUrl)">
<form class="form-horizontal hk-add-url" name="addUrlForm" role="form" novalidate ng-submit="vm.addUrl(vm.resourceUrl)">
<div class="form-group input">
<div class="col-lg-6 col-sm-8 col-xs-12 align-center">
<div class="col-lg-6 col-sm-8 col-xs-12 hk-align-center">
<div class="input-group input-group-lg">
<input type="url" class="form-control" name="resourceUrl" ng-model="vm.resourceUrl"
ng-model-options="{ updateOn: 'default blur'}"
Expand All @@ -25,7 +25,7 @@ <h2 ng-show="vm.resourceList.length === 0">Collect metrics from a website that y
</form>
</div>

<div class="row urls-list-labels" ng-show="vm.resourceList.length > 0">
<div class="row hk-urls-list-labels" ng-show="vm.resourceList.length > 0">
<div class="col-sm-4 text-left">
<button class="btn btn-link" tooltip="Sort" tooltip-trigger tooltip-placement="top" ng-click="vm.reverse = !vm.reverse">
URL <i class="fa" ng-class="vm.reverse ? 'fa-angle-up' : 'fa-angle-down'"></i>
Expand All @@ -39,52 +39,52 @@ <h2 ng-show="vm.resourceList.length === 0">Collect metrics from a website that y
</div>
</div>

<div class="panel panel-default summary url-info" ng-repeat="res in vm.resourceList | orderBy:'properties.url':vm.reverse">
<div class="panel panel-default hk-summary hk-url-info" ng-repeat="res in vm.resourceList | orderBy:'properties.url':vm.reverse">
<div class="row row-table">
<div class="col-sm-4 summary-item">
<span class="url-link"><a href="/hawkular-ui/url/availability/{{res.id}}">{{res.properties.url}}</a><i class="fa fa-flag" tooltip="Some alert happened" tooltip-trigger tooltip-placement="top" ng-show="(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length > 0"></i></span>
<button class="btn btn-link delete" tooltip="Remove" tooltip-trigger tooltip-placement="top" ng-click="vm.deleteResource(res)"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link trigger" ng-show="res.responseTime.length > 0" tooltip="Expand/collapse" tooltip-trigger tooltip-placement="top" ng-click="vm.resourceList.expanded[res.id] = !vm.resourceList.expanded[res.id]"><i class="fa" ng-class="vm.resourceList.expanded[res.id] ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i>Last 24 hours</button>
<div class="col-sm-4 hk-summary-item">
<span class="hk-url-link"><a href="/hawkular-ui/url/availability/{{res.id}}">{{res.properties.url}}</a><i class="fa fa-flag" tooltip="Some alert happened" tooltip-trigger tooltip-placement="top" ng-show="(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length > 0"></i></span>
<button class="btn btn-link hk-delete" tooltip="Remove" tooltip-trigger tooltip-placement="top" ng-click="vm.deleteResource(res)"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link hk-trigger" ng-show="res.responseTime.length > 0" tooltip="Expand/collapse" tooltip-trigger tooltip-placement="top" ng-click="vm.resourceList.expanded[res.id] = !vm.resourceList.expanded[res.id]"><i class="fa" ng-class="vm.resourceList.expanded[res.id] ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i>Last 24 hours</button>
</div>
<div class="col-sm-4 summary-item">
<span class="data" ng-show="res.responseTime.length > 0">{{res.responseTime[0].value}} <span>ms</span></span>
<span class="data spinner" ng-hide="res.responseTime.length > 0" popover="Your data is being collected. You should see something in a few seconds." popover-trigger="mouseenter" popover-placement="bottom"></span>
<div class="col-sm-4 hk-summary-item">
<span class="hk-data" ng-show="res.responseTime.length > 0">{{res.responseTime[0].value}} <span>ms</span></span>
<span class="hk-data spinner" ng-hide="res.responseTime.length > 0" popover="Your data is being collected. You should see something in a few seconds." popover-trigger="mouseenter" popover-placement="bottom"></span>
</div>
<div class="col-sm-4 summary-item">
<span class="data" ng-show="res.responseTime.length > 0"><i class="fa " ng-class="res.isUp ? 'fa-arrow-up' : 'fa-arrow-down'"></i>{{res.isUp ? 'Up' : 'Down'}}</span>
<span class="data spinner" ng-hide="res.responseTime.length > 0" popover="Your data is being collected. You should see something in a few seconds." popover-trigger="mouseenter" popover-placement="bottom"></span>
<span class="time" tooltip="Last update" tooltip-trigger tooltip-placement="top"><i class="fa fa-clock-o"></i>{{res.updateTime| date:"HH:mm" }}</span>
<div class="col-sm-4 hk-summary-item">
<span class="hk-data" ng-show="res.responseTime.length > 0"><i class="fa " ng-class="res.isUp ? 'fa-arrow-up' : 'fa-arrow-down'"></i>{{res.isUp ? 'Up' : 'Down'}}</span>
<span class="hk-data spinner" ng-hide="res.responseTime.length > 0" popover="Your data is being collected. You should see something in a few seconds." popover-trigger="mouseenter" popover-placement="bottom"></span>
<span class="hk-time" tooltip="Last update" tooltip-trigger tooltip-placement="top"><i class="fa fa-clock-o"></i>{{res.updateTime| date:"HH:mm" }}</span>
</div>
</div>
<hr>
<div class="row row-table panel-expanded-content" ng-show="vm.resourceList.expanded[res.id]">
<div class="col-sm-4 summary-item text-left">
<div class="row row-table hk-panel-expanded-content" ng-show="vm.resourceList.expanded[res.id]">
<div class="col-sm-4 hk-summary-item">
<ul class="list-unstyled alert-status" ng-hide="(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length === 0">
<li ng-repeat="alert in (vm.alertList|filter:{triggerId: (res.id + '_trigger')}).slice().reverse() | limitTo:3 track by $index">
<i class="fa fa-flag"></i>{{alert.evalSets[0][0].dataTimestamp|date:'hh:mm a'}}: <span ng-if="alert.evalSets[0][0].condition.type=='AVAILABILITY'"><strong>server down</strong></span><span ng-if="alert.evalSets[0][0].condition.type=='THRESHOLD'"><strong>high response time</strong> ({{alert.evalSets[0][0].value}}ms)</span>
</li>
</ul>
<span class="no-alerts" ng-show="(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length === 0">No alerts.</span>
<span class="hk-no-alerts" ng-show="(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length === 0">No alerts.</span>
<a href="/hawkular-ui/url/alerts/{{res.id}}" class="bottom-area" ng-show="(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length > 0">View All Alerts ({{(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length}})</a>
</div>
<div class="col-sm-4 summary-item">
<!--<div id="metrics-chart" class="top-area" style="height: 44px; width: 237px;">-->
<div class="col-sm-4 hk-summary-item">
<!--<div id="metrics-chart" class="hk-top-area" style="height: 44px; width: 237px;">-->
<!--<hawkular-chart data="{{res.responseTime}}" chart-type="line" chart-height="44" chart-width="237"></hawkular-chart>-->
<!--</div>-->
<div class="bottom-area">
<span class="data">{{vm.getAverage(res.responseTime, 'value')}} <span>ms</span></span>
<span class="item">Average Response Time</span>
<div>
<span class="hk-data">{{vm.getAverage(res.responseTime, 'value')}} <span>ms</span></span>
<span class="hk-item">Average Response Time</span>
</div>
</div>
<div class="col-sm-4 summary-item">
<div class="top-area">
<span class="data" ng-show="res.availability === 100"><i class="fa fa-arrow-up"></i>Always Up</span>
<span class="data" ng-hide="res.availability === 100"><i class="fa fa-arrow-down"></i>Down {{res.downTime / 3 | number:0}} min</span>
<div class="col-sm-4 hk-summary-item">
<div class="hk-top-area">
<span class="hk-data" ng-show="res.availability === 100"><i class="fa fa-arrow-up"></i>Always Up</span>
<span class="hk-data" ng-hide="res.availability === 100"><i class="fa fa-arrow-down"></i>Down {{res.downTime / 3 | number:0}} min</span>
</div>
<div class="bottom-area">
<span class="data" ng-hide="res.availability === 100">{{res.availability | number:3}} <span>%</span></span>
<span class="data" ng-show="res.availability === 100">{{res.availability}} <span>%</span></span>
<span class="item">Availability</span>
<div>
<span class="hk-data" ng-hide="res.availability === 100">{{res.availability | number:3}} <span>%</span></span>
<span class="hk-data" ng-show="res.availability === 100">{{res.availability}} <span>%</span></span>
<span class="hk-item">Availability</span>
</div>
</div>
</div>
Expand Down
18 changes: 9 additions & 9 deletions ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/alerts-view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,17 @@
</div>
-->

<div class="alerts-activity">
<div class="clearfix">
<div ng-repeat="alert in mac.alertList | filter:timeFilter | orderBy: '-start'">

<div class="panel panel-default alert alert-danger" ng-if="alert.type=='AVAILABILITY'">
<div class="alert-icon">
<i class="fa fa-arrow-down"></i>
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="date">
<div class="hk-date">
{{alert.start | date:'medium' }}
</div>
<div class="event">
<div class="hk-event">
Server <strong>down</strong> for {{(alert.end - alert.start)/1000 | number: 0}} seconds (until
<span ng-if="alert.isThisYear && alert.isToday">{{alert.end | date:'shortTime' }}).</span>
<span ng-if="alert.isThisYear && !alert.isToday">{{alert.end | date:'MMM d, h:mm:ss a' }}).</span>
Expand All @@ -43,13 +43,13 @@
</div>

<div class="panel panel-default alert alert-danger" ng-if="alert.type=='THRESHOLD'">
<div class="alert-icon">
<i class="fa fa-line-chart"></i>
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="date">
<div class="hk-date">
{{alert.start | date:'medium' }}
</div>
<div class="event">
<div class="hk-event">
<strong>Response time</strong> was above the threshold ({{alert.threshold | number: 0}} ms) for {{(alert.end - alert.start) / 1000.0 | number: 0}} seconds (until
<span ng-if="alert.isThisYear && alert.isToday">{{alert.end | date:'shortTime' }}).</span>
<span ng-if="alert.isThisYear && !alert.isToday">{{alert.end | date:'MMM d, h:mm:ss a' }}).</span>
Expand Down
16 changes: 8 additions & 8 deletions ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/alerts.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<div class="screen-content" ng-controller="MetricsAlertController as mac">
<div class="hk-screen-content" ng-controller="MetricsAlertController as mac">
<hawkular-sidebar ng-controller="Sidebar.SidebarController">
<div class="nav-tabs-container">
<div class="hk-nav-tabs-container">
<ul class="nav nav-tabs nav-tabs-pf">
<li><a href="/hawkular-ui/url/availability/{{mac.$routeParams.resourceId}}/{{mac.$routeParams.timeOffset}}" class="availability">Availability</a></li>
<li><a href="/hawkular-ui/url/response-time/{{mac.$routeParams.resourceId}}/{{mac.$routeParams.timeOffset}}" class="response-time">Response Time</a></li>
<li class="active"><a href="/hawkular-ui/url/alerts/{{mac.$routeParams.resourceId}}/{{mac.$routeParams.timeOffset}}" class="alerts">Alerts</a></li>
<li><a href="/hawkular-ui/url/availability/{{mac.$routeParams.resourceId}}/{{mac.$routeParams.timeOffset}}" class="hk-availability">Availability</a></li>
<li><a href="/hawkular-ui/url/response-time/{{mac.$routeParams.resourceId}}/{{mac.$routeParams.timeOffset}}" class="hk-response-time">Response Time</a></li>
<li class="active"><a href="/hawkular-ui/url/alerts/{{mac.$routeParams.resourceId}}/{{mac.$routeParams.timeOffset}}" class="hk-alerts">Alerts</a></li>
</ul>
</div>
</hawkular-sidebar>

<section id="alerts" class="tab-content">
<div class="info-top clearfix">
<section id="hk-alerts" class="hk-tab-content">
<div class="hk-info-top clearfix">
<h3 class="pull-left">Alerts <span>({{(mac.alertList | filter:timeFilter).length}})</span></h3>
<span class="settings pull-right"><a href="#" ng-click="mac.openSetup()"><i class="fa fa-cog"></i>Alert Settings</a></span>
<span class="hk-settings pull-right"><a href="#" ng-click="mac.openSetup()"><i class="fa fa-cog"></i>Alert Settings</a></span>
</div>
<div ng-include="'plugins/metrics/html/alerts-view.html'"></div>
</section>
Expand Down

0 comments on commit 1fb3ae5

Please sign in to comment.