diff --git a/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx b/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx index 593e20893a7..b85eadb6323 100644 --- a/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx +++ b/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx @@ -5,13 +5,15 @@ import { StandardEditorProps, StandardEditorsRegistryItem, } from '@grafana/data'; -import { ResourceDimensionConfig, ResourceDimensionMode, ResourceDimensionOptions } from '../types'; import { InlineField, InlineFieldRow, RadioButtonGroup, Button, Modal, Input, useStyles2 } from '@grafana/ui'; +import SVG from 'react-inlinesvg'; +import { css } from '@emotion/css'; + +import { ResourceDimensionConfig, ResourceDimensionMode, ResourceDimensionOptions } from '../types'; import { FieldNamePicker } from '../../../../../packages/grafana-ui/src/components/MatchersUI/FieldNamePicker'; import { ResourcePicker } from './ResourcePicker'; 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' }, diff --git a/public/app/features/dimensions/editors/ResourcePicker.tsx b/public/app/features/dimensions/editors/ResourcePicker.tsx index f34b73cee4a..35ecf7a0880 100644 --- a/public/app/features/dimensions/editors/ResourcePicker.tsx +++ b/public/app/features/dimensions/editors/ResourcePicker.tsx @@ -1,9 +1,10 @@ import React, { useEffect, useState } from 'react'; +import { css } from '@emotion/css'; +import SVG from 'react-inlinesvg'; import { Button, Select, FilterInput, useTheme2, stylesFactory, Field, Modal, Label, Input } from '@grafana/ui'; import { GrafanaTheme2, SelectableValue } from '@grafana/data'; + import { ResourceCards } from './ResourceCards'; -import SVG from 'react-inlinesvg'; -import { css } from '@emotion/css'; import { getPublicOrAbsoluteUrl } from '../resource'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { FileElement, GrafanaDatasource } from 'app/plugins/datasource/grafana/datasource'; @@ -27,10 +28,22 @@ export interface ResourceItem { const sourceOptions = [ { label: `Folder`, value: 'folder' }, { label: 'URL', value: 'url' }, - { label: 'Upload', value: 'upload' }, + // { label: 'Upload', value: 'upload' }, TODO ]; -export function ResourcePicker(props: Props) { +const getFolders = (mediaType: 'icon' | 'image') => { + if (mediaType === 'icon') { + return [ResourceFolderName.Icon, ResourceFolderName.IOT, ResourceFolderName.Marker]; + } else { + return [ResourceFolderName.BG]; + } +}; + +const folderIfExists = (folders: Array<{ label: string; value: string }>, path: string) => { + return folders.filter((folder) => path.indexOf(folder.value) > -1)[0] ?? folders[0]; +}; + +export const ResourcePicker = (props: Props) => { const { value, onChange, mediaType, folderName, setOpen } = props; const folders = getFolders(mediaType).map((v) => ({ label: v, @@ -91,11 +104,14 @@ export function ResourcePicker(props: Props) { setFilteredIndex(directoryIndex); } }; + const imgSrc = getPublicOrAbsoluteUrl(newValue!); + let shortName = newValue?.substring(newValue.lastIndexOf('/') + 1, newValue.lastIndexOf('.')); if (shortName.length > 20) { shortName = shortName.substring(0, 20) + '...'; } + return (