Merge remote-tracking branch 'origin' into feature/gzipped-influx-responses
|
@ -2,10 +2,13 @@
|
|||
|
||||
### Bug Fixes
|
||||
1. [#1074](https://github.com/influxdata/chronograf/pull/1074): Fix unexpected redirection to create sources page when deleting a source
|
||||
### Features
|
||||
1. [#1101](https://github.com/influxdata/chronograf/pull/1101): Compress InfluxQL responses with gzip
|
||||
### UI Improvements
|
||||
|
||||
### Features
|
||||
### UI Improvements
|
||||
1. [#1092](https://github.com/influxdata/chronograf/pull/1092): Persist and render Dashboard Cell groupby queries
|
||||
2. [#1101](https://github.com/influxdata/chronograf/pull/1101): Compress InfluxQL responses with gzip
|
||||
|
||||
### UI Improvements
|
||||
|
||||
## v1.2.0-beta6 [2017-03-24]
|
||||
|
||||
|
|
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.4 KiB |
|
@ -1,17 +1,17 @@
|
|||
import selectStatement from 'src/data_explorer/utils/influxql/select';
|
||||
import buildInfluxQLQuery from 'utils/influxql';
|
||||
import defaultQueryConfig from 'src/utils/defaultQueryConfig';
|
||||
|
||||
function mergeConfig(options) {
|
||||
return Object.assign({}, defaultQueryConfig(123), options);
|
||||
}
|
||||
|
||||
describe('selectStatement', () => {
|
||||
describe('buildInfluxQLQuery', () => {
|
||||
let config, timeBounds;
|
||||
describe('when information is missing', () => {
|
||||
it('returns a null select statement', () => {
|
||||
expect(selectStatement({}, mergeConfig())).to.equal(null);
|
||||
expect(selectStatement({}, mergeConfig({database: 'db1'}))).to.equal(null); // no measurement
|
||||
expect(selectStatement({}, mergeConfig({database: 'db1', measurement: 'm1'}))).to.equal(null); // no fields
|
||||
expect(buildInfluxQLQuery({}, mergeConfig())).to.equal(null);
|
||||
expect(buildInfluxQLQuery({}, mergeConfig({database: 'db1'}))).to.equal(null); // no measurement
|
||||
expect(buildInfluxQLQuery({}, mergeConfig({database: 'db1', measurement: 'm1'}))).to.equal(null); // no fields
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -21,7 +21,7 @@ describe('selectStatement', () => {
|
|||
});
|
||||
|
||||
it('builds the right query', () => {
|
||||
expect(selectStatement({}, config)).to.equal('SELECT "f1" FROM "db1".."m1"');
|
||||
expect(buildInfluxQLQuery({}, config)).to.equal('SELECT "f1" FROM "db1".."m1"');
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -32,11 +32,11 @@ describe('selectStatement', () => {
|
|||
});
|
||||
|
||||
it('builds the right query', () => {
|
||||
expect(selectStatement({}, config)).to.equal('SELECT "f1" FROM "db1"."rp1"."m1"');
|
||||
expect(buildInfluxQLQuery({}, config)).to.equal('SELECT "f1" FROM "db1"."rp1"."m1"');
|
||||
});
|
||||
|
||||
it('builds the right query with a time range', () => {
|
||||
expect(selectStatement(timeBounds, config)).to.equal('SELECT "f1" FROM "db1"."rp1"."m1" WHERE time > now() - 1hr');
|
||||
expect(buildInfluxQLQuery(timeBounds, config)).to.equal('SELECT "f1" FROM "db1"."rp1"."m1" WHERE time > now() - 1hr');
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -46,7 +46,7 @@ describe('selectStatement', () => {
|
|||
});
|
||||
|
||||
it('does not quote the star', () => {
|
||||
expect(selectStatement({}, config)).to.equal('SELECT * FROM "db1"."rp1"."m1"');
|
||||
expect(buildInfluxQLQuery({}, config)).to.equal('SELECT * FROM "db1"."rp1"."m1"');
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -58,7 +58,7 @@ describe('selectStatement', () => {
|
|||
|
||||
it('builds the right query', () => {
|
||||
const expected = 'SELECT min("value") AS "min_value" FROM "db1"."rp1"."m0" WHERE time > now() - 12h GROUP BY time(10m)';
|
||||
expect(selectStatement(timeBounds, config)).to.equal(expected);
|
||||
expect(buildInfluxQLQuery(timeBounds, config)).to.equal(expected);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -70,7 +70,7 @@ describe('selectStatement', () => {
|
|||
|
||||
it('builds the right query', () => {
|
||||
const expected = `SELECT min("value") AS "min_value" FROM "db1"."rp1"."m0" WHERE time > now() - 12h GROUP BY "t1", "t2"`;
|
||||
expect(selectStatement(timeBounds, config)).to.equal(expected);
|
||||
expect(buildInfluxQLQuery(timeBounds, config)).to.equal(expected);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -82,7 +82,7 @@ describe('selectStatement', () => {
|
|||
|
||||
it('builds the right query', () => {
|
||||
const expected = 'SELECT "value" FROM "db1"."rp1"."m0" WHERE time > \'2015-07-23T15:52:24.447Z\' AND time < \'2015-07-24T15:52:24.447Z\'';
|
||||
expect(selectStatement(timeBounds, config)).to.equal(expected);
|
||||
expect(buildInfluxQLQuery(timeBounds, config)).to.equal(expected);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -94,7 +94,7 @@ describe('selectStatement', () => {
|
|||
|
||||
it('builds the right query', () => {
|
||||
const expected = 'SELECT min("value") AS "min_value" FROM "db1"."rp1"."m0" WHERE time > now() - 12h GROUP BY time(10m), "t1", "t2"';
|
||||
expect(selectStatement(timeBounds, config)).to.equal(expected);
|
||||
expect(buildInfluxQLQuery(timeBounds, config)).to.equal(expected);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -105,12 +105,12 @@ describe('selectStatement', () => {
|
|||
});
|
||||
|
||||
it('builds the right query', () => {
|
||||
expect(selectStatement({}, config)).to.equal('SELECT "f0", "f1" FROM "db1"."rp1"."m0"');
|
||||
expect(buildInfluxQLQuery({}, config)).to.equal('SELECT "f0", "f1" FROM "db1"."rp1"."m0"');
|
||||
});
|
||||
|
||||
it('builds the right query with a time range', () => {
|
||||
const expected = `SELECT "f0", "f1" FROM "db1"."rp1"."m0" WHERE time < '2015-02-24T00:00:00Z'`;
|
||||
expect(selectStatement(timeBounds, config)).to.equal(expected);
|
||||
expect(buildInfluxQLQuery(timeBounds, config)).to.equal(expected);
|
||||
});
|
||||
|
||||
describe('with multiple tag pairs', () => {
|
||||
|
@ -136,7 +136,7 @@ describe('selectStatement', () => {
|
|||
|
||||
it('correctly uses AND/OR to combine pairs', () => {
|
||||
const expected = `SELECT "f0" FROM "db1"."rp1"."m0" WHERE time > now() - 6h AND ("k1"='v1' OR "k1"='v3' OR "k1"='v4') AND "k2"='v2'`;
|
||||
expect(selectStatement(timeBounds, config)).to.equal(expected);
|
||||
expect(buildInfluxQLQuery(timeBounds, config)).to.equal(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
import DatabaseRow from 'src/admin/components/DatabaseRow'
|
||||
import ConfirmButtons from 'src/admin/components/ConfirmButtons'
|
||||
import DatabaseTableHeader from 'src/admin/components/DatabaseTableHeader'
|
||||
|
||||
const {
|
||||
func,
|
||||
|
@ -30,6 +30,7 @@ const DatabaseTable = ({
|
|||
<div className="db-manager">
|
||||
<DatabaseTableHeader
|
||||
database={database}
|
||||
notify={notify}
|
||||
onEdit={onEditDatabase}
|
||||
onCancel={onCancelDatabase}
|
||||
onDelete={onDeleteDatabase}
|
||||
|
@ -99,148 +100,4 @@ DatabaseTable.propTypes = {
|
|||
onDeleteRetentionPolicy: func,
|
||||
}
|
||||
|
||||
const DatabaseTableHeader = ({
|
||||
database,
|
||||
onEdit,
|
||||
onKeyDown,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
onDelete,
|
||||
onStartDelete,
|
||||
onRemoveDeleteCode,
|
||||
onDatabaseDeleteConfirm,
|
||||
onAddRetentionPolicy,
|
||||
isAddRPDisabled,
|
||||
}) => {
|
||||
if (database.isEditing) {
|
||||
return (
|
||||
<EditHeader
|
||||
database={database}
|
||||
onEdit={onEdit}
|
||||
onKeyDown={onKeyDown}
|
||||
onConfirm={onConfirm}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Header
|
||||
database={database}
|
||||
onCancel={onRemoveDeleteCode}
|
||||
onConfirm={onConfirm}
|
||||
onDelete={onDelete}
|
||||
onStartDelete={onStartDelete}
|
||||
isAddRPDisabled={isAddRPDisabled}
|
||||
onAddRetentionPolicy={onAddRetentionPolicy}
|
||||
onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
DatabaseTableHeader.propTypes = {
|
||||
onEdit: func,
|
||||
database: shape(),
|
||||
onKeyDown: func,
|
||||
onCancel: func,
|
||||
onConfirm: func,
|
||||
onDelete: func,
|
||||
onStartDelete: func,
|
||||
onDatabaseDeleteConfirm: func,
|
||||
onRemoveDeleteCode: func,
|
||||
onAddRetentionPolicy: func,
|
||||
isAddRPDisabled: bool,
|
||||
}
|
||||
|
||||
const Header = ({
|
||||
database,
|
||||
onCancel,
|
||||
onDelete,
|
||||
onStartDelete,
|
||||
isAddRPDisabled,
|
||||
onAddRetentionPolicy,
|
||||
onDatabaseDeleteConfirm,
|
||||
}) => {
|
||||
const confirmStyle = {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}
|
||||
|
||||
const buttons = (
|
||||
<div className="text-right">
|
||||
{
|
||||
database.name === '_internal' ? null :
|
||||
<button className="btn btn-xs btn-danger" onClick={() => onStartDelete(database)}>
|
||||
Delete
|
||||
</button>
|
||||
}
|
||||
<button className="btn btn-xs btn-primary" disabled={isAddRPDisabled} onClick={() => onAddRetentionPolicy(database)}>
|
||||
Add retention policy
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
const deleteConfirm = (
|
||||
<div style={confirmStyle}>
|
||||
<div className="admin-table--delete-cell">
|
||||
<input
|
||||
className="form-control"
|
||||
name="name"
|
||||
type="text"
|
||||
value={database.deleteCode || ''}
|
||||
placeholder={`DELETE ${database.name}`}
|
||||
onChange={(e) => onDatabaseDeleteConfirm(database, e)}
|
||||
onKeyDown={(e) => onDatabaseDeleteConfirm(database, e)}
|
||||
autoFocus={true}
|
||||
/>
|
||||
</div>
|
||||
<ConfirmButtons item={database} onConfirm={onDelete} onCancel={onCancel} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="db-manager-header">
|
||||
<h4>{database.name}</h4>
|
||||
{database.hasOwnProperty('deleteCode') ? deleteConfirm : buttons}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
onConfirm: func,
|
||||
onCancel: func,
|
||||
onDelete: func,
|
||||
database: shape(),
|
||||
onStartDelete: func,
|
||||
isAddRPDisabled: bool,
|
||||
onAddRetentionPolicy: func,
|
||||
onDatabaseDeleteConfirm: func,
|
||||
}
|
||||
|
||||
const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) => (
|
||||
<div className="db-manager-header-edit">
|
||||
<input
|
||||
className="form-control"
|
||||
name="name"
|
||||
type="text"
|
||||
value={database.name}
|
||||
placeholder="Database name"
|
||||
onChange={(e) => onEdit(database, {name: e.target.value})}
|
||||
onKeyDown={(e) => onKeyDown(e, database)}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<ConfirmButtons item={database} onConfirm={onConfirm} onCancel={onCancel} />
|
||||
</div>
|
||||
)
|
||||
|
||||
EditHeader.propTypes = {
|
||||
database: shape(),
|
||||
onEdit: func,
|
||||
onKeyDown: func,
|
||||
onCancel: func,
|
||||
onConfirm: func,
|
||||
isRFDisplayed: bool,
|
||||
}
|
||||
|
||||
export default DatabaseTable
|
||||
|
|
|
@ -0,0 +1,168 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
import ConfirmButtons from 'src/admin/components/ConfirmButtons'
|
||||
|
||||
const DatabaseTableHeader = ({
|
||||
database,
|
||||
onEdit,
|
||||
notify,
|
||||
onKeyDown,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
onDelete,
|
||||
onStartDelete,
|
||||
onRemoveDeleteCode,
|
||||
onDatabaseDeleteConfirm,
|
||||
onAddRetentionPolicy,
|
||||
isAddRPDisabled,
|
||||
}) => {
|
||||
if (database.isEditing) {
|
||||
return (
|
||||
<EditHeader
|
||||
database={database}
|
||||
onEdit={onEdit}
|
||||
onKeyDown={onKeyDown}
|
||||
onConfirm={onConfirm}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Header
|
||||
notify={notify}
|
||||
database={database}
|
||||
onCancel={onRemoveDeleteCode}
|
||||
onConfirm={onConfirm}
|
||||
onDelete={onDelete}
|
||||
onStartDelete={onStartDelete}
|
||||
isAddRPDisabled={isAddRPDisabled}
|
||||
onAddRetentionPolicy={onAddRetentionPolicy}
|
||||
onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const Header = ({
|
||||
notify,
|
||||
database,
|
||||
onCancel,
|
||||
onDelete,
|
||||
onStartDelete,
|
||||
isAddRPDisabled,
|
||||
onAddRetentionPolicy,
|
||||
onDatabaseDeleteConfirm,
|
||||
}) => {
|
||||
const confirmStyle = {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}
|
||||
|
||||
const buttons = (
|
||||
<div className="text-right">
|
||||
{
|
||||
database.name === '_internal' ? null :
|
||||
<button className="btn btn-xs btn-danger" onClick={() => onStartDelete(database)}>
|
||||
Delete
|
||||
</button>
|
||||
}
|
||||
<button className="btn btn-xs btn-primary" disabled={isAddRPDisabled} onClick={() => onAddRetentionPolicy(database)}>
|
||||
Add retention policy
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
const onConfirm = (db) => {
|
||||
if (database.deleteCode !== `DELETE ${database.name}`) {
|
||||
return notify('error', `Type DELETE ${database.name} to confirm`)
|
||||
}
|
||||
|
||||
onDelete(db)
|
||||
}
|
||||
|
||||
const deleteConfirmation = (
|
||||
<div style={confirmStyle}>
|
||||
<div className="admin-table--delete-cell">
|
||||
<input
|
||||
className="form-control"
|
||||
name="name"
|
||||
type="text"
|
||||
value={database.deleteCode || ''}
|
||||
placeholder={`DELETE ${database.name}`}
|
||||
onChange={(e) => onDatabaseDeleteConfirm(database, e)}
|
||||
onKeyDown={(e) => onDatabaseDeleteConfirm(database, e)}
|
||||
autoFocus={true}
|
||||
/>
|
||||
</div>
|
||||
<ConfirmButtons item={database} onConfirm={onConfirm} onCancel={onCancel} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="db-manager-header">
|
||||
<h4>{database.name}</h4>
|
||||
{database.hasOwnProperty('deleteCode') ? deleteConfirmation : buttons}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) => (
|
||||
<div className="db-manager-header-edit">
|
||||
<input
|
||||
className="form-control"
|
||||
name="name"
|
||||
type="text"
|
||||
value={database.name}
|
||||
placeholder="Database name"
|
||||
onChange={(e) => onEdit(database, {name: e.target.value})}
|
||||
onKeyDown={(e) => onKeyDown(e, database)}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<ConfirmButtons item={database} onConfirm={onConfirm} onCancel={onCancel} />
|
||||
</div>
|
||||
)
|
||||
|
||||
const {
|
||||
func,
|
||||
shape,
|
||||
bool,
|
||||
} = PropTypes
|
||||
|
||||
DatabaseTableHeader.propTypes = {
|
||||
onEdit: func,
|
||||
notify: func,
|
||||
database: shape(),
|
||||
onKeyDown: func,
|
||||
onCancel: func,
|
||||
onConfirm: func,
|
||||
onDelete: func,
|
||||
onStartDelete: func,
|
||||
onDatabaseDeleteConfirm: func,
|
||||
onRemoveDeleteCode: func,
|
||||
onAddRetentionPolicy: func,
|
||||
isAddRPDisabled: bool,
|
||||
}
|
||||
|
||||
|
||||
Header.propTypes = {
|
||||
notify: func,
|
||||
onConfirm: func,
|
||||
onCancel: func,
|
||||
onDelete: func,
|
||||
database: shape(),
|
||||
onStartDelete: func,
|
||||
isAddRPDisabled: bool,
|
||||
onAddRetentionPolicy: func,
|
||||
onDatabaseDeleteConfirm: func,
|
||||
}
|
||||
|
||||
EditHeader.propTypes = {
|
||||
database: shape(),
|
||||
onEdit: func,
|
||||
onKeyDown: func,
|
||||
onCancel: func,
|
||||
onConfirm: func,
|
||||
isRFDisplayed: bool,
|
||||
}
|
||||
|
||||
export default DatabaseTableHeader
|
|
@ -9,9 +9,8 @@ import Visualization from 'src/data_explorer/components/Visualization'
|
|||
import OverlayControls from 'src/dashboards/components/OverlayControls'
|
||||
import * as queryModifiers from 'src/utils/queryTransitions'
|
||||
|
||||
import {buildSelectStatement} from 'src/data_explorer/utils/influxql/select'
|
||||
|
||||
import defaultQueryConfig from 'src/utils/defaultQueryConfig'
|
||||
import buildInfluxQLQuery from 'utils/influxql'
|
||||
|
||||
class CellEditorOverlay extends Component {
|
||||
constructor(props) {
|
||||
|
@ -63,13 +62,13 @@ class CellEditorOverlay extends Component {
|
|||
|
||||
handleSaveCell() {
|
||||
const {queriesWorkingDraft, cellWorkingType, cellWorkingName} = this.state
|
||||
const {cell} = this.props
|
||||
const {cell, timeRange} = this.props
|
||||
|
||||
const newCell = _.cloneDeep(cell)
|
||||
newCell.name = cellWorkingName
|
||||
newCell.type = cellWorkingType
|
||||
newCell.queries = queriesWorkingDraft.map((q) => {
|
||||
const query = q.rawText || buildSelectStatement(q)
|
||||
const query = q.rawText || buildInfluxQLQuery(timeRange, q)
|
||||
const label = `${q.measurement}.${q.fields[0].field}`
|
||||
|
||||
return {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, {PropTypes} from 'react';
|
||||
import selectStatement from '../utils/influxql/select';
|
||||
import buildInfluxQLQuery from 'utils/influxql';
|
||||
|
||||
import DatabaseList from './DatabaseList';
|
||||
import MeasurementList from './MeasurementList';
|
||||
|
@ -89,7 +89,7 @@ const QueryEditor = React.createClass({
|
|||
|
||||
renderQuery() {
|
||||
const {query, timeRange} = this.props;
|
||||
const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
|
||||
const statement = query.rawText || buildInfluxQLQuery(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
|
||||
|
||||
if (!query.rawText) {
|
||||
return (
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, {PropTypes} from 'react';
|
||||
import selectStatement from '../utils/influxql/select';
|
||||
import buildInfluxQLQuery from 'utils/influxql';
|
||||
import classNames from 'classnames';
|
||||
import AutoRefresh from 'shared/components/AutoRefresh';
|
||||
import LineGraph from 'shared/components/LineGraph';
|
||||
|
@ -80,7 +80,7 @@ const Visualization = React.createClass({
|
|||
|
||||
const {isGraphInView} = this.state;
|
||||
const statements = queryConfigs.map((query) => {
|
||||
const text = query.rawText || selectStatement(timeRange, query);
|
||||
const text = query.rawText || buildInfluxQLQuery(timeRange, query);
|
||||
return {text, id: query.id};
|
||||
});
|
||||
const queries = statements.filter((s) => s.text !== null).map((s) => {
|
||||
|
|
|
@ -121,9 +121,9 @@ const HostsTable = React.createClass({
|
|||
<thead>
|
||||
<tr>
|
||||
<th onClick={() => this.updateSort('name')} className={this.sortableClasses('name')}>Hostname</th>
|
||||
<th onClick={() => this.updateSort('deltaUptime')} className={this.sortableClasses('deltaUptime')}>Status</th>
|
||||
<th onClick={() => this.updateSort('cpu')} className={this.sortableClasses('cpu')}>CPU</th>
|
||||
<th onClick={() => this.updateSort('load')} className={this.sortableClasses('load')}>Load</th>
|
||||
<th onClick={() => this.updateSort('deltaUptime')} className={this.sortableClasses('deltaUptime')} style={{width: '74px'}}>Status</th>
|
||||
<th onClick={() => this.updateSort('cpu')} className={this.sortableClasses('cpu')} style={{width: '70px'}}>CPU</th>
|
||||
<th onClick={() => this.updateSort('load')} className={this.sortableClasses('load')} style={{width: '68px'}}>Load</th>
|
||||
<th>Apps</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
@ -176,9 +176,9 @@ const HostRow = React.createClass({
|
|||
return (
|
||||
<tr>
|
||||
<td className="monotype"><Link to={`/sources/${source.id}/hosts/${name}`}>{name}</Link></td>
|
||||
<td className="text-center"><div className={stateStr}></div></td>
|
||||
<td className="monotype">{isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`}</td>
|
||||
<td className="monotype">{isNaN(load) ? 'N/A' : `${load.toFixed(2)}`}</td>
|
||||
<td style={{width: '74px'}}><div className={stateStr}></div></td>
|
||||
<td className="monotype" style={{width: '70px'}}>{isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`}</td>
|
||||
<td className="monotype" style={{width: '68px'}}>{isNaN(load) ? 'N/A' : `${load.toFixed(2)}`}</td>
|
||||
<td className="monotype">
|
||||
{apps.map((app, index) => {
|
||||
return (
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, {PropTypes} from 'react';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import selectStatement from '../../data_explorer/utils/influxql/select';
|
||||
import buildInfluxQLQuery from 'utils/influxql';
|
||||
|
||||
import DatabaseList from '../../data_explorer/components/DatabaseList';
|
||||
import MeasurementList from '../../data_explorer/components/MeasurementList';
|
||||
|
@ -98,7 +98,7 @@ export const DataSection = React.createClass({
|
|||
|
||||
render() {
|
||||
const {query, timeRange: {lower}} = this.props;
|
||||
const statement = query.rawText || selectStatement({lower}, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
|
||||
const statement = query.rawText || buildInfluxQLQuery({lower}, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
|
||||
|
||||
return (
|
||||
<div className="kapacitor-rule-section">
|
||||
|
|
|
@ -5,7 +5,7 @@ import RuleHeader from 'src/kapacitor/components/RuleHeader';
|
|||
import RuleGraph from 'src/kapacitor/components/RuleGraph';
|
||||
import RuleMessage from 'src/kapacitor/components/RuleMessage';
|
||||
import {createRule, editRule} from 'src/kapacitor/apis';
|
||||
import selectStatement from '../../data_explorer/utils/influxql/select';
|
||||
import buildInfluxQLQuery from 'utils/influxql';
|
||||
import timeRanges from 'hson!../../shared/data/timeRanges.hson';
|
||||
|
||||
export const KapacitorRule = React.createClass({
|
||||
|
@ -108,7 +108,7 @@ export const KapacitorRule = React.createClass({
|
|||
},
|
||||
|
||||
validationError() {
|
||||
if (!selectStatement({}, this.props.query)) {
|
||||
if (!buildInfluxQLQuery({}, this.props.query)) {
|
||||
return 'Please select a database, measurement, and field';
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, {PropTypes} from 'react';
|
||||
import selectStatement from 'src/data_explorer/utils/influxql/select';
|
||||
import buildInfluxQLQuery from 'utils/influxql';
|
||||
import AutoRefresh from 'shared/components/AutoRefresh';
|
||||
import LineGraph from 'shared/components/LineGraph';
|
||||
const RefreshingLineGraph = AutoRefresh(LineGraph);
|
||||
|
@ -27,7 +27,7 @@ export const RuleGraph = React.createClass({
|
|||
renderGraph() {
|
||||
const {query, source, timeRange: {lower}, rule} = this.props;
|
||||
const autoRefreshMs = 30000;
|
||||
const queryText = selectStatement({lower}, query);
|
||||
const queryText = buildInfluxQLQuery({lower}, query);
|
||||
const queries = [{host: source.links.proxy, text: queryText}];
|
||||
const kapacitorLineColors = ["#4ED8A0"];
|
||||
|
||||
|
|
|
@ -5,7 +5,8 @@ import SingleStat from 'shared/components/SingleStat';
|
|||
import NameableGraph from 'shared/components/NameableGraph';
|
||||
import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
|
||||
|
||||
import timeRanges from 'hson!../data/timeRanges.hson';
|
||||
import timeRanges from 'hson!../data/timeRanges.hson'
|
||||
import buildInfluxQLQuery from 'utils/influxql'
|
||||
|
||||
const GridLayout = WidthProvider(ReactGridLayout);
|
||||
|
||||
|
@ -56,7 +57,7 @@ export const LayoutRenderer = React.createClass({
|
|||
shouldNotBeEditable: bool,
|
||||
},
|
||||
|
||||
buildQuery(q) {
|
||||
buildQueryForOldQuerySchema(q) {
|
||||
const {timeRange: {lower}, host} = this.props
|
||||
const {defaultGroupBy} = timeRanges.find((range) => range.lower === lower)
|
||||
const {wheres, groupbys} = q
|
||||
|
@ -89,13 +90,24 @@ export const LayoutRenderer = React.createClass({
|
|||
},
|
||||
|
||||
generateVisualizations() {
|
||||
const {autoRefresh, source, cells, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies, shouldNotBeEditable} = this.props;
|
||||
const {autoRefresh, timeRange, source, cells, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies, shouldNotBeEditable} = this.props;
|
||||
|
||||
return cells.map((cell) => {
|
||||
const qs = cell.queries.map((query) => {
|
||||
// TODO: Canned dashboards (and possibly Kubernetes dashboard) use an old query schema,
|
||||
// which does not have enough information for the new `buildInfluxQLQuery` function
|
||||
// to operate on. We will use `buildQueryForOldQuerySchema` until we conform
|
||||
// on a stable query representation.
|
||||
let queryText
|
||||
if (query.queryConfig) {
|
||||
queryText = buildInfluxQLQuery(timeRange, query.queryConfig)
|
||||
} else {
|
||||
queryText = this.buildQueryForOldQuerySchema(query)
|
||||
}
|
||||
|
||||
return Object.assign({}, query, {
|
||||
host: source,
|
||||
text: this.buildQuery(query),
|
||||
text: queryText,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -105,7 +105,7 @@ export default React.createClass({
|
|||
|
||||
return (
|
||||
<div
|
||||
className={classNames({"graph--hasYLabel": !!(options.ylabel || options.y2label)})}
|
||||
className={classNames("dygraph", {"graph--hasYLabel": !!(options.ylabel || options.y2label)})}
|
||||
style={{height: '100%'}}
|
||||
>
|
||||
{isRefreshing ? this.renderSpinner() : null}
|
||||
|
|
|
@ -12,7 +12,7 @@ const SourceIndicator = React.createClass({
|
|||
}
|
||||
return (
|
||||
<div className="source-indicator">
|
||||
<span className="icon server"></span>
|
||||
<span className="icon server2"></span>
|
||||
{sourceName}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -42,7 +42,7 @@ const SideNav = React.createClass({
|
|||
<NavListItem link={`${sourcePrefix}/alerts`}>Alert History</NavListItem>
|
||||
<NavListItem link={`${sourcePrefix}/alert-rules`}>Kapacitor Rules</NavListItem>
|
||||
</NavBlock>
|
||||
<NavBlock icon="crown" link={`${sourcePrefix}/admin`}>
|
||||
<NavBlock icon="crown2" link={`${sourcePrefix}/admin`}>
|
||||
<NavHeader link={`${sourcePrefix}/admin`} title="Admin" />
|
||||
</NavBlock>
|
||||
<NavBlock icon="cog-thick" link={`${sourcePrefix}/manage-sources`}>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// Modules
|
||||
@import 'modules/influx-colors';
|
||||
@import 'modules/variables';
|
||||
@import 'modules/custom-cursors';
|
||||
|
||||
// Mixins
|
||||
@import 'mixins/mixins';
|
||||
|
@ -51,4 +52,4 @@
|
|||
@import 'pages/admin';
|
||||
|
||||
// TODO
|
||||
@import 'unsorted';
|
||||
@import 'unsorted';
|
|
@ -1,5 +1,12 @@
|
|||
// Overrides default Dygraphs styles
|
||||
|
||||
.dygraph {
|
||||
&:hover {
|
||||
cursor: $cc-invert;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.graph-vertical-marker {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
|
@ -27,6 +27,6 @@ $input-tag-item-height: 24px;
|
|||
|
||||
&:hover {
|
||||
color: $c-dreamsicle;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -59,7 +59,7 @@ $resizer-color-active: $c-pool;
|
|||
background-color 0.19s ease;
|
||||
}
|
||||
&:hover {
|
||||
cursor: ns-resize;
|
||||
cursor: $cc-resize-ns;
|
||||
|
||||
&:before {
|
||||
background-color: $resizer-color-hover;
|
||||
|
|
|
@ -14,7 +14,7 @@ table {
|
|||
font-weight: 500;
|
||||
color: $g14-chromium !important;
|
||||
border: 0 !important;
|
||||
padding: 4px 8px !important;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
tbody tr:hover {
|
||||
background-color: $g5-pepper;
|
||||
|
@ -83,7 +83,7 @@ table .monotype {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
color: $g19-ghost;
|
||||
background-color: $g5-pepper;
|
||||
|
||||
|
|
|
@ -95,7 +95,7 @@
|
|||
}
|
||||
|
||||
.fixedDataTableCellLayout_columnResizerContainer:hover {
|
||||
cursor: ew-resize;
|
||||
cursor: $cc-resize-ew;
|
||||
}
|
||||
|
||||
.fixedDataTableCellLayout_columnResizerContainer:hover .fixedDataTableCellLayout_columnResizerKnob {
|
||||
|
@ -120,7 +120,7 @@
|
|||
*/
|
||||
|
||||
.fixedDataTableColumnResizerLineLayout_mouseArea {
|
||||
cursor: ew-resize;
|
||||
cursor: $cc-resize-ew;
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
width: 12px;
|
||||
|
|
|
@ -95,7 +95,7 @@
|
|||
}
|
||||
|
||||
.fixedDataTableCellLayout_columnResizerContainer:hover {
|
||||
cursor: ew-resize;
|
||||
cursor: $cc-resize-ew;
|
||||
}
|
||||
|
||||
.fixedDataTableCellLayout_columnResizerContainer:hover .fixedDataTableCellLayout_columnResizerKnob {
|
||||
|
@ -120,7 +120,7 @@
|
|||
*/
|
||||
|
||||
.fixedDataTableColumnResizerLineLayout_mouseArea {
|
||||
cursor: ew-resize;
|
||||
cursor: $cc-resize-ew;
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
width: 12px;
|
||||
|
|
|
@ -84,6 +84,8 @@
|
|||
<glyph unicode="" glyph-name="heroku-simple" d="M348.16-120.32l-166.4-133.12c-2.56-2.56-2.56-2.56-5.12-2.56s-2.56 0-5.12 0c-2.56 2.56-5.12 5.12-5.12 7.68v281.6c0 2.56 2.56 7.68 5.12 7.68 2.56 2.56 7.68 0 10.24-2.56l166.4-148.48c2.56-2.56 2.56-5.12 2.56-7.68 2.56 0 0-2.56-2.56-2.56zM857.6-245.76c0-5.12-5.12-10.24-10.24-10.24h-166.4c-5.12 0-10.24 5.12-10.24 10.24v391.68c0 30.72 0 64-20.48 81.92-17.92 15.36-53.76 20.48-102.4 12.8-66.56-10.24-140.8-28.16-207.36-48.64-5.12 0-7.68-2.56-10.24-2.56-5.12-2.56-10.24-2.56-15.36-5.12-2.56 0-7.68-2.56-10.24-2.56-5.12-2.56-10.24-2.56-12.8-5.12-2.56 0-7.68-2.56-10.24-2.56-5.12-2.56-7.68-2.56-12.8-5.12-2.56-2.56-7.68-2.56-10.24-5.12s-7.68-2.56-10.24-5.12c-5.12-2.56-7.68-2.56-12.8-5.12-2.56 0-5.12-2.56-7.68-2.56-5.12-2.56-7.68-5.12-12.8-7.68-2.56 0-2.56-2.56-5.12-2.56-5.12-2.56-7.68-5.12-12.8-7.68 0 0-2.56 0-2.56-2.56-5.12-2.56-7.68-5.12-12.8-7.68-2.56 0-2.56-2.56-5.12-2.56 0 0 0 0 0 0s0 0 0 0-2.56 0-2.56 0c0 0 0 0 0 0s0 0 0 0 0 0 0 0-2.56 2.56-2.56 2.56c0 0 0 0 0 2.56 0 0 0 0 0 0v629.76c0 5.12 5.12 10.24 10.24 10.24h166.4c5.12 0 10.24-5.12 10.24-10.24v-378.88c87.040 25.6 202.24 48.64 307.2 33.28 117.76-15.36 197.12-69.12 197.12-276.48v-378.88zM739.84 517.12c-2.56-2.56-5.12-5.12-7.68-5.12h-166.4c-2.56 0-7.68 2.56-7.68 5.12s-2.56 7.68 0 10.24c40.96 56.32 115.2 158.72 115.2 230.4 0 5.12 5.12 10.24 10.24 10.24h166.4c5.12 0 10.24-5.12 10.24-10.24-2.56-76.8-79.36-181.76-120.32-240.64z" />
|
||||
<glyph unicode="" glyph-name="refresh" d="M417.28 442.88l-261.12 28.16c-15.36 2.56-25.6 15.36-25.6 30.72l28.16 261.12c0 7.68 10.24 10.24 17.92 5.12l248.32-307.2c5.12-10.24 0-20.48-7.68-17.92zM865.28-248.32l28.16 261.12c2.56 15.36-10.24 28.16-25.6 30.72l-261.12 28.16c-7.68 0-12.8-7.68-7.68-15.36l248.32-307.2c5.12-7.68 15.36-5.12 17.92 2.56zM834.56 578.56c-87.040 87.040-202.24 133.12-322.56 133.12-110.080 0-217.6-40.96-302.080-112.64l-10.24-10.24 58.88-58.88 10.24 7.68c84.48 74.24 199.68 104.96 314.88 81.92 51.2-10.24 99.84-30.72 143.36-61.44 130.56-94.72 186.88-253.44 145.92-404.48-5.12-20.48 5.12-43.52 23.040-51.2 5.12-2.56 10.24-2.56 17.92-2.56 5.12 0 12.8 2.56 17.92 5.12 10.24 5.12 20.48 15.36 23.040 28.16 43.52 161.28-2.56 327.68-120.32 445.44zM755.2-28.16c-84.48-74.24-199.68-104.96-314.88-81.92-51.2 10.24-99.84 30.72-143.36 61.44-130.56 94.72-186.88 250.88-145.92 404.48 5.12 20.48-5.12 43.52-23.040 51.2-10.24 5.12-23.040 5.12-35.84 0-10.24-5.12-17.92-15.36-20.48-25.6-46.080-161.28-2.56-327.68 117.76-445.44 87.040-87.040 202.24-133.12 322.56-133.12 110.080 0 217.6 40.96 302.080 112.64l10.24 10.24-58.88 58.88-10.24-12.8z" />
|
||||
<glyph unicode="" glyph-name="pause" d="M435.2-115.2c0-20.48-17.92-38.4-38.4-38.4h-153.6c-20.48 0-38.4 17.92-38.4 38.4v742.4c0 20.48 17.92 38.4 38.4 38.4h153.6c20.48 0 38.4-17.92 38.4-38.4v-742.4zM819.2-115.2c0-20.48-17.92-38.4-38.4-38.4h-153.6c-20.48 0-38.4 17.92-38.4 38.4v742.4c0 20.48 17.92 38.4 38.4 38.4h153.6c20.48 0 38.4-17.92 38.4-38.4v-742.4z" />
|
||||
<glyph unicode="" glyph-name="crown2" d="M882.4-64.4l135.2 523.4c2.2 8.4-7 15.2-14.4 10.4l-262.4-168.2c-10.4-6.6-24.2-3.8-31.2 6.4l-189.8 276.4c-3.8 5.6-12 5.6-15.8 0l-189.6-276.6c-7-10.2-20.8-13-31.2-6.4l-262.4 168.2c-7.4 4.6-16.6-2-14.4-10.4l135.2-523.4c2.8-11 12.8-18.8 24.2-18.8h692.6c11.2 0.2 21.2 8 24 19z" />
|
||||
<glyph unicode="" glyph-name="server2" d="M992.4 729.2h-960.8c-10.2 0-20.4-10.2-20.4-20.4v-203.8c0-10.2 10.2-20.4 20.4-20.4h960.6c10.2 0 20.4 10.2 20.4 20.4v203.8c0.2 10.2-10 20.4-20.2 20.4zM241.6 556.4c0-7.4-6-13.6-13.6-13.6h-101c-7.4 0-13.6 6-13.6 13.6v101c0 7.4 6 13.6 13.6 13.6h101c7.4 0 13.6-6 13.6-13.6v-101zM992.4 378.4h-960.8c-10.2 0-20.4-10.2-20.4-20.4v-204c0-10.2 10.2-20.4 20.4-20.4h960.6c10.2 0 20.4 10.2 20.4 20.4v204c0.2 10.2-10 20.4-20.2 20.4zM241.6 205.6c0-7.4-6-13.6-13.6-13.6h-101c-7.4 0-13.6 6-13.6 13.6v100.8c0 7.4 6 13.6 13.6 13.6h101c7.4 0 13.6-6 13.6-13.6v-100.8zM992.4 47.6h-960.8c-10.2 0-20.4-10.2-20.4-20.4v-203.8c0-10.2 10.2-20.4 20.4-20.4h960.6c10.2 0 20.4 10.2 20.4 20.4v203.8c0.2 10.2-10 20.4-20.2 20.4zM241.6-125.2c0-7.4-6-13.6-13.6-13.6h-101c-7.4 0-13.6 6-13.6 13.6v101c0 7.4 6 13.6 13.6 13.6h101c7.4 0 13.6-6 13.6-13.6v-101z" />
|
||||
<glyph unicode="" glyph-name="google" d="M522.2 329.2v-175.6h290.4c-11.8-75.4-87.8-220.8-290.4-220.8-174.8 0-317.4 144.8-317.4 323.2s142.6 323.2 317.4 323.2c99.4 0 166-42.4 204-79l139 133.8c-89.2 83.6-204.8 134-343 134-283 0-512-229-512-512s229-512 512-512c295.4 0 491.6 207.8 491.6 500.2 0 33.6-3.6 59.2-8 84.8l-483.6 0.2z" />
|
||||
<glyph unicode="" glyph-name="google3" d="M512 768c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM519.6-128c-212.2 0-384 171.8-384 384s171.8 384 384 384c103.6 0 190.4-37.8 257.2-100.4l-104.2-100.4c-28.6 27.4-78.4 59.2-153 59.2-131.2 0-238-108.6-238-242.4s107-242.4 238-242.4c152 0 209 109.2 217.8 165.6h-217.8v131.6h362.6c3.2-19.2 6-38.4 6-63.6 0.2-219.4-146.8-375.2-368.6-375.2z" />
|
||||
<glyph unicode="" glyph-name="google-plus" d="M325.8 310.6v-111.8h184.8c-7.4-48-55.8-140.6-184.8-140.6-111.2 0-202 92.2-202 205.8s90.8 205.8 202 205.8c63.4 0 105.6-27 129.8-50.2l88.4 85.2c-56.8 53-130.4 85.2-218.2 85.2-180.2-0.2-325.8-145.8-325.8-326s145.6-325.8 325.8-325.8c188 0 312.8 132.2 312.8 318.4 0 21.4-2.4 37.8-5.2 54h-307.6zM1024 320h-96v96h-96v-96h-96v-96h96v-96h96v96h96z" />
|
||||
|
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 72 KiB |
|
@ -244,7 +244,7 @@
|
|||
background-color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: $g18-cloud;
|
||||
color: $g9-mountain;
|
||||
}
|
||||
|
@ -390,7 +390,7 @@ $form-static-checkbox-size: 16px;
|
|||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
color: $g20-white;
|
||||
|
||||
&:before {
|
||||
|
|
|
@ -49,7 +49,7 @@ $sidebar-logo-color: $g8-storm;
|
|||
|
||||
&:hover {
|
||||
background-color: $g9-mountain;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -121,7 +121,7 @@ $sidebar-logo-color: $g8-storm;
|
|||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
|
||||
.sidebar__icon {
|
||||
color: $sidebar-icon-hover;
|
||||
|
@ -270,7 +270,7 @@ $sidebar-logo-color: $g8-storm;
|
|||
transform: translate(-50%,-50%);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: $sidebar-item-hover;
|
||||
color: $sidebar-icon-hover;
|
||||
|
||||
|
|
|
@ -22,10 +22,10 @@
|
|||
}
|
||||
@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: -moz-linear-gradient(135deg, $startColor 0%, $endColor 100%) !important;
|
||||
background: -webkit-linear-gradient(135deg, $startColor 0%,$endColor 100%) !important;
|
||||
background: linear-gradient(135deg, $startColor 0%,$endColor 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 ) !important;
|
||||
}
|
||||
@mixin gradient-r($startColor, $endColor) {
|
||||
background: $startColor;
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
Custom Mouse Cursors
|
||||
----------------------------------------------
|
||||
*/
|
||||
|
||||
$cc-default: url(assets/images/cursor-default.png), auto !important;
|
||||
$cc-invert: url(assets/images/cursor-invert.png) 4 4, auto !important;
|
||||
$cc-pointer: url(assets/images/cursor-pointer.png) 6 0, auto !important;
|
||||
$cc-text: url(assets/images/cursor-text.png) 6 10, auto !important;
|
||||
$cc-move: url(assets/images/cursor-move.png) 13 13, auto !important;
|
||||
$cc-resize-ns: url(assets/images/cursor-ns-resize.png) 6 12, auto !important;
|
||||
$cc-resize-ew: url(assets/images/cursor-ew-resize.png) 12 5, auto !important;
|
||||
$cc-resize-nwse: url(assets/images/cursor-nwse-resize.png) 9 9, auto !important;
|
||||
$cc-resize-nesw: url(assets/images/cursor-nesw-resize.png) 9 9, auto !important;
|
||||
|
||||
|
||||
// Resetting defaults
|
||||
body {
|
||||
cursor: $cc-default;
|
||||
}
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
code,
|
||||
pre {
|
||||
cursor: $cc-text;
|
||||
}
|
|
@ -69,10 +69,7 @@ $dash-graph-heading: 30px;
|
|||
top: $dash-graph-heading;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
& > div:not(.graph-empty) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
@ -116,7 +113,7 @@ $dash-graph-heading: 30px;
|
|||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
&:hover {
|
||||
cursor: default;
|
||||
cursor: $cc-default;
|
||||
}
|
||||
}
|
||||
.dash-graph--name-edit,
|
||||
|
@ -160,7 +157,7 @@ $dash-graph-heading: 30px;
|
|||
}
|
||||
|
||||
&:hover {
|
||||
cursor: text;
|
||||
cursor: $cc-text;
|
||||
color: $g20-white;
|
||||
|
||||
&:after {
|
||||
|
@ -249,7 +246,7 @@ $dash-graph-options-arrow: 8px;
|
|||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: $g6-smoke;
|
||||
color: $g20-white;
|
||||
}
|
||||
|
@ -295,94 +292,84 @@ $dash-graph-options-arrow: 8px;
|
|||
Dashboard Edit Mode
|
||||
------------------------------------------------------
|
||||
*/
|
||||
.dashboard.dashboard-edit {
|
||||
.dash-graph--heading:hover {
|
||||
background-color: $g4-onyx;
|
||||
color: $g18-cloud;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
}
|
||||
.react-grid-placeholder {
|
||||
@include gradient-diag-down($c-pool,$c-comet);
|
||||
border: 0;
|
||||
opacity: 0.3;
|
||||
z-index: 2;
|
||||
}
|
||||
.react-grid-item {
|
||||
&.resizing {
|
||||
background-color: fade-out($g3-castle,0.09);
|
||||
border-color: $c-pool;
|
||||
border-image-slice: 3%;
|
||||
border-image-repeat: initial;
|
||||
border-image-outset: 0;
|
||||
border-image-width: 2px;
|
||||
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTg0NjVDRkVGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTg0NjVDRkZGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODQ2NUNGQ0YwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODQ2NUNGREYwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpeetfIAAAMnSURBVHja7N1PatwwFMfxJ5NlKT1DIfQKWZfSA/Q0hexDL9McoOQAPUKglwhp6dZ9Ho/HfyTZs6l+b/E1GDm27IH5oH9Pyji9//7XfLtNZt88/eT722TzlvrFseXHaXFmypuO8vd5nmW6nyeNefrKfZv7i9f75blU/NzafXvns2dV7tl8zqsnT55+9f3Xjf/xwQ9+evou+xLB+N8Ydi4AX3z/6PnvOj94AEOGMV/rB4P00J2rKTC0GNOTPne0GWEwhv1NB0YYjNPWgREHI00gYMTAOIGAEQdjuKcDIw7GXGWBEQJjrLLACIORrFBlgaHDsG2VBYYWY1VlgaHHSH3WqIOhxLB1ow6GGmPRqIMRAeMMAkYUDFuGTsDQYwxP6MCIg1Hp9oKhwih0e8FQYthuLAuM5hj1WBYYEoxUjGWBIcOwrFEHQ4qxLiFgyDFOvSww4mCM8yFghMEoDgzB0GGk2owhGBoMq5UQMDQYxRIChg4ja0PA0GLYMrgIhh7jUkLAiIExV1lghMA4GBiC0RrjNIULRhyMysAQDBVGYWAIhhJjM6cOhhpjUULAiIAxr1wEIwTGPDAEIwTGWGWBEQajHu0FQ4JRjvaCIcPIo71gSDHW0V4w5Bj5SB0MKUZxoRwYOoxsPgQMLcZqPgQMPUaxUQdDh2HVcQgYEoxUHIeAIcPIqywwpBjrKgsMOcb8f+pghMDIwu9gaDFWI3Uw9Bg2N+pgRMA497LAiIJRXf0OhgajuPodDB3G1dFeMNpgXBXtBaMdxmG0F4y2GLvRXjDaY2wGhmCoMawU7QVDh5G20V4wtBjzwBCMEBiXVx6BEQPjsJcFRluM3V4WGO0xqr0sMDQYVuplgaHDWL1YEgw9hi17WWDoMVJ1ChcMCYYVp3DBkGFUl5KCocGw6deAwIiBYUfBRTDaYmTdXjC0GFYLLoKhwSj+cAAYOgzbBhfB0GKsgotg6DGuWrkIRjuMudsLRgiMsQ0BIwzG5ZVHYMTAmKqsVzBiYPj2Z+j2PoERAmM4/2MoIfe+v4Ahx3jx5H4AefYLd37q0Y9/g9EcY/jOHz11A3v+J8AA9wisahRCWTQAAAAASUVORK5CYII=);
|
||||
z-index: 3;
|
||||
// .dash-graph--heading:hover {
|
||||
// background-color: $g4-onyx;
|
||||
// color: $g18-cloud;
|
||||
// cursor: $cc-move;
|
||||
|
||||
& > .react-resizable-handle {
|
||||
&:before, &:after {
|
||||
background-color: $c-comet;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.react-draggable-dragging {
|
||||
background-color: fade-out($g3-castle,0.09);
|
||||
border-color: $c-pool;
|
||||
border-image-slice: 3%;
|
||||
border-image-repeat: initial;
|
||||
border-image-outset: 0;
|
||||
border-image-width: 2px;
|
||||
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTg0NjVDRkVGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTg0NjVDRkZGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODQ2NUNGQ0YwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODQ2NUNGREYwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpeetfIAAAMnSURBVHja7N1PatwwFMfxJ5NlKT1DIfQKWZfSA/Q0hexDL9McoOQAPUKglwhp6dZ9Ho/HfyTZs6l+b/E1GDm27IH5oH9Pyji9//7XfLtNZt88/eT722TzlvrFseXHaXFmypuO8vd5nmW6nyeNefrKfZv7i9f75blU/NzafXvns2dV7tl8zqsnT55+9f3Xjf/xwQ9+evou+xLB+N8Ydi4AX3z/6PnvOj94AEOGMV/rB4P00J2rKTC0GNOTPne0GWEwhv1NB0YYjNPWgREHI00gYMTAOIGAEQdjuKcDIw7GXGWBEQJjrLLACIORrFBlgaHDsG2VBYYWY1VlgaHHSH3WqIOhxLB1ow6GGmPRqIMRAeMMAkYUDFuGTsDQYwxP6MCIg1Hp9oKhwih0e8FQYthuLAuM5hj1WBYYEoxUjGWBIcOwrFEHQ4qxLiFgyDFOvSww4mCM8yFghMEoDgzB0GGk2owhGBoMq5UQMDQYxRIChg4ja0PA0GLYMrgIhh7jUkLAiIExV1lghMA4GBiC0RrjNIULRhyMysAQDBVGYWAIhhJjM6cOhhpjUULAiIAxr1wEIwTGPDAEIwTGWGWBEQajHu0FQ4JRjvaCIcPIo71gSDHW0V4w5Bj5SB0MKUZxoRwYOoxsPgQMLcZqPgQMPUaxUQdDh2HVcQgYEoxUHIeAIcPIqywwpBjrKgsMOcb8f+pghMDIwu9gaDFWI3Uw9Bg2N+pgRMA497LAiIJRXf0OhgajuPodDB3G1dFeMNpgXBXtBaMdxmG0F4y2GLvRXjDaY2wGhmCoMawU7QVDh5G20V4wtBjzwBCMEBiXVx6BEQPjsJcFRluM3V4WGO0xqr0sMDQYVuplgaHDWL1YEgw9hi17WWDoMVJ1ChcMCYYVp3DBkGFUl5KCocGw6deAwIiBYUfBRTDaYmTdXjC0GFYLLoKhwSj+cAAYOgzbBhfB0GKsgotg6DGuWrkIRjuMudsLRgiMsQ0BIwzG5ZVHYMTAmKqsVzBiYPj2Z+j2PoERAmM4/2MoIfe+v4Ahx3jx5H4AefYLd37q0Y9/g9EcY/jOHz11A3v+J8AA9wisahRCWTQAAAAASUVORK5CYII=);
|
||||
cursor: grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
&:hover {
|
||||
cursor: grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
// .dash-graph--name {
|
||||
// border-color: $g4-onyx;
|
||||
// }
|
||||
// }
|
||||
.react-grid-placeholder {
|
||||
@include gradient-diag-down($c-pool,$c-comet);
|
||||
border: 0;
|
||||
opacity: 0.3;
|
||||
z-index: 2;
|
||||
}
|
||||
.react-grid-item {
|
||||
&.resizing {
|
||||
background-color: fade-out($g3-castle,0.09);
|
||||
border-color: $c-pool;
|
||||
border-image-slice: 3%;
|
||||
border-image-repeat: initial;
|
||||
border-image-outset: 0;
|
||||
border-image-width: 2px;
|
||||
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTg0NjVDRkVGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTg0NjVDRkZGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODQ2NUNGQ0YwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODQ2NUNGREYwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpeetfIAAAMnSURBVHja7N1PatwwFMfxJ5NlKT1DIfQKWZfSA/Q0hexDL9McoOQAPUKglwhp6dZ9Ho/HfyTZs6l+b/E1GDm27IH5oH9Pyji9//7XfLtNZt88/eT722TzlvrFseXHaXFmypuO8vd5nmW6nyeNefrKfZv7i9f75blU/NzafXvns2dV7tl8zqsnT55+9f3Xjf/xwQ9+evou+xLB+N8Ydi4AX3z/6PnvOj94AEOGMV/rB4P00J2rKTC0GNOTPne0GWEwhv1NB0YYjNPWgREHI00gYMTAOIGAEQdjuKcDIw7GXGWBEQJjrLLACIORrFBlgaHDsG2VBYYWY1VlgaHHSH3WqIOhxLB1ow6GGmPRqIMRAeMMAkYUDFuGTsDQYwxP6MCIg1Hp9oKhwih0e8FQYthuLAuM5hj1WBYYEoxUjGWBIcOwrFEHQ4qxLiFgyDFOvSww4mCM8yFghMEoDgzB0GGk2owhGBoMq5UQMDQYxRIChg4ja0PA0GLYMrgIhh7jUkLAiIExV1lghMA4GBiC0RrjNIULRhyMysAQDBVGYWAIhhJjM6cOhhpjUULAiIAxr1wEIwTGPDAEIwTGWGWBEQajHu0FQ4JRjvaCIcPIo71gSDHW0V4w5Bj5SB0MKUZxoRwYOoxsPgQMLcZqPgQMPUaxUQdDh2HVcQgYEoxUHIeAIcPIqywwpBjrKgsMOcb8f+pghMDIwu9gaDFWI3Uw9Bg2N+pgRMA497LAiIJRXf0OhgajuPodDB3G1dFeMNpgXBXtBaMdxmG0F4y2GLvRXjDaY2wGhmCoMawU7QVDh5G20V4wtBjzwBCMEBiXVx6BEQPjsJcFRluM3V4WGO0xqr0sMDQYVuplgaHDWL1YEgw9hi17WWDoMVJ1ChcMCYYVp3DBkGFUl5KCocGw6deAwIiBYUfBRTDaYmTdXjC0GFYLLoKhwSj+cAAYOgzbBhfB0GKsgotg6DGuWrkIRjuMudsLRgiMsQ0BIwzG5ZVHYMTAmKqsVzBiYPj2Z+j2PoERAmM4/2MoIfe+v4Ahx3jx5H4AefYLd37q0Y9/g9EcY/jOHz11A3v+J8AA9wisahRCWTQAAAAASUVORK5CYII=);
|
||||
z-index: 3;
|
||||
|
||||
& > .dash-graph--heading,
|
||||
& > .dash-graph--heading:hover {
|
||||
background-color: $g4-onyx;
|
||||
color: $g18-cloud;
|
||||
cursor: grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
}
|
||||
&.cssTransforms {
|
||||
transition-property: transform, border-color, background-color;
|
||||
}
|
||||
& > .react-resizable-handle {
|
||||
background-image: none;
|
||||
cursor: nwse-resize;
|
||||
&:before, &:after {
|
||||
background-color: $c-comet;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.react-draggable-dragging {
|
||||
background-color: fade-out($g3-castle,0.09);
|
||||
border-color: $c-pool;
|
||||
border-image-slice: 3%;
|
||||
border-image-repeat: initial;
|
||||
border-image-outset: 0;
|
||||
border-image-width: 2px;
|
||||
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTg0NjVDRkVGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTg0NjVDRkZGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODQ2NUNGQ0YwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODQ2NUNGREYwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpeetfIAAAMnSURBVHja7N1PatwwFMfxJ5NlKT1DIfQKWZfSA/Q0hexDL9McoOQAPUKglwhp6dZ9Ho/HfyTZs6l+b/E1GDm27IH5oH9Pyji9//7XfLtNZt88/eT722TzlvrFseXHaXFmypuO8vd5nmW6nyeNefrKfZv7i9f75blU/NzafXvns2dV7tl8zqsnT55+9f3Xjf/xwQ9+evou+xLB+N8Ydi4AX3z/6PnvOj94AEOGMV/rB4P00J2rKTC0GNOTPne0GWEwhv1NB0YYjNPWgREHI00gYMTAOIGAEQdjuKcDIw7GXGWBEQJjrLLACIORrFBlgaHDsG2VBYYWY1VlgaHHSH3WqIOhxLB1ow6GGmPRqIMRAeMMAkYUDFuGTsDQYwxP6MCIg1Hp9oKhwih0e8FQYthuLAuM5hj1WBYYEoxUjGWBIcOwrFEHQ4qxLiFgyDFOvSww4mCM8yFghMEoDgzB0GGk2owhGBoMq5UQMDQYxRIChg4ja0PA0GLYMrgIhh7jUkLAiIExV1lghMA4GBiC0RrjNIULRhyMysAQDBVGYWAIhhJjM6cOhhpjUULAiIAxr1wEIwTGPDAEIwTGWGWBEQajHu0FQ4JRjvaCIcPIo71gSDHW0V4w5Bj5SB0MKUZxoRwYOoxsPgQMLcZqPgQMPUaxUQdDh2HVcQgYEoxUHIeAIcPIqywwpBjrKgsMOcb8f+pghMDIwu9gaDFWI3Uw9Bg2N+pgRMA497LAiIJRXf0OhgajuPodDB3G1dFeMNpgXBXtBaMdxmG0F4y2GLvRXjDaY2wGhmCoMawU7QVDh5G20V4wtBjzwBCMEBiXVx6BEQPjsJcFRluM3V4WGO0xqr0sMDQYVuplgaHDWL1YEgw9hi17WWDoMVJ1ChcMCYYVp3DBkGFUl5KCocGw6deAwIiBYUfBRTDaYmTdXjC0GFYLLoKhwSj+cAAYOgzbBhfB0GKsgotg6DGuWrkIRjuMudsLRgiMsQ0BIwzG5ZVHYMTAmKqsVzBiYPj2Z+j2PoERAmM4/2MoIfe+v4Ahx3jx5H4AefYLd37q0Y9/g9EcY/jOHz11A3v+J8AA9wisahRCWTQAAAAASUVORK5CYII=);
|
||||
cursor: $cc-move;
|
||||
&:hover {
|
||||
cursor: $cc-move;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
background-color: $g6-smoke;
|
||||
transition: background-color 0.25s ease;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
&:before {
|
||||
width: 20px;
|
||||
transform: translate(-50%,-50%) rotate(-45deg);
|
||||
}
|
||||
&:after {
|
||||
width: 12px;
|
||||
transform: translate(-3px,2px) rotate(-45deg);
|
||||
}
|
||||
&:hover {
|
||||
&:before, &:after {
|
||||
background-color: $c-comet;
|
||||
}
|
||||
// & > .dash-graph--heading,
|
||||
// & > .dash-graph--heading:hover {
|
||||
// background-color: $g4-onyx;
|
||||
// color: $g18-cloud;
|
||||
// cursor: $cc-move;
|
||||
// }
|
||||
}
|
||||
& > .react-resizable-handle {
|
||||
background-image: none;
|
||||
cursor: $cc-resize-nwse;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
background-color: $g6-smoke;
|
||||
transition: background-color 0.25s ease;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
&:before {
|
||||
width: 20px;
|
||||
transform: translate(-50%,-50%) rotate(-45deg);
|
||||
}
|
||||
&:after {
|
||||
width: 12px;
|
||||
transform: translate(-3px,2px) rotate(-45deg);
|
||||
}
|
||||
&:hover {
|
||||
&:before, &:after {
|
||||
background-color: $c-comet;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -394,7 +381,7 @@ $dash-graph-options-arrow: 8px;
|
|||
*/
|
||||
$overlay-controls-height: 50px;
|
||||
$overlay-controls-bg: $g2-kevlar;
|
||||
$overlay-bg: rgba($g0-obsidian, 0.7);
|
||||
$overlay-bg: rgba($c-pool, 0.7);
|
||||
|
||||
.overlay-technology {
|
||||
position: absolute;
|
||||
|
@ -475,3 +462,23 @@ $overlay-bg: rgba($g0-obsidian, 0.7);
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */
|
||||
.overlay-technology .page-contents {
|
||||
background-image: none !important;
|
||||
}
|
||||
.overlay-technology .resize-bottom {
|
||||
background-color: $g0-obsidian !important;
|
||||
}
|
||||
.overlay-technology .graph {
|
||||
width: 70%;
|
||||
left: 15%;
|
||||
}
|
||||
.overlay-technology .dash-graph--heading {
|
||||
top: 0;
|
||||
height: $dash-graph-heading;
|
||||
}
|
||||
.overlay-technology .dash-graph--container {
|
||||
height: calc(100% - #{$dash-graph-heading});
|
||||
top: $dash-graph-heading;
|
||||
}
|
|
@ -44,7 +44,7 @@
|
|||
color: $g11-sidewalk;
|
||||
background: transparent;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
padding: 0 8px 0 16px;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
|
@ -142,7 +142,9 @@
|
|||
Tab Contents
|
||||
-------------------------------------------
|
||||
*/
|
||||
$query-builder--column-heading-height: 60px;
|
||||
$query-builder--preview-height: 60px;
|
||||
$query-builder--column-heading-height: 50px;
|
||||
|
||||
.query-builder--tab-contents {
|
||||
width: 100%;
|
||||
margin-top: $de-vertical-margin;
|
||||
|
@ -159,11 +161,31 @@ $query-builder--column-heading-height: 60px;
|
|||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
}
|
||||
.query-builder--query-preview {
|
||||
position: relative;
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
padding: 7px;
|
||||
border: 2px solid $query-editor-tab-inactive;
|
||||
background-color: $query-editor-tab-inactive;
|
||||
color: $c-pool;
|
||||
border-radius: $radius;
|
||||
margin-bottom: 0;
|
||||
overflow: auto;
|
||||
height: ($query-builder--preview-height - 4px);
|
||||
@include custom-scrollbar($query-editor-tab-inactive, $c-pool);
|
||||
|
||||
code {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.query-builder--columns {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
top: 60px;
|
||||
height: calc(100% - #{$query-builder--preview-height});
|
||||
top: $query-builder--preview-height;
|
||||
}
|
||||
.query-builder--column-heading {
|
||||
@include no-user-select();
|
||||
|
@ -224,7 +246,6 @@ $query-builder--column-heading-height: 60px;
|
|||
}
|
||||
|
||||
.alert.alert-rawquery {
|
||||
border-color: $g5-pepper;
|
||||
border-color: $g6-smoke;
|
||||
color: $g12-forge;
|
||||
}
|
|
@ -6,29 +6,6 @@
|
|||
|
||||
*/
|
||||
|
||||
.query-builder--query-preview {
|
||||
position: relative;
|
||||
|
||||
pre {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9px;
|
||||
border: 0;
|
||||
background-color: $query-editor-tab-inactive;
|
||||
color: $c-pool;
|
||||
border-radius: $radius;
|
||||
margin-bottom: 0;
|
||||
overflow: auto;
|
||||
height: 56px;
|
||||
@include custom-scrollbar($query-editor-tab-inactive, $c-pool);
|
||||
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs for switching between queries
|
||||
.qeditor--tabs {
|
||||
display: flex;
|
||||
|
@ -66,7 +43,7 @@
|
|||
background-color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
color: $g20-white;
|
||||
}
|
||||
&.active {
|
||||
|
@ -97,7 +74,7 @@
|
|||
&:hover {
|
||||
background-color: $g5-pepper;
|
||||
color: $g15-platinum;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
}
|
||||
&-radio {
|
||||
|
@ -171,7 +148,7 @@
|
|||
}
|
||||
.qeditor--list-header {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
top: 7px;
|
||||
right: 16px;
|
||||
width: calc(50% - 16px);
|
||||
height: 30px;
|
||||
|
|
|
@ -4,39 +4,39 @@
|
|||
between builder / raw tabs
|
||||
*/
|
||||
.raw-text--field,
|
||||
.qeditor--query-preview pre,
|
||||
.qeditor--query-preview pre code {
|
||||
.query-builder--query-preview pre,
|
||||
.query-builder--query-preview pre code {
|
||||
font-style: normal !important;
|
||||
letter-spacing: 0.02em !important;
|
||||
letter-spacing: 0 !important;
|
||||
font-size: 12px !important;
|
||||
font-variant: normal !important;
|
||||
line-height: 14px !important;
|
||||
font-family: $code-font !important;
|
||||
font-weight: 600 !important;
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-all !important;
|
||||
white-space: pre-wrap !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
$raw-text-color: $c-comet;
|
||||
|
||||
.raw-text {
|
||||
border-bottom: 2px solid $g4-onyx;
|
||||
}
|
||||
.raw-text--field {
|
||||
@include custom-scrollbar($g2-kevlar, $raw-text-color);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background-color: $g2-kevlar;
|
||||
border: 2px solid $g2-kevlar;
|
||||
color: $raw-text-color;
|
||||
padding: (9px - 2px);
|
||||
border-radius: $radius;
|
||||
line-height: 1.5em;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
resize: none;
|
||||
text-size-adjust: 100% !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
$raw-text-color: $c-comet;
|
||||
|
||||
.raw-text--field {
|
||||
@include custom-scrollbar($g2-kevlar, $raw-text-color);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: ($query-builder--preview-height - 4px);
|
||||
background-color: $g2-kevlar;
|
||||
border: 2px solid $g2-kevlar;
|
||||
color: $raw-text-color;
|
||||
padding: 7px;
|
||||
border-radius: $radius;
|
||||
margin: 0;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
|
|
|
@ -184,7 +184,7 @@
|
|||
line-height: 30px;
|
||||
margin-right: 2px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
padding: 0 10px;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
|
|
|
@ -467,7 +467,7 @@ div.qeditor.kapacitor-metric-selector {
|
|||
|
||||
&:hover {
|
||||
color: $c-rainforest;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -248,9 +248,15 @@
|
|||
.icon.access-key:before {
|
||||
content: "\e921";
|
||||
}
|
||||
.icon.crown2:before {
|
||||
content: "\e94b";
|
||||
}
|
||||
.icon.crown:before {
|
||||
content: "\e90f";
|
||||
}
|
||||
.icon.server2:before {
|
||||
content: "\e94c";
|
||||
}
|
||||
.icon.server:before {
|
||||
content: "\e914";
|
||||
}
|
||||
|
@ -509,7 +515,7 @@ a:active.link-warning {
|
|||
}
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
.btn-group-xs > .btn,
|
||||
.btn.btn-xs {
|
||||
|
@ -1469,7 +1475,7 @@ fieldset[disabled] .btn-link-success:active:focus {
|
|||
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
|
||||
}
|
||||
.panel-available:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: #f0fcff;
|
||||
border-color: #bef0ff;
|
||||
}
|
||||
|
@ -2589,7 +2595,7 @@ a.badge:hover,
|
|||
a.badge:focus {
|
||||
color: #00c9ff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
.sparkline {
|
||||
display: inline-block;
|
||||
|
@ -3195,7 +3201,7 @@ a.badge:focus {
|
|||
border-radius: 4px;
|
||||
}
|
||||
.slider-plan-picker:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
.slider-plan-picker .slider-label,
|
||||
.slider-plan-picker .slider-cell {
|
||||
|
@ -3867,7 +3873,7 @@ table.table.icon-font-matrix tr > td strong {
|
|||
-ms-flex-direction: column;
|
||||
}
|
||||
.docs-color-swatch:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
.docs-color-swatch.light-bg {
|
||||
color: #676978;
|
||||
|
@ -4142,7 +4148,7 @@ section.docs-section .page-header {
|
|||
}
|
||||
.nav-tablist > li > a:hover {
|
||||
color: #676978;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: #f6f6f8;
|
||||
}
|
||||
.nav-tablist > li:first-of-type > a {
|
||||
|
@ -4248,7 +4254,7 @@ section.docs-section .page-header {
|
|||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
.microtabs-dismiss:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
.microtabs-dismiss:hover:after,
|
||||
.microtabs-dismiss:hover:before {
|
||||
|
@ -4287,7 +4293,7 @@ section.docs-section .page-header {
|
|||
}
|
||||
.nav-microtabs > li > a:hover {
|
||||
color: #676978;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: #fafafc;
|
||||
}
|
||||
.nav-microtabs > li:last-of-type > a {
|
||||
|
@ -4497,7 +4503,7 @@ section.docs-section .page-header {
|
|||
.nav-microtabs-summer .microtabs-dismiss:hover,
|
||||
.nav-microtabs-fall .microtabs-dismiss:hover,
|
||||
.nav-microtabs-winter .microtabs-dismiss:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
.nav-microtabs-spring .microtabs-dismiss:hover:after,
|
||||
.nav-microtabs-summer .microtabs-dismiss:hover:after,
|
||||
|
|
|
@ -155,12 +155,12 @@ html input[type="button"],
|
|||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
cursor: $cc-default;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
|
@ -1504,7 +1504,7 @@ hr {
|
|||
}
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
@ -3331,7 +3331,7 @@ input[type="search"] {
|
|||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
|
@ -3356,7 +3356,7 @@ input[type="search"] {
|
|||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
|
||||
.radio-inline + .radio-inline,
|
||||
|
@ -3764,7 +3764,7 @@ select[multiple].input-lg {
|
|||
vertical-align: middle;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
@ -4959,7 +4959,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
|||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.active > a:focus {
|
||||
color: #575e6b;
|
||||
cursor: default;
|
||||
cursor: $cc-default;
|
||||
background-color: #fafbfc;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
|
@ -5830,7 +5830,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
|
|||
.pagination > .active > span:focus {
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
cursor: $cc-default;
|
||||
background-color: #22adf6;
|
||||
border-color: #22adf6;
|
||||
}
|
||||
|
@ -5947,7 +5947,7 @@ a.label:hover,
|
|||
a.label:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
|
||||
.label:empty {
|
||||
|
@ -6047,7 +6047,7 @@ a.badge:hover,
|
|||
a.badge:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
|
||||
.list-group-item.active > .badge,
|
||||
|
@ -6998,7 +6998,7 @@ button.list-group-item-danger.active:focus {
|
|||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
filter: alpha(opacity = 50);
|
||||
opacity: .5;
|
||||
}
|
||||
|
@ -7006,7 +7006,7 @@ button.list-group-item-danger.active:focus {
|
|||
button.close {
|
||||
-webkit-appearance: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
@ -7633,7 +7633,7 @@ button.close {
|
|||
height: 10px;
|
||||
margin: 1px;
|
||||
text-indent: -999px;
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: #000 \9;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 1px solid #fff;
|
||||
|
|
|
@ -293,7 +293,7 @@ input {
|
|||
color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: transparent;
|
||||
color: $g20-white !important;
|
||||
}
|
||||
|
@ -479,7 +479,7 @@ code {
|
|||
&:after { transform: translate(-50%,-50%) rotate(-45deg); }
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
|
@ -528,7 +528,7 @@ $toggle-border: 2px;
|
|||
color 0.25s;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
color: $g14-chromium;
|
||||
background-color: $g4-onyx;
|
||||
}
|
||||
|
@ -616,7 +616,7 @@ $form-static-checkbox-size: 16px;
|
|||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
color: $g20-white;
|
||||
|
||||
&:before {
|
||||
|
@ -693,7 +693,7 @@ $form-static-checkbox-size: 16px;
|
|||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
color: $g20-white;
|
||||
|
||||
&:before {
|
||||
|
@ -731,7 +731,7 @@ $form-static-checkbox-size: 16px;
|
|||
transition: background-color 0.25s ease;
|
||||
}
|
||||
label:hover {
|
||||
cursor: pointer;
|
||||
cursor: $cc-pointer;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
label:after {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
export default function selectStatement(timeBounds, config) {
|
||||
export default function buildInfluxQLQuery(timeBounds, config) {
|
||||
const {groupBy, tags, areTagsAccepted} = config;
|
||||
const {upper, lower} = timeBounds;
|
||||
|