Skip to content

N
nexpie-grafana-theme
Commit 0068e827 by Patrick O'Carroll
Options

new styling and markup

parent c42a2326
Showing with 177 additions and 136 deletions
public/app/containers/AlertRuleList/AlertRuleList.tsx
...@@ -53,6 +53,18 @@ export class AlertRuleList extends React.Component<IContainerProps, any> { ...@@ -53,6 +53,18 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
<div className="page-container page-body"> <div className="page-container page-body">
<div className="page-action-bar"> <div className="page-action-bar">
<div className="gf-form"> <div className="gf-form">
<label className="gf-form--has-input-icon">
<input
type="text"
className="gf-form-input width-13"
placeholder="Search alert"
value={this.searchQuery}
onChange={this.onQueryUpdated}
/>
<i className="gf-form-input-icon fa fa-search" />
</label>
</div>
<div className="gf-form">
<label className="gf-form-label">Filter by state</label> <label className="gf-form-label">Filter by state</label>
<div className="gf-form-select-wrapper width-13"> <div className="gf-form-select-wrapper width-13">
...@@ -69,8 +81,10 @@ export class AlertRuleList extends React.Component<IContainerProps, any> { ...@@ -69,8 +81,10 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
</a> </a>
</div> </div>
<section className="card-section card-list-layout-list"> <section>
<ol className="card-list">{alertList.rules.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}</ol> <ol className="alert-rule-list">
{alertList.rules.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}
</ol>
</section> </section>
</div> </div>
</div> </div>
...@@ -108,36 +122,33 @@ export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> { ...@@ -108,36 +122,33 @@ export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
let ruleUrl = `dashboard/${rule.dashboardUri}?panelId=${rule.panelId}&fullscreen&edit&tab=alert`; let ruleUrl = `dashboard/${rule.dashboardUri}?panelId=${rule.panelId}&fullscreen&edit&tab=alert`;
return ( return (
<li className="card-item-wrapper"> <li className="alert-rule-item">
<div className="card-item card-item--alert"> <div className="alert-rule-item__body">
<div className="card-item-header"> <span className={`alert-rule-item__icon ${rule.stateClass}`}>
<div className="card-item-type"> <i className={rule.stateIcon} />
<a </span>
className="card-item-cog" <div className="alert-rule-item__header">
title="Pausing an alert rule prevents it from executing" <div className="alert-rule-item__name">
onClick={this.toggleState} <a href={ruleUrl}>{rule.name}</a>
>
<i className={stateClass} />
</a>
<a className="card-item-cog" href={ruleUrl} title="Edit alert rule">
<i className="icon-gf icon-gf-settings" />
</a>
</div> </div>
</div> <div className="alert-rule-item__text">
<div className="card-item-body"> <span className={`${rule.stateClass}`}>{rule.stateText}</span>
<div className="card-item-details"> <span className="alert-rule-item__time"> for {rule.stateAge}</span>
<div className="card-item-name">
<a href={ruleUrl}>{rule.name}</a>
</div>
<div className="card-item-sub-name">
<span className={`alert-list-item-state ${rule.stateClass}`}>
<i className={rule.stateIcon} /> {rule.stateText}
</span>
<span> for {rule.stateAge}</span>
</div>
{rule.info && <div className="small muted">{rule.info}</div>}
</div> </div>
</div> </div>
{rule.info && <div className="small muted alert-rule-item__info">{rule.info}</div>}
</div>
<div className="alert-rule-item__footer">
<a
className="btn btn-small btn-inverse alert-list__btn width-2"
title="Pausing an alert rule prevents it from executing"
onClick={this.toggleState}
>
<i className={stateClass} />
</a>
<a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
<i className="icon-gf icon-gf-settings" />
</a>
</div> </div>
</li> </li>
); );
......
public/app/plugins/panel/alertlist/module.html
...@@ -3,24 +3,22 @@ ...@@ -3,24 +3,22 @@
{{ctrl.noAlertsMessage}} {{ctrl.noAlertsMessage}}
</div> </div>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'"> <section ng-if="ctrl.panel.show === 'current'">
<ol class="card-list"> <ol class="alert-rule-list">
<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts"> <li class="alert-rule-item" ng-repeat="alert in ctrl.currentAlerts">
<div class="alert-list card-item card-item--alert"> <div class="alert-rule-item__body">
<div class="alert-list-body"> <div class="alert-rule-item__icon {{alert.stateModel.stateClass}}">
<div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}"> <i class="{{alert.stateModel.iconClass}}"></i>
<i class="{{alert.stateModel.iconClass}}"></i> </div>
</div> <div class="alert-rule-item__header">
<div class="alert-list-main"> <p class="alert-rule-item__name">
<p class="alert-list-title"> <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert"> {{alert.name}}
{{alert.name}} </a>
</a> </p>
</p> <div class="alert-rule-item__text">
<p class="alert-list-text"> <span class="{{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
<span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span> <span class="alert-rule-item__time">for {{alert.newStateDateAgo}}</span>
for {{alert.newStateDateAgo}}
</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -28,30 +26,28 @@ ...@@ -28,30 +26,28 @@
</ol> </ol>
</section> </section>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'"> <section ng-if="ctrl.panel.show === 'changes'">
<ol class="card-list"> <ol class="alert-rule-list">
<li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory"> <li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
<div class="alert-list card-item card-item--alert"> <div class="alert-rule-item__body">
<div class="alert-list-body"> <div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
<div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}"> <i class="{{al.stateModel.iconClass}}"></i>
<i class="{{al.stateModel.iconClass}}"></i> </div>
</div> <div class="alert-rule-item__header">
<div class="alert-list-main"> <p class="alert-rule-item__name">{{al.alertName}}</p>
<p class="alert-list-title">{{al.alertName}}</p> <div class="alert-rule-item__text">
<div class="alert-list-text"> <span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
<span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span> </div>
<span class="alert-list-info alert-list-info-left">{{al.info}}</span> </div>
</div> <span ng-show="al.info !== 'No Data'" class="alert-rule-item__info alert-rule-item__info--left">{{al.info}}</span>
</div> </div>
</div> <div class="alert-list__footer alert-list__footer--column alert-rule-item__time">
<div class="alert-list-footer"> <span>{{al.time}}</span>
<span class="alert-list-text">{{al.time}}</span> <span>
<span class="alert-list-text"> <!--Img Link-->
<!--Img Link--> </span>
</span> </div>
</div> </li>
</div> </ol>
</li> </section>
</ol>
</section>
</div> </div>
public/sass/pages/_alerting.scss
...@@ -28,69 +28,6 @@ ...@@ -28,69 +28,6 @@
border: 0; border: 0;
} }
// Alert List
.alert-list {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.alert-list-icon {
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
.icon-gf,
.fa {
font-size: 200%;
position: relative;
top: 2px;
}
}
.alert-list-body {
display: flex;
}
.alert-list-main {
padding: 0 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.alert-list-title {
font-size: $font-size-base;
margin: 0;
font-weight: 600;
}
.alert-list-state {
font-weight: bold;
}
.alert-list-text {
font-size: $font-size-sm;
margin: 0;
line-height: 1.5rem;
color: $text-color-weak;
}
.alert-list-info {
color: $text-color;
}
.alert-list-info-left {
padding-left: 2rem;
}
.alert-list-footer {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: flex-end;
}
.panel-has-alert { .panel-has-alert {
.panel-alert-icon:before { .panel-alert-icon:before {
content: '\e611'; content: '\e611';
...@@ -136,3 +73,100 @@ ...@@ -136,3 +73,100 @@
opacity: 1; opacity: 1;
} }
} }
// Alert List
// Alert List
.alert-rule-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
}
.alert-rule-item {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
background: $card-background;
box-shadow: $card-shadow;
padding: 4px 8px;
border-radius: 4px;
margin-bottom: 4px;
}
.alert-rule-item__body {
display: flex;
width: 100%;
//flex-grow: 2;
}
.alert-rule-item__icon {
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
.icon-gf,
.fa {
font-size: 200%;
position: relative;
top: 2px;
}
}
.alert-rule-item__header {
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
//width: 100%;
}
.alert-rule-item__name {
font-size: $font-size-base;
margin: 0;
font-weight: 600;
}
.alert-list__btn {
margin: 0 2px;
display: flex;
align-items: center;
justify-content: center;
}
.alert-rule-item__text {
font-weight: bold;
font-size: $font-size-sm;
margin: 0;
}
.alert-rule-item__time {
color: $text-color-weak;
font-weight: normal;
}
.alert-rule-item__info {
//color: $text-color;
font-weight: normal;
flex-grow: 2;
display: flex;
align-items: flex-end;
padding-left: 20px;
}
.alert-rule-item__footer {
display: flex;
align-items: center;
}
.alert-list__footer--column {
flex-direction: column;
}
.alert-tesint {
display: flex;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment