You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -414,7 +432,7 @@ extract them to a `JSON` file or integrate translations back to Kibana. To know
414
432
We cannot support accepting contributions to the translations from any source other than the translators we have engaged to do the work.
415
433
We are still to develop a proper process to accept any contributed translations. We certainly appreciate that people care enough about the localization effort to want to help improve the quality. We aim to build out a more comprehensive localization process for the future and will notify you once contributions can be supported, but for the time being, we are not able to incorporate suggestions.
416
434
417
-
### Syling with SASS
435
+
### Styling with SASS
418
436
419
437
When writing a new component, create a sibling SASS file of the same name and import directly into the JS/TS component file. Doing so ensures the styles are never separated or lost on import and allows for better modularization (smaller individual plugin asset footprint).
420
438
@@ -467,10 +485,10 @@ macOS users on a machine with a discrete graphics card may see significant speed
467
485
- Uncheck the "Prefer integrated to discrete GPU" option
468
486
- Restart iTerm
469
487
470
-
### Debugging Server Code
488
+
####Debugging Server Code
471
489
`yarn debug` will start the server with Node's inspect flag. Kibana's development mode will start three processes on ports `9229`, `9230`, and `9231`. Chrome's developer tools need to be configured to connect to all three connections. Add `localhost:<port>` for each Kibana process in Chrome's developer tools connection tab.
472
490
473
-
### Instrumenting with Elastic APM
491
+
####Instrumenting with Elastic APM
474
492
Kibana ships with the [Elastic APM Node.js Agent](https://github.com/elastic/apm-agent-nodejs) built-in for debugging purposes.
475
493
476
494
Its default configuration is meant to be used by core Kibana developers only, but it can easily be re-configured to your needs.
Once the agent is active, it will trace all incoming HTTP requests to Kibana, monitor for errors, and collect process-level metrics.
502
520
The collected data will be sent to the APM Server and is viewable in the APM UI in Kibana.
503
521
504
-
### Unit testing frameworks
522
+
####Unit testing frameworks
505
523
Kibana is migrating unit testing from Mocha to Jest. Legacy unit tests still
506
524
exist in Mocha but all new unit tests should be written in Jest. Mocha tests
507
525
are contained in `__tests__` directories. Whereas Jest tests are stored in
508
526
the same directory as source code files with the `.test.js` suffix.
509
527
510
-
### Running specific Kibana tests
528
+
####Running specific Kibana tests
511
529
512
530
The following table outlines possible test file locations and how to invoke them:
513
531
@@ -540,7 +558,7 @@ Test runner arguments:
540
558
yarn test:ftr:runner --config test/api_integration/config.js --grep='should return 404 if id does not match any sample data sets'
541
559
```
542
560
543
-
### Debugging Unit Tests
561
+
#### Debugging Unit Tests
544
562
545
563
The standard `yarn test` task runs several sub tasks and can take several minutes to complete, making debugging failures pretty painful. In order to ease the pain specialized tasks provide alternate methods for running the tests.
546
564
@@ -567,7 +585,7 @@ In the screenshot below, you'll notice the URL is `localhost:9876/debug.html`. Y
567
585
568
586
569
587
570
-
### Unit Testing Plugins
588
+
####Unit Testing Plugins
571
589
572
590
This should work super if you're using the [Kibana plugin generator](https://github.com/elastic/kibana/tree/master/packages/kbn-plugin-generator). If you're not using the generator, well, you're on your own. We suggest you look at how the generator works.
573
591
@@ -578,7 +596,7 @@ yarn test:mocha
578
596
yarn test:karma:debug # remove the debug flag to run them once and close
579
597
```
580
598
581
-
### Automated Accessibility Testing
599
+
####Automated Accessibility Testing
582
600
583
601
To run the tests locally:
584
602
@@ -595,11 +613,11 @@ can be run locally using their browser plugins:
*[Download IE virtual machines](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/#downloads) for VMWare.
@@ -610,7 +628,7 @@ can be run locally using their browser plugins:
610
628
* Now you can run your VM, open the browser, and navigate to `http://computer.local:5601` to test Kibana.
611
629
* Alternatively you can use browserstack
612
630
613
-
#### Running Browser Automation Tests
631
+
#####Running Browser Automation Tests
614
632
615
633
[Read about the `FunctionalTestRunner`](https://www.elastic.co/guide/en/kibana/current/development-functional-tests.html) to learn more about how you can run and develop functional tests for Kibana core and plugins.
Copy file name to clipboardExpand all lines: docs/canvas/canvas-elements.asciidoc
+20-35Lines changed: 20 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,36 +27,38 @@ By default, most of the elements you create use demo data until you change the d
27
27
28
28
* *Timelion* — Access your time series data using <<timelion,Timelion>> queries. To use Timelion queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
29
29
30
+
Each element can display a different data source. Pages and workpads often contain multiple data sources.
31
+
30
32
[float]
31
33
[[canvas-add-object]]
32
34
==== Add a saved object
33
35
34
-
Add a <<managing-saved-objects,saved object>>, then customize it to fit your display needs.
36
+
Add <<managing-saved-objects,saved objects>> to your workpad, such as maps and visualizations.
35
37
36
-
. Click *Embed object*.
38
+
. Click *Add element > Add from Visualize Library*.
37
39
38
-
. Select the object you want to add.
40
+
. Select the saved object you want to add.
39
41
+
40
42
[role="screenshot"]
41
43
image::images/canvas-map-embed.gif[]
42
44
43
45
. To use the customization options, click the panel menu, then select one of the following options:
44
46
45
-
* *Edit map* — Opens <<maps,Maps>> so that you can edit the original map.
47
+
* *Edit map* — Opens <<maps,Maps>> or <<visualize,Visualize>> so that you can edit the original saved object.
46
48
47
-
* *Customize panel* — Specifies the object title options.
49
+
* *Edit panel title* — Adds a title to the saved object.
48
50
49
-
* *Inspect* — Allows you to drill down into the element data.
51
+
* *Customize time range* — Exposes a time filter dedicated to the saved object.
50
52
51
-
* *Customize time range* — Exposes a time filter dedicated to the map.
53
+
* *Inspect* — Allows you to drill down into the element data.
52
54
53
55
[float]
54
56
[[canvas-add-image]]
55
57
==== Add your own image
56
58
57
59
To personalize your workpad, add your own logos and graphics.
58
60
59
-
. Click *Manage assets*.
61
+
. Click *Add element > Manage assets*.
60
62
61
63
. On the *Manage workpad assets* window, drag and drop your images.
62
64
@@ -83,40 +85,25 @@ Move and resize your elements to meet your design needs.
83
85
[[format-canvas-elements]]
84
86
==== Format elements
85
87
86
-
Align, distribute, and reorder elements for consistency and readability across your workpad pages.
87
-
88
-
Access the align, distribute, and reorder options by clicking the *Element options* icon.
89
-
90
-
[role="screenshot"]
91
-
image::images/canvas_element_options.png[]
88
+
For consistency and readability across your workpad pages, align, distribute, and reorder elements.
92
89
93
-
To align elements:
90
+
To align two or more elements:
94
91
95
92
. Press and hold Shift, then select the elements you want to align.
96
93
97
-
. Click the , then select *Group*.
94
+
. Click *Edit > Alignment*, then select the alignment option.
98
95
99
-
. Click the *Element options* icon, then select *Alignment*.
100
-
101
-
. Select the alignment option.
102
-
103
-
To distribute elements:
96
+
To distribute three or more elements:
104
97
105
98
. Press and hold Shift, then select the elements you want to distribute.
106
99
107
-
. Click the *Element options* icon, then select *Group*.
108
-
109
-
. Click the *Element options* icon, then select *Distribution*.
110
-
111
-
. Select the distribution option.
100
+
. Click *Edit > Distribution*, then select the distribution option.
112
101
113
102
To reorder elements:
114
103
115
104
. Select the element you want to reorder.
116
105
117
-
. Click the *Element options* icon, then select *Order*.
118
-
119
-
. Select the order option.
106
+
. Click *Edit > Order*, then select the order option.
120
107
121
108
[float]
122
109
[[data-display]]
@@ -157,14 +144,14 @@ text.align: center;
157
144
158
145
To use the elements across all workpads, save the elements.
159
146
160
-
When you're ready to save your element, select the element, then click the *Save as new element* icon.
147
+
When you're ready to save your element, select the element, then click *Edit > Save as new element*.
161
148
162
149
[role="screenshot"]
163
150
image::images/canvas_save_element.png[]
164
151
165
-
To save a group of elements, press and hold Shift, then select the elements you want to save.
152
+
To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.
166
153
167
-
To access your saved elements, click *Add element*, then select *My elements*.
154
+
To access your saved elements, click *Add element > My elements*.
168
155
169
156
[float]
170
157
[[delete-elements]]
@@ -174,9 +161,7 @@ When you no longer need an element, delete it from your workpad.
0 commit comments