Skip to content

Commit b352976

Browse files
[Canvas] Expression reveal image. (elastic#101987)
* expression_reveal_image skeleton. * expression_functions added. * expression_renderers added. * Backup of daily work. * Fixed errors. * Added legacy support. Added button for legacy. * Added storybook. * Removed revealImage from canvas. * setState while rendering error fixed. * tsconfig.json added. * jest.config.js added. * Demo doc added. * Types fixed. * added limits. * Removed not used imports. * i18n namespaces fixed. * Fixed test suite error. * Some errors fixed. * Fixed eslint error. * Removed more unused translations. * Moved UI and elements, related to expressionRevealImage from canvas. * Fixed unused translations errors. * Moved type of element to types. * Fixed types and added service for representing elements, ui and supported renderers to canvas. * Added expression registration to canvas. * Fixed * Fixed mutiple call of the function. * Removed support of a legacy lib for revealImage chart. * Removed legacy presentation_utils plugin import. * Doc error fixed. * Removed useless translations and tried to fix error. * One more fix. * Small imports fix. * Fixed translations. * Made fixes based on nits. * Removed useless params. * fix. * Fixed errors, related to jest and __mocks__. * Removed useless type definition. * Replaced RendererHandlers with IInterpreterRendererHandlers. * fixed supported_shareable. * Moved elements back to canvas. * Moved views to canvas, removed expression service and imported renderer to canvas. * Fixed translations. * Types fix. * Moved libs to presentation utils. * Fixed one mistake. * removed dataurl lib. * Fixed jest files. * elasticLogo removed. * Removed elastic_outline. * removed httpurl. * Removed missing_asset. * removed url. * replaced mostly all tests. * Fixed types. * Fixed types and removed function_wrapper.ts * Fixed types of test helpers. * Changed limits of presentationUtil plugin. * Fixed imports. * One more fix. * Fixed huge size of bundle. * Reduced allow limit for presentationUtil * Updated limits for presentationUtil. * Fixed public API. * fixed type errors. * Moved css to component. * Fixed spaces at element. * Changed order of requiredPlugins. * Updated limits. * Removed unused plugin. * Added rule for allowing import from __stories__ directory. * removed useless comment. * Changed readme.md * Fixed docs error. * A possible of smoke test. * onResize changed to useResizeObserver. * Remove useless events and `useEffect` block. * Changed from passing handlers to separate functions. * `function` moved to `server`. * Fixed eslint error. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
1 parent ba85f45 commit b352976

File tree

159 files changed

+1311
-512
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

159 files changed

+1311
-512
lines changed

.eslintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -445,6 +445,7 @@ module.exports = {
445445
'(src|x-pack)/plugins/**/(public|server)/**/*',
446446
'!(src|x-pack)/plugins/**/(public|server)/mocks/index.{js,mjs,ts}',
447447
'!(src|x-pack)/plugins/**/(public|server)/(index|mocks).{js,mjs,ts,tsx}',
448+
'!(src|x-pack)/plugins/**/__stories__/index.{js,mjs,ts,tsx}',
448449
],
449450
allowSameFolder: true,
450451
errorMessage: 'Plugins may only import from top-level public and server modules.',

.i18nrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"esUi": "src/plugins/es_ui_shared",
1717
"devTools": "src/plugins/dev_tools",
1818
"expressions": "src/plugins/expressions",
19+
"expressionRevealImage": "src/plugins/expression_reveal_image",
1920
"inputControl": "src/plugins/input_control_vis",
2021
"inspector": "src/plugins/inspector",
2122
"inspectorViews": "src/legacy/core_plugins/inspector_views",

docs/developer/plugin-list.asciidoc

+4
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
7272
|This plugin contains reusable code in the form of self-contained modules (or libraries). Each of these modules exports a set of functionality relevant to the domain of the module.
7373
7474
75+
|{kib-repo}blob/{branch}/src/plugins/expression_reveal_image/README.md[expressionRevealImage]
76+
|Expression Reveal Image plugin adds a revealImage function to the expression plugin and an associated renderer. The renderer will display the given percentage of a given image.
77+
78+
7579
|<<kibana-expressions-plugin>>
7680
|Expression pipeline is a chain of functions that *pipe* its output to the
7781
input of the next function. Functions can be configured using arguments provided

packages/kbn-optimizer/limits.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ pageLoadAssetSize:
9999
watcher: 43598
100100
runtimeFields: 41752
101101
stackAlerts: 29684
102-
presentationUtil: 49767
102+
presentationUtil: 94301
103103
spacesOss: 18817
104104
indexPatternFieldEditor: 90489
105105
osquery: 107090
@@ -110,4 +110,5 @@ pageLoadAssetSize:
110110
timelines: 230410
111111
screenshotMode: 17856
112112
visTypePie: 35583
113+
expressionRevealImage: 25675
113114
cases: 144442

src/dev/storybook/aliases.ts

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const storybookAliases = {
1717
dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
1818
data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
1919
embeddable: 'src/plugins/embeddable/.storybook',
20+
expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
2021
infra: 'x-pack/plugins/infra/.storybook',
2122
security_solution: 'x-pack/plugins/security_solution/.storybook',
2223
ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"prefix": "expressionRevealImage",
3+
"paths": {
4+
"expressionRevealImage": "."
5+
},
6+
"translations": ["translations/ja-JP.json"]
7+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
// eslint-disable-next-line import/no-commonjs
10+
module.exports = require('@kbn/storybook').defaultConfig;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# expressionRevealImage
2+
3+
Expression Reveal Image plugin adds a `revealImage` function to the expression plugin and an associated renderer. The renderer will display the given percentage of a given image.
4+
5+
---
6+
7+
## Development
8+
9+
See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
export const PLUGIN_ID = 'expressionRevealImage';
9+
export const PLUGIN_NAME = 'expressionRevealImage';
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import { revealImageFunction } from './reveal_image_function';
10+
11+
export const functions = [revealImageFunction];
12+
13+
export { revealImageFunction };
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import {
10+
functionWrapper,
11+
elasticOutline,
12+
elasticLogo,
13+
} from '../../../presentation_util/common/lib';
14+
import { getFunctionErrors } from '../i18n';
15+
import { revealImageFunction } from './reveal_image_function';
16+
import { Origin } from '../types';
17+
import { ExecutionContext } from 'src/plugins/expressions';
18+
19+
const errors = getFunctionErrors().revealImage;
20+
21+
describe('revealImageFunction', () => {
22+
const fn = functionWrapper(revealImageFunction);
23+
24+
it('returns a render as revealImage', () => {
25+
const result = fn(
26+
0.5,
27+
{
28+
image: null,
29+
emptyImage: null,
30+
origin: Origin.BOTTOM,
31+
},
32+
{} as ExecutionContext
33+
);
34+
expect(result).toHaveProperty('type', 'render');
35+
expect(result).toHaveProperty('as', 'revealImage');
36+
});
37+
38+
describe('context', () => {
39+
it('throws when context is not a number between 0 and 1', () => {
40+
expect(() => {
41+
fn(
42+
10,
43+
{
44+
image: elasticLogo,
45+
emptyImage: elasticOutline,
46+
origin: Origin.TOP,
47+
},
48+
{} as ExecutionContext
49+
);
50+
}).toThrow(new RegExp(errors.invalidPercent(10).message));
51+
52+
expect(() => {
53+
fn(
54+
-0.1,
55+
{
56+
image: elasticLogo,
57+
emptyImage: elasticOutline,
58+
origin: Origin.TOP,
59+
},
60+
{} as ExecutionContext
61+
);
62+
}).toThrow(new RegExp(errors.invalidPercent(-0.1).message));
63+
});
64+
});
65+
66+
describe('args', () => {
67+
describe('image', () => {
68+
it('sets the image', () => {
69+
const result = fn(
70+
0.89,
71+
{
72+
emptyImage: null,
73+
origin: Origin.TOP,
74+
image: elasticLogo,
75+
},
76+
{} as ExecutionContext
77+
).value;
78+
expect(result).toHaveProperty('image', elasticLogo);
79+
});
80+
81+
it('defaults to the Elastic outline logo', () => {
82+
const result = fn(
83+
0.89,
84+
{
85+
emptyImage: null,
86+
origin: Origin.TOP,
87+
image: null,
88+
},
89+
{} as ExecutionContext
90+
).value;
91+
expect(result).toHaveProperty('image', elasticOutline);
92+
});
93+
});
94+
95+
describe('emptyImage', () => {
96+
it('sets the background image', () => {
97+
const result = fn(
98+
0,
99+
{
100+
emptyImage: elasticLogo,
101+
origin: Origin.TOP,
102+
image: null,
103+
},
104+
{} as ExecutionContext
105+
).value;
106+
expect(result).toHaveProperty('emptyImage', elasticLogo);
107+
});
108+
109+
it('sets emptyImage to null', () => {
110+
const result = fn(
111+
0,
112+
{
113+
emptyImage: null,
114+
origin: Origin.TOP,
115+
image: null,
116+
},
117+
{} as ExecutionContext
118+
).value;
119+
expect(result).toHaveProperty('emptyImage', null);
120+
});
121+
});
122+
123+
describe('origin', () => {
124+
it('sets which side to start the reveal from', () => {
125+
let result = fn(
126+
1,
127+
{
128+
emptyImage: null,
129+
origin: Origin.TOP,
130+
image: null,
131+
},
132+
{} as ExecutionContext
133+
).value;
134+
expect(result).toHaveProperty('origin', 'top');
135+
result = fn(
136+
1,
137+
{
138+
emptyImage: null,
139+
origin: Origin.LEFT,
140+
image: null,
141+
},
142+
{} as ExecutionContext
143+
).value;
144+
expect(result).toHaveProperty('origin', 'left');
145+
result = fn(
146+
1,
147+
{
148+
emptyImage: null,
149+
origin: Origin.BOTTOM,
150+
image: null,
151+
},
152+
{} as ExecutionContext
153+
).value;
154+
expect(result).toHaveProperty('origin', 'bottom');
155+
result = fn(
156+
1,
157+
{
158+
emptyImage: null,
159+
origin: Origin.RIGHT,
160+
image: null,
161+
},
162+
{} as ExecutionContext
163+
).value;
164+
expect(result).toHaveProperty('origin', 'right');
165+
});
166+
});
167+
});
168+
});

x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.ts src/plugins/expression_reveal_image/common/expression_functions/reveal_image_function.ts

+8-33
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,16 @@
11
/*
22
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
33
* or more contributor license agreements. Licensed under the Elastic License
4-
* 2.0; you may not use this file except in compliance with the Elastic License
5-
* 2.0.
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
67
*/
78

8-
import { ExpressionFunctionDefinition, ExpressionValueRender } from 'src/plugins/expressions';
9-
import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
10-
import { elasticOutline } from '../../lib/elastic_outline';
11-
import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
9+
import { resolveWithMissingImage, elasticOutline } from '../../../presentation_util/common/lib';
10+
import { getFunctionHelp, getFunctionErrors } from '../i18n';
11+
import { ExpressionRevealImageFunction, Origin } from '../types';
1212

13-
export enum Origin {
14-
TOP = 'top',
15-
LEFT = 'left',
16-
BOTTOM = 'bottom',
17-
RIGHT = 'right',
18-
}
19-
20-
interface Arguments {
21-
image: string | null;
22-
emptyImage: string | null;
23-
origin: Origin;
24-
}
25-
26-
export interface Output {
27-
image: string;
28-
emptyImage: string;
29-
origin: Origin;
30-
percent: number;
31-
}
32-
33-
export function revealImage(): ExpressionFunctionDefinition<
34-
'revealImage',
35-
number,
36-
Arguments,
37-
ExpressionValueRender<Output>
38-
> {
13+
export const revealImageFunction: ExpressionRevealImageFunction = () => {
3914
const { help, args: argHelp } = getFunctionHelp().revealImage;
4015
const errors = getFunctionErrors().revealImage;
4116

@@ -80,4 +55,4 @@ export function revealImage(): ExpressionFunctionDefinition<
8055
};
8156
},
8257
};
83-
}
58+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
export const BASE64 = '`base64`';
10+
export const URL = 'URL';

0 commit comments

Comments
 (0)