@@ -81,10 +83,13 @@ export const KubernetesDashboard = React.createClass({
@@ -51,11 +59,13 @@ export const KubernetesPage = React.createClass({
},
});
-const mapStateToProps = (state) => ({
- inPresentationMode: state.appUI.presentationMode,
+const mapStateToProps = ({app: {ephemeral: {inPresentationMode}, persisted: {autoRefresh}}}) => ({
+ inPresentationMode,
+ autoRefresh,
})
const mapDispatchToProps = (dispatch) => ({
+ handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
handleClickPresentationButton: presentationButtonDispatcher(dispatch),
})
diff --git a/ui/src/localStorage.js b/ui/src/localStorage.js
index 5cd29aa07..4b8381503 100644
--- a/ui/src/localStorage.js
+++ b/ui/src/localStorage.js
@@ -9,9 +9,12 @@ export const loadLocalStorage = () => {
}
};
-export const saveToLocalStorage = ({queryConfigs, timeRange, dataExplorer}) => {
+export const saveToLocalStorage = ({app: {persisted}, queryConfigs, timeRange, dataExplorer}) => {
try {
+ const appPersisted = Object.assign({}, {app: {persisted}})
+
window.localStorage.setItem('state', JSON.stringify({
+ ...appPersisted,
queryConfigs,
timeRange,
dataExplorer,
diff --git a/ui/src/shared/actions/app.js b/ui/src/shared/actions/app.js
new file mode 100644
index 000000000..87c78706a
--- /dev/null
+++ b/ui/src/shared/actions/app.js
@@ -0,0 +1,22 @@
+import {PRESENTATION_MODE_ANIMATION_DELAY} from '../constants'
+
+// ephemeral state action creators
+export const enablePresentationMode = () => ({
+ type: 'ENABLE_PRESENTATION_MODE',
+})
+
+export const disablePresentationMode = () => ({
+ type: 'DISABLE_PRESENTATION_MODE',
+})
+
+export const delayEnablePresentationMode = () => (dispatch) => {
+ setTimeout(() => dispatch(enablePresentationMode()), PRESENTATION_MODE_ANIMATION_DELAY)
+}
+
+// persistent state action creators
+export const setAutoRefresh = (milliseconds) => ({
+ type: 'SET_AUTOREFRESH',
+ payload: {
+ milliseconds,
+ },
+})
diff --git a/ui/src/shared/actions/ui.js b/ui/src/shared/actions/ui.js
deleted file mode 100644
index 740566beb..000000000
--- a/ui/src/shared/actions/ui.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import {PRESENTATION_MODE_ANIMATION_DELAY} from '../constants'
-
-export function enablePresentationMode() {
- return {
- type: 'ENABLE_PRESENTATION_MODE',
- }
-}
-
-export function disablePresentationMode() {
- return {
- type: 'DISABLE_PRESENTATION_MODE',
- }
-}
-
-export function delayEnablePresentationMode() {
- return (dispatch) => {
- setTimeout(() => dispatch(enablePresentationMode()), PRESENTATION_MODE_ANIMATION_DELAY)
- }
-}
diff --git a/ui/src/shared/components/AutoRefresh.js b/ui/src/shared/components/AutoRefresh.js
index fd79cd620..9474b306e 100644
--- a/ui/src/shared/components/AutoRefresh.js
+++ b/ui/src/shared/components/AutoRefresh.js
@@ -6,25 +6,37 @@ function _fetchTimeSeries(source, db, rp, query) {
return proxy({source, db, rp, query});
}
+const {
+ element,
+ number,
+ arrayOf,
+ shape,
+ oneOfType,
+ string,
+} = PropTypes
+
export default function AutoRefresh(ComposedComponent) {
const wrapper = React.createClass({
displayName: `AutoRefresh_${ComposedComponent.displayName}`,
propTypes: {
- children: PropTypes.element,
- autoRefresh: PropTypes.number,
- queries: PropTypes.arrayOf(PropTypes.shape({
- host: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
- text: PropTypes.string,
+ children: element,
+ autoRefresh: number.isRequired,
+ queries: arrayOf(shape({
+ host: oneOfType([string, arrayOf(string)]),
+ text: string,
}).isRequired).isRequired,
},
getInitialState() {
- return {timeSeries: []};
+ return {
+ lastQuerySuccessful: false,
+ timeSeries: [],
+ };
},
componentDidMount() {
- const {queries} = this.props;
+ const {queries, autoRefresh} = this.props;
this.executeQueries(queries);
- if (this.props.autoRefresh) {
- this.intervalID = setInterval(() => this.executeQueries(queries), this.props.autoRefresh);
+ if (autoRefresh) {
+ this.intervalID = setInterval(() => this.executeQueries(queries), autoRefresh);
}
},
componentWillReceiveProps(nextProps) {
@@ -63,7 +75,9 @@ export default function AutoRefresh(ComposedComponent) {
newSeries.push({response: resp.data});
count += 1;
if (count === queries.length) {
+ const querySuccessful = !this._noResultsForQuery(newSeries);
this.setState({
+ lastQuerySuccessful: querySuccessful,
isFetching: false,
timeSeries: newSeries,
});
@@ -77,11 +91,11 @@ export default function AutoRefresh(ComposedComponent) {
render() {
const {timeSeries} = this.state;
- if (this.state.isFetching) {
+ if (this.state.isFetching && this.state.lastQuerySuccessful) {
return this.renderFetching(timeSeries);
}
- if (this._noResultsForQuery(timeSeries)) {
+ if (this._noResultsForQuery(timeSeries) || !this.state.lastQuerySuccessful) {
return this.renderNoResults();
}
diff --git a/ui/src/shared/components/AutoRefreshDropdown.js b/ui/src/shared/components/AutoRefreshDropdown.js
new file mode 100644
index 000000000..ba1e4a0a6
--- /dev/null
+++ b/ui/src/shared/components/AutoRefreshDropdown.js
@@ -0,0 +1,73 @@
+import React, {PropTypes} from 'react';
+import classnames from 'classnames';
+import OnClickOutside from 'shared/components/OnClickOutside';
+
+import autoRefreshItems from 'hson!../data/autoRefreshes.hson';
+
+const {
+ number,
+ func,
+} = PropTypes
+
+const AutoRefreshDropdown = React.createClass({
+ autobind: false,
+
+ propTypes: {
+ selected: number.isRequired,
+ onChoose: func.isRequired,
+ },
+
+ getInitialState() {
+ return {
+ isOpen: false,
+ };
+ },
+
+ findAutoRefreshItem(milliseconds) {
+ return autoRefreshItems.find((values) => values.milliseconds === milliseconds)
+ },
+
+ handleClickOutside() {
+ this.setState({isOpen: false});
+ },
+
+ handleSelection(milliseconds) {
+ this.props.onChoose(milliseconds);
+ this.setState({isOpen: false});
+ },
+
+ toggleMenu() {
+ this.setState({isOpen: !this.state.isOpen});
+ },
+
+ render() {
+ const self = this;
+ const {selected} = self.props;
+ const {isOpen} = self.state;
+ const {milliseconds, inputValue} = this.findAutoRefreshItem(selected)
+
+ return (
+
+
self.toggleMenu()}>
+ 0 ? "refresh" : "pause")}>
+ {inputValue}
+
+
+
+
+ );
+ },
+});
+
+export default OnClickOutside(AutoRefreshDropdown);
diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js
index 178b842d5..2c749449a 100644
--- a/ui/src/shared/components/Dropdown.js
+++ b/ui/src/shared/components/Dropdown.js
@@ -1,14 +1,23 @@
import React, {PropTypes} from 'react';
+import classnames from 'classnames';
import OnClickOutside from 'shared/components/OnClickOutside';
+const {
+ arrayOf,
+ shape,
+ string,
+ func,
+} = PropTypes
+
const Dropdown = React.createClass({
propTypes: {
- items: PropTypes.arrayOf(PropTypes.shape({
- text: PropTypes.string.isRequired,
+ items: arrayOf(shape({
+ text: string.isRequired,
})).isRequired,
- onChoose: PropTypes.func.isRequired,
- selected: PropTypes.string.isRequired,
- className: PropTypes.string,
+ onChoose: func.isRequired,
+ selected: string.isRequired,
+ iconName: string,
+ className: string,
},
getInitialState() {
return {
@@ -39,11 +48,12 @@ const Dropdown = React.createClass({
},
render() {
const self = this;
- const {items, selected, className, actions} = self.props;
+ const {items, selected, className, iconName, actions} = self.props;
return (
+ {iconName ? : null}
{selected}
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index e1c2df5e7..60eace146 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@@ -18,6 +18,7 @@ const {
export const LayoutRenderer = React.createClass({
propTypes: {
+ autoRefresh: number.isRequired,
timeRange: shape({
defaultGroupBy: string.isRequired,
queryValue: string.isRequired,
@@ -46,7 +47,6 @@ export const LayoutRenderer = React.createClass({
name: string.isRequired,
}).isRequired
),
- autoRefreshMs: number.isRequired,
host: string,
source: string,
onPositionChange: func,
@@ -84,7 +84,7 @@ export const LayoutRenderer = React.createClass({
},
generateVisualizations() {
- const {autoRefreshMs, source, cells} = this.props;
+ const {autoRefresh, source, cells} = this.props;
return cells.map((cell) => {
const qs = cell.queries.map((q) => {
@@ -100,7 +100,7 @@ export const LayoutRenderer = React.createClass({
{cell.name || `Graph`}
-
+
);
@@ -117,7 +117,7 @@ export const LayoutRenderer = React.createClass({
diff --git a/ui/src/shared/components/NoKapacitorError.js b/ui/src/shared/components/NoKapacitorError.js
index a82451dcc..fda9ce61f 100644
--- a/ui/src/shared/components/NoKapacitorError.js
+++ b/ui/src/shared/components/NoKapacitorError.js
@@ -1,5 +1,5 @@
-import React, {PropTypes} from 'react';
-import {Link} from 'react-router';
+import React, {PropTypes} from 'react'
+import {Link} from 'react-router'
const NoKapacitorError = React.createClass({
propTypes: {
@@ -9,14 +9,14 @@ const NoKapacitorError = React.createClass({
},
render() {
- const path = `/sources/${this.props.source.id}/kapacitor-config`;
+ const path = `/sources/${this.props.source.id}/kapacitor-config`
return (
The current source does not have an associated Kapacitor instance, please configure one.
Add Kapacitor
- );
+ )
},
-});
+})
-export default NoKapacitorError;
+export default NoKapacitorError
diff --git a/ui/src/shared/components/SourceIndicator.js b/ui/src/shared/components/SourceIndicator.js
new file mode 100644
index 000000000..83bcbeeed
--- /dev/null
+++ b/ui/src/shared/components/SourceIndicator.js
@@ -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 (
+
+
+ {sourceName}
+
+ );
+ },
+});
+
+export default SourceIndicator;
diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js
index dbdf5155c..076226896 100644
--- a/ui/src/shared/components/TimeRangeDropdown.js
+++ b/ui/src/shared/components/TimeRangeDropdown.js
@@ -1,5 +1,5 @@
import React from 'react';
-import cN from 'classnames';
+import classnames from 'classnames';
import OnClickOutside from 'shared/components/OnClickOutside';
import timeRanges from 'hson!../data/timeRanges.hson';
@@ -48,7 +48,7 @@ const TimeRangeDropdown = React.createClass({
{selected}
-
+
- Time Range
{timeRanges.map((item) => {
return (
diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js
index dc68a2e29..d238e7bb7 100644
--- a/ui/src/shared/constants/index.js
+++ b/ui/src/shared/constants/index.js
@@ -472,3 +472,5 @@ export const PRESENTATION_MODE_ANIMATION_DELAY = 0 // In milliseconds.
export const PRESENTATION_MODE_NOTIFICATION_DELAY = 2000 // In milliseconds.
export const RES_UNAUTHORIZED = 401
+
+export const AUTOREFRESH_DEFAULT = 15000 // in milliseconds
diff --git a/ui/src/shared/data/autoRefreshes.hson b/ui/src/shared/data/autoRefreshes.hson
new file mode 100644
index 000000000..56453c0b8
--- /dev/null
+++ b/ui/src/shared/data/autoRefreshes.hson
@@ -0,0 +1,8 @@
+[
+ {milliseconds: 0, inputValue: 'Paused', menuOption: 'Paused'},
+ {milliseconds: 5000, inputValue: 'Every 5 seconds', menuOption: 'Every 5 seconds'},
+ {milliseconds: 10000, inputValue: 'Every 10 seconds', menuOption: 'Every 10 seconds'},
+ {milliseconds: 15000, inputValue: 'Every 15 seconds', menuOption: 'Every 15 seconds'},
+ {milliseconds: 30000, inputValue: 'Every 30 seconds', menuOption: 'Every 30 seconds'},
+ {milliseconds: 60000, inputValue: 'Every 60 seconds', menuOption: 'Every 60 seconds'}
+]
diff --git a/ui/src/shared/dispatchers/index.js b/ui/src/shared/dispatchers/index.js
index fcf02767f..a7771a9ff 100644
--- a/ui/src/shared/dispatchers/index.js
+++ b/ui/src/shared/dispatchers/index.js
@@ -1,4 +1,4 @@
-import {delayEnablePresentationMode} from 'shared/actions/ui'
+import {delayEnablePresentationMode} from 'shared/actions/app'
import {publishNotification, delayDismissNotification} from 'shared/actions/notifications'
import {PRESENTATION_MODE_NOTIFICATION_DELAY} from 'shared/constants'
diff --git a/ui/src/shared/reducers/app.js b/ui/src/shared/reducers/app.js
new file mode 100644
index 000000000..adcb4c242
--- /dev/null
+++ b/ui/src/shared/reducers/app.js
@@ -0,0 +1,57 @@
+import {combineReducers} from 'redux';
+
+import {AUTOREFRESH_DEFAULT} from 'src/shared/constants'
+
+const initialState = {
+ ephemeral: {
+ inPresentationMode: false,
+ },
+ persisted: {
+ autoRefresh: AUTOREFRESH_DEFAULT,
+ },
+}
+
+const {
+ ephemeral: initialEphemeralState,
+ persisted: initialPersistedState,
+} = initialState
+
+const ephemeralReducer = (state = initialEphemeralState, action) => {
+ switch (action.type) {
+ case 'ENABLE_PRESENTATION_MODE': {
+ return {
+ ...state,
+ inPresentationMode: true,
+ }
+ }
+
+ case 'DISABLE_PRESENTATION_MODE': {
+ return {
+ ...state,
+ inPresentationMode: false,
+ }
+ }
+
+ default:
+ return state
+ }
+}
+
+const persistedReducer = (state = initialPersistedState, action) => {
+ switch (action.type) {
+ case 'SET_AUTOREFRESH': {
+ return {
+ ...state,
+ autoRefresh: action.payload.milliseconds,
+ }
+ }
+
+ default:
+ return state
+ }
+}
+
+export default combineReducers({
+ ephemeral: ephemeralReducer,
+ persisted: persistedReducer,
+})
diff --git a/ui/src/shared/reducers/index.js b/ui/src/shared/reducers/index.js
index 47ed0c62f..bf191ecd7 100644
--- a/ui/src/shared/reducers/index.js
+++ b/ui/src/shared/reducers/index.js
@@ -1,13 +1,13 @@
-import appUI from './ui';
import me from './me';
+import app from './app';
import auth from './auth';
import notifications from './notifications';
import sources from './sources';
-export {
- appUI,
+export default {
me,
+ app,
auth,
notifications,
sources,
-};
+}
diff --git a/ui/src/shared/reducers/ui.js b/ui/src/shared/reducers/ui.js
deleted file mode 100644
index 77a2f77a8..000000000
--- a/ui/src/shared/reducers/ui.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const initialState = {
- presentationMode: false,
-};
-
-export default function ui(state = initialState, action) {
- switch (action.type) {
- case 'ENABLE_PRESENTATION_MODE': {
- return {
- ...state,
- presentationMode: true,
- }
- }
-
- case 'DISABLE_PRESENTATION_MODE': {
- return {
- ...state,
- presentationMode: false,
- }
- }
- }
-
- return state
-}
diff --git a/ui/src/side_nav/containers/SideNavApp.js b/ui/src/side_nav/containers/SideNavApp.js
index a93bffdf7..5c2541571 100644
--- a/ui/src/side_nav/containers/SideNavApp.js
+++ b/ui/src/side_nav/containers/SideNavApp.js
@@ -34,11 +34,9 @@ const SideNavApp = React.createClass({
},
});
-function mapStateToProps(state) {
- return {
- me: state.me,
- inPresentationMode: state.appUI.presentationMode,
- };
-}
+const mapStateToProps = ({me, app: {ephemeral: {inPresentationMode}}}) => ({
+ me,
+ inPresentationMode,
+})
export default connect(mapStateToProps)(SideNavApp);
diff --git a/ui/src/store/configureStore.js b/ui/src/store/configureStore.js
index de2c75cbb..e4ef15996 100644
--- a/ui/src/store/configureStore.js
+++ b/ui/src/store/configureStore.js
@@ -3,9 +3,9 @@ import {combineReducers} from 'redux';
import thunkMiddleware from 'redux-thunk';
import makeQueryExecuter from 'src/shared/middleware/queryExecuter';
import resizeLayout from 'src/shared/middleware/resizeLayout';
-import * as dataExplorerReducers from 'src/data_explorer/reducers';
-import * as sharedReducers from 'src/shared/reducers';
import adminReducer from 'src/admin/reducers/admin';
+import sharedReducers from 'src/shared/reducers';
+import dataExplorerReducers from 'src/data_explorer/reducers';
import rulesReducer from 'src/kapacitor/reducers/rules';
import dashboardUI from 'src/dashboards/reducers/ui';
import persistStateEnhancer from './persistStateEnhancer';
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 83e08cd7c..e45e32ba4 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -37,6 +37,7 @@
@import 'components/search-widget';
@import 'components/tables';
@import 'components/resizer';
+@import 'components/source-indicator';
// Pages
@import 'pages/alerts';
diff --git a/ui/src/style/components/dygraphs.scss b/ui/src/style/components/dygraphs.scss
index b6653fff9..748755928 100644
--- a/ui/src/style/components/dygraphs.scss
+++ b/ui/src/style/components/dygraphs.scss
@@ -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;
+ }
+}
diff --git a/ui/src/style/components/page-header-dropdown.scss b/ui/src/style/components/page-header-dropdown.scss
index 065241d68..84ad4deb0 100644
--- a/ui/src/style/components/page-header-dropdown.scss
+++ b/ui/src/style/components/page-header-dropdown.scss
@@ -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();
}
}
}
\ No newline at end of file
diff --git a/ui/src/style/components/source-indicator.scss b/ui/src/style/components/source-indicator.scss
new file mode 100644
index 000000000..64e9bc410
--- /dev/null
+++ b/ui/src/style/components/source-indicator.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/ui/src/style/fonts/icomoon.eot b/ui/src/style/fonts/icomoon.eot
index c525fa69a..689d779b4 100755
Binary files a/ui/src/style/fonts/icomoon.eot and b/ui/src/style/fonts/icomoon.eot differ
diff --git a/ui/src/style/fonts/icomoon.svg b/ui/src/style/fonts/icomoon.svg
index 1919cb91f..e2d9e06bf 100755
--- a/ui/src/style/fonts/icomoon.svg
+++ b/ui/src/style/fonts/icomoon.svg
@@ -83,6 +83,7 @@
+
diff --git a/ui/src/style/fonts/icomoon.ttf b/ui/src/style/fonts/icomoon.ttf
index 1cfe84f25..8ac3dfcb3 100755
Binary files a/ui/src/style/fonts/icomoon.ttf and b/ui/src/style/fonts/icomoon.ttf differ
diff --git a/ui/src/style/fonts/icomoon.woff b/ui/src/style/fonts/icomoon.woff
index 68c21c369..ba0308d9c 100755
Binary files a/ui/src/style/fonts/icomoon.woff and b/ui/src/style/fonts/icomoon.woff differ
diff --git a/ui/src/style/fonts/icomoon.woff2 b/ui/src/style/fonts/icomoon.woff2
index 77a391b18..fae3be996 100755
Binary files a/ui/src/style/fonts/icomoon.woff2 and b/ui/src/style/fonts/icomoon.woff2 differ
diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss
index 2efe54044..8f5977e64 100644
--- a/ui/src/style/layout/page-header.scss
+++ b/ui/src/style/layout/page-header.scss
@@ -31,6 +31,7 @@
margin: 0;
display: inline-block;
vertical-align: middle;
+ @include no-user-select();
}
&__left,
&__right {
diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss
index a17712290..e93b9d85a 100644
--- a/ui/src/style/layout/sidebar.scss
+++ b/ui/src/style/layout/sidebar.scss
@@ -214,6 +214,7 @@ $sidebar-logo-color: $g8-storm;
white-space: nowrap;
margin: 0;
display: block;
+ @include no-user-select();
}
&__menu-item {
diff --git a/ui/src/style/mixins/mixins.scss b/ui/src/style/mixins/mixins.scss
index 9d03a2567..66f4332e7 100644
--- a/ui/src/style/mixins/mixins.scss
+++ b/ui/src/style/mixins/mixins.scss
@@ -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;
}
diff --git a/ui/src/style/pages/data-explorer/page-header.scss b/ui/src/style/pages/data-explorer/page-header.scss
index f150832f3..9cfb34060 100644
--- a/ui/src/style/pages/data-explorer/page-header.scss
+++ b/ui/src/style/pages/data-explorer/page-header.scss
@@ -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;
- }
}
\ No newline at end of file
diff --git a/ui/src/style/pages/data-explorer/query-builder.scss b/ui/src/style/pages/data-explorer/query-builder.scss
index b04151d5e..5b97d8aa1 100644
--- a/ui/src/style/pages/data-explorer/query-builder.scss
+++ b/ui/src/style/pages/data-explorer/query-builder.scss
@@ -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;
diff --git a/ui/src/style/pages/data-explorer/query-editor.scss b/ui/src/style/pages/data-explorer/query-editor.scss
index 16d045ea1..990a2936c 100644
--- a/ui/src/style/pages/data-explorer/query-editor.scss
+++ b/ui/src/style/pages/data-explorer/query-editor.scss
@@ -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;
diff --git a/ui/src/style/pages/data-explorer/visualization.scss b/ui/src/style/pages/data-explorer/visualization.scss
index a6bb70e95..b9e76b3c0 100644
--- a/ui/src/style/pages/data-explorer/visualization.scss
+++ b/ui/src/style/pages/data-explorer/visualization.scss
@@ -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;
diff --git a/ui/src/style/pages/hosts.scss b/ui/src/style/pages/hosts.scss
index 79d8a4b80..01f805418 100644
--- a/ui/src/style/pages/hosts.scss
+++ b/ui/src/style/pages/hosts.scss
@@ -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 {
diff --git a/ui/src/style/pages/kapacitor.scss b/ui/src/style/pages/kapacitor.scss
index e87897b66..b52915555 100644
--- a/ui/src/style/pages/kapacitor.scss
+++ b/ui/src/style/pages/kapacitor.scss
@@ -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;
diff --git a/ui/src/style/theme/bootstrap-theme.scss b/ui/src/style/theme/bootstrap-theme.scss
index 9b600c65e..ed76d4444 100755
--- a/ui/src/style/theme/bootstrap-theme.scss
+++ b/ui/src/style/theme/bootstrap-theme.scss
@@ -269,6 +269,9 @@
.icon.refresh:before {
content: "\e949";
}
+.icon.pause:before {
+ content: "\e94a";
+}
.icon.clock:before {
content: "\e91b";
}
diff --git a/ui/src/style/theme/theme-dark.scss b/ui/src/style/theme/theme-dark.scss
index 2b0d6ac83..810c0821d 100644
--- a/ui/src/style/theme/theme-dark.scss
+++ b/ui/src/style/theme/theme-dark.scss
@@ -19,6 +19,10 @@
.panel hr {
background-color: $g5-pepper;
}
+.panel-title,
+.panel-title a {
+ @include no-user-select();
+}
.panel-minimal {
border: 0;
@@ -72,6 +76,10 @@
}
}
+table thead th {
+ @include no-user-select();
+}
+
/*
Dark Buttons
@@ -101,6 +109,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
----------------------------------------------
@@ -114,6 +188,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;
@@ -447,6 +522,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;
@@ -730,5 +807,6 @@ $form-static-checkbox-size: 16px;
}
}
-
-
+br {
+ @include no-user-select();
+}