IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Geomap: Add icon to ResourceDimensionEditor and fix marker color (#40418)

Browse Source 
* add resourcedimension icon and fix marker color

* update to input prefix and markerShapePath

* update to svg from icon
This commit is contained in:
nikki-kiga
2021-10-14 08:30:24 -07:00
committed by GitHub
parent 51a48e1869
commit 86e89d9dc3
3 changed files with 56 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/app/features/dimensions/editors/ResourceDimensionEditor.tsx
View File

@@ -1,11 +1,17 @@
import React, { FC, useCallback, useState } from 'react';
import { FieldNamePickerConfigSettings, StandardEditorProps, StandardEditorsRegistryItem } from '@grafana/data';
import {
FieldNamePickerConfigSettings,
GrafanaTheme2,
StandardEditorProps,
StandardEditorsRegistryItem,
} from '@grafana/data';
import { ResourceDimensionConfig, ResourceDimensionMode, ResourceDimensionOptions } from '../types';
import { InlineField, InlineFieldRow, RadioButtonGroup, Button, Modal, Input } from '@grafana/ui';
import { InlineField, InlineFieldRow, RadioButtonGroup, Button, Modal, Input, useStyles2 } from '@grafana/ui';
import { FieldNamePicker } from '../../../../../packages/grafana-ui/src/components/MatchersUI/FieldNamePicker';
import { ResourcePicker } from './ResourcePicker';
import { ResourceFolderName } from '..';
import { getPublicOrAbsoluteUrl, ResourceFolderName } from '..';
import SVG from 'react-inlinesvg';
import { css } from '@emotion/css';
const resourceOptions = [
{ label: 'Fixed', value: ResourceDimensionMode.Fixed, description: 'Fixed value' },
{ label: 'Field', value: ResourceDimensionMode.Field, description: 'Use a string field result' },
@@ -22,6 +28,7 @@ export const ResourceDimensionEditor: FC<
const { value, context, onChange, item } = props;
const labelWidth = 9;
const [isOpen, setOpen] = useState(false);
const styles = useStyles2(getStyles);
const onModeChange = useCallback(
(mode) => {
@@ -62,6 +69,7 @@ export const ResourceDimensionEditor: FC<
const showSourceRadio = item.settings?.showSourceRadio ?? true;
const mediaType = item.settings?.resourceType ?? 'icon';
const folderName = item.settings?.folderName ?? ResourceFolderName.Icon;
const srcPath = mediaType === 'icon' && value ? getPublicOrAbsoluteUrl(value?.fixed) : '';
return (
<>
@@ -92,7 +100,13 @@ export const ResourceDimensionEditor: FC<
{mode === ResourceDimensionMode.Fixed && (
<InlineFieldRow>
<InlineField label={null} grow>
<Input value={value?.fixed} placeholder="Resource URL" readOnly={true} onClick={openModal} />
<Input
value={value?.fixed}
placeholder="Resource URL"
readOnly={true}
onClick={openModal}
prefix={srcPath && <SVG src={srcPath} className={styles.icon} />}
/>
</InlineField>
<Button icon="folder-open" variant="secondary" onClick={openModal} />
</InlineFieldRow>
@@ -107,3 +121,11 @@ export const ResourceDimensionEditor: FC<
</>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
icon: css`
vertical-align: middle;
display: inline-block;
fill: currentColor;
`,
});