maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Resolve conflicts (#23197)

Browse source
This commit is contained in:
Caroline Horn 2018-09-14 15:28:25 -04:00 committed by GitHub
parent ea367773a4
commit acd01a4881
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
69 changed files with 733 additions and 768 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
docs/development/visualize/development-create-visualization.asciidoc
View file

@ -55,8 +55,9 @@ The list of common parameters:
- *name*: unique visualization name, only lowercase letters and underscore
- *title*: title of your visualization as displayed in kibana
- *icon*: the icon class to use (font awesome)
- *image*: instead of icon you can provide svg image (imported)
- *icon*: <string> the https://elastic.github.io/eui/#/display/icons[EUI icon] type to use for this visualization
- *image*: instead of an icon you can provide a SVG image (imported)
- *legacyIcon*: (DEPRECATED) <string> provide a class name (e.g. for a font awesome icon)
- *description*: description of your visualization as shown in kibana
- *category*: the category your visualization falls into (one of `ui/vis/vis_category` values)
- *visConfig*: object holding visualization parameters

3
src/core_plugins/input_control_vis/public/register_vis.js
View file

@ -25,7 +25,6 @@ import { VisController } from './vis_controller';
import { ControlsTab } from './components/editor/controls_tab';
import { OptionsTab } from './components/editor/options_tab';
import { defaultFeedbackMessage } from 'ui/vis/default_feedback_message';
import image from './images/icon-input-control.svg';
import { Status } from 'ui/vis/update_status';
import { i18n } from '@kbn/i18n';
@ -38,7 +37,7 @@ function InputControlVisProvider(Private) {
title: i18n.translate('inputControl.register.controlsTitle', {
defaultMessage: 'Controls'
}),
image,
icon: 'visControls',
description: i18n.translate('inputControl.register.controlsDescription', {
defaultMessage: 'Create interactive controls for easy dashboard manipulation.'
}),

3
src/core_plugins/kbn_vislib_vis_types/public/area.js
View file

@ -21,7 +21,6 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';
import image from './images/icon-area.svg';
export default function PointSeriesVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
@ -29,7 +28,7 @@ export default function PointSeriesVisType(Private) {
return VisFactory.createVislibVisualization({
name: 'area',
title: 'Area',
image,
icon: 'visArea',
description: 'Emphasize the quantity beneath a line chart',
category: CATEGORY.BASIC,
visConfig: {

5
src/core_plugins/kbn_vislib_vis_types/public/gauge.js
View file

@ -22,7 +22,6 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import gaugeTemplate from './editors/gauge.html';
import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';
import image from './images/icon-gauge.svg';
export default function GaugeVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
@ -30,8 +29,8 @@ export default function GaugeVisType(Private) {
return VisFactory.createVislibVisualization({
name: 'gauge',
title: 'Gauge',
image,
description: `Gauges indicate the status of a metric. Use it to show how a metric's value relates
icon: 'visGauge',
description: `Gauges indicate the status of a metric. Use it to show how a metric's value relates
to reference threshold values.`,
category: CATEGORY.DATA,
visConfig: {

3
src/core_plugins/kbn_vislib_vis_types/public/goal.js
View file

@ -22,7 +22,6 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import gaugeTemplate from './editors/gauge.html';
import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';
import image from './images/icon-goal.svg';
export default function GoalVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
@ -30,7 +29,7 @@ export default function GoalVisType(Private) {
return VisFactory.createVislibVisualization({
name: 'goal',
title: 'Goal',
image,
icon: 'visGoal',
description: 'A goal chart indicates how close you are to your final goal.',
category: CATEGORY.DATA,
visConfig: {

3
src/core_plugins/kbn_vislib_vis_types/public/heatmap.js
View file

@ -22,7 +22,6 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import heatmapTemplate from './editors/heatmap.html';
import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';
import image from './images/icon-heatmap.svg';
export default function HeatmapVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
@ -30,7 +29,7 @@ export default function HeatmapVisType(Private) {
return VisFactory.createVislibVisualization({
name: 'heatmap',
title: 'Heat Map',
image,
icon: 'visHeatmap',
description: 'Shade cells within a matrix',
category: CATEGORY.BASIC,
visConfig: {

3
src/core_plugins/kbn_vislib_vis_types/public/histogram.js
View file

@ -21,7 +21,6 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';
import image from './images/icon-vertical.svg';
export default function PointSeriesVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
@ -29,7 +28,7 @@ export default function PointSeriesVisType(Private) {
return VisFactory.createVislibVisualization({
name: 'histogram',
title: 'Vertical Bar',
image,
icon: 'visBarVertical',
description: 'Assign a continuous variable to each axis',
category: CATEGORY.BASIC,
visConfig: {

3
src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
View file

@ -21,7 +21,6 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';
import image from './images/icon-horizontal.svg';
export default function PointSeriesVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
@ -29,7 +28,7 @@ export default function PointSeriesVisType(Private) {
return VisFactory.createVislibVisualization({
name: 'horizontal_bar',
title: 'Horizontal Bar',
image,
icon: 'visBarHorizontal',
description: 'Assign a continuous variable to each axis',
category: CATEGORY.BASIC,
visConfig: {

3
src/core_plugins/kbn_vislib_vis_types/public/line.js
View file

@ -21,7 +21,6 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';
import image from './images/icon-line.svg';
export default function PointSeriesVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
@ -29,7 +28,7 @@ export default function PointSeriesVisType(Private) {
return VisFactory.createVislibVisualization({
name: 'line',
title: 'Line',
image,
icon: 'visLine',
description: 'Emphasize trends',
category: CATEGORY.BASIC,
visConfig: {

3
src/core_plugins/kbn_vislib_vis_types/public/pie.js
View file

@ -22,7 +22,6 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import { BuildHierarchicalDataProvider } from 'ui/agg_response/hierarchical/build_hierarchical_data';
import pieTemplate from './editors/pie.html';
import image from './images/icon-pie.svg';
export default function HistogramVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
@ -31,7 +30,7 @@ export default function HistogramVisType(Private) {
return VisFactory.createVislibVisualization({
name: 'pie',
title: 'Pie',
image,
icon: 'visPie',
description: 'Compare parts of a whole',
category: CATEGORY.BASIC,
visConfig: {

4
src/core_plugins/kibana/public/index.scss
View file

@ -6,6 +6,10 @@
// Home styles
@import './home/index';
// Visualize styles
@import './visualize/index';
@import 'ui/public/vis/index';
// Dashboard styles
// MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS
@import './dashboard/index';

11
src/core_plugins/kibana/public/visualize/_index.scss Normal file
View file

@ -0,0 +1,11 @@
// Prefix all styles with "vis" to avoid conflicts.
// Examples
// visChart
// visChart__legend
// visChart__legend--small
// visChart__legend-isLoading
@import './editor/index';
@import './embeddable/index';
@import './listing/index';
@import './wizard/index';

39
src/core_plugins/kibana/public/visualize/editor/_editor.scss Normal file
View file

@ -0,0 +1,39 @@
.visEditor {
@include flex-parent();
@include euiBreakpoint('l', 'xl') {
position: absolute;
width: 100%;
height: 100%;
}
@include euiBreakpoint('xs', 's', 'm') {
.visualization {
// While we are on a small screen the visualization is below the
// editor. In this cases it needs a minimum height, since it would otherwise
// maybe end up with 0 height since it just gets the flexbox rest of the screen.
min-height: 400px;
}
}
/* 1. Without setting this to 0 you will run into a bug where the filter bar modal is hidden under
a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
> .visualize {
height: 100%;
flex: 1 1 auto;
display: flex;
z-index: 0; /* 1 */
}
}
.visEditor__content {
@include flex-parent();
width: 100%;
z-index: 0;
// overrides for tablet and desktop
@include euiBreakpoint('l', 'xl') {
flex-direction: row;
}
}

1
src/core_plugins/kibana/public/visualize/editor/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './editor';

4
src/core_plugins/kibana/public/visualize/editor/editor.html
View file

@ -1,4 +1,4 @@
<visualize-app class="app-container vis-editor vis-type-{{ vis.type.name }}">
<visualize-app class="app-container visEditor visEditor--{{ vis.type.name }}">
<!-- Local nav. -->
<kbn-top-nav name="visualize" config="topNavMenu">
<!-- Transcluded elements. -->
@ -74,7 +74,7 @@
saved-obj="savedVis"
ui-state="uiState"
time-range="timeRange"
class="vis-editor-content"
class="visEditor__content"
/>
</visualize-app>

483
src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
View file

@ -1,483 +0,0 @@
@import "~ui/styles/local_search.less";
@vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
@vis-editor-sidebar-min-width: 350px;
@vis-editor-nesting-width: 8px;
@vis-editor-agg-editor-spacing: 10px;
@vis-editor-resizer-width: 13px;
.vis-editor {
.flex-parent();
@media (min-width: @screen-md-min) {
position: absolute;
width: 100%;
height: 100%;
}
@media (max-width: @screen-sm-max) {
visualization {
// While we are on a small screen the visualization is below the
// editor. In this cases it needs a minimum height, since it would otherwise
// maybe end up with 0 height since it just gets the flexbox rest of the screen.
min-height: 400px;
}
}
.default-vis-editor {
// Prevent the default editor from overflowing. Without that you can cause
// a weird issue where the complete page can be scrolled out of view if
// the editor within the sidebar is too height.
overflow-y: hidden;
flex: 1 1 auto;
display: flex;
}
.collapsible-sidebar {
.flex-parent(0, 0, auto);
margin-right: 10px;
flex-direction: row;
min-width: @vis-editor-sidebar-min-width;
max-width: 100%;
width: @vis-editor-sidebar-min-width;
@media (max-width: @screen-sm-max) {
// If we are on a small screen we force the editor to take 100% width.
// We cannot use a min-width: @screen-md-min query here, since we
// would otherwise break the manual resizing on large screens.
width: 100% !important;
vis-editor-resizer {
display: none;
}
}
@media (min-width: @screen-md-min) {
max-width: 75%;
}
}
.collapsible-sidebar.closed {
min-width: 0;
}
.collapsible-sidebar--small {
width: 15%;
}
.collapsible-sidebar--medium {
width: 30%;
}
.collapsible-sidebar--large {
width: 50%;
}
.default-editor__resizer {
display: flex;
flex: 0 0 @vis-editor-resizer-width;
width: @vis-editor-resizer-width;
cursor: ew-resize;
background-color: @globalColorLightestGray;
align-items: center;
margin: 0;
user-select: none;
&:hover {
background-color: lighten(@globalColorBlue, 50%);
}
&.active {
background-color: @globalColorBlue;
color: white;
}
}
.visualization-options {
.form-group {
margin-bottom: @vis-editor-agg-editor-spacing;
}
.form-horizontal .control-label {
text-align: left;
}
.kuiSideBarSelect {
width: 100%;
}
}
vis-editor-agg-group {
.flex-parent(0, 1, auto);
}
/* Without setting this to 0 you will run into a bug where the filter bar modal is hidden under
a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
> .visualize {
height: 100%;
flex: 1 1 auto;
display: flex;
z-index: 0; /* 1. */
}
}
.indented {
margin-left: 2em;
}
.vis-editor-content {
.flex-parent();
width: 100%;
z-index: 0;
// overrides for tablet and desktop
@media (min-width: @screen-md-min) {
flex-direction: row;
}
}
.vis-editor-content-fullEditor {
.flex-parent();
z-index: 0;
}
.vis-editor-sidebar {
.flex-parent(1, 0, auto);
max-width: ~"calc(100% - @{vis-editor-resizer-width})";
// overridden for tablet and desktop
@media (min-width: @screen-md-min) {
flex-basis: @vis-editor-sidebar-basis;
}
.index-pattern,
nav {
min-height: auto;
border-radius: 0px;
}
.sidebar-item {
border-top: 0 !important;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
background: @globalColorWhite;
}
.sidebar-container {
.flex-parent(1, 1, auto);
background-color: @vis-editor-sidebar-bg;
form {
.flex-parent(1, 1, auto);
> div.vis-editor-config {
padding: 10px;
@media (min-width: @screen-md-min) {
.flex-parent(1, 1, 1px);
overflow: auto;
}
@media (max-width: @screen-md-min) {
.flex-parent(1, 1, auto);
}
}
> .vis-edit-sidebar-buttons {
flex: 0 0 auto;
}
}
}
.sidebar-item-title {
font-size: 18px;
border: inherit !important;
margin-bottom: 10px !important;
padding: 0px !important;
text-transform: capitalize;
}
.hintbox {
padding: @vis-editor-agg-editor-spacing;
margin-bottom: @vis-editor-agg-editor-spacing;
}
.kuiSideBarFormRow__label {
flex: 2 0 0;
margin-bottom: 0;
font-size: 12px;
}
}
.vis-editor-full-options .visualization-options {
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding: 0px;
}
.vis-editor-agg {
.flex-parent();
width: 100%;
max-width: 100%;
//IE10/11 - prevent flex item from overflowing
flex-basis: 100%;
}
// wraps the .vis-editor-agg
.vis-editor-agg-wrapper {
display: flex;
}
.vis-editor-agg-group {
.flex-parent(0, 1, auto);
color: @kibanaGray2;
}
.vis-editor-agg-header {
display: flex;
align-items: center;
flex: 1 0 auto;
margin-bottom: @vis-editor-agg-editor-spacing;
}
.vis-editor-agg-header-toggle {
flex: 0 0 auto;
margin-right: @vis-editor-agg-editor-spacing;
min-width: 22px;
min-height: 22px;
text-align: center;
}
.vis-editor-agg-header-subagg-icon {
flex: 0 1 auto;
padding-right: @padding-base-vertical;
}
.vis-editor-agg-header-title {
flex: 0 0 auto;
.ellipsis();
font-weight: bold;
}
.vis-editor-agg-header-title--grow {
flex-grow: 1;
}
.vis-editor-agg-header-description {
font-weight: normal;
padding-right: @vis-editor-agg-editor-spacing;
padding-left: 5px;
.ellipsis();
flex: 1 1 0;
&.danger {
.text-danger();
font-weight: bold;
}
}
.vis-editor-agg-header-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: @vis-editor-agg-error-bg;
color: @vis-editor-agg-error-color;
line-height: 1.5;
}
.vis-editor-agg-editor-ranges {
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 {
display: flex;
> * {
flex: 1 1 auto;
margin-right: @vis-editor-agg-editor-spacing;
&:last-child {
margin-right: 0px;
}
}
}
/**
* 1. Hack to split child elements evenly.
*/
.vis-editor-agg-form-row__even-split {
flex: 1 1 0 !important; /* 1 */
}
.vis-editor-agg-form-value {
align-self: center;
margin: 0 0 0 @vis-editor-agg-editor-spacing;
font-size: 1.2em;
}
.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: @vis-editor-agg-wide-btn-border;
border-top: 0px;
padding: 3px;
border-bottom-right-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
background-color: @vis-editor-agg-wide-btn-bg;
font-weight: bold;
&:hover {
color: @vis-editor-agg-wide-btn-hover-color;
background-color: @vis-editor-agg-wide-btn-hover-bg;
}
}
.vis-editor-agg-add {
.flex-parent();
}
.vis-editor-agg-add-schemas {
margin-bottom: 10px;
}
.vis-editor-agg-order-agg {
border: 2px solid;
border-color: @vis-editor-agg-editor-order-border;
border-radius: @border-radius-base;
background-color: @vis-editor-agg-editor-order-bg;
margin: @vis-editor-agg-editor-spacing;
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 {
.vis-editor-field-ui-select__field-entry {
.ellipsis();
}
.ui-select-match-text {
.ellipsis();
}
&.ng-invalid.ng-dirty,
&.ng-invalid.ng-touched {
.ui-select-match {
.btn {
border-color: @globalColorRed; /* 1 */
}
}
}
}
.vis-editor-canvas {
display: flex;
flex-direction: row;
overflow: auto;
padding-left: @collapser-width;
flex-shrink: 1;
flex-basis: 100%;
&.embedded {
flex-shrink: 1;
flex-basis: 100%;
}
.visualize {
.flex-parent();
flex: 1 1 100%;
}
.visualize-chart {
position: relative;
}
}
.vis-editor-canvas-title {
text-align: center;
margin: 10px 0 0;
}
vis-editor,
vis-editor-agg-group,
vis-editor-agg,
vis-editor-agg-params,
vis-editor-agg-param,
vis-editor-vis-options,
vis-editor-vis-options > * {
.flex-parent();
}
.vis-editor-config .ems-hotlink {
font-size: 12px;
}
/**
* 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
*/
.vis-editor-subnav-link {
padding: 4px 10px 5px 10px !important; /* 1 */
color: @globalColorDarkGray !important; /* 1 */
&.is-vis-editor-sub-nav-link-selected {
border-bottom: 2px solid @globalColorBlue;
border-color: @globalColorBlue !important;
color: @globalColorBlue !important;
&:before {
display: none;
}
&:hover {
background-color: transparent;
}
}
}
/**
* 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
*/
.vis-editor-subnav-link--danger {
color: @vis-editor-navbar-error-state-color !important; /* 1 */
background-color: @vis-editor-navbar-error-state-bg;
&:hover {
background-color: darken(@vis-editor-navbar-error-state-bg, 12%) !important; /* 1 */
}
}
.agg-select-label {
display: inline !important;
}
.agg-select-help {
float: right;
}

1
src/core_plugins/kibana/public/visualize/embeddable/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './visualize_lab_disabled';

7
src/core_plugins/kibana/public/visualize/styles/lab_vis.less → src/core_plugins/kibana/public/visualize/embeddable/_visualize_lab_disabled.scss
View file

@ -1,4 +1,4 @@
.disabledLabVisualization {
.visDisabledLabVisualization {
width: 100%;
display: flex;
flex-direction: column;
@ -7,6 +7,7 @@
text-align: center;
}
.disabledLabVisualization__icon {
font-size: 2em;
.visDisabledLabVisualization__icon {
font-size: $euiFontSizeXL;
}

2
src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.js
View file

@ -60,7 +60,7 @@ export class VisualizeEmbeddableFactory extends EmbeddableFactory {
},
render: (domNode) => {
const template = $(labDisabledTemplate);
template.find('.disabledLabVisualization__title').text(savedObject.title);
template.find('.visDisabledLabVisualization__title').text(savedObject.title);
$(domNode).html(template);
}
});

6
src/core_plugins/kibana/public/visualize/embeddable/visualize_lab_disabled.html
View file

@ -1,5 +1,5 @@
<div class="disabledLabVisualization">
<div class="kuiVerticalRhythm disabledLabVisualization__icon kuiIcon fa-flask" aria-hidden="true"></div>
<div class="kuiVerticalRhythm"><em class="disabledLabVisualization__title"></em> is a lab visualization.</div>
<div class="visDisabledLabVisualization">
<div class="kuiVerticalRhythm visDisabledLabVisualization__icon kuiIcon fa-flask" aria-hidden="true"></div>
<div class="kuiVerticalRhythm"><em class="visDisabledLabVisualization__title"></em> is a lab visualization.</div>
<div class="kuiVerticalRhythm">Please turn on lab-mode in the advanced settings to see lab visualizations.</div>
</div>

1
src/core_plugins/kibana/public/visualize/index.js
View file

@ -17,7 +17,6 @@
* under the License.
*/
import './styles/main.less';
import './editor/editor';
import './wizard/wizard';
import 'ui/draggable/draggable_container';

1
src/core_plugins/kibana/public/visualize/listing/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './listing';

10
src/core_plugins/kibana/public/visualize/listing/_listing.scss Normal file
View file

@ -0,0 +1,10 @@
.visListingTable__typeImage,
.visListingTable__typeIcon {
margin-right: $euiSizeS;
position: relative;
top: 2px;
}
.visListingTable__typeImage {
@include size($euiSize);
}

39
src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
View file

@ -37,6 +37,7 @@ import {
EuiOverlayMask,
EuiConfirmModal,
SortableProperties,
EuiIcon,
} from '@elastic/eui';
export class VisualizeListingTable extends Component {
@ -141,15 +142,35 @@ export class VisualizeListingTable extends Component {
}
renderItemTypeIcon(item) {
return item.type.image ?
<img
className="kuiStatusText__icon kuiIcon"
aria-hidden="true"
src={item.type.image}
/> :
<span
className={`kuiStatusText__icon kuiIcon ${item.icon}`}
/>;
let icon;
if (item.type.image) {
icon = (
<img
className="visListingTable__typeImage"
aria-hidden="true"
src={item.type.image}
/>
);
} else if (!item.type.image && !item.type.icon) {
icon = (
// Allowing legacyIcon to hold a CSS name, will be removed in 7.0
<span
aria-hidden="true"
className={`kuiStatusText__icon kuiIcon ${item.type.legacyIcon}`}
/>
);
} else {
icon = (
<EuiIcon
className="visListingTable__typeIcon"
aria-hidden="true"
type={item.icon}
size="m"
/>
);
}
return icon;
}
sortByTitle = () => this.sortOn('title');

83
src/core_plugins/kibana/public/visualize/styles/main.less
View file

@ -1,83 +0,0 @@
@import (reference) "~ui/styles/variables";
@import (reference) "~ui/styles/bootstrap/list-group";
@import (reference) "~ui/styles/list-group-menu";
@import "./lab_vis";
.visualizeViewContentHeader {
display: flex;
}
.visualizeViewContentHeader .kuiTitle {
flex: 1 1 auto;
}
.wizard-sub-title {
margin-top: 0px;
margin-bottom: 8px;
padding: 0px 5px;
}
.wizard-type {
flex: 1;
// TODO: When we migrate off Bootstrap, we can eliminate these "mixins".
.list-group-item();
.list-group-menu .list-group-menu-item();
border: none;
border-radius: 0;
background-color: @kibanaGray6;
}
.wizard-type-heading {
flex: 0 0 200px;
display: flex;
align-items: center;
font-size: 1.2em;
}
.wizard-type-heading-icon {
flex: 0 0 auto;
margin-right: @padding-base-horizontal;
font-size: 1.5em;
text-align: center;
color: @saved-object-finder-icon-color;
}
.wizard-type-heading-text {
flex: 1 0 auto;
}
.wizard-type-description {
flex: 1 1 auto;
color: @wizard-vis-type-description-color;
}
@media (min-width: @screen-lg) {
.wizard {
display: flex;
}
.wizard-column {
flex: 1;
display: flex;
flex-direction: column;
padding: 0px 2.5px;
}
.wizard-row {
flex: 1;
background-color: @globalColorLightestGray;
}
.wizard-column--small {
flex: 2;
}
.wizard-column--large {
flex: 3;
}
}
@import "../editor/styles/_editor.less";

1
src/core_plugins/kibana/public/visualize/wizard/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './wizard';

48
src/core_plugins/kibana/public/visualize/wizard/_wizard.scss Normal file
View file

@ -0,0 +1,48 @@
@include euiBreakpoint('xl') {
.visWizard {
display: flex;
}
.visWizard__column {
display: flex;
flex-direction: column;
padding: 0px $euiSizeXS;
}
.visWizard__row {
flex: 1;
background-color: $euiColorLightestShade;
}
.visWizard__column--small {
flex: 2;
}
.visWizard__column--large {
flex: 3;
}
}
/**
* 1. Hack in some padding for these panels.
*/
.visWizard__list--paginated--selectable,
.visWizard__savedObjectFinder {
padding: $euiSizeS; /* 1 */
}
/**
* This preserves backwards-compatibility with any plugins that are still specifying an `icon`
* class.
*
* 1. Size icon correctly to match xxLarge EuiIcon
*/
.visWizard__visTypeIcon {
color: $euiColorFullShade;
font-size: $euiSizeXXL; /* 1 */
}
// SASSTODO: Remove img element selector when `.kuiGalleryItem__image img` selector is removed
img.visWizard__visTypeImage { // Use element selector to override base .kuiGalleryItem__image styles
@include size($euiSizeXXL); /* 1 */
}

20
src/core_plugins/kibana/public/visualize/wizard/step_1.html
View file

@ -23,7 +23,7 @@
<!-- Search -->
<div class="kuiSearchInput kuiVerticalRhythm kuiVerticalRhythm--medium fullWidth" role="search">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<icon class="kuiSearchInput__icon kuiIcon fa-search"></icon>
<input
class="kuiSearchInput__input"
type="text"
@ -53,18 +53,28 @@
>
<div class="kuiGalleryItem__image">
<img
class="visWizard__visTypeImage"
ng-if="type.image"
aria-hidden="true"
ng-src="{{ type.image }}"
/>
<!-- If there's no image, default to an icon, for BWC. -->
<!-- Allowing legacyIcon to hold a CSS name, will be removed in 7.0 -->
<span
ng-if="!type.image"
ng-if="!type.image && !type.icon"
aria-hidden="true"
class="kuiIcon visualizeWizardVisTypeIcon"
ng-class="type.icon"
class="kuiIcon visWizard__visTypeIcon"
ng-class="type.legacyIcon"
></span>
<!-- If there's no image, default to an icon, for BWC. -->
<icon
ng-if="!type.image && type.icon"
aria-hidden="true"
class="kuiIcon visWizard__visTypeIcon"
type="type.icon"
size="'xxl'"
></icon>
</div>
<div

10
src/core_plugins/kibana/public/visualize/wizard/step_2.html
View file

@ -13,8 +13,8 @@
</kbn-top-nav>
<div class="kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem" data-test-subj="visualizeSelectSearch">
<div class="wizard kuiViewContentItem">
<div class="wizard-column wizard-column--small">
<div class="visWizard kuiViewContentItem">
<div class="visWizard__column visWizard__column--small">
<h2 class="kuiTitle kuiVerticalRhythm">
From a New Search, Select Index
</h2>
@ -24,12 +24,12 @@
list="indexPattern.list"
list-property="attributes.title"
user-make-url="makeUrl"
class="wizard-row visualizeWizardPaginatedSelectableList kuiVerticalRhythm"
class="visWizard__row visWizard__list--paginated--selectable kuiVerticalRhythm"
disable-auto-focus="true"
></paginated-selectable-list>
</div>
<div class="wizard-column wizard-column--large">
<div class="visWizard__column visWizard__column--large">
<h2 class="kuiTitle kuiVerticalRhythm">
Or, From a Saved Search
</h2>
@ -37,7 +37,7 @@
<!-- Saved searches -->
<saved-object-finder
type="searches"
class="wizard-row visualizeWizardSavedObjectFinder kuiVerticalRhythm"
class="visWizard__row visWizard__savedObjectFinder kuiVerticalRhythm"
make-url="step2WithSearchUrl"
disable-auto-focus="true"
></saved-object-finder>

1
src/core_plugins/kibana/public/visualize/wizard/wizard.js
View file

@ -21,7 +21,6 @@ import '../saved_visualizations/saved_visualizations';
import 'ui/directives/saved_object_finder';
import 'ui/directives/paginated_selectable_list';
import '../../discover/saved_searches/saved_searches';
import './wizard.less';
import _ from 'lodash';
import { CATEGORY, CATEGORY_DISPLAY_NAMES } from 'ui/vis/vis_category';

18
src/core_plugins/kibana/public/visualize/wizard/wizard.less
View file

@ -1,18 +0,0 @@
/**
* This preserves backwards-compatibility with any plugins that are still specifying an `icon`
* class.
*
* 1. Size icon correctly.
*/
.visualizeWizardVisTypeIcon {
color: #000000;
font-size: 50px; /* 1 */
}
/**
* 1. Hack in some padding for these panels.
*/
.visualizeWizardPaginatedSelectableList,
.visualizeWizardSavedObjectFinder {
padding: 10px; /* 1 */
}

3
src/core_plugins/markdown_vis/public/markdown_vis.js
View file

@ -23,7 +23,6 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { CATEGORY } from 'ui/vis/vis_category';
import markdownVisParamsTemplate from './markdown_vis_params.html';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import image from './images/icon-markdown.svg';
import { DefaultEditorSize } from 'ui/vis/editor_size';
// we need to load the css ourselves
@ -41,7 +40,7 @@ function MarkdownVisProvider(Private) {
name: 'markdown',
title: 'Markdown',
isAccessible: true,
image,
icon: 'visText',
description: 'Create a document using markdown syntax',
category: CATEGORY.OTHER,
visConfig: {

4
src/core_plugins/markdown_vis/public/markdown_vis.less
View file

@ -5,9 +5,9 @@
width: 100%;
}
.vis-editor {
.visEditor {
&.vis-type-markdown {
&.visEditor--markdown {
.visualization-options {
.flex-parent();

3
src/core_plugins/metric_vis/public/metric_vis.js
View file

@ -25,7 +25,6 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';
import { MetricVisComponent } from './metric_vis_controller';
import image from './images/icon_number.svg';
// we need to load the css ourselves
// we also need to load the controller and used by the template
@ -41,7 +40,7 @@ function MetricVisProvider(Private) {
return VisFactory.createReactVisualization({
name: 'metric',
title: 'Metric',
image,
icon: 'visMetric',
description: 'Display a calculation as a single number',
category: CATEGORY.DATA,
visConfig: {

3
src/core_plugins/metrics/public/kbn_vis_types/index.js
View file

@ -19,7 +19,6 @@
import '../visualizations/less/main.less';
import '../less/main.less';
import image from '../images/icon-visualbuilder.svg';
import { MetricsRequestHandlerProvider } from './request_handler';
import { ReactEditorControllerProvider } from './editor_controller';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
@ -40,7 +39,7 @@ export default function MetricsVisProvider(Private) {
title: 'Visual Builder',
description: 'Build time-series using a visual pipeline interface',
category: CATEGORY.TIME,
image,
icon: 'visVisualBuilder',
stage: 'experimental',
feedbackMessage: defaultFeedbackMessage,
visConfig: {

3
src/core_plugins/region_map/public/region_map_vis.js
View file

@ -19,7 +19,6 @@
import './region_map.less';
import './region_map_vis_params';
import image from './images/icon-vector-map.svg';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { CATEGORY } from 'ui/vis/vis_category';
import { Schemas } from 'ui/vis/editors/default/schemas';
@ -43,7 +42,7 @@ VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmaps
description: 'Show metrics on a thematic map. Use one of the provided base maps, or add your own. ' +
'Darker colors represent higher values.',
category: CATEGORY.MAP,
image,
icon: 'visMapRegion',
visConfig: {
defaults: {
legendPosition: 'bottomright',

3
src/core_plugins/table_vis/public/table_vis.js
View file

@ -27,7 +27,6 @@ import { CATEGORY } from 'ui/vis/vis_category';
import { Schemas } from 'ui/vis/editors/default/schemas';
import tableVisTemplate from './table_vis.html';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import image from './images/icon-table.svg';
// we need to load the css ourselves
// we also need to load the controller and used by the template
@ -52,7 +51,7 @@ function TableVisTypeProvider(Private) {
type: 'table',
name: 'table',
title: 'Data Table',
image,
icon: 'visTable',
description: 'Display values in a table',
category: CATEGORY.DATA,
visConfig: {

3
src/core_plugins/tagcloud/public/tag_cloud_vis.js
View file

@ -24,7 +24,6 @@ import { CATEGORY } from 'ui/vis/vis_category';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { TagCloudVisualization } from './tag_cloud_visualization';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import image from './images/icon-tagcloud.svg';
import { Status } from 'ui/vis/update_status';
VisTypesRegistryProvider.register(function (Private) {
@ -34,7 +33,7 @@ VisTypesRegistryProvider.register(function (Private) {
return VisFactory.createBaseVisualization({
name: 'tagcloud',
title: 'Tag Cloud',
image,
icon: 'visTagCloud',
description: 'A group of words, sized according to their importance',
category: CATEGORY.OTHER,
visConfig: {

3
src/core_plugins/tile_map/public/tile_map_vis.js
View file

@ -24,7 +24,6 @@ import { CATEGORY } from 'ui/vis/vis_category';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { CoordinateMapsVisualizationProvider } from './coordinate_maps_visualization';
import { Schemas } from 'ui/vis/editors/default/schemas';
import image from './images/icon-tilemap.svg';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import { Status } from 'ui/vis/update_status';
import { makeGeoJsonResponseHandler } from './coordinatemap_response_handler';
@ -38,7 +37,7 @@ VisTypesRegistryProvider.register(function TileMapVisType(Private, getAppState,
return VisFactory.createBaseVisualization({
name: 'tile_map',
title: 'Coordinate Map',
image,
icon: 'visMapCoordinate',
description: 'Plot latitude and longitude coordinates on a map',
category: CATEGORY.MAP,
visConfig: {

2
src/core_plugins/timelion/public/register_feature.js
View file

@ -24,7 +24,7 @@ FeatureCatalogueRegistryProvider.register(() => {
id: 'timelion',
title: 'Timelion',
description: 'Use an expression language to analyze time series data and visualize the results.',
icon: 'timelionApp',
icon: 'visTimelion',
path: '/app/timelion',
showOnHomePage: true,
category: FeatureCatalogueCategory.DATA

3
src/core_plugins/timelion/public/vis/index.js
View file

@ -19,7 +19,6 @@
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { CATEGORY } from 'ui/vis/vis_category';
import image from '../images/icon-timelion.svg';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import { TimelionRequestHandlerProvider } from './timelion_request_handler';
import { DefaultEditorSize } from 'ui/vis/editor_size';
@ -46,7 +45,7 @@ export default function TimelionVisProvider(Private) {
return VisFactory.createAngularVisualization({
name: 'timelion',
title: 'Timelion',
image,
icon: 'visTimelion',
description: 'Build time-series using functional expressions',
category: CATEGORY.TIME,
visConfig: {

8
src/core_plugins/vega/public/vega_editor.less
View file

@ -1,7 +1,7 @@
@import (reference) "~ui/styles/variables";
.vis-type-vega {
.vis-editor-config {
.visEditor--vega {
.visEditorSidebar__config {
// Vega controls its own padding, no need for additional padding
padding: 0 !important;
}
@ -9,10 +9,6 @@
visualization-editor {
.vis-editor-canvas {
padding-left: 0;
}
.vegaEditor {
display: flex;
flex: 1 1 auto;

2
src/core_plugins/vega/public/vega_type.js
View file

@ -46,7 +46,7 @@ VisTypesRegistryProvider.register((Private) => {
name: 'vega',
title: 'Vega',
description: 'Create custom visualizations using Vega and VegaLite',
icon: 'fa-code',
icon: 'visVega',
category: CATEGORY.OTHER,
visConfig: { defaults: { spec: defaultSpec } },
editorConfig: {

25
src/ui/public/styles/_mixins.scss Normal file
View file

@ -0,0 +1,25 @@
@mixin flex-parent($grow: 1, $shrink: 1, $basis: auto, $direction: column) {
flex: $grow $shrink $basis;
display: flex;
flex-direction: $direction;
> * {
flex-shrink: 0;
}
}
// EUI TODO: Add this
@mixin kibanaCircleLogo() {
display: inline-block;
@include size($euiSizeXXL * 2);
line-height: $euiSizeXXL * 2;
text-align: center;
background-color: $euiColorEmptyShade;
border-radius: 100%;
padding: $euiSize;
.euiIcon {
vertical-align: baseline;
}
}

15
src/ui/public/styles/_styling_constants.scss
View file

@ -5,17 +5,4 @@
@import '@elastic/eui/src/global_styling/variables/index';
@import '@elastic/eui/src/global_styling/mixins/index';
// EUI TODO: Add this
@mixin kibanaCircleLogo() {
display: inline-block;
@include size($euiSizeXXL * 2);
line-height: $euiSizeXXL * 2;
text-align: center;
background-color: $euiColorEmptyShade;
border-radius: 100%;
padding: $euiSize;
.euiIcon {
vertical-align: baseline;
}
}
@import './mixins';

45
src/ui/public/styles/variables/for-theme.less
View file

@ -70,17 +70,6 @@
@collapser-width: 21px;
// Dashboard ===================================================================
@dashboard-bg: #fff;
@dashboard-bg-with-margins: #F5F5F5;
@panel-bg-with-margins: #fff;
@dashboard-panel-bg: #fff;
@dashboard-panel-color: @text-color;
@dashboard-panel-heading-link-color: @text-color;
@dashboard-panel-heading-link-hover-color: @link-hover-color;
@dashboard-panel-load-error-color: @btn-danger-bg;
// table =======================================================================
@table-dt-color: @globalColorBlack;
@table-cell-hover-bg: white;
@ -136,40 +125,6 @@
// Settings - Add Data Wizard - Parse CSV
@settings-add-data-wizard-parse-csv-container-border: @kibanaBlue3;
// Visualize ===================================================================
@visualize-info-bg: @globalColorLightGray;
// Vis Editor ==================================================================
@wizard-vis-type-description-color: @brand-primary;
@vis-editor-navbar-current-tab-color: @gray-lighter;
@vis-editor-navbar-error-state-bg: @btn-danger-bg;
@vis-editor-navbar-error-state-color: @btn-danger-color;
@vis-editor-navbar-modal-bg: @navbar-default-bg;
@vis-editor-navbar-modal-color: @kibanaGray1;
@vis-editor-navbar-modal-link-color: @kibanaGray1;
@vis-editor-sidebar-bg: @globalColorLightestGray;
@vis-editor-sidebar-border: @sidebar-bg;
@vis-editor-sidebar-title-bg: @gray-lighter;
@vis-editor-sidebar-title-hover-bg: @vis-editor-sidebar-title-bg;
@vis-editor-sidebar-title-hover-color: @text-color;
@vis-editor-agg-group-color: @text-color;
@vis-editor-agg-error-color: @btn-danger-color;
@vis-editor-agg-error-bg: @btn-danger-bg;
@vis-editor-agg-wide-btn-border: @gray-lighter;
@vis-editor-agg-wide-btn-bg: @body-bg;
@vis-editor-agg-wide-btn-hover-bg: @gray-lighter;
@vis-editor-agg-wide-btn-hover-color: @gray3;
@vis-editor-agg-editor-order-bg: transparent;
@vis-editor-agg-editor-order-border: @gray-lighter;
// List Group Menu =============================================================
@list-group-menu-item-color: @link-color;

1
src/ui/public/vis/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './editors/default/index';

201
src/ui/public/vis/editors/default/_agg.scss Normal file
View file

@ -0,0 +1,201 @@
.indented {
margin-left: 2em;
}
.vis-editor-agg {
@include flex-parent();
width: 100%;
max-width: 100%;
//IE10/11 - prevent flex item from overflowing
flex-basis: 100%;
}
// wraps the .vis-editor-agg
.vis-editor-agg-wrapper {
display: flex;
}
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 {
display: flex;
align-items: center;
flex: 1 0 auto;
margin-bottom: $vis-editor-agg-editor-spacing;
}
.vis-editor-agg-header-toggle {
flex: 0 0 auto;
margin-right: $vis-editor-agg-editor-spacing;
min-width: 22px;
min-height: 22px;
text-align: center;
}
.vis-editor-agg-header-subagg-icon {
flex: 0 1 auto;
padding-right: 5px;
}
.vis-editor-agg-header-title {
flex: 0 0 auto;
@include euiTextTruncate;
font-weight: $euiFontWeightBold;
}
.vis-editor-agg-header-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;
flex: 1 1 0;
&.danger {
color: $euiColorDanger;
font-weight: bold;
}
}
.vis-editor-agg-header-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;
}
.vis-editor-agg-editor-ranges {
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 {
display: flex;
> * {
flex: 1 1 auto;
margin-right: $vis-editor-agg-editor-spacing;
&:last-child {
margin-right: 0px;
}
}
}
/**
* 1. Hack to split child elements evenly.
*/
.vis-editor-agg-form-row__even-split {
flex: 1 1 0 !important; /* 1 */
}
.vis-editor-agg-form-value {
align-self: center;
margin: 0 0 0 $vis-editor-agg-editor-spacing;
font-size: 1.2em;
}
.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 {
border: 2px solid;
border-color: $euiColorLightShade;
border-radius: $euiBorderRadius;
background-color: transparent;
margin: $vis-editor-agg-editor-spacing;
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;
}

127
src/ui/public/vis/editors/default/_default.scss Normal file
View file

@ -0,0 +1,127 @@
.visEditor--default {
// Prevent the default editor from overflowing. Without that you can cause
// a weird issue where the complete page can be scrolled out of view if
// the editor within the sidebar is too height.
overflow-y: hidden;
flex: 1 1 auto;
display: flex;
@include euiBreakpoint('xs', 's', 'm') {
flex-direction: column;
}
}
/**
* Collapsible sidebar container
*/
.visEditor__collapsibleSidebar {
@include flex-parent(0, 0, auto);
margin-right: $euiSizeL;
flex-direction: row;
min-width: $vis-editor-sidebar-min-width;
width: $vis-editor-sidebar-min-width;
max-width: 100%;
@include euiBreakpoint('xs', 's', 'm') {
// If we are on a small screen we force the editor to take 100% width.
width: 100% !important;
}
@include euiBreakpoint('l', 'xl') {
max-width: 75%;
}
}
.visEditor__collapsibleSidebar.closed {
min-width: 0;
}
.visEditor__collapsibleSidebar--small {
width: 15%;
}
.visEditor__collapsibleSidebar--medium {
width: 30%;
}
.visEditor__collapsibleSidebar--large {
width: 50%;
}
/**
* Actual sidebar
*/
.visEditor__sidebar {
@include flex-parent(1, 0, auto);
// overridden for tablet and desktop
@include euiBreakpoint('l', 'xl') {
flex-basis: $vis-editor-sidebar-basis;
max-width: calc(100% - #{$vis-editor-resizer-width});
}
.kuiSideBarFormRow__label {
font-size: $euiFontSizeXS;
}
.form-group {
margin-bottom: $vis-editor-agg-editor-spacing;
}
}
/**
* Resizer
*/
.visEditor__resizer {
display: flex;
flex: 0 0 $vis-editor-resizer-width;
width: $vis-editor-resizer-width;
cursor: ew-resize;
background-color: $euiColorLightestShade;
align-items: center;
margin: 0;
user-select: none;
&:hover {
background-color: tintOrShade($euiColorPrimary, 80%, 60%);
}
&.active {
background-color: $euiColorPrimary;
color: $euiColorEmptyShade;
}
@include euiBreakpoint('xs', 's', 'm') {
display: none;
}
}
/**
* Canvas area
*/
.visEditor__canvas {
display: flex;
flex-direction: row;
overflow: auto;
flex-shrink: 1;
flex-basis: 100%;
&.embedded {
flex-shrink: 1;
flex-basis: 100%;
}
.visualize {
@include flex-parent();
flex: 1 1 100%;
}
.visualize-chart {
position: relative;
}
}

25
src/ui/public/vis/editors/default/_index.scss Normal file
View file

@ -0,0 +1,25 @@
$vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
$vis-editor-sidebar-min-width: 350px;
$vis-editor-agg-editor-spacing: $euiSizeS;
$vis-editor-resizer-width: $euiSizeM;
// Main layout
@import './default';
@import './sidebar';
// Components
@import './agg';
.visualization-options {
.form-group {
margin-bottom: $vis-editor-agg-editor-spacing;
}
.form-horizontal .control-label {
text-align: left;
}
.kuiSideBarSelect {
width: 100%;
}
}

102
src/ui/public/vis/editors/default/_sidebar.scss Normal file
View file

@ -0,0 +1,102 @@
.visEditorSidebar__container {
@include flex-parent(1, 1, auto);
background-color: $euiColorLightestShade;
}
.visEditorSidebar__form {
@include flex-parent(1, 1, auto);
> .vis-edit-sidebar-buttons {
flex: 0 0 auto;
}
}
.visEditorSidebar__indexPattern,
.visEditorSidebar__nav {
min-height: auto;
border-radius: 0px;
}
.visEditorSidebar__nav .navbar-right {
// Match correct bootstrap container spacing to pull buttons fully right
margin-right: -15px;
}
/**
* 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
*/
.visEditorSidebar__navLink {
padding: 2px $euiSizeS !important; /* 1 */
color: $euiColorDarkShade !important; /* 1 */
&.visEditorSidebar__navLink-isSelected {
border-bottom: 2px solid $euiColorPrimary;
border-color: $euiColorPrimary !important;
color: $euiColorPrimary !important;
&:before {
display: none;
}
&:hover {
background-color: transparent;
}
}
}
/**
* 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
*/
.visEditorSidebar__navLink--danger {
color: $euiColorEmptyShade !important; /* 1 */
background-color: $euiColorDanger;
&:hover {
background-color: shadeOrTint($euiColorDanger, 12%, 0%) !important; /* 1 */
}
}
.visEditorSidebar__navButtonLink {
// Make the line-height the same size as the icon for better alignement
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();
}

10
src/ui/public/vis/editors/default/default.html
View file

@ -1,8 +1,8 @@
<div class="default-vis-editor">
<div class="collapsible-sidebar" ng-class="::getSidebarClass()">
<vis-editor-sidebar class="vis-editor-sidebar" />
<div class="visEditor--default">
<div class="collapsible-sidebar visEditor__collapsibleSidebar" ng-class="::getSidebarClass()">
<vis-editor-sidebar class="visEditor__sidebar" />
<vis-editor-resizer
class="default-editor__resizer"
class="visEditor__resizer"
tabindex="0"
aria-label="Press left/right to resize the editor"
data-test-subj="visualizeEditorResizer"
@ -10,7 +10,7 @@
</div>
<div
class="vis-editor-canvas"
class="visEditor__canvas"
data-shared-item
data-shared-items-container
render-complete

8
src/ui/public/vis/editors/default/default.js
View file

@ -107,11 +107,11 @@ const defaultEditor = function ($rootScope, $compile) {
$scope.getSidebarClass = () => {
if ($scope.vis.type.editorConfig.defaultSize === DefaultEditorSize.SMALL) {
return 'collapsible-sidebar--small';
return 'visEditor__collapsibleSidebar--small';
} else if ($scope.vis.type.editorConfig.defaultSize === DefaultEditorSize.MEDIUM) {
return 'collapsible-sidebar--medium';
return 'visEditor__collapsibleSidebar--medium';
} else if ($scope.vis.type.editorConfig.defaultSize === DefaultEditorSize.LARGE) {
return 'collapsible-sidebar--large';
return 'visEditor__collapsibleSidebar--large';
}
};
@ -160,7 +160,7 @@ const defaultEditor = function ($rootScope, $compile) {
}
if (!this._handler) {
const visualizationEl = this.el.find('.vis-editor-canvas')[0];
const visualizationEl = this.el.find('.visEditor__canvas')[0];
getVisualizeLoader().then(loader => {
if (!visualizationEl) {
return;

38
src/ui/public/vis/editors/default/sidebar.html
View file

@ -1,6 +1,6 @@
<div class="sidebar-container">
<div class="sidebar-container visEditorSidebar__container">
<form
class="sidebar-list"
class="sidebar-list visEditorSidebar__form"
ng-submit="visualizeEditor.$invalid ? stageEditableVis(false) : stageEditableVis()"
name="visualizeEditor"
novalidate
@ -11,14 +11,14 @@
css-truncate
aria-label="{{:: 'Index pattern: ' + vis.indexPattern.title}}"
ng-if="vis.type.requiresSearch && vis.type.options.showIndexSelection"
class="index-pattern"
class="index-pattern visEditorSidebar__indexPattern"
tabindex="0"
id="sidebarIndexPatternTitle"
>
{{ vis.indexPattern.title }}
</div>
<nav class="navbar navbar-default subnav">
<nav class="navbar navbar-default subnav visEditorSidebar__nav">
<div class="container-fluid">
<!-- tabs -->
@ -30,8 +30,8 @@
ng-show="sidebar.showData"
>
<a
class="vis-editor-subnav-link"
ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == 'data'}"
class="visEditorSidebar__navLink"
ng-class="{'visEditorSidebar__navLink-isSelected': sidebar.section == 'data'}"
ng-click="sidebar.section='data'"
kbn-accessible-click
data-test-subj="visualizeEditDataLink"
@ -48,8 +48,8 @@
ng-if="vis.type.editorConfig.optionTabs.length > 1 || sidebar.showData"
>
<a
class="vis-editor-subnav-link"
ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == tab.name}"
class="visEditorSidebar__navLink"
ng-class="{'visEditorSidebar__navLink-isSelected': sidebar.section == tab.name}"
ng-click="sidebar.section=tab.name"
kbn-accessible-click
data-test-subj="{{ 'visEditorTab' + tab.name }}"
@ -70,10 +70,10 @@
tooltip-append-to-body="1"
>
<div
class="kuiButton kuiButton--danger navbar-btn-link sidebar-controls-error"
class="kuiButton kuiButton--danger navbar-btn-link visEditorSidebar__navButtonLink"
aria-label="{{ visualizeEditor.describeErrors() }}"
>
<span aria-hidden="true" class="kuiIcon kuiIcon--error fa-warning"></span>
<icon aria-hidden="true" type="'alert'" color="'danger'"></icon>
</div>
</li>
@ -86,7 +86,7 @@
>
<button
data-test-subj="visualizeEditorAutoButton"
class="kuiButton kuiButton--basic navbar-btn-link"
class="kuiButton kuiButton--basic navbar-btn-link visEditorSidebar__navButtonLink"
aria-label="Auto update the visualization on every change"
ng-click="toggleAutoApply()"
ng-class="{
@ -94,10 +94,10 @@
'kuiButton--basic': !autoApplyEnabled
}"
>
<span aria-hidden="true" class="kuiIcon fa-repeat"></span>
<span ng-show="autoApplyEnabled">Auto Apply</span>
<icon aria-hidden="true" type="'refresh'"></icon>
</button>
</li>
<span ng-show="autoApplyEnabled">Auto Apply</span>
<li
tooltip="Apply changes"
@ -107,12 +107,12 @@
>
<button
data-test-subj="visualizeEditorRenderButton"
class="kuiButton kuiButton--primary navbar-btn-link"
class="kuiButton kuiButton--primary navbar-btn-link visEditorSidebar__navButtonLink"
type="submit"
ng-disabled="!vis.dirty || visualizeEditor.errorCount() > 0 || autoApplyEnabled"
aria-label="Update the visualization with your changes"
>
<span aria-hidden="true" class="kuiIcon fa-play"></span>
<icon aria-hidden="true" type="'play'"></icon>
</button>
</li>
@ -125,19 +125,19 @@
>
<button
data-test-subj="visualizeEditorResetButton"
class="kuiButton kuiButton--basic navbar-btn-link"
class="kuiButton kuiButton--basic navbar-btn-link visEditorSidebar__navButtonLink"
ng-disabled="!vis.dirty"
ng-click="resetEditableVis()"
aria-label="Reset the visualization"
>
<span class="kuiIcon fa-close"></span>
<icon type="'cross'"></icon>
</button>
</li>
</ul>
</div>
</nav>
<div class="vis-editor-config" ng-show="sidebar.section == 'data'">
<div class="visEditorSidebar__config" ng-show="sidebar.section == 'data'">
<!-- metrics -->
<vis-editor-agg-group ng-if="vis.type.schemas.metrics" data-test-subj="metricsAggGroup" group-name="metrics"></vis-editor-agg-group>
@ -145,7 +145,7 @@
<vis-editor-agg-group ng-if="vis.type.schemas.buckets" data-test-subj="bucketsAggGroup" group-name="buckets"></vis-editor-agg-group>
</div>
<div class="vis-editor-config" ng-repeat="tab in vis.type.editorConfig.optionTabs" ng-show="sidebar.section == tab.name">
<div class="visEditorSidebar__config" ng-repeat="tab in vis.type.editorConfig.optionTabs" ng-show="sidebar.section == tab.name">
<vis-editor-vis-options
editor-state="state"
vis="vis"

2
src/ui/public/vis/vis_types/base_vis_type.js
View file

@ -32,7 +32,7 @@ export class BaseVisType {
if (!opts.description) {
throw('vis_type must define its description');
}
if (!opts.icon && !opts.image) {
if (!opts.icon && !opts.image && !opts.legacyIcon) {
throw('vis_type must define its icon or image');
}
if (!opts.visualization) {

2
test/functional/apps/visualize/_markdown_vis.js
View file

@ -64,7 +64,7 @@ export default function ({ getPageObjects, getService }) {
});
it('should resize the editor', async function () {
const editorSidebar = await find.byCssSelector('.vis-editor-sidebar');
const editorSidebar = await find.byCssSelector('.visEditor__sidebar');
const initialSize = await editorSidebar.getSize();
await PageObjects.visualize.sizeUpEditor();
const afterSize = await editorSidebar.getSize();

2
test/functional/page_objects/discover_page.js
View file

@ -145,7 +145,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
// 3). get the chart-wrapper elements
.then(function () {
return getRemote()
// #kibana-body > div.content > div > div > div > div.vis-editor-canvas > visualize > div.visualize-chart > div > div.vis-col-wrapper > div.chart-wrapper > div > svg > g > g.series.\30 > rect:nth-child(1)
// #kibana-body > div.content > div > div > div > div.visEditor__canvas > visualize > div.visualize-chart > div > div.vis-col-wrapper > div.chart-wrapper > div > svg > g > g.series.\30 > rect:nth-child(1)
.findAllByCssSelector('svg > g > g.series > rect') // rect
.then(function (chartTypes) {
function getChartType(chart) {

1
x-pack/plugins/ml/index.js
View file

@ -38,6 +38,7 @@ export const ml = (kibana) => {
description: 'Machine Learning for the Elastic Stack',
icon: 'plugins/ml/ml.svg',
main: 'plugins/ml/app',
styleSheetPath: `${__dirname}/public/index.scss`,
},
hacks: ['plugins/ml/hacks/toggle_app_link_in_nav'],
home: ['plugins/ml/register_feature']

1
x-pack/plugins/ml/public/datavisualizer/datavisualizer_controller.js
View file

@ -14,7 +14,6 @@
import _ from 'lodash';
import rison from 'rison-node';
import 'plugins/kibana/visualize/styles/main.less';
import 'plugins/ml/components/form_filter_input';
import chrome from 'ui/chrome';

3
x-pack/plugins/ml/public/index.scss Normal file
View file

@ -0,0 +1,3 @@
@import 'ui/public/styles/styling_constants';
@import 'core_plugins/kibana/public/visualize/index';

1
x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_controller.js
View file

@ -8,7 +8,6 @@
import _ from 'lodash';
import 'plugins/kibana/visualize/styles/main.less';
import { aggTypes } from 'ui/agg_types/index';
import { addJobValidationMethods } from 'plugins/ml/../common/util/validation_utils';
import { parseInterval } from 'plugins/ml/../common/util/parse_interval';

1
x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job_controller.js
View file

@ -8,7 +8,6 @@
import _ from 'lodash';
import 'plugins/kibana/visualize/styles/main.less';
import { aggTypes } from 'ui/agg_types/index';
import { addJobValidationMethods } from 'plugins/ml/../common/util/validation_utils';
import { parseInterval } from 'plugins/ml/../common/util/parse_interval';

1
x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job_controller.js
View file

@ -12,7 +12,6 @@ import dateMath from '@kbn/datemath';
import { isJobIdValid, prefixDatafeedId } from 'plugins/ml/../common/util/job_utils';
import { createSearchItems, addNewJobToRecentlyAccessed } from 'plugins/ml/jobs/new_job/utils/new_job_utils';
import 'plugins/kibana/visualize/styles/main.less';
import uiRoutes from 'ui/routes';
import { checkLicenseExpired } from 'plugins/ml/license/check_license';

1
x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job_controller.js
View file

@ -8,7 +8,6 @@
import _ from 'lodash';
import 'plugins/kibana/visualize/styles/main.less';
import { aggTypes } from 'ui/agg_types/index';
import { addJobValidationMethods } from 'plugins/ml/../common/util/validation_utils';
import { parseInterval } from 'plugins/ml/../common/util/parse_interval';

3
x-pack/plugins/ml/public/jobs/new_job/wizard/index.js
View file

@ -7,7 +7,8 @@
import './styles/main.less';
import 'plugins/kibana/visualize/wizard/wizard.less';
// SASS TODO: Import wizard.scss instead
// import 'plugins/kibana/visualize/wizard/wizard.less';
import './steps/index_or_search';
import './steps/job_type';
import 'plugins/ml/components/data_recognizer';

10
x-pack/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html
View file

@ -2,25 +2,25 @@
<ml-new-job class="index-or-saved-search-selection">
<ml-message-bar></ml-message-bar>
<div class='kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem' >
<div ng-controller="MlNewJobStepIndexOrSearch" class="wizard">
<div class="wizard-column wizard-column--small">
<div ng-controller="MlNewJobStepIndexOrSearch" class="visWizard">
<div class="visWizard__column visWizard__column--small">
<h3 class="kuiTitle kuiVerticalRhythm">From a New Search, Select Index</h3>
<paginated-selectable-list
per-page="20"
list="indexPatterns"
list-property="attributes.title"
user-make-url="withIndexPatternUrl"
class="wizard-row visualizeWizardPaginatedSelectableList kuiVerticalRhythm"
class="visWizard__row visWizard__list--paginated--selectable kuiVerticalRhythm"
disable-auto-focus="true"
></paginated-selectable-list>
</div>
<div class="wizard-column wizard-column--large">
<div class="visWizard__column visWizard__column--large">
<h3 class="kuiTitle kuiVerticalRhythm">Or, From a Saved Search</h3>
<saved-object-finder
title="Saved Searches"
type="searches"
class="wizard-row visualizeWizardSavedObjectFinder kuiVerticalRhythm"
class="visWizard__row visWizard__savedObjectFinder kuiVerticalRhythm"
make-url="withSavedSearchUrl"
disable-auto-focus="true"
></saved-object-finder>

6
x-pack/plugins/reporting/export_types/printable_pdf/server/lib/layouts/preserve_layout.css
View file

@ -55,7 +55,7 @@ discover-app .discover-table-footer {
*/
/* hide unusable controls */
visualization-editor .default-vis-editor > :not(.vis-editor-canvas) {
visualization-editor .visEditor--default > :not(.visEditor__canvas) {
display: none;
}
@ -72,8 +72,8 @@ visualization-editor .default-vis-editor > :not(.vis-editor-canvas) {
/* remove left padding from visualizations so that map lines up with .leaflet-container and
* setting the position to be fixed and to take up the entire screen, because some zoom levels/viewports
* are triggering the media breakpoints that cause the .vis-editor-canvas to take up more room than the viewport */
visualize-app .vis-editor-canvas {
* are triggering the media breakpoints that cause the .visEditor__canvas to take up more room than the viewport */
visualize-app .visEditor__canvas {
padding-left: 0px;
position: fixed;
width: 100%;

6
x-pack/plugins/reporting/export_types/printable_pdf/server/lib/layouts/print.css
View file

@ -54,7 +54,7 @@ discover-app .discover-table-footer {
*/
/* hide unusable controls */
visualization-editor .default-vis-editor > :not(.vis-editor-canvas) {
visualization-editor .visEditor--default > :not(.visEditor__canvas) {
display: none;
}
/** THIS IS FOR TSVB UNTIL REFACTOR **/
@ -70,8 +70,8 @@ visualization-editor .default-vis-editor > :not(.vis-editor-canvas) {
/* remove left padding from visualizations so that map lines up with .leaflet-container and
* setting the position to be fixed and to take up the entire screen, because some zoom levels/viewports
* are triggering the media breakpoints that cause the .vis-editor-canvas to take up more room than the viewport */
visualize-app .vis-editor-canvas {
* are triggering the media breakpoints that cause the .visEditor__canvas to take up more room than the viewport */
visualize-app .visEditor__canvas {
padding-left: 0px;
position: fixed;
width: 100%;

BIN
x-pack/test/reporting/functional/reports/baseline/visualize_print.pdf
View file

Binary file not shown.