IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Aligned styling of stats popover/box with rest of grafana & minor css refactoring

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-12-07 11:28:22 +01:00
parent fb4925a8c2
commit 7cb456ea23
2 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/explore/LogLabels.tsx
View File

@ -48,15 +48,21 @@ export class Stats extends PureComponent<{
const otherProportion = otherCount / total; const otherProportion = otherCount / total;
return ( return (
<> <div className="logs-stats">
<div className="logs-stats__info"> <div className="logs-stats__header">
<span className="logs-stats__title">
{label}: {total} of {rowCount} rows have that label {label}: {total} of {rowCount} rows have that label
<span className="logs-stats__icon fa fa-window-close" onClick={onClickClose} /> </span>
<span className="logs-stats__close fa fa-remove" onClick={onClickClose} />
</div> </div>
<div className="logs-stats__body">
{topRows.map(stat => <StatsRow key={stat.value} {...stat} active={stat.value === value} />)} {topRows.map(stat => <StatsRow key={stat.value} {...stat} active={stat.value === value} />)}
{insertActiveRow && activeRow && <StatsRow key={activeRow.value} {...activeRow} active />} {insertActiveRow && activeRow && <StatsRow key={activeRow.value} {...activeRow} active />}
{otherCount > 0 && <StatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />} {otherCount > 0 && (
</> <StatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
)}
</div>
</div>
); );
} }
} }

45
public/sass/components/_panel_logs.scss
View File

@ -173,10 +173,6 @@ $column-horizontal-spacing: 10px;
.logs-row__stats { .logs-row__stats {
margin: 5px 0; margin: 5px 0;
background-color: $popover-bg;
color: $popover-color;
border: 1px solid $popover-border-color;
padding: 10px;
} }
.logs-row__field-highlight:hover { .logs-row__field-highlight:hover {
@ -211,21 +207,42 @@ $column-horizontal-spacing: 10px;
top: 1.25em; top: 1.25em;
left: -10px; left: -10px;
z-index: 100; z-index: 100;
background-color: $popover-bg;
color: $popover-color;
border: 1px solid $popover-border-color;
padding: 10px;
border-radius: $border-radius;
justify-content: space-between; justify-content: space-between;
box-shadow: $popover-shadow; box-shadow: $popover-shadow;
} }
.logs-stats__info { /*
margin-bottom: $spacer / 2; * Stats popover & message stats box
*/
.logs-stats {
background-color: $popover-bg;
color: $popover-color;
border: 1px solid $popover-border-color;
border-radius: $border-radius;
max-width: 500px;
} }
.logs-stats__icon { .logs-stats__header {
margin-left: 0.5em; background-color: $popover-border-color;
padding: 6px 10px;
display: flex;
}
.logs-stats__title {
font-weight: $font-weight-semi-bold;
padding-right: $spacer;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
flex-grow: 1;
}
.logs-stats__body {
padding: 20px 10px 10px 10px;
}
.logs-stats__close {
cursor: pointer; cursor: pointer;
} }
@ -272,6 +289,6 @@ $column-horizontal-spacing: 10px;
} }
&__innerbar { &__innerbar {
background-color: $blue; background: $blue;
} }
} }