github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[PipelineViewer] Replace bare img tags with euiicon (#20330)

Browse source 
* Remove direct references to EUI SVG. Remove bare img tag from DetailDrawer.

* Update DetailDrawer test snapshots.
This commit is contained in:
Justin Kambic 2018-07-01 15:37:19 -04:00 • committed by GitHub
parent 926675139d
commit f4d9e08b45
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 34 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/monitoring/common/constants.js
View file

@ -116,17 +116,6 @@ export const CLOUD_METADATA_SERVICES = {
* Constants used by Logstash monitoring code
*/
export const LOGSTASH = {
/**
* Constants used by Logstash Pipeline Viewer code
*/
PIPELINE_VIEWER: {
ICON: {
HEIGHT_PX: 18,
WIDTH_PX: 18
}
},
MAJOR_VER_REQD_FOR_PIPELINES: 6,
/*

3
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/graph/__tests__/if_vertex.js
View file

@ -7,7 +7,6 @@
import expect from 'expect.js';
import { IfVertex } from '../if_vertex';
import { Vertex } from '../vertex';
import ifIcon from '@elastic/eui/src/components/icon/assets/logstash_if.svg';
describe('IfVertex', () => {
let graph;
@ -37,6 +36,6 @@ describe('IfVertex', () => {
it('should use the correct icon', () => {
const ifVertex = new IfVertex(graph, vertexJson);
expect(ifVertex.icon).to.be(ifIcon);
expect(ifVertex.iconType).to.be('logstashIf');
});
});

11
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/graph/__tests__/plugin_vertex.js
View file

@ -10,9 +10,6 @@ import {
PluginVertex,
TIME_CONSUMING_PROCESSOR_THRESHOLD_COEFFICIENT
} from '../plugin_vertex';
import inputIcon from '@elastic/eui/src/components/icon/assets/logstash_input.svg';
import filterIcon from '@elastic/eui/src/components/icon/assets/logstash_filter.svg';
import outputIcon from '@elastic/eui/src/components/icon/assets/logstash_output.svg';
describe('PluginVertex', () => {
let graph;
@ -148,14 +145,14 @@ describe('PluginVertex', () => {
it('should use the correct icon', () => {
const pluginVertex = new PluginVertex(graph, vertexJson);
expect(pluginVertex.icon).to.be(inputIcon);
expect(pluginVertex.iconType).to.be('logstashInput');
});
});
it('icon should throw an error if type of plugin is unknown', () => {
vertexJson.plugin_type = 'foobar';
const pluginVertex = new PluginVertex(graph, vertexJson);
const fn = () => pluginVertex.icon;
const fn = () => pluginVertex.iconType;
expect(fn).to.throwError();
});
@ -181,7 +178,7 @@ describe('PluginVertex', () => {
it('should use the correct icon', () => {
const pluginVertex = new PluginVertex(graph, vertexJson);
expect(pluginVertex.icon).to.be(filterIcon);
expect(pluginVertex.iconType).to.be('logstashFilter');
});
});
@ -207,7 +204,7 @@ describe('PluginVertex', () => {
it('should use the correct icon', () => {
const pluginVertex = new PluginVertex(graph, vertexJson);
expect(pluginVertex.icon).to.be(outputIcon);
expect(pluginVertex.iconType).to.be('logstashOutput');
});
});
});

5
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/graph/if_vertex.js
View file

@ -6,7 +6,6 @@
import { intersection } from 'lodash';
import { Vertex } from './vertex';
import ifIcon from '@elastic/eui/src/components/icon/assets/logstash_if.svg';
export class IfVertex extends Vertex {
get typeString() {
@ -17,8 +16,8 @@ export class IfVertex extends Vertex {
return this.json.condition;
}
get icon() {
return ifIcon;
get iconType() {
return 'logstashIf';
}
get title() {

11
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/graph/plugin_vertex.js
View file

@ -6,9 +6,6 @@
import { last, get, omit } from 'lodash';
import { Vertex } from './vertex';
import inputIcon from '@elastic/eui/src/components/icon/assets/logstash_input.svg';
import filterIcon from '@elastic/eui/src/components/icon/assets/logstash_filter.svg';
import outputIcon from '@elastic/eui/src/components/icon/assets/logstash_output.svg';
export const TIME_CONSUMING_PROCESSOR_THRESHOLD_COEFFICIENT = 2;
export const SLOWNESS_STANDARD_DEVIATIONS_ABOVE_THE_MEAN = 2;
@ -106,14 +103,14 @@ export class PluginVertex extends Vertex {
return slowness > SLOWNESS_STANDARD_DEVIATIONS_ABOVE_THE_MEAN;
}
get icon() {
get iconType() {
switch(this.pluginType) {
case 'input':
return inputIcon;
return 'logstashInput';
case 'filter':
return filterIcon;
return 'logstashFilter';
case 'output':
return outputIcon;
return 'logstashOutput';
default:
throw new Error(`Unknown plugin type ${this.pluginType}! This shouldn't happen!`);
}

5
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/graph/queue_vertex.js
View file

@ -5,7 +5,6 @@
*/
import { Vertex } from './vertex';
import queueIcon from '@elastic/eui/src/components/icon/assets/logstash_queue.svg';
export class QueueVertex extends Vertex {
get typeString() {
@ -16,8 +15,8 @@ export class QueueVertex extends Vertex {
return 'queue';
}
get icon() {
return queueIcon;
get iconType() {
return 'logstashQueue';
}
get next() {

25
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap
View file

@ -23,10 +23,9 @@ exports[`DetailDrawer component If vertices shows basic info and no stats for if
component="div"
grow={false}
>
<img
<EuiIcon
className="lspvDetailDrawerIcon"
height={18}
width={18}
size="m"
/>
</EuiFlexItem>
<EuiFlexItem
@ -91,10 +90,9 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
component="div"
grow={false}
>
<img
<EuiIcon
className="lspvDetailDrawerIcon"
height={18}
width={18}
size="m"
/>
</EuiFlexItem>
<EuiFlexItem
@ -381,10 +379,9 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
component="div"
grow={false}
>
<img
<EuiIcon
className="lspvDetailDrawerIcon"
height={18}
width={18}
size="m"
/>
</EuiFlexItem>
<EuiFlexItem
@ -667,10 +664,9 @@ exports[`DetailDrawer component Queue vertices shows basic info and no stats for
component="div"
grow={false}
>
<img
<EuiIcon
className="lspvDetailDrawerIcon"
height={18}
width={18}
size="m"
/>
</EuiFlexItem>
<EuiFlexItem
@ -725,10 +721,9 @@ exports[`DetailDrawer component shows vertex title 1`] = `
component="div"
grow={false}
>
<img
<EuiIcon
className="lspvDetailDrawerIcon"
height={18}
width={18}
size="m"
/>
</EuiFlexItem>
<EuiFlexItem

24
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js
View file

@ -7,31 +7,29 @@
import React from 'react';
import { last } from 'lodash';
import {
EuiTitle,
EuiText,
EuiBadge,
EuiCodeBlock,
EuiFlexGroup,
EuiFlexItem,
EuiFlyout,
EuiFlyoutHeader,
EuiFlyoutBody,
EuiFlyoutHeader,
EuiIcon,
EuiSpacer,
EuiTable,
EuiTableBody,
EuiTableRow,
EuiTableRowCell,
EuiCodeBlock,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiBadge,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { Sparkline } from '../../../sparkline';
import { formatMetric } from '../../../../lib/format_number';
import { LOGSTASH } from '../../../../../common/constants';
function renderIcon(vertex) {
return (
<img
src={vertex.icon}
width={LOGSTASH.PIPELINE_VIEWER.ICON.WIDTH_PX}
height={LOGSTASH.PIPELINE_VIEWER.ICON.HEIGHT_PX}
<EuiIcon
type={vertex.iconType}
className="lspvDetailDrawerIcon"
/>
);