diff --git a/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx b/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx index 43433ece2d5..cefbae018b8 100644 --- a/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx +++ b/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx @@ -4,6 +4,10 @@ import { useCallback, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; import { Button, ButtonGroup, Dropdown, Menu, MenuItem, useStyles2 } from '@grafana/ui'; +import pyroscopeIconSvg from 'app/plugins/datasource/grafana-pyroscope-datasource/img/grafana_pyroscope_icon.svg'; +import lokiIconSvg from 'app/plugins/datasource/loki/img/loki_icon.svg'; +import prometheusLogoSvg from 'app/plugins/datasource/prometheus/img/prometheus_logo.svg'; +import tempoLogoSvg from 'app/plugins/datasource/tempo/img/tempo_logo.svg'; import { useDispatch } from 'app/types/store'; import { addPanel } from '../state/crdtSlice'; @@ -84,24 +88,28 @@ export function ExploreMapFloatingToolbar() { icon="plus" onClick={handleAddPanel} /> - - - - @@ -125,6 +133,23 @@ export function ExploreMapFloatingToolbar() { ); } +interface MenuItemWithLogoProps { + label: string; + logoSrc: string; + logoAlt: string; + onClick: () => void; +} + +function MenuItemWithLogo({ label, logoSrc, logoAlt, onClick }: MenuItemWithLogoProps) { + const styles = useStyles2(getMenuItemStyles); + return ( +
+ + +
+ ); +} + const getStyles = (theme: GrafanaTheme2) => { return { floatingToolbar: css({ @@ -144,3 +169,25 @@ const getStyles = (theme: GrafanaTheme2) => { }), }; }; + +const getMenuItemStyles = (theme: GrafanaTheme2) => { + return { + menuItemWrapper: css({ + position: 'relative', + }), + logo: css({ + position: 'absolute', + left: theme.spacing(1.5), + top: '50%', + transform: 'translateY(-50%)', + width: '16px', + height: '16px', + flexShrink: 0, + zIndex: 1, + pointerEvents: 'none', + }), + menuItemWithLogo: css({ + paddingLeft: theme.spacing(4.5), // Make room for the logo + }), + }; +};