parent
4e7d0305ff
commit
4beb2c604e
42 changed files with 189 additions and 290 deletions
|
@ -123,7 +123,7 @@
|
|||
|
||||
<div id="gaugeOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
|
||||
<div class="kuiSideBarSection">
|
||||
<table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.gauge.colorsRange.length">
|
||||
<table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.gauge.colorsRange.length">
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<label id="gaugeOptionsCustomRangeFrom">From</label>
|
||||
|
|
|
@ -118,7 +118,7 @@
|
|||
<div class="kuiSideBarSection">
|
||||
<table
|
||||
data-test-subj="heatmapCustomRangesTable"
|
||||
class="vis-editor-agg-editor-ranges form-group"
|
||||
class="visEditorAgg__rangesTable form-group"
|
||||
ng-show="editorState.params.colorsRange.length">
|
||||
<tr>
|
||||
<th scope="col">
|
||||
|
|
|
@ -1,30 +1,8 @@
|
|||
@import (reference) "~ui/styles/mixins.less";
|
||||
|
||||
.markdown-vis {
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.visEditor {
|
||||
|
||||
&.visEditor--markdown {
|
||||
|
||||
.visualization-options {
|
||||
.flex-parent();
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.markdown-vis-options {
|
||||
.flex-parent();
|
||||
flex: 1 1 auto;
|
||||
|
||||
textarea {
|
||||
flex: 1 1 auto;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#markdownVisInput {
|
||||
resize: none;
|
||||
}
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
<div class="kuiSideBarSection">
|
||||
<div class="markdown-vis-options form-group">
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<div class="clearfix form-group">
|
||||
<label
|
||||
class="pull-left"
|
||||
for="markdownVisInput"
|
||||
i18n-id="markdownVis.params.markdownLabel"
|
||||
i18n-default-message="Markdown"
|
||||
>
|
||||
</label>
|
||||
></label>
|
||||
<small class="pull-right">
|
||||
<a target="_window" href="https://help.github.com/articles/github-flavored-markdown/">
|
||||
<icon aria-hidden="true" size="'s'" type="'link'"></icon>
|
||||
<span
|
||||
i18n-id="markdownVis.params.helpLinkLabel"
|
||||
i18n-default-message="Help"
|
||||
>
|
||||
</span>
|
||||
<i aria-hidden="true" class="fa fa-link"></i>
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<div id="metricOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
|
||||
<div class="kuiSideBarSection">
|
||||
<table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.metric.colorsRange.length">
|
||||
<table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
|
||||
<tr>
|
||||
<th>
|
||||
<label id="metricOptionsCustomRangeFrom">From</label>
|
||||
|
|
|
@ -4,4 +4,11 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
region_map-vis-params {
|
||||
.ems-hotlink {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,15 +21,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiSideBarFormRow" ng-hide="!editorState.params.emsHotLink">
|
||||
<div class="form-group clearfix" ng-hide="!editorState.params.emsHotLink">
|
||||
<a
|
||||
class="ems-hotlink"
|
||||
class="ems-hotlink pull-right"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
ng-href="{{editorState.params.emsHotLink}}"
|
||||
target="_blank"
|
||||
title="Preview {{editorState.params.selectedLayer.name}} on the Elastic Maps Service"
|
||||
>Preview on EMS
|
||||
><icon aria-hidden size="'s'" type="'link'" /> Preview on EMS
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
<label>
|
||||
Cluster size
|
||||
</label>
|
||||
<div class="vis-editor-agg-form-row">
|
||||
<div class="visEditorAgg__formRow--flex">
|
||||
<input
|
||||
name="heatClusterSize"
|
||||
ng-model="editorState.params.heatClusterSize"
|
||||
|
@ -44,7 +44,7 @@
|
|||
max="3.0"
|
||||
step="0.1"
|
||||
>
|
||||
<div class="vis-editor-agg-form-value">
|
||||
<div class="visEditorAgg__sliderValue">
|
||||
{{editorState.params.heatClusterSize}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div>
|
||||
<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
|
||||
<table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.length">
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<label id="visEditorDateRangeFrom{{agg.id}}">From</label>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
></icon-tip>
|
||||
</label>
|
||||
</div>
|
||||
<div class="vis-editor-agg-form-row">
|
||||
<div class="visEditorAgg__formRow--flex">
|
||||
<div class="form-group">
|
||||
<label
|
||||
id="extendedBoundsMinLabel{{agg.id}}"
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
title="Aggregation Field"
|
||||
name="field"
|
||||
required
|
||||
class="vis-editor-field-ui-select field-select"
|
||||
class="visEditorAggSelect__select field-select"
|
||||
ng-show="indexedFields.length"
|
||||
ng-model="agg.params.field"
|
||||
on-select="aggParam.onChange(agg)"
|
||||
|
@ -23,7 +23,7 @@
|
|||
>
|
||||
<div
|
||||
data-test-subj="{{field.displayName}}"
|
||||
class="vis-editor-field-ui-select__field-entry"
|
||||
class="eui-textTruncate"
|
||||
ng-bind-html="field.displayName | highlight: $select.search"
|
||||
title="{{field.displayName}}"
|
||||
></div>
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
<div class="form-group">
|
||||
<div ng-repeat="filter in agg.params.filters">
|
||||
<div class="vis-editor-agg-header">
|
||||
<label for="visEditorFilterInput{{agg.id}}">
|
||||
<div class="visEditorAggHeader">
|
||||
<label class="visEditorAggHeader__title visEditorAggHeader__title--grow" for="visEditorFilterInput{{agg.id}}">
|
||||
Filter {{$index + 1}}
|
||||
<span ng-if="filter.label">- {{ filter.label }}</span>
|
||||
</label>
|
||||
|
||||
<div class="kuiButtonGroup kuiButtonGroup--united">
|
||||
<div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
|
||||
<button
|
||||
ng-click="showConfig = !showConfig"
|
||||
type="button"
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
|
||||
<div ng-show="agg.params.ipRangeType != 'mask'">
|
||||
<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length">
|
||||
<table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.fromTo.length">
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<label id="visEditorIpRangeFromLabel{{agg.id}}">From</label>
|
||||
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
|
||||
<div ng-show="agg.params.ipRangeType == 'mask'">
|
||||
<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.mask.length">
|
||||
<table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.mask.length">
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<label id="visEditorIpRangeCidrLabel{{agg.id}}">CIDR Mask</label>
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div ng-show="agg.params.orderAgg" class="vis-editor-agg-order-agg">
|
||||
<div ng-show="agg.params.orderAgg" class="visEditorAgg__subAgg">
|
||||
<vis-editor-agg-params
|
||||
index-pattern="agg.getIndexPattern()"
|
||||
agg="agg.params.orderAgg"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div>
|
||||
<div class="vis-editor-agg-form-row">
|
||||
<div class="visEditorAgg__formRow--flex">
|
||||
<div ng-if="agg.type.params.byName.order" class="form-group">
|
||||
<label for="visEditorOrderByOrder{{agg.id}}">Order</label>
|
||||
<select
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div>
|
||||
<div class="vis-editor-agg-form-row">
|
||||
<div class="visEditorAgg__formRow--flex">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
|
@ -16,7 +16,7 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vis-editor-agg-form-row" ng-if="agg.params.otherBucket">
|
||||
<div class="visEditorAgg__formRow--flex" ng-if="agg.params.otherBucket">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
Label for other bucket
|
||||
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vis-editor-agg-form-row">
|
||||
<div class="visEditorAgg__formRow--flex">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
|
@ -48,7 +48,7 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vis-editor-agg-form-row" ng-show="agg.params.missingBucket">
|
||||
<div class="visEditorAgg__formRow--flex" ng-show="agg.params.missingBucket">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
Label for missing values
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div class="vis-editor-agg-form-row" ng-controller="agg.type.params.byName.precision.controller">
|
||||
<div class="visEditorAgg__formRow--flex" ng-controller="agg.type.params.byName.precision.controller">
|
||||
<div ng-if="!agg.params.autoPrecision" class="form-group">
|
||||
<label for="visEditorMapPrecision{{agg.id}}">Precision</label>
|
||||
<div class="vis-editor-agg-form-row">
|
||||
<div class="visEditorAgg__formRow--flex">
|
||||
<input
|
||||
id="visEditorMapPrecision{{agg.id}}"
|
||||
name="precision"
|
||||
|
@ -12,14 +12,14 @@
|
|||
min="1"
|
||||
max="{{config.get('visualization:tileMap:maxPrecision')}}"
|
||||
>
|
||||
<div class="form-group vis-editor-agg-form-value">
|
||||
<div class="visEditorAgg__sliderValue">
|
||||
{{agg.params.precision}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vis-option-item">
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
name="autoPrecision"
|
||||
|
@ -28,7 +28,7 @@
|
|||
</label>
|
||||
</div>
|
||||
|
||||
<div class="vis-option-item">
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
name="useGeocentroid"
|
||||
|
@ -37,7 +37,7 @@
|
|||
</label>
|
||||
</div>
|
||||
|
||||
<div class="vis-option-item">
|
||||
<div>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
|
||||
<table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.length">
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<label id="visEditorRangeFrom{{agg.id}}">From</label>
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div ng-if="agg.params.metricAgg === 'custom'" class="vis-editor-agg-order-agg">
|
||||
<div ng-if="agg.params.metricAgg === 'custom'" class="visEditorAgg__subAgg">
|
||||
<ng-form name="customMetricForm">
|
||||
<vis-editor-agg-params
|
||||
index-pattern="agg.getIndexPattern()"
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div ng-controller="aggParam.controller">
|
||||
<div class="form-group" ng-if="agg.params[aggType]">
|
||||
<label>{{aggTitle}}</label>
|
||||
<div class="vis-editor-agg-order-agg">
|
||||
<div class="visEditorAgg__subAgg">
|
||||
<ng-form name="{{aggType}}Form">
|
||||
<vis-editor-agg-params
|
||||
agg="agg.params[aggType]"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div ng-controller="aggParam.controller" class="vis-editor-agg-form-row">
|
||||
<div class="form-group vis-editor-agg-form-row__even-split">
|
||||
<div ng-controller="aggParam.controller" class="visEditorAgg__formRow--flex">
|
||||
<div class="form-group visEditorAgg__formRow--split">
|
||||
<label for="visEditorTopHitsAggregate{{agg.id}}">
|
||||
Aggregate with
|
||||
<icon-tip
|
||||
|
@ -16,7 +16,7 @@
|
|||
class="form-control"
|
||||
></select>
|
||||
</div>
|
||||
<div class="form-group vis-editor-agg-form-row__even-split">
|
||||
<div class="form-group visEditorAgg__formRow--split">
|
||||
<label for="visEditorTopHitsSize{{agg.id}}">
|
||||
Size
|
||||
<icon-tip
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
name="field"
|
||||
sortField
|
||||
title="Sort on"
|
||||
class="vis-editor-field-ui-select"
|
||||
class="visEditorAggSelect__select"
|
||||
ng-show="sortFieldOptions.length"
|
||||
ng-model="agg.params.sortField"
|
||||
uis-open-close="limit = 100"
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
@import './editors/components/index';
|
||||
@import './editors/default/index';
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`<EditorOptionsGroup/> renders as expected 1`] = `
|
||||
<div
|
||||
class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
|
||||
class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
|
||||
>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen"
|
||||
|
@ -84,7 +84,7 @@ exports[`<EditorOptionsGroup/> renders as expected 1`] = `
|
|||
|
||||
exports[`<EditorOptionsGroup/> renders as expected with actions 1`] = `
|
||||
<div
|
||||
class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
|
||||
class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
|
||||
>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen"
|
||||
|
@ -193,7 +193,7 @@ exports[`<EditorOptionsGroup/> renders as expected with actions 1`] = `
|
|||
|
||||
exports[`<EditorOptionsGroup/> renders as expected with initial collapsed 1`] = `
|
||||
<div
|
||||
class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
|
||||
class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
|
||||
>
|
||||
<div
|
||||
class="euiAccordion"
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
.visEditorOptionsGroup__panel + .visEditorOptionsGroup__panel {
|
||||
margin-top: $euiSizeS;
|
||||
}
|
1
src/ui/public/vis/editors/components/_index.scss
Normal file
1
src/ui/public/vis/editors/components/_index.scss
Normal file
|
@ -0,0 +1 @@
|
|||
@import './editor_options_group';
|
|
@ -20,8 +20,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import './editor_options_group.less';
|
||||
|
||||
import {
|
||||
EuiAccordion,
|
||||
EuiPanel,
|
||||
|
@ -40,7 +38,7 @@ function EditorOptionsGroup(props) {
|
|||
return (
|
||||
<EuiPanel
|
||||
grow={false}
|
||||
className="editorOptionsGroup__panel"
|
||||
className="visEditorOptionsGroup__panel"
|
||||
>
|
||||
<EuiAccordion
|
||||
id={htmlIdGenerator('eog')()}
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
.editorOptionsGroup__panel + .editorOptionsGroup__panel {
|
||||
margin-top: 8px;
|
||||
}
|
|
@ -1,8 +1,6 @@
|
|||
.indented {
|
||||
margin-left: 2em;
|
||||
}
|
||||
// Entire container -- found in agg_group.html
|
||||
|
||||
.vis-editor-agg {
|
||||
.visEditorAgg {
|
||||
@include flex-parent();
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
@ -11,90 +9,67 @@
|
|||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
// wraps the .vis-editor-agg
|
||||
.vis-editor-agg-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
//
|
||||
// Header -- found in agg.html
|
||||
//
|
||||
|
||||
vis-editor-agg-group {
|
||||
@include flex-parent(0, 1, auto);
|
||||
}
|
||||
|
||||
.vis-editor-agg-group {
|
||||
@include flex-parent(0, 1, auto);
|
||||
color: $euiColorDarkShade;
|
||||
}
|
||||
|
||||
.vis-editor-agg-header {
|
||||
.visEditorAggHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 0 auto;
|
||||
margin-bottom: $vis-editor-agg-editor-spacing;
|
||||
}
|
||||
|
||||
.vis-editor-agg-header-toggle {
|
||||
.visEditorAggHeader__toggle {
|
||||
flex: 0 0 auto;
|
||||
margin-right: $vis-editor-agg-editor-spacing;
|
||||
min-width: 22px;
|
||||
min-height: 22px;
|
||||
min-width: $euiSizeL;
|
||||
min-height: $euiSizeL;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vis-editor-agg-header-subagg-icon {
|
||||
flex: 0 1 auto;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.vis-editor-agg-header-title {
|
||||
.visEditorAggHeader__title {
|
||||
flex: 0 0 auto;
|
||||
@include euiTextTruncate;
|
||||
font-weight: $euiFontWeightBold;
|
||||
@include euiTextTruncate;
|
||||
}
|
||||
|
||||
.vis-editor-agg-header-title--grow {
|
||||
.visEditorAggHeader__title--grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.vis-editor-agg-header-description {
|
||||
font-weight: normal;
|
||||
padding-right: $vis-editor-agg-editor-spacing;
|
||||
padding-left: 5px;
|
||||
@include euiTextTruncate;
|
||||
.visEditorAggHeader__description {
|
||||
flex: 1 1 0;
|
||||
|
||||
&.danger {
|
||||
color: $euiColorDanger;
|
||||
font-weight: bold;
|
||||
}
|
||||
font-weight: $euiFontWeightRegular;
|
||||
padding-right: $vis-editor-agg-editor-spacing;
|
||||
padding-left: $euiSizeXS;
|
||||
@include euiTextTruncate;
|
||||
}
|
||||
|
||||
.vis-editor-agg-header-controls {
|
||||
.visEditorAggHeader__description--danger {
|
||||
color: $euiColorDanger;
|
||||
font-weight: $euiFontWeightBold;
|
||||
}
|
||||
|
||||
.visEditorAggHeader__controls {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.vis-editor-agg-error {
|
||||
margin: $vis-editor-agg-editor-spacing 0;
|
||||
padding: $vis-editor-agg-editor-spacing;
|
||||
text-align: center;
|
||||
background: $euiColorDanger;
|
||||
color: $euiColorEmptyShade;
|
||||
line-height: 1.5;
|
||||
}
|
||||
//
|
||||
// Misc elements -- found in agg_types/controls/*.html
|
||||
//
|
||||
|
||||
.vis-editor-agg-editor-ranges {
|
||||
.visEditorAgg__rangesTable {
|
||||
td {
|
||||
padding: 0 $vis-editor-agg-editor-spacing $vis-editor-agg-editor-spacing 0;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vis-editor-agg-editor-advanced-toggle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vis-editor-agg-form-row {
|
||||
.visEditorAgg__formRow--flex {
|
||||
display: flex;
|
||||
|
||||
> * {
|
||||
|
@ -110,92 +85,21 @@ vis-editor-agg-group {
|
|||
/**
|
||||
* 1. Hack to split child elements evenly.
|
||||
*/
|
||||
.vis-editor-agg-form-row__even-split {
|
||||
.visEditorAgg__formRow--split {
|
||||
flex: 1 1 0 !important; /* 1 */
|
||||
}
|
||||
|
||||
.vis-editor-agg-form-value {
|
||||
.visEditorAgg__sliderValue {
|
||||
align-self: center;
|
||||
margin: 0 0 0 $vis-editor-agg-editor-spacing;
|
||||
font-size: 1.2em;
|
||||
@include euiFontSize;
|
||||
}
|
||||
|
||||
.vis-editor-agg-wide-btn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vis-editor-agg-wide-btn-add {
|
||||
width: 140px;
|
||||
margin: -2px auto 5px auto;
|
||||
text-align: center;
|
||||
border: 2px solid;
|
||||
border-color: $euiColorLightShade;
|
||||
border-top: 0px;
|
||||
padding: 3px;
|
||||
border-bottom-right-radius: $euiBorderRadius;
|
||||
border-bottom-left-radius: $euiBorderRadius;
|
||||
background-color: $euiColorEmptyShade;
|
||||
font-weight: $euiFontWeightBold;
|
||||
|
||||
&:hover {
|
||||
color: $euiColorDarkestShade;
|
||||
background-color: $euiColorLightShade;
|
||||
}
|
||||
}
|
||||
|
||||
.vis-editor-agg-add {
|
||||
@include flex-parent();
|
||||
}
|
||||
|
||||
.vis-editor-agg-add-schemas {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.vis-editor-agg-order-agg {
|
||||
.visEditorAgg__subAgg {
|
||||
border: 2px solid;
|
||||
border-color: $euiColorLightShade;
|
||||
border-radius: $euiBorderRadius;
|
||||
background-color: transparent;
|
||||
margin: $vis-editor-agg-editor-spacing;
|
||||
margin: $vis-editor-agg-editor-spacing 0;
|
||||
padding: $vis-editor-agg-editor-spacing;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Show invalid state if the user has interacted with the input without selecting an option.
|
||||
*/
|
||||
.vis-editor-field-ui-select {
|
||||
|
||||
.ui-select-match-text,
|
||||
.vis-editor-field-ui-select__field-entry {
|
||||
@include euiTextTruncate;
|
||||
}
|
||||
|
||||
&.ng-invalid.ng-dirty,
|
||||
&.ng-invalid.ng-touched {
|
||||
.ui-select-match {
|
||||
.btn {
|
||||
border-color: $euiColorDanger; /* 1 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
vis-editor-agg,
|
||||
vis-editor-agg-params,
|
||||
vis-editor-agg-param,
|
||||
vis-editor-vis-options,
|
||||
vis-editor-vis-options > * {
|
||||
@include flex-parent();
|
||||
}
|
||||
|
||||
.vis-editor-config .ems-hotlink {
|
||||
font-size: $euiFontSizeXS; // 12px
|
||||
}
|
||||
|
||||
.agg-select-label {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.agg-select-help {
|
||||
float: right;
|
||||
}
|
||||
|
|
19
src/ui/public/vis/editors/default/_agg_group.scss
Normal file
19
src/ui/public/vis/editors/default/_agg_group.scss
Normal file
|
@ -0,0 +1,19 @@
|
|||
.visEditorAggGroup__wrapper {
|
||||
border-top: 0 !important; // override .sidebar-item
|
||||
padding: $euiSizeM;
|
||||
border-radius: $euiBorderRadius;
|
||||
margin-bottom: $vis-editor-agg-editor-spacing;
|
||||
background: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
.visEditorAggGroup__title {
|
||||
@include euiFontSizeL;
|
||||
margin-bottom: $vis-editor-agg-editor-spacing !important;
|
||||
padding: 0px !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.visEditorAggGroup {
|
||||
// wraps the .vis-editor-agg
|
||||
color: $euiColorDarkShade;
|
||||
}
|
12
src/ui/public/vis/editors/default/_agg_params.scss
Normal file
12
src/ui/public/vis/editors/default/_agg_params.scss
Normal file
|
@ -0,0 +1,12 @@
|
|||
.visEditorAggParam__error {
|
||||
margin: $vis-editor-agg-editor-spacing 0;
|
||||
padding: $vis-editor-agg-editor-spacing;
|
||||
text-align: center;
|
||||
|
||||
// Calculate error colors
|
||||
$backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
|
||||
$textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
|
||||
|
||||
color: $textColor;
|
||||
background-color: $backgroundColor;
|
||||
}
|
18
src/ui/public/vis/editors/default/_agg_select.scss
Normal file
18
src/ui/public/vis/editors/default/_agg_select.scss
Normal file
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* 1. Show invalid state if the user has interacted with the input without selecting an option.
|
||||
*/
|
||||
.visEditorAggSelect__select {
|
||||
|
||||
.ui-select-match-text {
|
||||
@include euiTextTruncate;
|
||||
}
|
||||
|
||||
&.ng-invalid.ng-dirty,
|
||||
&.ng-invalid.ng-touched {
|
||||
.ui-select-match {
|
||||
.btn {
|
||||
border-color: $euiColorDanger; /* 1 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -9,17 +9,6 @@ $vis-editor-resizer-width: $euiSizeM;
|
|||
|
||||
// Components
|
||||
@import './agg';
|
||||
|
||||
.visualization-options {
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $vis-editor-agg-editor-spacing;
|
||||
}
|
||||
.form-horizontal .control-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.kuiSideBarSelect {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@import './agg_group';
|
||||
@import './agg_params';
|
||||
@import './agg_select';
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
//
|
||||
// LAYOUT
|
||||
//
|
||||
|
||||
.visEditorSidebar__container {
|
||||
@include flex-parent(1, 1, auto);
|
||||
background-color: $euiColorLightestShade;
|
||||
|
@ -5,12 +9,21 @@
|
|||
|
||||
.visEditorSidebar__form {
|
||||
@include flex-parent(1, 1, auto);
|
||||
}
|
||||
|
||||
> .vis-edit-sidebar-buttons {
|
||||
flex: 0 0 auto;
|
||||
.visEditorSidebar__config {
|
||||
padding: $euiSizeS;
|
||||
|
||||
@include euiBreakpoint('l', 'xl') {
|
||||
@include flex-parent(1, 1, 1px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// NAVIGATION
|
||||
//
|
||||
|
||||
.visEditorSidebar__indexPattern,
|
||||
.visEditorSidebar__nav {
|
||||
min-height: auto;
|
||||
|
@ -44,7 +57,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
|
||||
*/
|
||||
|
@ -62,41 +74,3 @@
|
|||
line-height: $euiSize;
|
||||
}
|
||||
|
||||
.visEditorSidebar__config {
|
||||
@include flex-parent(1, 1, auto);
|
||||
padding: 10px;
|
||||
|
||||
@include euiBreakpoint('l', 'xl') {
|
||||
@include flex-parent(1, 1, 1px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ems-hotlink {
|
||||
font-size: $euiFontSizeXS;
|
||||
}
|
||||
}
|
||||
|
||||
vis-editor-agg-group {
|
||||
@include flex-parent(0, 1, auto);
|
||||
|
||||
.sidebar-item {
|
||||
border-top: 0 !important;
|
||||
padding: $euiSizeM;
|
||||
border-radius: $euiBorderRadius;
|
||||
margin-bottom: $vis-editor-agg-editor-spacing;
|
||||
background: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
.sidebar-item-title {
|
||||
font-size: $euiFontSizeL;
|
||||
border: inherit !important;
|
||||
margin-bottom: $vis-editor-agg-editor-spacing !important;
|
||||
padding: 0px !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
vis-editor-vis-options,
|
||||
vis-editor-vis-options > * {
|
||||
@include flex-parent();
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="vis-editor-agg-editor-advanced-toggle">
|
||||
<div class="eui-textRight">
|
||||
<a ng-click="advancedToggled = !advancedToggled">
|
||||
<i aria-hidden="true" class="fa fa-caret-down" ng-class="{'fa-caret-down': advancedToggled, 'fa-caret-left': !advancedToggled}"></i>
|
||||
Advanced
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<!-- header -->
|
||||
<div class="vis-editor-agg-header">
|
||||
<div class="visEditorAggHeader">
|
||||
|
||||
<!-- open/close editor -->
|
||||
<button
|
||||
|
@ -9,27 +9,27 @@
|
|||
aria-controls="visAggEditorParams{{agg.id}}"
|
||||
type="button"
|
||||
data-test-subj="toggleEditor"
|
||||
class="kuiButton kuiButton--primary kuiButton--small vis-editor-agg-header-toggle">
|
||||
class="visEditorAggHeader__toggle kuiButton kuiButton--primary kuiButton--small">
|
||||
<i aria-hidden="true" ng-class="{ 'fa-caret-down': editorOpen, 'fa-caret-right': !editorOpen }" class="fa"></i>
|
||||
</button>
|
||||
|
||||
<!-- title -->
|
||||
<span class="vis-editor-agg-header-title" ng-class="{'vis-editor-agg-header-title--grow': editorOpen}">
|
||||
<span class="visEditorAggHeader__title" ng-class="{'visEditorAggHeader__title--grow': editorOpen}">
|
||||
{{ agg.schema.title }}
|
||||
</span>
|
||||
|
||||
<!-- description -->
|
||||
<span ng-if="!editorOpen && aggForm.$valid" class="vis-editor-agg-header-description" title="{{describe()}}">
|
||||
<span ng-if="!editorOpen && aggForm.$valid" class="visEditorAggHeader__description" title="{{describe()}}">
|
||||
{{ describe() }}
|
||||
</span>
|
||||
|
||||
<!-- error -->
|
||||
<span ng-if="!editorOpen && aggForm.$invalid" class="vis-editor-agg-header-description danger" title="{{aggForm.describeErrors()}}">
|
||||
<span ng-if="!editorOpen && aggForm.$invalid" class="visEditorAggHeader__description visEditorAggHeader__description--danger" title="{{aggForm.describeErrors()}}">
|
||||
{{ aggForm.describeErrors() }}
|
||||
</span>
|
||||
|
||||
<!-- controls !!!actually disabling buttons will break tooltips¡¡¡ -->
|
||||
<div class="vis-editor-agg-header-controls kuiButtonGroup kuiButtonGroup--united">
|
||||
<div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
|
||||
<!-- disable aggregation -->
|
||||
<button
|
||||
ng-if="agg.enabled && canRemove(agg)"
|
||||
|
@ -94,12 +94,10 @@
|
|||
agg="agg"
|
||||
group-name="groupName"
|
||||
ng-show="editorOpen"
|
||||
index-pattern="vis.indexPattern"
|
||||
class="vis-editor-agg-editor">
|
||||
index-pattern="vis.indexPattern">
|
||||
</vis-editor-agg-params>
|
||||
|
||||
<vis-editor-agg-add
|
||||
ng-if="$index + 1 === stats.count"
|
||||
ng-hide="dragging"
|
||||
class="vis-editor-agg-add vis-editor-agg-add-subagg">
|
||||
ng-hide="dragging">
|
||||
</vis-editor-agg-add>
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<div ng-show="add.form" class="vis-editor-agg-add-schemas">
|
||||
<div ng-show="add.form">
|
||||
<label>Select {{ groupName }} type</label>
|
||||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
<ul class="form-group list-group list-group-menu">
|
||||
<li
|
||||
tabindex="0"
|
||||
|
@ -16,11 +15,13 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
|
||||
<div
|
||||
ng-if="stats.max > stats.count"
|
||||
ng-init="add.form = stats.count < 1 ? !add.form : add.form"
|
||||
ng-click="add.form = !add.form"
|
||||
class="vis-editor-agg-wide-btn">
|
||||
class="eui-textCenter">
|
||||
|
||||
<div ng-if="!add.form">
|
||||
<button
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
<div class="sidebar-item">
|
||||
<div class="sidebar-item-title">
|
||||
<div class="sidebar-item visEditorAggGroup__wrapper">
|
||||
<div class="sidebar-item-title visEditorAggGroup__title">
|
||||
{{ groupName }}
|
||||
</div>
|
||||
|
||||
<div ng-class="groupName" draggable-container="group" class="vis-editor-agg-group">
|
||||
<div ng-repeat="agg in group track by agg.id" data-test-subj="aggregationEditor{{agg.id}}" draggable-item="agg" class="vis-editor-agg-wrapper">
|
||||
<div ng-class="groupName" draggable-container="group" class="visEditorAggGroup">
|
||||
<div ng-repeat="agg in group track by agg.id" data-test-subj="aggregationEditor{{agg.id}}" draggable-item="agg">
|
||||
<!-- agg.html - controls for aggregation -->
|
||||
<ng-form vis-editor-agg name="aggForm" class="vis-editor-agg"></ng-form>
|
||||
<ng-form vis-editor-agg name="aggForm" class="visEditorAgg"></ng-form>
|
||||
</div>
|
||||
|
||||
<vis-editor-agg-add ng-if="stats.count === 0" data-test-subj="addAggregationButton" class="vis-editor-agg-add"></vis-editor-agg-add>
|
||||
<vis-editor-agg-add ng-if="stats.count === 0" data-test-subj="addAggregationButton"></vis-editor-agg-add>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div ng-if="aggIsTooLow" class="form-group">
|
||||
<p class="vis-editor-agg-error">
|
||||
<p class="visEditorAggParam__error">
|
||||
"{{ agg.schema.title }}" aggs must run before all other buckets!
|
||||
</p>
|
||||
<input
|
||||
|
@ -11,16 +11,16 @@
|
|||
</div>
|
||||
|
||||
<div ng-if="agg.error" class="form-group">
|
||||
<p class="vis-editor-agg-error ng-binding">
|
||||
<p class="visEditorAggParam__error ng-binding">
|
||||
{{agg.error}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div ng-if="agg.schema.deprecate" class="form-group">
|
||||
<p ng-show="agg.schema.deprecateMessage" class="vis-editor-agg-error">
|
||||
<p ng-show="agg.schema.deprecateMessage" class="visEditorAggParam__error">
|
||||
{{ agg.schema.deprecateMessage }}
|
||||
</p>
|
||||
<p ng-show="!agg.schema.deprecateMessage" class="vis-editor-agg-error">
|
||||
<p ng-show="!agg.schema.deprecateMessage" class="visEditorAggParam__error">
|
||||
"{{ agg.schema.title }}" has been deprecated.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<div class="form-group">
|
||||
<div>
|
||||
<label ng-if="$index < 1 || groupName !== 'buckets'" class="agg-select-label">Aggregation</label>
|
||||
<label ng-if="$index >= 1 && groupName === 'buckets'" class="agg-select-label">Sub Aggregation</label>
|
||||
<label ng-if="$index < 1 || groupName !== 'buckets'" class="eui-displayInline">Aggregation</label>
|
||||
<label ng-if="$index >= 1 && groupName === 'buckets'" class="eui-displayInline">Sub Aggregation</label>
|
||||
<a
|
||||
ng-if="aggHelpLink"
|
||||
href="{{aggHelpLink}}"
|
||||
class="agg-select-help"
|
||||
class="pull-right"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
|
@ -16,7 +16,7 @@
|
|||
<ui-select
|
||||
required
|
||||
name="agg"
|
||||
class="vis-editor-field-ui-select agg-select"
|
||||
class="visEditorAggSelect__select agg-select"
|
||||
data-test-subj="visEditorAggSelect"
|
||||
ng-model="agg.type"
|
||||
>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<!-- Visualization and other editing UI gets inserted in here. -->
|
||||
<div
|
||||
data-visualization-options
|
||||
class="visualization-options"
|
||||
></div>
|
||||
|
|
|
@ -1134,7 +1134,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
}
|
||||
|
||||
async getBucketErrorMessage() {
|
||||
const error = await find.byCssSelector('.vis-editor-agg-error');
|
||||
const error = await find.byCssSelector('.visEditorAggParam__error');
|
||||
const errorMessage = await error.getProperty('innerText');
|
||||
log.debug(errorMessage);
|
||||
return errorMessage;
|
||||
|
|
Loading…
Reference in a new issue