Alex Paxton
GitHub
commit
aecf4ce07c
|
|
@ -60,13 +60,13 @@ const DatabaseList = React.createClass({
|
|||
const {onChooseNamespace, query} = this.props;
|
||||
|
||||
return (
|
||||
<ul className="query-editor__list">
|
||||
<ul className="qeditor--list">
|
||||
{this.state.namespaces.map((namespace) => {
|
||||
const {database, retentionPolicy} = namespace;
|
||||
const isActive = database === query.database && retentionPolicy === query.retentionPolicy;
|
||||
|
||||
return (
|
||||
<li className={classNames('query-editor__list-item query-editor__list-radio', {active: isActive})} key={`${database}..${retentionPolicy}`} onClick={_.wrap(namespace, onChooseNamespace)}>
|
||||
<li className={classNames('qeditor--list-item qeditor--list-radio', {active: isActive})} key={`${database}..${retentionPolicy}`} onClick={_.wrap(namespace, onChooseNamespace)}>
|
||||
{database}.{retentionPolicy}
|
||||
</li>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -80,14 +80,15 @@ const Explorer = React.createClass({
|
|||
|
||||
return (
|
||||
<div className={classNames('explorer', {active: isExpanded})}>
|
||||
<div className="explorer__header" onClick={this.handleSelectExplorer}>
|
||||
<div className="explorer__header-name">
|
||||
<div className="explorer--header" onClick={this.handleSelectExplorer}>
|
||||
<div className="explorer--name">
|
||||
<span className="icon caret-right"></span>
|
||||
{panel.name || "Graph"}
|
||||
</div>
|
||||
<div className="explorer__header-actions">
|
||||
<div title="Rename" className="explorer__header-rename" onClick={this.openRenamePanelModal}><span className="icon pencil"></span></div>
|
||||
<div title="Delete" className="explorer__header-delete" onClick={this.handleDeletePanel}><span className="icon trash"></span></div>
|
||||
<div className="explorer--actions">
|
||||
<div title="Export Queries to Dashboard" className="explorer--action"><span className="icon export"></span></div>
|
||||
<div title="Rename Graph" className="explorer--action" onClick={this.openRenamePanelModal}><span className="icon pencil"></span></div>
|
||||
<div title="Delete Graph" className="explorer--action" onClick={this.handleDeletePanel}><span className="icon trash"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
{this.renderQueryTabList()}
|
||||
|
|
@ -107,7 +108,7 @@ const Explorer = React.createClass({
|
|||
|
||||
if (!query) {
|
||||
return (
|
||||
<div className="query-editor__empty">
|
||||
<div className="qeditor--empty">
|
||||
<h5>This Graph has no Queries</h5>
|
||||
<br/>
|
||||
<div className="btn btn-primary" role="button" onClick={this.handleAddQuery}>Add a Query</div>
|
||||
|
|
@ -129,10 +130,10 @@ const Explorer = React.createClass({
|
|||
if (!this.props.isExpanded) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="explorer__tabs">
|
||||
<div className="explorer--tabs">
|
||||
{this.props.queries.map((q) => {
|
||||
const queryTabText = (q.measurement && q.fields.length !== 0) ? `${q.measurement}.${q.fields[0].field}` : 'Query';
|
||||
return (
|
||||
<QueryTabItem
|
||||
isActive={this.getActiveQuery().id === q.id}
|
||||
|
|
@ -140,10 +141,11 @@ const Explorer = React.createClass({
|
|||
query={q}
|
||||
onSelect={this.handleSetActiveQuery}
|
||||
onDelete={this.handleDeleteQuery}
|
||||
queryTabText={queryTabText}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<div className="explorer__tab" onClick={this.handleAddQuery}>
|
||||
<div className="explorer--tab" onClick={this.handleAddQuery}>
|
||||
<span className="icon plus"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -74,9 +74,11 @@ const FieldList = React.createClass({
|
|||
<div>
|
||||
{
|
||||
hasAggregates ?
|
||||
<div className="query-editor__list-header group-by-time">
|
||||
<div className="group-by-time-dropdown-label">Group by Time:</div>
|
||||
<GroupByTimeDropdown isOpen={!hasGroupByTime} selected={query.groupBy.time} onChooseGroupByTime={this.handleGroupByTime} />
|
||||
<div className="qeditor--list-header">
|
||||
<div className="group-by-time">
|
||||
<p>Group by Time</p>
|
||||
<GroupByTimeDropdown isOpen={!hasGroupByTime} selected={query.groupBy.time} onChooseGroupByTime={this.handleGroupByTime} />
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
|
@ -88,10 +90,10 @@ const FieldList = React.createClass({
|
|||
renderList() {
|
||||
const {database, measurement} = this.props.query;
|
||||
if (!database || !measurement) {
|
||||
return <div className="query-editor__empty">No measurement selected.</div>;
|
||||
return <div className="qeditor--empty">No <strong>Measurement</strong> selected</div>;
|
||||
}
|
||||
|
||||
return (<ul className="query-editor__list">
|
||||
return (<ul className="qeditor--list">
|
||||
{this.state.fields.map((fieldFunc) => {
|
||||
const selectedField = this.props.query.fields.find((f) => f.field === fieldFunc.field);
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@ const FieldListItem = React.createClass({
|
|||
});
|
||||
|
||||
return (
|
||||
<li className={classNames("query-editor__list-item query-editor__list-checkbox", {checked: isSelected})} key={fieldFunc} onClick={_.wrap(fieldFunc, this.handleToggleField)}>
|
||||
<span className="query-editor__list-checkbox__checkbox">{fieldText}</span>
|
||||
<div className="query-editor__hidden-dropdown">
|
||||
<li className={classNames("qeditor--list-item qeditor--list-checkbox", {checked: isSelected})} key={fieldFunc} onClick={_.wrap(fieldFunc, this.handleToggleField)}>
|
||||
<span className="qeditor--list-checkbox__checkbox">{fieldText}</span>
|
||||
<div className="qeditor--hidden-dropdown">
|
||||
{
|
||||
isKapacitorRule ?
|
||||
<Dropdown items={items} onChoose={this.handleApplyFunctions} selected={fieldFunc.funcs.length ? fieldFunc.funcs[0] : 'Select a function'} /> :
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@ const GroupByTimeDropdown = React.createClass({
|
|||
<ul className={classNames("dropdown-menu", {show: isOpen})} aria-labelledby="group-by-dropdown">
|
||||
{groupByTimeOptions.map((groupBy) => {
|
||||
return (
|
||||
<li className="dropdown-option"
|
||||
key={groupBy.menuOption}>
|
||||
<li key={groupBy.menuOption}>
|
||||
<a href="#" onClick={() => onChooseGroupByTime(groupBy)}>
|
||||
{groupBy.menuOption}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -69,11 +69,11 @@ const MeasurementList = React.createClass({
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="measurement-list">
|
||||
<div className="query-editor__list-header">
|
||||
<input className="query-editor__filter" ref="filterText" placeholder="Filter Measurements..." type="text" value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} />
|
||||
<div>
|
||||
{this.props.query.database ? <div className="qeditor--list-header">
|
||||
<input className="qeditor--filter" ref="filterText" placeholder="Filter Measurements..." type="text" value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} />
|
||||
<span className="icon search"></span>
|
||||
</div>
|
||||
</div> : null }
|
||||
{this.renderList()}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -81,17 +81,17 @@ const MeasurementList = React.createClass({
|
|||
|
||||
renderList() {
|
||||
if (!this.props.query.database) {
|
||||
return <div className="query-editor__empty">No database selected.</div>;
|
||||
return <div className="qeditor--empty">No <strong>Database</strong> selected</div>;
|
||||
}
|
||||
|
||||
const measurements = this.state.measurements.filter((m) => m.match(this.state.filterText));
|
||||
|
||||
return (
|
||||
<ul className="query-editor__list">
|
||||
<ul className="qeditor--list">
|
||||
{measurements.map((measurement) => {
|
||||
const isActive = measurement === this.props.query.measurement;
|
||||
return (
|
||||
<li className={classNames('query-editor__list-item query-editor__list-radio', {active: isActive})} key={measurement} onClick={_.wrap(measurement, this.props.onChooseMeasurement)}>{measurement}</li>
|
||||
<li className={classNames('qeditor--list-item qeditor--list-radio', {active: isActive})} key={measurement} onClick={_.wrap(measurement, this.props.onChooseMeasurement)}>{measurement}</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -63,16 +63,18 @@ const MultiSelectDropdown = React.createClass({
|
|||
|
||||
render() {
|
||||
const {localSelectedItems} = this.state;
|
||||
const {isOpen} = this.state;
|
||||
const labelText = isOpen ? "0 Selected" : "Apply Function";
|
||||
|
||||
return (
|
||||
<div className="dropdown multi-select-dropdown">
|
||||
<div onClick={this.toggleMenu} className="btn btn-xs btn-info dropdown-toggle multi-select-dropdown__toggle" type="button">
|
||||
<div className={classNames('dropdown multi-select-dropdown', {open: isOpen})}>
|
||||
<div onClick={this.toggleMenu} className="btn btn-xs btn-info dropdown-toggle" type="button">
|
||||
<span className="multi-select-dropdown__label">
|
||||
{
|
||||
localSelectedItems.length ? localSelectedItems.map((s) => s).join(', ') : 'Apply Function'
|
||||
localSelectedItems.length ? localSelectedItems.map((s) => s).join(', ') : labelText
|
||||
}
|
||||
</span>
|
||||
<span className="caret multi-select-dropdown__caret"></span>
|
||||
<span className="caret"></span>
|
||||
</div>
|
||||
{this.renderMenu()}
|
||||
</div>
|
||||
|
|
@ -81,14 +83,12 @@ const MultiSelectDropdown = React.createClass({
|
|||
|
||||
renderMenu() {
|
||||
const {items} = this.props;
|
||||
const {isOpen} = this.state;
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dropdown-options">
|
||||
<li className="multi-select-dropdown__apply" onClick={this.onApplyFunctions}>
|
||||
<div className="btn btn-xs btn-info btn-block">Apply</div>
|
||||
</li>
|
||||
<ul className="dropdown-menu multi-select-dropdown__menu" aria-labelledby="dropdownMenu1">
|
||||
{items.map((listItem, i) => {
|
||||
return (
|
||||
|
|
@ -97,9 +97,6 @@ const MultiSelectDropdown = React.createClass({
|
|||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="multi-select-dropdown__apply" onClick={this.onApplyFunctions}>
|
||||
<div className="btn btn-sm btn-primary btn-block">Apply</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -35,14 +35,12 @@ const PanelBuilder = React.createClass({
|
|||
|
||||
return (
|
||||
<div className="panel-builder" style={{width}}>
|
||||
<div className="panel-builder__tab-content">
|
||||
<div className="panel-builder__item btn btn-block btn-primary" onClick={this.handleCreateExploer}><span className="icon graphline"></span> Create Graph</div>
|
||||
<ExplorerList
|
||||
actions={actions}
|
||||
setActivePanel={this.props.setActivePanel}
|
||||
activePanelID={this.props.activePanelID}
|
||||
/>
|
||||
</div>
|
||||
<div className="btn btn-block btn-primary" onClick={this.handleCreateExploer}><span className="icon graphline"></span> Create Graph</div>
|
||||
<ExplorerList
|
||||
actions={actions}
|
||||
setActivePanel={this.props.setActivePanel}
|
||||
activePanelID={this.props.activePanelID}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -96,8 +96,8 @@ const QueryEditor = React.createClass({
|
|||
const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
|
||||
|
||||
return (
|
||||
<div className="query-editor">
|
||||
<div className="query-editor__code">
|
||||
<div className="explorer--tab-contents">
|
||||
<div className="qeditor--query-preview">
|
||||
<pre className={classNames("", {"rq-mode": query.rawText})}><code>{statement}</code></pre>
|
||||
</div>
|
||||
{this.renderEditor()}
|
||||
|
|
@ -108,7 +108,7 @@ const QueryEditor = React.createClass({
|
|||
renderEditor() {
|
||||
if (this.props.query.rawText) {
|
||||
return (
|
||||
<div className="generic-empty-state query-editor-empty-state">
|
||||
<div className="qeditor--empty">
|
||||
<p className="margin-bottom-zero">
|
||||
<span className="icon alert-triangle"></span>
|
||||
Only editable in the <strong>Raw Query</strong> tab.
|
||||
|
|
@ -120,12 +120,12 @@ const QueryEditor = React.createClass({
|
|||
const {activeTab} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<div className="query-editor__tabs">
|
||||
<div className="query-editor__tabs-heading">Schema Explorer</div>
|
||||
<div onClick={_.wrap(DB_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === DB_TAB})}>Databases</div>
|
||||
<div onClick={_.wrap(MEASUREMENTS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === MEASUREMENTS_TAB})}>Measurements</div>
|
||||
<div onClick={_.wrap(FIELDS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === FIELDS_TAB})}>Fields</div>
|
||||
<div onClick={_.wrap(TAGS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === TAGS_TAB})}>Tags</div>
|
||||
<div className="qeditor--tabs">
|
||||
<div className="qeditor--tabs-heading">Schema Explorer</div>
|
||||
<div onClick={_.wrap(DB_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === DB_TAB})}>Databases</div>
|
||||
<div onClick={_.wrap(MEASUREMENTS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === MEASUREMENTS_TAB})}>Measurements</div>
|
||||
<div onClick={_.wrap(FIELDS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === FIELDS_TAB})}>Fields</div>
|
||||
<div onClick={_.wrap(TAGS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === TAGS_TAB})}>Tags</div>
|
||||
</div>
|
||||
{this.renderList()}
|
||||
</div>
|
||||
|
|
@ -169,7 +169,7 @@ const QueryEditor = React.createClass({
|
|||
/>
|
||||
);
|
||||
default:
|
||||
return <ul className="query-editor__list"></ul>;
|
||||
return <ul className="qeditor--list"></ul>;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const QueryTabItem = React.createClass({
|
|||
}).isRequired,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
queryTabText: PropTypes.string,
|
||||
},
|
||||
|
||||
handleSelect() {
|
||||
|
|
@ -22,8 +23,9 @@ const QueryTabItem = React.createClass({
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className={classNames('explorer__tab', {active: this.props.isActive})} onClick={this.handleSelect}>
|
||||
{this.props.query.rawText ? 'Raw Query' : 'Query'} <span className="explorer__tab-delete" onClick={this.handleDelete}><span className="icon remove"></span></span>
|
||||
<div className={classNames('explorer--tab', {active: this.props.isActive})} onClick={this.handleSelect}>
|
||||
<span className="explorer--tab-label">{this.props.query.rawText ? 'Raw Text' : this.props.queryTabText}</span>
|
||||
<span className="explorer--tab-delete" onClick={this.handleDelete}></span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -71,12 +71,12 @@ const TagList = React.createClass({
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className="query-editor__list-header">
|
||||
<div className="tag-list__toggle">
|
||||
<div onClick={this.handleAcceptReject} className={cx("tag-list__toggle-btn", {active: query.areTagsAccepted})}>Accept</div>
|
||||
<div onClick={this.handleAcceptReject} className={cx("tag-list__toggle-btn", {active: !query.areTagsAccepted})}>Reject</div>
|
||||
{(!query.database || !query.measurement || !query.retentionPolicy) ? null : <div className="qeditor--list-header">
|
||||
<div className="toggle toggle-sm">
|
||||
<div onClick={this.handleAcceptReject} className={cx("toggle-btn", {active: query.areTagsAccepted})}>Accept</div>
|
||||
<div onClick={this.handleAcceptReject} className={cx("toggle-btn", {active: !query.areTagsAccepted})}>Reject</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
{this.renderList()}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -85,11 +85,11 @@ const TagList = React.createClass({
|
|||
renderList() {
|
||||
const {database, measurement, retentionPolicy} = this.props.query;
|
||||
if (!database || !measurement || !retentionPolicy) {
|
||||
return <div className="query-editor__empty">No measurement selected.</div>;
|
||||
return <div className="qeditor--empty">No <strong>Measurement</strong> selected</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="query-editor__list">
|
||||
<ul className="qeditor--list">
|
||||
{_.map(this.state.tags, (tagValues, tagKey) => {
|
||||
return (
|
||||
<TagListItem
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const TagListItem = React.createClass({
|
|||
</div>
|
||||
<ul className="tag-value-list">
|
||||
{filtered.map((v) => {
|
||||
const cx = classNames('tag-value-list__item query-editor__list-item', {active: selectedTagValues.indexOf(v) > -1});
|
||||
const cx = classNames('tag-value-list__item qeditor--list-item', {active: selectedTagValues.indexOf(v) > -1});
|
||||
return (
|
||||
<li className={cx} onClick={_.wrap(v, this.handleChoose)} key={v}>
|
||||
<div className="tag-value-list__checkbox"></div>
|
||||
|
|
@ -81,7 +81,7 @@ const TagListItem = React.createClass({
|
|||
},
|
||||
|
||||
render() {
|
||||
const itemClasses = classNames("query-editor__list-item tag-list__item", {open: this.state.isOpen});
|
||||
const itemClasses = classNames("qeditor--list-item tag-list__item", {open: this.state.isOpen});
|
||||
return (
|
||||
<div>
|
||||
<li className={itemClasses} onClick={this.handleClickKey}>
|
||||
|
|
|
|||
|
|
@ -60,19 +60,19 @@ const Visualization = React.createClass({
|
|||
const autoRefreshMs = 10000;
|
||||
|
||||
return (
|
||||
<div ref={(p) => this.panel = p} className={classNames("graph-panel", {active: isActive})}>
|
||||
<div className="graph-panel__bar">
|
||||
<div className="graph-panel__title">
|
||||
{/* <span className="icon caret-right"></span> */}{name || "Graph"}
|
||||
<div ref={(p) => this.panel = p} className={classNames("graph", {active: isActive})}>
|
||||
<div className="graph-heading">
|
||||
<div className="graph-title">
|
||||
{name || "Graph"}
|
||||
</div>
|
||||
<div className="graph-panel__left">
|
||||
<ul className="graph-panel__tabs">
|
||||
<li onClick={this.handleToggleView} className={classNames("graph-panel__tab", {active: isGraphInView})}>Graph</li>
|
||||
<li onClick={this.handleToggleView} className={classNames("graph-panel__tab", {active: !isGraphInView})}>Table</li>
|
||||
<div className="graph-actions">
|
||||
<ul className="toggle toggle-sm">
|
||||
<li onClick={this.handleToggleView} className={classNames("toggle-btn ", {active: isGraphInView})}>Graph</li>
|
||||
<li onClick={this.handleToggleView} className={classNames("toggle-btn ", {active: !isGraphInView})}>Table</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="graph-panel__graph-container">
|
||||
<div className="graph-container">
|
||||
{isGraphInView ? (
|
||||
<RefreshingLineGraph
|
||||
queries={queries}
|
||||
|
|
|
|||
|
|
@ -112,26 +112,28 @@ const Header = React.createClass({
|
|||
{text: 'Delete', icon: 'trash', target: '#deleteExplorerModal', handler: this.openDeleteExplorerModal},
|
||||
];
|
||||
return (
|
||||
<div className="page-header data-explorer__header">
|
||||
<div className="page-header__left">
|
||||
<h1>Explorer</h1>
|
||||
</div>
|
||||
<div className="page-header__right">
|
||||
<h1>Session:</h1>
|
||||
<Dropdown
|
||||
className="sessions-dropdown"
|
||||
items={dropdownItems}
|
||||
actions={dropdownActions}
|
||||
onChoose={this.handleChooseExplorer}
|
||||
selected={this.getName(selectedExplorer)}
|
||||
/>
|
||||
<div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New</div>
|
||||
<h1>Source:</h1>
|
||||
<div className="source-indicator">
|
||||
<span className="icon cpu"></span>
|
||||
{this.context.source.name}
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>Explorer</h1>
|
||||
</div>
|
||||
<div className="page-header__right">
|
||||
<h1>Session:</h1>
|
||||
<Dropdown
|
||||
className="sessions-dropdown"
|
||||
items={dropdownItems}
|
||||
actions={dropdownActions}
|
||||
onChoose={this.handleChooseExplorer}
|
||||
selected={this.getName(selectedExplorer)}
|
||||
/>
|
||||
<div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New</div>
|
||||
<h1>Source:</h1>
|
||||
<div className="source-indicator">
|
||||
<span className="icon cpu"></span>
|
||||
{this.context.source.name}
|
||||
</div>
|
||||
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
|
||||
</div>
|
||||
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
|
||||
</div>
|
||||
<DeleteExplorerModal onConfirm={this.confirmDeleteExplorer} />
|
||||
<EditExplorerModal onConfirm={this.confirmEditExplorer} />
|
||||
|
|
|
|||
|
|
@ -115,8 +115,8 @@ export default function AutoRefresh(ComposedComponent) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="graph-panel__graph-empty">
|
||||
<h3 className="deluxe">No results</h3>
|
||||
<div className="graph-empty">
|
||||
<p>No Results</p>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ export const LayoutRenderer = React.createClass({
|
|||
return (
|
||||
<div key={cell.i}>
|
||||
<h2 className="hosts-graph-heading">{cell.name}</h2>
|
||||
<div className="hosts-graph graph-panel__graph-container">
|
||||
<div className="hosts-graph graph-container">
|
||||
<RefreshingSingleStat queries={[qs[0]]} autoRefresh={autoRefreshMs} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,7 +107,7 @@ export const LayoutRenderer = React.createClass({
|
|||
return (
|
||||
<div key={cell.i}>
|
||||
<h2 className="hosts-graph-heading">{cell.name}</h2>
|
||||
<div className="hosts-graph graph-panel__graph-container">
|
||||
<div className="hosts-graph graph-container">
|
||||
<RefreshingLineGraph queries={qs} autoRefresh={autoRefreshMs} showSingleStat={cell.type === "line-plus-single-stat"} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@ export default React.createClass({
|
|||
// If data for this graph is being fetched for the first time, show a graph-wide spinner.
|
||||
if (isFetchingInitially) {
|
||||
return (
|
||||
<div className="graph-panel__graph-fetching">
|
||||
<h3 className="graph-panel__spinner" />
|
||||
<div className="graph-fetching">
|
||||
<h3 className="graph-spinner" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const ResizeContainer = React.createClass({
|
|||
const handle = <ResizeHandle isDragging={isDragging} onHandleStartDrag={this.handleStartDrag} />;
|
||||
|
||||
return (
|
||||
<div className="resize-container main-content" onMouseLeave={this.handleMouseLeave} onMouseUp={this.handleStopDrag} onMouseMove={this.handleDrag} ref="resizeContainer" >
|
||||
<div className="resize-container page-contents" onMouseLeave={this.handleMouseLeave} onMouseUp={this.handleStopDrag} onMouseMove={this.handleDrag} ref="resizeContainer" >
|
||||
{left}
|
||||
{handle}
|
||||
{right}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.main {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
$group-by-time-dropdown-width: 7em;
|
||||
|
|
@ -1,143 +1,180 @@
|
|||
.explorer {
|
||||
display: block;
|
||||
background-color: $g6-smoke;
|
||||
border-radius: $radius;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
background-color: $g3-castle;
|
||||
border-radius: $radius;
|
||||
margin-bottom: 6px;
|
||||
transition: background-color 0.25s ease;
|
||||
|
||||
&__header {
|
||||
background-color: $g6-smoke;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
height: 3em;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
border-radius: $radius;
|
||||
&:hover {
|
||||
background-color: $g4-onyx;
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: $g13-mist;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
transition: color 0.25s ease;
|
||||
// For when an explorer item is open
|
||||
&.active {
|
||||
background-color: $g4-onyx;
|
||||
.explorer__header {
|
||||
&-name {
|
||||
color: $g20-white;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(0deg);
|
||||
font-size: 0.75em;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
&-delete,
|
||||
&-rename {
|
||||
color: $g9-mountain;
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
&-delete:hover {
|
||||
color: $c-dreamsicle;
|
||||
}
|
||||
&-rename:hover {
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
|
||||
// For when an explorer item is open
|
||||
&.active {
|
||||
.explorer__header {
|
||||
&-name {
|
||||
color: $g20-white;
|
||||
font-weight: 600;
|
||||
|
||||
.icon {
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
&__tabs {
|
||||
display: flex;
|
||||
background-color: $g6-smoke;
|
||||
padding: 2px 1em 0 1em;
|
||||
}
|
||||
&__tab {
|
||||
white-space: nowrap;
|
||||
color: $g13-mist;
|
||||
background: $g7-graphite;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 2px;
|
||||
border-radius: $radius $radius 0 0;
|
||||
cursor: pointer;
|
||||
padding: 0 8px 0 8px;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
|
||||
&.active {
|
||||
background: $g8-storm;
|
||||
color: $g18-cloud;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> span.icon.plus {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $g18-cloud;
|
||||
background-color: $g8-storm;
|
||||
}
|
||||
|
||||
&-delete {
|
||||
right: -2px;
|
||||
font-size: 10px;
|
||||
margin-left: 0px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
position: relative;
|
||||
color: $g10-wolf;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
|
||||
span.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-54%,-50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $c-dreamsicle;
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Explorer Header Bar
|
||||
.explorer--header {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
padding: 0 11px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: $radius;
|
||||
}
|
||||
.explorer--name {
|
||||
color: $g13-mist;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
transition: color 0.25s ease;
|
||||
|
||||
.icon.caret-right {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(0deg);
|
||||
font-size: 0.75em;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $g17-whisper;
|
||||
}
|
||||
}
|
||||
.explorer--actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.explorer--action {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: $g9-mountain;
|
||||
margin-left: 2px;
|
||||
transition: color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $g18-cloud;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.explorer--tabs {
|
||||
display: flex;
|
||||
background-color: $g4-onyx;
|
||||
padding: 0 11px;
|
||||
}
|
||||
.explorer--tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $g11-sidewalk;
|
||||
background: $g5-pepper;
|
||||
height: 28px;
|
||||
margin-right: 2px;
|
||||
border-radius: $radius $radius 0 0;
|
||||
cursor: pointer;
|
||||
padding: 0 8px 0 8px;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
color: $g18-cloud;
|
||||
background-color: $g6-smoke;
|
||||
}
|
||||
&.active {
|
||||
background: $g6-smoke;
|
||||
color: $g15-platinum;
|
||||
}
|
||||
|
||||
> span.icon.plus {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&-delete {
|
||||
margin: 0 -4px 0 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background-color: $g8-storm;
|
||||
transition:
|
||||
background-color 0.25s ease;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
&:before {
|
||||
transform: translate(-50%,-50%) rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: translate(-50%,-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: $c-dreamsicle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.explorer--tab-label {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 177px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/*
|
||||
Tab Contents
|
||||
-------------------------------------------
|
||||
*/
|
||||
.explorer--tab-contents {
|
||||
padding: 6px;
|
||||
background-color: $g6-smoke;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
}
|
||||
|
||||
|
||||
/* Time Range Selector */
|
||||
.time-range-dropdown {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
|
||||
.dropdown-toggle {
|
||||
width: 160px;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.explorer__header-actions {
|
||||
|
|
@ -149,7 +186,7 @@
|
|||
}
|
||||
|
||||
.alert.alert-rawquery {
|
||||
border-color: $g5-pepper;
|
||||
border-color: $g6-smoke;
|
||||
color: $g12-forge;
|
||||
border-color: $g5-pepper;
|
||||
border-color: $g6-smoke;
|
||||
color: $g12-forge;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
.group-by-time-dropdown .dropdown-toggle {
|
||||
width: 70px;
|
||||
}
|
||||
.group-by-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
padding: 0 6px;
|
||||
margin: 0;
|
||||
height: 30px;
|
||||
line-height: 26px;
|
||||
font-size: 13px;
|
||||
color: $g11-sidewalk;
|
||||
font-weight: 500;
|
||||
border-radius: 3px 0 0 3px;
|
||||
border-style: solid;
|
||||
border-color: $g5-pepper;
|
||||
border-width: 2px;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
border-radius: 0px 3px 3px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,9 +10,6 @@
|
|||
margin: 0 16px 0 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.group-by-time-dropdown .dropdown-toggle {
|
||||
width: $group-by-time-dropdown-width;
|
||||
}
|
||||
.source-indicator {
|
||||
padding: 0 9px;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,57 @@
|
|||
.multi-select-dropdown {
|
||||
&__menu {
|
||||
display: block !important;
|
||||
}
|
||||
&__toggle {
|
||||
display: block !important;
|
||||
width: 14em;
|
||||
}
|
||||
&__label {
|
||||
text-overflow: ellipsis;
|
||||
width: 85%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
&__caret {
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.dropdown-toggle {
|
||||
width: 150px;
|
||||
}
|
||||
&__apply {
|
||||
margin: 10px 0 0 0;
|
||||
margin: 0;
|
||||
transition:
|
||||
opacity 0.25s ease;
|
||||
opacity: 0;
|
||||
@include gradient-h($c-ocean, $c-pool);
|
||||
border-radius: 3px 3px 0 0;
|
||||
padding: 9px;
|
||||
|
||||
& + .dropdown-menu {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
opacity: 0;
|
||||
display: block !important;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.dropdown-options {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
transition-property: all;
|
||||
}
|
||||
/* Styling Active State of items */
|
||||
.dropdown-menu > li.active > a {
|
||||
outline: none;
|
||||
&,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus {
|
||||
color: $g20-white !important;
|
||||
background: $c-sapphire;
|
||||
background: -moz-linear-gradient(left, $c-sapphire 0%, $c-pool 100%) !important;
|
||||
background: -webkit-linear-gradient(left, $c-sapphire 0%,$c-pool 100%) !important;
|
||||
background: linear-gradient(to right, $c-sapphire 0%,$c-pool 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$c-sapphire', endColorstr='$c-pool',GradientType=1 ) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Open State */
|
||||
.multi-select-dropdown.open {
|
||||
.dropdown-options {
|
||||
visibility: visible;
|
||||
}
|
||||
.dropdown-menu,
|
||||
.multi-select-dropdown__apply {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,12 @@
|
|||
.panel-builder {
|
||||
width: 399px;
|
||||
overflow-x: hidden;
|
||||
background: $g1-raven;
|
||||
background: -moz-linear-gradient(top, $g5-pepper 0%, $g1-raven 100%);
|
||||
background: -webkit-linear-gradient(top, $g5-pepper 0%,$g1-raven 100%);
|
||||
background: linear-gradient(to bottom, $g5-pepper 0%,$g1-raven 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g5-pepper', endColorstr='$g1-raven',GradientType=0 );
|
||||
padding: $explorer-page-padding;
|
||||
@include gradient-v($g2-kevlar,$g0-obsidian);
|
||||
@include custom-scrollbar($g2-kevlar,$c-pool);
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
padding: $explorer-page-padding $explorer-page-padding 0 $explorer-page-padding;
|
||||
background: $g3-castle;
|
||||
}
|
||||
&__tab {
|
||||
padding: 18px 0 9px 0px;
|
||||
flex: 1;
|
||||
background: $g3-castle;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: $g12-forge;
|
||||
line-height: calc(60px - $explorer-page-padding - 2px);
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
color: $g20-white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $g5-pepper;
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
&__tab-content {
|
||||
padding: $explorer-page-padding;
|
||||
}
|
||||
&__item {
|
||||
> .btn {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,108 +1,53 @@
|
|||
.checkbox.checked {
|
||||
background-color: gainsboro !important;
|
||||
}
|
||||
/*
|
||||
|
||||
Query Editor Styles
|
||||
-------------------------------------------------
|
||||
Abbreviated as "qeditor"
|
||||
|
||||
*/
|
||||
$query-editor-gutter: 16px;
|
||||
$query-editor-tab-inactive: $g5-pepper;
|
||||
$query-editor-tab-active: $g6-smoke;
|
||||
$query-editor-height: 35vh;
|
||||
$query-editor-tab-inactive: $g2-kevlar;
|
||||
$query-editor-tab-active: $g3-castle;
|
||||
$query-editor-height: 250px;
|
||||
|
||||
.query-editor {
|
||||
padding: 0.5em;
|
||||
background-color: $g8-storm;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
.qeditor--query-preview {
|
||||
position: relative;
|
||||
|
||||
&__code {
|
||||
position: relative;
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
border: 0;
|
||||
background-color: $query-editor-tab-inactive;
|
||||
font-weight: 600;
|
||||
color: $c-comet;
|
||||
border-radius: $radius-small $radius-small 0 0;
|
||||
border-bottom: 2px solid $g6-smoke;
|
||||
margin-bottom: 0;
|
||||
overflow: auto;
|
||||
min-height: 3.25em;
|
||||
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
// Custom Scrollbar styles, pretty sure these only work in chrome
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
border-top-right-radius: $radius;
|
||||
|
||||
&-button {
|
||||
background-color: $query-editor-tab-inactive;
|
||||
}
|
||||
&-track {
|
||||
background-color: $query-editor-tab-inactive;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
&-track-piece {
|
||||
background-color: $query-editor-tab-inactive;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
&-thumb {
|
||||
background-color: $c-comet;
|
||||
border: 4px solid $query-editor-tab-inactive;
|
||||
border-radius: 7px;
|
||||
}
|
||||
&-corner {
|
||||
background-color: $query-editor-tab-inactive;
|
||||
}
|
||||
}
|
||||
&::-webkit-resizer {
|
||||
background-color: $query-editor-tab-inactive;
|
||||
}
|
||||
|
||||
&.rq-mode {
|
||||
color: $c-honeydew;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $c-honeydew;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs for switching between queries
|
||||
&__tab {
|
||||
text-align: center;
|
||||
pre {
|
||||
padding: 9px;
|
||||
white-space: pre-wrap;
|
||||
border: 0;
|
||||
background-color: $query-editor-tab-inactive;
|
||||
color: $g13-mist;
|
||||
height: 30px;
|
||||
padding: 0 9.5px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $c-comet;
|
||||
border-radius: $radius-small $radius-small 0 0;
|
||||
margin-right: 2px;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
border-bottom: 2px solid $query-editor-tab-active;
|
||||
margin-bottom: 0;
|
||||
overflow: auto;
|
||||
min-height: 3.25em;
|
||||
@include custom-scrollbar($query-editor-tab-inactive, $c-pool);
|
||||
|
||||
&.active {
|
||||
background-color: $query-editor-tab-active;
|
||||
color: $g20-white;
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $g20-white;
|
||||
&.rq-mode {
|
||||
color: $c-rainforest;
|
||||
@include custom-scrollbar($query-editor-tab-inactive, $c-rainforest);
|
||||
}
|
||||
}
|
||||
&__tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 9.5px 0 9.5px;
|
||||
background-color: $query-editor-tab-inactive;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&__tabs-heading {
|
||||
}
|
||||
// Tabs for switching between queries
|
||||
.qeditor--tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 9px 0 9px;
|
||||
background-color: $query-editor-tab-inactive;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-heading {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
|
|
@ -112,392 +57,205 @@ $query-editor-height: 35vh;
|
|||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
}
|
||||
.qeditor--tab {
|
||||
text-align: center;
|
||||
background-color: $query-editor-tab-inactive;
|
||||
color: $g13-mist;
|
||||
height: 28px;
|
||||
padding: 0 9px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: $radius-small $radius-small 0 0;
|
||||
margin-right: 2px;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
|
||||
// List of options
|
||||
&__list {
|
||||
margin: 0;
|
||||
padding: 9.5px 0 0 0;
|
||||
background-color: $g6-smoke;
|
||||
border-radius: 0 0 $radius-small $radius-small;
|
||||
min-height: $query-editor-height;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
|
||||
// Custom Scrollbar styles, pretty sure these only work in chrome
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
border-bottom-right-radius: $radius;
|
||||
|
||||
&-button {
|
||||
background-color: $g6-smoke;
|
||||
}
|
||||
&-track {
|
||||
background-color: $g6-smoke;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
&-track-piece {
|
||||
background-color: $g5-pepper;
|
||||
border: 4px solid $g6-smoke;
|
||||
border-radius: 7px;
|
||||
}
|
||||
&-thumb {
|
||||
background-color: $g8-storm;
|
||||
border: 4px solid $g6-smoke;
|
||||
border-radius: 7px;
|
||||
}
|
||||
&-corner {
|
||||
background-color: $g6-smoke;
|
||||
}
|
||||
}
|
||||
&::-webkit-resizer {
|
||||
background-color: $g6-smoke;
|
||||
}
|
||||
|
||||
&-item {
|
||||
color: $g13-mist;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
padding: 4px 9.5px 4px 19px;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $g7-graphite;
|
||||
color: $g20-white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&-radio {
|
||||
&.active {
|
||||
color: $g20-white;
|
||||
background-color: $g7-graphite;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&.checked {
|
||||
color: $g20-white;
|
||||
font-weight: 600;
|
||||
|
||||
// Animate checked state
|
||||
.query-editor__list-checkbox__checkbox {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(0.4,0.4);
|
||||
}
|
||||
}
|
||||
// Fade in & out dropdowns when checked
|
||||
.query-editor__hidden-dropdown {
|
||||
visibility: visible;
|
||||
|
||||
.dropdown {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.btn.dropdown-toggle {
|
||||
text-align: left;
|
||||
background-color: $g5-pepper;
|
||||
border-color: $g5-pepper;
|
||||
color: $g13-mist !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $g6-smoke;
|
||||
border-color: $g6-smoke;
|
||||
color: $g20-white !important;
|
||||
}
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:active:focus,
|
||||
&.active {
|
||||
color: $g20-white !important;
|
||||
background-color: $g7-graphite;
|
||||
border-color: $g6-smoke;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: $g5-pepper;
|
||||
|
||||
li {
|
||||
margin-bottom: 2px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
li > a {
|
||||
font-size: 13px;
|
||||
padding-left: 31px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: $g6-smoke;
|
||||
}
|
||||
// Checkbox background
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 5px;
|
||||
transform: translateY(-50%);
|
||||
background-color: $g4-onyx;
|
||||
border-radius: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: 1;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
// Checkbox check
|
||||
&:before {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 13px;
|
||||
transform: translate(-50%,-50%);
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 2;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
}
|
||||
li.active > a {
|
||||
background: none;
|
||||
background-color: $g7-graphite;
|
||||
|
||||
// Checkbox background
|
||||
&:after {
|
||||
background-color: $g6-smoke;
|
||||
}
|
||||
// Checkbox check
|
||||
&:before {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(0.4,0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
|
||||
&:before {
|
||||
z-index: 2;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
transform 0.25s ease,
|
||||
opacity 0.25s ease;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $g5-pepper;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
position: relative;
|
||||
background-color: $g6-smoke;
|
||||
padding: 9.5px 19px 0px 19px;
|
||||
}
|
||||
}
|
||||
|
||||
// List empty state
|
||||
&__empty {
|
||||
text-align: center;
|
||||
color: $g13-mist;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 18px 0;
|
||||
min-height: $query-editor-height;
|
||||
max-height: 80vh;
|
||||
background-color: $g7-graphite;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
}
|
||||
|
||||
// Hidden dropdowns
|
||||
&__hidden-dropdown {
|
||||
visibility: hidden;
|
||||
transition: all 0.3s all;
|
||||
|
||||
.dropdown {
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter list results
|
||||
&__filter {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
background-color: $g5-pepper;
|
||||
border: 2px solid $g5-pepper;
|
||||
color: $g13-mist;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
font-size: 13px;
|
||||
padding-left: 38px;
|
||||
outline: none;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $g20-white;
|
||||
font-weight: 700;
|
||||
}
|
||||
&.active {
|
||||
background-color: $query-editor-tab-active;
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
|
||||
// List of options
|
||||
.qeditor--list {
|
||||
margin: 0;
|
||||
padding: 9.5px 0 0 0;
|
||||
background-color: $query-editor-tab-active;
|
||||
border-radius: 0 0 $radius-small $radius-small;
|
||||
min-height: $query-editor-height;
|
||||
|
||||
&-item {
|
||||
color: $g11-sidewalk;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
padding: 4px 9px 4px 18px;
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
|
||||
&:focus {
|
||||
border-color: $c-pool;
|
||||
& + .icon {
|
||||
color: $g20-white;
|
||||
&:hover {
|
||||
background-color: $g4-onyx;
|
||||
color: $g17-whisper;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&-radio {
|
||||
&.active {
|
||||
color: $g20-white;
|
||||
background-color: $g4-onyx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&.checked {
|
||||
color: $g20-white;
|
||||
font-weight: 600;
|
||||
|
||||
// Animate checked state
|
||||
.qeditor--list-checkbox__checkbox {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(0.4,0.4);
|
||||
}
|
||||
}
|
||||
// Fade in & out dropdowns when checked
|
||||
.qeditor--hidden-dropdown {
|
||||
visibility: visible;
|
||||
|
||||
.dropdown {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: $g10-wolf;
|
||||
font-weight: 500;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 18- */
|
||||
color: $g10-wolf;
|
||||
font-weight: 500;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: $g10-wolf;
|
||||
font-weight: 500;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: $g10-wolf;
|
||||
font-weight: 500;
|
||||
}
|
||||
+ .icon {
|
||||
position: absolute;
|
||||
top: calc(50% + 5px);
|
||||
left: calc(19px * 2);
|
||||
transform: translateY(-50%);
|
||||
color: $g10-wolf;
|
||||
transition: color 0.25s ease;
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
|
||||
&__checkbox {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
|
||||
&:before {
|
||||
z-index: 2;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
transform 0.25s ease,
|
||||
opacity 0.25s ease;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $g2-kevlar;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
position: relative;
|
||||
background-color: $query-editor-tab-active;
|
||||
padding: 8px 18px 0px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// Warning for converting to raw query
|
||||
&__warning {
|
||||
// List empty state
|
||||
.qeditor--empty {
|
||||
text-align: center;
|
||||
color: $g10-wolf;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 18px 0;
|
||||
height: $query-editor-height;
|
||||
background-color: $query-editor-tab-active;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
}
|
||||
|
||||
// Hidden dropdowns
|
||||
.qeditor--hidden-dropdown {
|
||||
visibility: hidden;
|
||||
transition: all 0.3s all;
|
||||
|
||||
.dropdown {
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(56,56,70,0.8);
|
||||
z-index: 999;
|
||||
border-radius: $radius-small $radius-small 0 0;
|
||||
border-bottom: 2px solid $g6-smoke;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&.active {
|
||||
background-color: gainsboro !important;
|
||||
}
|
||||
}
|
||||
|
||||
.group-by-time {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.group-by-time-dropdown {
|
||||
width: $group-by-time-dropdown-width;
|
||||
|
||||
.caret {
|
||||
position: absolute;
|
||||
top: calc(50% + 1px);
|
||||
right: 13px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
background-color: $g5-pepper;
|
||||
border-color: $g5-pepper;
|
||||
color: $g13-mist !important;
|
||||
|
||||
&:hover {
|
||||
color: $g20-white !important;
|
||||
background-color: $g7-graphite;
|
||||
border-color: $g6-smoke;
|
||||
}
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:active:focus,
|
||||
&.active {
|
||||
color: $g20-white !important;
|
||||
background-color: $g7-graphite;
|
||||
border-color: $g6-smoke;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: $group-by-time-dropdown-width;
|
||||
min-width: 2em; // Override bootstrap min-width
|
||||
}
|
||||
}
|
||||
|
||||
.group-by-time-dropdown-label {
|
||||
// Filter list results
|
||||
.qeditor--filter {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
background-color: $g3-castle;
|
||||
border: 2px solid $g6-smoke;
|
||||
color: $g13-mist;
|
||||
margin-right: 4px;
|
||||
}
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
font-size: 13px;
|
||||
padding-left: 38px;
|
||||
outline: none;
|
||||
color: $g20-white;
|
||||
font-weight: 700;
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
|
||||
.query-editor-empty-state {
|
||||
color: $g17-whisper;
|
||||
&:focus {
|
||||
border-color: $c-pool;
|
||||
& + .icon {
|
||||
color: $g20-white;
|
||||
|
||||
.icon {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: $g10-wolf;
|
||||
font-weight: 500;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 18- */
|
||||
color: $g10-wolf;
|
||||
font-weight: 500;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: $g10-wolf;
|
||||
font-weight: 500;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: $g10-wolf;
|
||||
font-weight: 500;
|
||||
}
|
||||
+ .icon {
|
||||
position: absolute;
|
||||
top: calc(50% + 5px);
|
||||
left: calc(19px * 2);
|
||||
transform: translateY(-50%);
|
||||
color: $g10-wolf;
|
||||
transition: color 0.25s ease;
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
justify-content: flex-start;
|
||||
|
||||
.badge {
|
||||
background-color: $g5-pepper;
|
||||
background-color: $g2-kevlar;
|
||||
color: $c-pool;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
&__checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $g5-pepper;
|
||||
background-color: $g2-kevlar;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
margin-right: 8px;
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
align-items: center;
|
||||
|
||||
&.active {
|
||||
background: $g7-graphite;
|
||||
background: $g4-onyx;
|
||||
color: $g20-white;
|
||||
font-weight: 600;
|
||||
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
background-color: $g5-pepper;
|
||||
background-color: $g3-castle;
|
||||
border: 2px solid $g5-pepper;
|
||||
color: $g13-mist;
|
||||
height: 24px;
|
||||
|
|
@ -173,40 +173,4 @@
|
|||
border-color: $c-laser;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list__toggle {
|
||||
|
||||
|
||||
width: 170px;
|
||||
display: flex;
|
||||
|
||||
&-btn {
|
||||
border: 2px solid $g7-graphite;
|
||||
background-color: $g5-pepper;
|
||||
color: $g10-wolf;
|
||||
border-radius: 3px 0 0 3px;
|
||||
&:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
border-left: 0;
|
||||
}
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
color: $g20-white;
|
||||
background-color: $g6-smoke;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
background-color: $g7-graphite;
|
||||
color: $g20-white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,142 +1,114 @@
|
|||
$graph-panel__tab-height: 44px;
|
||||
$graph-panel__tab-offset: 8px;
|
||||
$graph-bg-color: $g3-castle;
|
||||
$graph-active-color: $g4-onyx;
|
||||
$graph-radius: 4px;
|
||||
|
||||
$dygraphs-legend-offset: 32px;
|
||||
|
||||
.graph-panel {
|
||||
.graph {
|
||||
position: relative;
|
||||
margin-bottom: 18px;
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&.active {
|
||||
.graph-panel__title {
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 100%;
|
||||
}
|
||||
}
|
||||
.graph-heading {
|
||||
background-color: $graph-bg-color;
|
||||
border-radius: $graph-radius $graph-radius 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
transition:
|
||||
background-color 0.25s ease;
|
||||
|
||||
&__view-selector {
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
background-color: $g5-pepper;
|
||||
border-radius: 4px 4px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: $graph-panel__tab-height;
|
||||
padding: 0 16px;
|
||||
transition:
|
||||
background-color 0.25s ease;
|
||||
|
||||
}
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: $g13-mist;
|
||||
font-weight: 500;
|
||||
margin-right: 16px;
|
||||
transition:
|
||||
color 0.25s ease;
|
||||
|
||||
.icon {
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
&__tabs {
|
||||
padding: 0;
|
||||
margin: $graph-panel__tab-offset 0 0 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
&__tab {
|
||||
background-color: $g5-pepper;
|
||||
color: $g10-wolf;
|
||||
height: $graph-panel__tab-height - $graph-panel__tab-offset;
|
||||
line-height: $graph-panel__tab-height - $graph-panel__tab-offset - 5px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
margin-right: 2px;
|
||||
padding: 0 14px;
|
||||
font-weight: 500;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $g13-mist;
|
||||
background-color: $g4-onyx;
|
||||
}
|
||||
&.active {
|
||||
background-color: $g3-castle;
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
&__graph-container {
|
||||
background-color: $g3-castle;
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 8px 16px;
|
||||
position: relative;
|
||||
height: 316px;
|
||||
}
|
||||
&__graph-empty {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
margin: 0;
|
||||
color: $g8-storm;
|
||||
}
|
||||
}
|
||||
&__graph-fetching {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&__spinner {
|
||||
width: 121px;
|
||||
height: 121px;
|
||||
background-image: url(assets/images/laser-spinner.png);
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
animation: graph-panel-spinner 1s infinite linear;
|
||||
}
|
||||
&__spinner--small {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
background-image: url(assets/images/laser-spinner.png);
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
animation: graph-panel-spinner 1s infinite linear;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
.toggle {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.graph-title {
|
||||
font-size: 14px;
|
||||
color: $g13-mist;
|
||||
font-weight: 600;
|
||||
margin-right: 16px;
|
||||
transition:
|
||||
color 0.25s ease;
|
||||
}
|
||||
.graph-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.graph-container {
|
||||
background-color: $graph-bg-color;
|
||||
border-radius: 0 0 $graph-radius $graph-radius;
|
||||
padding: 8px 16px;
|
||||
position: relative;
|
||||
height: 316px;
|
||||
transition:
|
||||
background-color 0.25s ease;
|
||||
}
|
||||
|
||||
|
||||
/* Active State */
|
||||
.graph.active {
|
||||
.graph-heading,
|
||||
.graph-container {
|
||||
background-color: $graph-active-color;
|
||||
}
|
||||
.graph-title {
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-empty {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
> p {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: $g8-storm;
|
||||
}
|
||||
}
|
||||
.graph-fetching {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.graph-spinner {
|
||||
width: 121px;
|
||||
height: 121px;
|
||||
background-image: url(assets/images/laser-spinner.png);
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
animation: graph-panel-spinner 1s infinite linear;
|
||||
}
|
||||
.graph-spinner--small {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
background-image: url(assets/images/laser-spinner.png);
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
animation: graph-panel-spinner 1s infinite linear;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@keyframes graph-panel-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
|
|
|||
|
|
@ -13,50 +13,20 @@
|
|||
left: 0;
|
||||
background-color: $g1-raven;
|
||||
|
||||
&__header {
|
||||
margin-bottom: 0;
|
||||
background-color: $g0-obsidian;
|
||||
color: $g15-platinum;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.page-header {
|
||||
padding-left: $explorer-page-padding;
|
||||
padding-right: $explorer-page-padding;
|
||||
justify-content: space-between;
|
||||
padding-right: ($explorer-page-padding + $scrollbar-width);
|
||||
}
|
||||
|
||||
&-container {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* Sessions Dropdown Styles */
|
||||
.chronograf-header__left {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.dropdown-title {
|
||||
white-space: nowrap;
|
||||
.page-header__container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
.resize-container.page-contents {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: $chronograf-page-header-height;
|
||||
height: calc(100% - #{$chronograf-page-header-height});
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panels {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import 'base/reset';
|
||||
@import 'base/sizes';
|
||||
|
||||
@import 'layout/main';
|
||||
|
||||
|
|
@ -7,6 +6,7 @@
|
|||
@import 'components/PanelBuilder';
|
||||
@import 'components/Explorer';
|
||||
@import 'components/MultiSelectDropdown';
|
||||
@import 'components/GroupByTimeDropdown';
|
||||
@import 'components/TagList';
|
||||
@import 'components/Resizer';
|
||||
@import 'components/Header';
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
66% { transform: translate(-50%,-50%) scale(1.75); background-color: $g7-graphite; }
|
||||
100% { transform: translate(-50%,-50%) scale(1,1); }
|
||||
}
|
||||
.graph-panel__graph-container.hosts-graph {
|
||||
.graph-container.hosts-graph {
|
||||
padding: 8px 16px;
|
||||
|
||||
.single-stat {
|
||||
|
|
|
|||
|
|
@ -172,8 +172,8 @@
|
|||
min-height: 70px;
|
||||
max-height: 290px;
|
||||
overflow: auto;
|
||||
@include custom-scrollbar($c-pool,$c-laser);
|
||||
@include gradient-h($c-ocean,$c-pool);
|
||||
@include custom-scrollbar($c-pool, $c-laser);
|
||||
@include gradient-h($c-ocean, $c-pool);
|
||||
box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8);
|
||||
|
||||
> li {
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
font-size: 0px;
|
||||
|
||||
&:hover {
|
||||
@include gradient-h($c-laser,$c-pool);
|
||||
@include gradient-h($c-laser, $c-pool);
|
||||
}
|
||||
}
|
||||
> li > a {
|
||||
|
|
@ -202,6 +202,13 @@
|
|||
background-color: transparent;
|
||||
color: $g20-white !important;
|
||||
}
|
||||
&:active,
|
||||
&:active:focus {
|
||||
@include gradient-h($c-sapphire, $c-pool);
|
||||
}
|
||||
&:focus {
|
||||
@include gradient-h($c-ocean, $c-pool);
|
||||
}
|
||||
}
|
||||
> li:last-child a {
|
||||
border-radius: 0 0 3px 3px;
|
||||
|
|
@ -211,11 +218,11 @@
|
|||
}
|
||||
}
|
||||
.dropdown.dropdown-kapacitor .dropdown-menu {
|
||||
@include custom-scrollbar($c-rainforest,$c-honeydew);
|
||||
@include gradient-h($c-pool,$c-rainforest);
|
||||
@include custom-scrollbar($c-rainforest, $c-honeydew);
|
||||
@include gradient-h($c-pool, $c-rainforest);
|
||||
|
||||
> li:hover {
|
||||
@include gradient-h($c-laser,$c-rainforest);
|
||||
@include gradient-h($c-laser, $c-rainforest);
|
||||
}
|
||||
> li > a {
|
||||
color: $c-mint !important;
|
||||
|
|
@ -225,11 +232,11 @@
|
|||
}
|
||||
}
|
||||
.dropdown.dropdown-chronograf .dropdown-menu {
|
||||
@include custom-scrollbar($c-comet,$c-potassium);
|
||||
@include gradient-h($c-ocean,$c-comet);
|
||||
@include custom-scrollbar($c-comet, $c-potassium);
|
||||
@include gradient-h($c-ocean, $c-comet);
|
||||
|
||||
> li:hover {
|
||||
@include gradient-h($c-laser,$c-comet);
|
||||
@include gradient-h($c-laser, $c-comet);
|
||||
}
|
||||
> li > a {
|
||||
color: $c-cremedeviolette !important;
|
||||
|
|
@ -367,4 +374,60 @@ code {
|
|||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Dark Toggles
|
||||
----------------------------------------------
|
||||
*/
|
||||
$toggle-height-sm: 30px;
|
||||
$toggle-font-sm: 13px;
|
||||
$toggle-padding-sm: 9px;
|
||||
|
||||
$toggle-height-md: 30px;
|
||||
$toggle-font-md: 13px;
|
||||
$toggle-padding-md: 9px;
|
||||
|
||||
$toggle-border: 2px;
|
||||
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: $toggle-border;
|
||||
border-radius: 3px;
|
||||
background-color: $g5-pepper;
|
||||
font-size: 0;
|
||||
}
|
||||
.toggle-btn {
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
background-color: $g3-castle;
|
||||
color: $g11-sidewalk;
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
color 0.25s;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $g14-chromium;
|
||||
background-color: $g4-onyx;
|
||||
}
|
||||
&.active {
|
||||
background-color: $g5-pepper;
|
||||
color: $g18-cloud;
|
||||
}
|
||||
}
|
||||
.toggle-sm {
|
||||
height: $toggle-height-sm;
|
||||
|
||||
.toggle-btn {
|
||||
height: ($toggle-height-sm - ($toggle-border * 2));
|
||||
line-height: ($toggle-height-sm - ($toggle-border * 2));
|
||||
padding: 0 $toggle-padding-sm;
|
||||
font-size: $toggle-font-sm;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ $g0-obsidian: #0f0e15;
|
|||
$g1-raven: #1c1c21;
|
||||
$g2-kevlar: #202028;
|
||||
$g3-castle: #292933;
|
||||
$g4-onyx: #2C2C38;
|
||||
$g4-onyx: #31313d;
|
||||
$g5-pepper: #383846;
|
||||
$g6-smoke: #434453;
|
||||
$g7-graphite: #545667;
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@ $scrollbar-width: 16px;
|
|||
}
|
||||
&-track-piece {
|
||||
background-color: $trackColor;
|
||||
border: ($scrollbar-width / 4) solid $trackColor;
|
||||
border: 6px solid $trackColor;
|
||||
border-radius: ($scrollbar-width / 2);
|
||||
}
|
||||
&-thumb {
|
||||
background-color: $handleColor;
|
||||
border: ($scrollbar-width / 4) solid $trackColor;
|
||||
border: 6px solid $trackColor;
|
||||
border-radius: ($scrollbar-width / 2);
|
||||
}
|
||||
&-corner {
|
||||
|
|
@ -56,6 +56,6 @@ $scrollbar-width: 16px;
|
|||
}
|
||||
}
|
||||
&::-webkit-resizer {
|
||||
background-color: $trackColor;
|
||||
background-color: $trackColor;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue