Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #980 from influxdata/misc-ui-polish 

Shoe Polish
pull/10616/head
Hunter Trujillo 2017-03-09 12:02:27 -07:00 committed by GitHub
parent da9374b9ed 5af8e0e0fb
commit 34c66c871a
38 changed files with 321 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/alerts/containers/AlertsApp.js
View File

@ -1,5 +1,6 @@
import React, {PropTypes} from 'react';
import AlertsTable from '../components/AlertsTable';
import SourceIndicator from '../../shared/components/SourceIndicator';
import {getAlerts} from '../apis';
import AJAX from 'utils/ajax';
import _ from 'lodash';
@ -93,6 +94,7 @@ const AlertsApp = React.createClass({
},
render() {
const {source} = this.props;
return (
// I stole this from the Hosts page.
// Perhaps we should create an abstraction?
@ -104,6 +106,9 @@ const AlertsApp = React.createClass({
Alert History
</h1>
</div>
<div className="page-header__right">
<SourceIndicator sourceName={source.name} />
</div>
</div>
</div>
<div className="page-contents">

4
ui/src/dashboards/components/DashboardHeader.js
View File

@ -4,6 +4,7 @@ import {Link} from 'react-router';
import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
import TimeRangeDropdown from 'shared/components/TimeRangeDropdown'
import SourceIndicator from '../../shared/components/SourceIndicator'
const DashboardHeader = ({
children,
@ -17,6 +18,7 @@ const DashboardHeader = ({
handleChooseAutoRefresh,
handleClickPresentationButton,
sourceID,
source,
}) => isHidden ? null : (
<div className="page-header full-width">
<div className="page-header__container">
@ -48,6 +50,7 @@ const DashboardHeader = ({
Graph Tips
</div>
<ReactTooltip id="graph-tips-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
<SourceIndicator sourceName={source.name} />
<AutoRefreshDropdown onChoose={handleChooseAutoRefresh} selected={autoRefresh} iconName="refresh" />
<TimeRangeDropdown onChooseTimeRange={handleChooseTimeRange} selected={timeRange.inputValue} />
<div className="btn btn-info btn-sm" onClick={handleClickPresentationButton}>
@ -79,6 +82,7 @@ DashboardHeader.propTypes = {
handleChooseTimeRange: func.isRequired,
handleChooseAutoRefresh: func.isRequired,
handleClickPresentationButton: func.isRequired,
source: shape({}),
}
export default DashboardHeader

1
ui/src/dashboards/containers/DashboardPage.js
View File

@ -119,6 +119,7 @@ const DashboardPage = React.createClass({
handleClickPresentationButton={handleClickPresentationButton}
dashboard={dashboard}
sourceID={sourceID}
source={source}
>
{(dashboards).map((d, i) => {
return (

4
ui/src/dashboards/containers/DashboardsPage.js
View File

@ -1,5 +1,6 @@
import React, {PropTypes} from 'react';
import {Link} from 'react-router';
import SourceIndicator from '../../shared/components/SourceIndicator';
import {getDashboards} from '../apis';
@ -53,6 +54,9 @@ const DashboardsPage = React.createClass({
Dashboards
</h1>
</div>
<div className="page-header__right">
<SourceIndicator sourceName={this.props.source.name} />
</div>
</div>
</div>
<div className="page-contents">

7
ui/src/data_explorer/containers/Header.js
View File

@ -4,6 +4,7 @@ import {withRouter} from 'react-router';
import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
import SourceIndicator from '../../shared/components/SourceIndicator';
import timeRanges from 'hson!../../shared/data/timeRanges.hson';
@ -57,11 +58,7 @@ const Header = React.createClass({
<h1>Explorer</h1>
</div>
<div className="page-header__right">
<h1>Source:</h1>
<div className="source-indicator">
<span className="icon cpu"></span>
{this.context.source.name}
</div>
<SourceIndicator sourceName={this.context.source.name} />
<AutoRefreshDropdown onChoose={handleChooseAutoRefresh} selected={autoRefresh} iconName="refresh" />
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
</div>

12
ui/src/hosts/containers/HostPage.js
View File

@ -150,7 +150,16 @@ export const HostPage = React.createClass({
},
render() {
const {params: {hostID}, location: {query: {app}}, source: {id}, autoRefresh, handleChooseAutoRefresh, inPresentationMode, handleClickPresentationButton} = this.props
const {
params: {hostID},
location: {query: {app}},
source: {id},
autoRefresh,
handleChooseAutoRefresh,
inPresentationMode,
handleClickPresentationButton,
source,
} = this.props
const {layouts, timeRange, hosts} = this.state
const appParam = app ? `?app=${app}` : ''
@ -164,6 +173,7 @@ export const HostPage = React.createClass({
handleChooseTimeRange={this.handleChooseTimeRange}
handleChooseAutoRefresh={handleChooseAutoRefresh}
handleClickPresentationButton={handleClickPresentationButton}
source={source}
>
{Object.keys(hosts).map((host, i) => {
return (

7
ui/src/hosts/containers/HostsPage.js
View File

@ -1,6 +1,7 @@
import React, {PropTypes} from 'react';
import _ from 'lodash';
import HostsTable from '../components/HostsTable';
import SourceIndicator from '../../shared/components/SourceIndicator'
import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis';
export const HostsPage = React.createClass({
@ -44,6 +45,7 @@ export const HostsPage = React.createClass({
},
render() {
const {source} = this.props;
return (
<div className="page">
<div className="page-header">
@ -53,13 +55,16 @@ export const HostsPage = React.createClass({
Host List
</h1>
</div>
<div className="page-header__right">
<SourceIndicator sourceName={source.name} />
</div>
</div>
</div>
<div className="page-contents">
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<HostsTable source={this.props.source} hosts={_.values(this.state.hosts)} up={this.state.up} />
<HostsTable source={source} hosts={_.values(this.state.hosts)} up={this.state.up} />
</div>
</div>
</div>

2
ui/src/kapacitor/components/AlertOutputs.js
View File

@ -105,7 +105,7 @@ const AlertOutputs = React.createClass({
return (
<div className="panel panel-minimal">
<div className="panel-body">
<h4 className="text-center">Configure Alert Endpoints</h4>
<h4 className="text-center no-user-select">Configure Alert Endpoints</h4>
<br/>
<div className="row">
<div className="form-group col-xs-12 col-sm-8 col-sm-offset-2">

4
ui/src/kapacitor/components/AlertaConfig.js
View File

@ -31,10 +31,10 @@ const AlertaConfig = React.createClass({
return (
<div className="col-xs-12">
<h4 className="text-center">Alerta Alert</h4>
<h4 className="text-center no-user-select">Alerta Alert</h4>
<br/>
<form onSubmit={this.handleSaveAlert}>
<p>
<p className="no-user-select">
Have alerts sent to Alerta
</p>

4
ui/src/kapacitor/components/HipChatConfig.js
View File

@ -30,9 +30,9 @@ const HipchatConfig = React.createClass({
return (
<div>
<h4 className="text-center">HipChat Alert</h4>
<h4 className="text-center no-user-select">HipChat Alert</h4>
<br/>
<p>Have alerts sent to HipChat.</p>
<p className="no-user-select">Have alerts sent to HipChat.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12">
<label htmlFor="url">HipChat URL</label>

4
ui/src/kapacitor/components/KapacitorForm.js
View File

@ -45,13 +45,13 @@ const KapacitorForm = React.createClass({
<div className="col-md-8 col-md-offset-2">
<div className="panel panel-minimal">
<div className="panel-body">
<p>
<p className="no-user-select">
Kapacitor is used as the monitoring and alerting agent.
This page will let you configure which Kapacitor to use and
set up alert end points like email, Slack, and others.
</p>
<hr/>
<h4 className="text-center">Connect Kapacitor to Source</h4>
<h4 className="text-center no-user-select">Connect Kapacitor to Source</h4>
<h4 className="text-center">{source.url}</h4>
<br/>
<form onSubmit={onSubmit}>

1
ui/src/kapacitor/components/KapacitorRule.js
View File

@ -47,6 +47,7 @@ export const KapacitorRule = React.createClass({
onChooseTimeRange={this.handleChooseTimeRange}
validationError={this.validationError()}
timeRange={timeRange}
source={source}
/>
<div className="page-contents page-contents--green-scrollbar">
<div className="container-fluid">

15
ui/src/kapacitor/components/KapacitorRules.js
View File

@ -1,7 +1,8 @@
import React, {PropTypes} from 'react';
import {Link} from 'react-router';
import React, {PropTypes} from 'react'
import {Link} from 'react-router'
import NoKapacitorError from '../../shared/components/NoKapacitorError';
import NoKapacitorError from '../../shared/components/NoKapacitorError'
import SourceIndicator from '../../shared/components/SourceIndicator'
import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable'
const KapacitorRules = ({
@ -29,7 +30,7 @@ const KapacitorRules = ({
}
return (
<PageContents>
<PageContents source={source} >
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
<h2 className="panel-title">Alert Rules</h2>
<Link to={`/sources/${source.id}/alert-rules/new`} className="btn btn-sm btn-primary">Create New Rule</Link>
@ -44,13 +45,16 @@ const KapacitorRules = ({
)
}
const PageContents = ({children}) => (
const PageContents = ({children, source}) => (
<div className="page">
<div className="page-header">
<div className="page-header__container">
<div className="page-header__left">
<h1>Kapacitor Rules</h1>
</div>
<div className="page-header__right">
<SourceIndicator sourceName={source && source.name} />
</div>
</div>
</div>
<div className="page-contents">
@ -86,6 +90,7 @@ KapacitorRules.propTypes = {
PageContents.propTypes = {
children: node,
source: shape(),
}
export default KapacitorRules

4
ui/src/kapacitor/components/OpsGenieConfig.js
View File

@ -65,9 +65,9 @@ const OpsGenieConfig = React.createClass({
return (
<div>
<h4 className="text-center">OpsGenie Alert</h4>
<h4 className="text-center no-user-select">OpsGenie Alert</h4>
<br/>
<p>Have alerts sent to OpsGenie.</p>
<p className="no-user-select">Have alerts sent to OpsGenie.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12">
<label htmlFor="api-key">API Key</label>

4
ui/src/kapacitor/components/PagerDutyConfig.js
View File

@ -29,9 +29,9 @@ const PagerDutyConfig = React.createClass({
return (
<div>
<h4 className="text-center">PagerDuty Alert</h4>
<h4 className="text-center no-user-select">PagerDuty Alert</h4>
<br/>
<p>You can have alerts sent to PagerDuty by entering info below.</p>
<p className="no-user-select">You can have alerts sent to PagerDuty by entering info below.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12">
<label htmlFor="service-key">Service Key</label>

7
ui/src/kapacitor/components/RuleHeader.js
View File

@ -1,9 +1,11 @@
import React, {PropTypes} from 'react';
import ReactTooltip from 'react-tooltip';
import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
import SourceIndicator from '../../shared/components/SourceIndicator';
export const RuleHeader = React.createClass({
propTypes: {
source: PropTypes.shape({}).isRequired,
onSave: PropTypes.func.isRequired,
rule: PropTypes.shape({}).isRequired,
actions: PropTypes.shape({
@ -56,15 +58,16 @@ export const RuleHeader = React.createClass({
},
renderSave() {
const {validationError, onSave, timeRange, onChooseTimeRange} = this.props;
const {validationError, onSave, timeRange, onChooseTimeRange, source} = this.props;
const saveButton = validationError ?
<button className="btn btn-sm btn-default disabled" data-for="save-kapacitor-tooltip" data-tip={validationError}>
<button className="btn btn-success btn-sm disabled" data-for="save-kapacitor-tooltip" data-tip={validationError}>
Save Rule
</button> :
<button className="btn btn-success btn-sm" onClick={onSave}>Save Rule</button>;
return (
<div className="page-header__right">
<SourceIndicator sourceName={source.name} />
<TimeRangeDropdown onChooseTimeRange={onChooseTimeRange} selected={timeRange.inputValue} />
{saveButton}
<ReactTooltip id="save-kapacitor-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip kapacitor-tooltip place-bottom" />

4
ui/src/kapacitor/components/SMTPConfig.js
View File

@ -33,9 +33,9 @@ const SMTPConfig = React.createClass({
return (
<div>
<h4 className="text-center">SMTP Alert</h4>
<h4 className="text-center no-user-select">SMTP Alert</h4>
<br/>
<p>You can have alerts sent to an email address by setting up an SMTP endpoint.</p>
<p className="no-user-select">You can have alerts sent to an email address by setting up an SMTP endpoint.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12 col-md-6">
<label htmlFor="smtp-host">SMTP Host</label>

4
ui/src/kapacitor/components/SensuConfig.js
View File

@ -27,9 +27,9 @@ const SensuConfig = React.createClass({
return (
<div>
<h4 className="text-center">Sensu Alert</h4>
<h4 className="text-center no-user-select">Sensu Alert</h4>
<br/>
<p>Have alerts sent to Sensu.</p>
<p className="no-user-select">Have alerts sent to Sensu.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12 col-md-6">
<label htmlFor="source">Source</label>

4
ui/src/kapacitor/components/SlackConfig.js
View File

@ -48,9 +48,9 @@ const SlackConfig = React.createClass({
return (
<div>
<h4 className="text-center">Slack Alert</h4>
<h4 className="text-center no-user-select">Slack Alert</h4>
<br/>
<p>Post alerts to a Slack channel.</p>
<p className="no-user-select">Post alerts to a Slack channel.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12">
<label htmlFor="slack-url">Slack Webhook URL (<a href="https://api.slack.com/incoming-webhooks" target="_">see more on Slack webhooks</a>)</label>

4
ui/src/kapacitor/components/TalkConfig.js
View File

@ -34,9 +34,9 @@ const TalkConfig = React.createClass({
return (
<div>
<h4 className="text-center">Talk Alert</h4>
<h4 className="text-center no-user-select">Talk Alert</h4>
<br/>
<p>Have alerts sent to Talk.</p>
<p className="no-user-select">Have alerts sent to Talk.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12">
<label htmlFor="url">URL</label>

4
ui/src/kapacitor/components/TelegramConfig.js
View File

@ -48,9 +48,9 @@ const TelegramConfig = React.createClass({
return (
<div>
<h4 className="text-center">Telegram Alert</h4>
<h4 className="text-center no-user-select">Telegram Alert</h4>
<br/>
<p>You can have alerts sent to Telegram by entering info below.</p>
<p className="no-user-select">You can have alerts sent to Telegram by entering info below.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12">
<label htmlFor="url">Telegram URL</label>

4
ui/src/kapacitor/components/VictorOpsConfig.js
View File

@ -32,9 +32,9 @@ const VictorOpsConfig = React.createClass({
return (
<div>
<h4 className="text-center">VictorOps Alert</h4>
<h4 className="text-center no-user-select">VictorOps Alert</h4>
<br/>
<p>Have alerts sent to VictorOps.</p>
<p className="no-user-select">Have alerts sent to VictorOps.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="form-group col-xs-12">
<label htmlFor="api-key">API Key</label>

3
ui/src/kubernetes/components/KubernetesDashboard.js
View File

@ -70,7 +70,7 @@ export const KubernetesDashboard = React.createClass({
},
render() {
const {layouts, autoRefresh, handleChooseAutoRefresh, inPresentationMode, handleClickPresentationButton} = this.props;
const {layouts, autoRefresh, handleChooseAutoRefresh, inPresentationMode, handleClickPresentationButton, source} = this.props;
const {timeRange} = this.state;
const emptyState = (
<div className="generic-empty-state">
@ -89,6 +89,7 @@ export const KubernetesDashboard = React.createClass({
handleChooseTimeRange={this.handleChooseTimeRange}
isHidden={inPresentationMode}
handleClickPresentationButton={handleClickPresentationButton}
source={source}
/>
<div className={classnames({
'page-contents': true,

22
ui/src/shared/components/SourceIndicator.js Normal file
View File

@ -0,0 +1,22 @@
import React, {PropTypes} from 'react';
const SourceIndicator = React.createClass({
propTypes: {
sourceName: PropTypes.string,
},
render() {
const {sourceName} = this.props;
if (!sourceName) {
return null;
}
return (
<div className="source-indicator">
<span className="icon server"></span>
{sourceName}
</div>
);
},
});
export default SourceIndicator;

1
ui/src/style/chronograf.scss
View File

@ -37,6 +37,7 @@
@import 'components/search-widget';
@import 'components/tables';
@import 'components/resizer';
@import 'components/source-indicator';
// Pages
@import 'pages/alerts';

25
ui/src/style/components/dygraphs.scss
View File

@ -124,3 +124,28 @@
padding: 0 10px 0 1px !important;
}
}
.single-stat {
position: absolute;
width: 100%;
height: 100%;
font-size: 60px;
font-weight: 300;
color: $c-pool;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
font-size: 54px;
font-weight: 300;
color: $c-pool;
&.graph-single-stat {
position: absolute;
width: 100%;
top: 0;
}
}

2
ui/src/style/components/page-header-dropdown.scss
View File

@ -11,6 +11,7 @@
font-size: 17px;
font-weight: 400;
transition: color 0.25s ease;
@include no-user-select();
}
.dropdown-toggle > .caret {
right: 0;
@ -35,6 +36,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include no-user-select();
}
}
}

27
ui/src/style/components/source-indicator.scss Normal file
View File

@ -0,0 +1,27 @@
/*
Source Indicator component styles
----------------------------------------------------------------
*/
.source-indicator {
@include no-user-select();
display: inline-block;
padding: 0 9px;
border: 0;
background-color: $g5-pepper;
height: 30px;
line-height: 30px;
color: $g13-mist;
font-weight: 700;
font-size: 12px;
border-radius: 3px;
margin-right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
> .icon {
display: inline-block;
font-size: 16px;
margin: 0 4px 0 -2px;
}
}

1
ui/src/style/layout/page-header.scss
View File

@ -31,6 +31,7 @@
margin: 0;
display: inline-block;
vertical-align: middle;
@include no-user-select();
}
&__left,
&__right {

1
ui/src/style/layout/sidebar.scss
View File

@ -214,6 +214,7 @@ $sidebar-logo-color: $g8-storm;
white-space: nowrap;
margin: 0;
display: block;
@include no-user-select();
}
&__menu-item {

121
ui/src/style/mixins/mixins.scss
View File

@ -1,70 +1,87 @@
// Gradients
@mixin gradient-v($startColor, $endColor) {
background: $startColor;
background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%);
background: linear-gradient(to bottom, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=0 );
background: $startColor;
background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%);
background: linear-gradient(to bottom, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=0 );
}
@mixin gradient-h($startColor, $endColor) {
background: $startColor;
background: -moz-linear-gradient(left, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(left, $startColor 0%,$endColor 100%);
background: linear-gradient(to right, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
background: $startColor;
background: -moz-linear-gradient(left, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(left, $startColor 0%,$endColor 100%);
background: linear-gradient(to right, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
}
@mixin gradient-diag-up($startColor, $endColor) {
background: $startColor;
background: -moz-linear-gradient(45deg, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(45deg, $startColor 0%,$endColor 100%);
background: linear-gradient(45deg, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
background: $startColor;
background: -moz-linear-gradient(45deg, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(45deg, $startColor 0%,$endColor 100%);
background: linear-gradient(45deg, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
}
@mixin gradient-diag-down($startColor, $endColor) {
background: $startColor;
background: -moz-linear-gradient(135deg, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(135deg, $startColor 0%,$endColor 100%);
background: linear-gradient(135deg, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
background: $startColor;
background: -moz-linear-gradient(135deg, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(135deg, $startColor 0%,$endColor 100%);
background: linear-gradient(135deg, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
}
@mixin gradient-r($startColor, $endColor) {
background: $startColor;
background: -moz-radial-gradient(center, ellipse cover, $startColor 0%, $endColor 100%);
background: -webkit-radial-gradient(center, ellipse cover, $startColor 0%,$endColor 100%);
background: radial-gradient(ellipse at center, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
background: $startColor;
background: -moz-radial-gradient(center, ellipse cover, $startColor 0%, $endColor 100%);
background: -webkit-radial-gradient(center, ellipse cover, $startColor 0%,$endColor 100%);
background: radial-gradient(ellipse at center, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
}
// Custom Scrollbars (Chrome Only)
$scrollbar-width: 16px;
$scrollbar-offset: 3px;
@mixin custom-scrollbar($trackColor, $handleColor) {
&::-webkit-scrollbar {
width: $scrollbar-width;
border-bottom-right-radius: $radius;
&::-webkit-scrollbar {
width: $scrollbar-width;
border-bottom-right-radius: $radius;
&-button {
background-color: $trackColor;
}
&-track {
background-color: $trackColor;
border-bottom-right-radius: $radius;
}
&-track-piece {
background-color: $trackColor;
border: $scrollbar-offset solid $trackColor;
border-radius: ($scrollbar-width / 2);
}
&-thumb {
background-color: $handleColor;
border: $scrollbar-offset solid $trackColor;
border-radius: ($scrollbar-width / 2);
}
&-corner {
background-color: $trackColor;
}
}
&::-webkit-resizer {
background-color: $trackColor;
}
&-button {
background-color: $trackColor;
}
&-track {
background-color: $trackColor;
border-bottom-right-radius: $radius;
}
&-track-piece {
background-color: $trackColor;
border: $scrollbar-offset solid $trackColor;
border-radius: ($scrollbar-width / 2);
}
&-thumb {
background-color: $handleColor;
border: $scrollbar-offset solid $trackColor;
border-radius: ($scrollbar-width / 2);
}
&-corner {
background-color: $trackColor;
}
}
&::-webkit-resizer {
background-color: $trackColor;
}
}
// Block user select
@mixin no-user-select() {
user-select: none !important;
-moz-user-select: none !important;
-webkit-user-select: none !important;
-ms-user-select: none !important;
-o-user-select: none !important;
}
.no-user-select {
user-select: none !important;
-moz-user-select: none !important;
-webkit-user-select: none !important;
-ms-user-select: none !important;
-o-user-select: none !important;
}

21
ui/src/style/pages/data-explorer/page-header.scss
View File

@ -24,25 +24,4 @@ $sessions-dropdown-width: 227px;
.sessions-dropdown__btn {
margin: 0 16px 0 0;
border-radius: 0 3px 3px 0;
}
.source-indicator {
padding: 0 9px;
border: 0;
background-color: $g5-pepper;
height: 30px;
line-height: 30px;
color: $g13-mist;
font-weight: 700;
font-size: 12px;
border-radius: 3px;
margin-right: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
> .icon {
display: inline-block;
font-size: 16px;
margin: 0 4px 0 -2px;
}
}

5
ui/src/style/pages/data-explorer/query-builder.scss
View File

@ -29,6 +29,7 @@
justify-content: space-between;
h1 {
@include no-user-select();
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
@ -105,7 +106,7 @@
padding: 0;
> .icon {
margin: 0;
margin: 0 !important;
font-size: 12px;
position: relative;
top: -1px;
@ -135,6 +136,7 @@
overflow: hidden;
max-width: 177px;
text-overflow: ellipsis;
@include no-user-select();
}
/*
@ -165,6 +167,7 @@ $query-builder--column-heading-height: 60px;
top: 60px;
}
.query-builder--column-heading {
@include no-user-select();
width: 100%;
height: $query-builder--column-heading-height;
display: flex;

2
ui/src/style/pages/data-explorer/query-editor.scss
View File

@ -60,6 +60,7 @@
font-weight: 600;
border-radius: $radius-small $radius-small 0 0;
margin-right: 2px;
@include no-user-select();
transition:
color 0.25s ease,
background-color 0.25s ease;
@ -82,6 +83,7 @@
border-radius: 0 0 $radius-small $radius-small;
&-item {
@include no-user-select();
color: $g11-sidewalk;
list-style-type: none;
margin: 0;

2
ui/src/style/pages/data-explorer/visualization.scss
View File

@ -27,6 +27,7 @@
color: $g13-mist;
font-weight: 600;
margin-right: 16px;
@include no-user-select();
transition:
color 0.25s ease;
}
@ -70,6 +71,7 @@
}
}
.graph-container {
@include no-user-select();
background-color: $graph-bg-color;
border-radius: 0 0 $graph-radius $graph-radius;
padding: 8px 16px;

16
ui/src/style/pages/hosts.scss
View File

@ -5,22 +5,6 @@
.graph-container.hosts-graph {
padding: 8px 16px;
.single-stat {
font-size: 60px;
font-weight: 300;
color: $c-pool;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
&.graph-single-stat {
position: absolute;
width: 100%;
top: 0;
}
}
}
.host-list--active-source {

7
ui/src/style/pages/kapacitor.scss
View File

@ -80,6 +80,7 @@ $kapacitor-font-sm: 13px;
display: flex;
align-items: center;
justify-content: center;
@include no-user-select();
p {
margin: 0;
@ -101,6 +102,7 @@ $kapacitor-font-sm: 13px;
font-weight: 400;
color: $g13-mist;
position: relative;
@include no-user-select();
&:before,
&:after {
@ -451,6 +453,7 @@ div.qeditor.kapacitor-metric-selector {
font-weight: 600;
display: inline-block;
color: $g15-platinum;
@include no-user-select();
}
> code {
background-color: $g2-kevlar;
@ -465,6 +468,7 @@ div.qeditor.kapacitor-metric-selector {
font-size: ($kapacitor-font-sm - 2px);
font-weight: 600;
transition: color 0.25s ease;
@include no-user-select();
&:hover {
color: $c-rainforest;
@ -483,6 +487,7 @@ div.qeditor.kapacitor-metric-selector {
font-weight: 600;
display: inline-block;
color: $g15-platinum;
@include no-user-select();
}
&.top {
@ -514,6 +519,7 @@ div.qeditor.kapacitor-metric-selector {
}
> p {
@include no-user-select();
white-space: nowrap;
font-weight: 600;
color: $g15-platinum;
@ -521,6 +527,7 @@ div.qeditor.kapacitor-metric-selector {
margin-right: ($kap-padding-sm / 2);
}
> span {
@include no-user-select();
color: $kapacitor-accent;
height: $kap-input-height;
line-height: $kap-input-height;

85
ui/src/style/theme/theme-dark.scss
View File

@ -19,6 +19,10 @@
.panel hr {
background-color: $g5-pepper;
}
.panel-title,
.panel-title a {
@include no-user-select();
}
.panel-minimal {
border: 0;
@ -55,7 +59,9 @@
}
}
}
table thead th {
@include no-user-select();
}
/*
@ -86,6 +92,72 @@ button.btn.btn-sm > span.icon {
top: -1px;
}
.btn.disabled,
.btn[disabled="true"] {
&.btn-success,
&.btn-success:hover,
&.btn-success:focus,
&.btn-success:active,
&.btn-success:hover:active,
&.btn-success:hover:focus,
&.btn-success:focus:active,
&.btn-success:focus:active:hover {
border-color: $c-emerald;
background-color: $c-emerald;
color: $g2-kevlar !important;
}
&.btn-primary,
&.btn-primary:hover,
&.btn-primary:focus,
&.btn-primary:active,
&.btn-primary:hover:active,
&.btn-primary:hover:focus,
&.btn-primary:focus:active,
&.btn-primary:focus:active:hover {
border-color: $c-sapphire;
background-color: $c-sapphire;
color: $g2-kevlar !important;
}
&.btn-info,
&.btn-info:hover,
&.btn-info:focus,
&.btn-info:active,
&.btn-info:hover:active,
&.btn-info:hover:focus,
&.btn-info:focus:active,
&.btn-info:focus:active:hover {
border-color: $g5-pepper;
background-color: $g5-pepper;
color: $g8-storm !important;
}
&.btn-danger,
&.btn-danger:hover,
&.btn-danger:focus,
&.btn-danger:active,
&.btn-danger:hover:active,
&.btn-danger:hover:focus,
&.btn-danger:focus:active,
&.btn-danger:focus:active:hover {
border-color: $c-ruby;
background-color: $c-ruby;
color: $g2-kevlar !important;
}
&.btn-warning,
&.btn-warning:hover,
&.btn-warning:focus,
&.btn-warning:active,
&.btn-warning:hover:active,
&.btn-warning:hover:focus,
&.btn-warning:focus:active,
&.btn-warning:focus:active:hover {
border-color: $c-star;
background-color: $c-star;
color: $g2-kevlar !important;
}
}
/*
Dark Inputs
----------------------------------------------
@ -99,6 +171,7 @@ button.btn.btn-sm > span.icon {
font-weight: 600;
margin-bottom: 4px;
padding: 0 13px;
@include no-user-select();
}
.form-control {
padding: 0 13px;
@ -433,6 +506,8 @@ $toggle-border: 2px;
border-radius: 3px;
background-color: $g5-pepper;
font-size: 0;
white-space: nowrap;
@include no-user-select();
}
.toggle-btn {
border: 0;
@ -673,4 +748,12 @@ $form-static-checkbox-size: 16px;
opacity: 1;
transform: translate(-50%,-50%) scale(1,1);
}
}
br {
@include no-user-select();
}