apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

new styling and markup

Browse Source
pull/10452/head
Patrick O'Carroll 8 years ago
parent c42a232644
commit 0068e82718
3 changed files with 177 additions and 136 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 69
      public/app/containers/AlertRuleList/AlertRuleList.tsx
  2. 84
      public/app/plugins/panel/alertlist/module.html
  3. 160
      public/sass/pages/_alerting.scss

69
public/app/containers/AlertRuleList/AlertRuleList.tsx
Unescape View File

@ -52,6 +52,18 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
<PageHeader model={nav as any} />
<div className="page-container page-body">
<div className="page-action-bar">
<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>
@ -69,8 +81,10 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
</a>
</div>
<section className="card-section card-list-layout-list">
<ol className="card-list">{alertList.rules.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}</ol>
<section>
<ol className="alert-rule-list">
{alertList.rules.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}
</ol>
</section>
</div>
</div>
@ -108,36 +122,33 @@ export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
let ruleUrl = `dashboard/${rule.dashboardUri}?panelId=${rule.panelId}&fullscreen&edit&tab=alert`;
return (
<li className="card-item-wrapper">
<div className="card-item card-item--alert">
<div className="card-item-header">
<div className="card-item-type">
<a
className="card-item-cog"
title="Pausing an alert rule prevents it from executing"
onClick={this.toggleState}
>
<i className={stateClass} />
</a>
<a className="card-item-cog" href={ruleUrl} title="Edit alert rule">
<i className="icon-gf icon-gf-settings" />
</a>
<li className="alert-rule-item">
<div className="alert-rule-item__body">
<span className={`alert-rule-item__icon ${rule.stateClass}`}>
<i className={rule.stateIcon} />
</span>
<div className="alert-rule-item__header">
<div className="alert-rule-item__name">
<a href={ruleUrl}>{rule.name}</a>
</div>
</div>
<div className="card-item-body">
<div className="card-item-details">
<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 className="alert-rule-item__text">
<span className={`${rule.stateClass}`}>{rule.stateText}</span>
<span className="alert-rule-item__time"> for {rule.stateAge}</span>
</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>
</li>
);

84
public/app/plugins/panel/alertlist/module.html
Unescape View File

@ -3,24 +3,22 @@
{{ctrl.noAlertsMessage}}
</div>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
<i class="{{alert.stateModel.iconClass}}"></i>
</div>
<div class="alert-list-main">
<p class="alert-list-title">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}}
</a>
</p>
<p class="alert-list-text">
<span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
for {{alert.newStateDateAgo}}
</p>
<section ng-if="ctrl.panel.show === 'current'">
<ol class="alert-rule-list">
<li class="alert-rule-item" ng-repeat="alert in ctrl.currentAlerts">
<div class="alert-rule-item__body">
<div class="alert-rule-item__icon {{alert.stateModel.stateClass}}">
<i class="{{alert.stateModel.iconClass}}"></i>
</div>
<div class="alert-rule-item__header">
<p class="alert-rule-item__name">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}}
</a>
</p>
<div class="alert-rule-item__text">
<span class="{{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
<span class="alert-rule-item__time">for {{alert.newStateDateAgo}}</span>
</div>
</div>
</div>
@ -28,30 +26,28 @@
</ol>
</section>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
<i class="{{al.stateModel.iconClass}}"></i>
</div>
<div class="alert-list-main">
<p class="alert-list-title">{{al.alertName}}</p>
<div class="alert-list-text">
<span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
<span class="alert-list-info alert-list-info-left">{{al.info}}</span>
</div>
</div>
</div>
<div class="alert-list-footer">
<span class="alert-list-text">{{al.time}}</span>
<span class="alert-list-text">
<!--Img Link-->
</span>
</div>
</div>
</li>
</ol>
</section>
<section ng-if="ctrl.panel.show === 'changes'">
<ol class="alert-rule-list">
<li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
<div class="alert-rule-item__body">
<div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
<i class="{{al.stateModel.iconClass}}"></i>
</div>
<div class="alert-rule-item__header">
<p class="alert-rule-item__name">{{al.alertName}}</p>
<div class="alert-rule-item__text">
<span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</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 class="alert-list__footer alert-list__footer--column alert-rule-item__time">
<span>{{al.time}}</span>
<span>
<!--Img Link-->
</span>
</div>
</li>
</ol>
</section>
</div>

160
public/sass/pages/_alerting.scss
Unescape View File

@ -28,69 +28,6 @@
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-alert-icon:before {
content: '\e611';
@ -136,3 +73,100 @@
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;
}

Write Preview
Loading…
Cancel
Save