public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new styling and markup

Browse Source
This commit is contained in:
Patrick O'Carroll
2018-01-04 13:08:49 +01:00
parent c42a232644
commit 0068e82718
3 changed files with 177 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/containers/AlertRuleList/AlertRuleList.tsx
+40 -29
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>
);
public/app/plugins/panel/alertlist/module.html
+40 -44
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>
public/sass/pages/_alerting.scss
+97 -63
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;
}