From 7fbc8cd0cd5604090bae865d725bf70eedd98673 Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Mon, 1 Dec 2025 16:49:27 -0800
Subject: [PATCH] chore: init and use CommitMono
---
.../src/themes/GlobalStyles/fonts.ts | 19 ++++++
.../PanelDataPane/QueryTransformCard.tsx | 54 ++++++++++--------
.../fonts/commitmono/CommitMono-Italic.woff2 | Bin 0 -> 50868 bytes
.../fonts/commitmono/CommitMono-Regular.woff2 | Bin 0 -> 47988 bytes
4 files changed, 50 insertions(+), 23 deletions(-)
create mode 100644 public/fonts/commitmono/CommitMono-Italic.woff2
create mode 100644 public/fonts/commitmono/CommitMono-Regular.woff2
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/fonts.ts b/packages/grafana-ui/src/themes/GlobalStyles/fonts.ts
index 5281d2ef6de..353baee7a90 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/fonts.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/fonts.ts
@@ -75,5 +75,24 @@ export function getFontStyles(theme: GrafanaTheme2) {
src: `url('${fontRoot}inter/Inter-MediumItalic.woff2') format('woff2')`,
},
},
+ {
+ /* CommitMono - monospace font for code */
+ '@font-face': {
+ fontFamily: 'CommitMono',
+ fontStyle: 'normal',
+ fontWeight: 400,
+ fontDisplay: 'swap',
+ src: `url('${fontRoot}commitmono/CommitMono-Regular.woff2') format('woff2')`,
+ },
+ },
+ {
+ '@font-face': {
+ fontFamily: 'CommitMono',
+ fontStyle: 'italic',
+ fontWeight: 400,
+ fontDisplay: 'swap',
+ src: `url('${fontRoot}commitmono/CommitMono-Italic.woff2') format('woff2')`,
+ },
+ },
]);
}
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx
index d9029e7de75..7c4297f9827 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
import { DataTransformerConfig, GrafanaTheme2 } from '@grafana/data';
import { t } from '@grafana/i18n';
@@ -31,26 +31,22 @@ export const QueryTransformCard = memo(
return '';
};
- const getDatasourceName = (): string => {
+ const datasourceIcon = useMemo(() => {
if (type === 'query' && 'datasource' in item && item.datasource) {
try {
const dsSettings = getDataSourceSrv().getInstanceSettings(item.datasource);
- return dsSettings?.name || 'Unknown datasource';
+ return dsSettings?.meta.info.logos.small;
} catch {
- return 'Unknown datasource';
+ return undefined;
}
- } else if (type === 'expression' && 'type' in item && typeof item.type === 'string') {
- // Show expression type (Math, Reduce, etc.)
- return item.type.charAt(0).toUpperCase() + item.type.slice(1);
}
- return '';
- };
+ return undefined;
+ }, [type, item]);
const isHidden = (type === 'query' || type === 'expression') && 'hide' in item && item.hide;
const icon = type === 'query' ? 'database' : type === 'expression' ? 'calculator-alt' : 'process';
const typeLabel = type === 'query' ? 'Query' : type === 'expression' ? 'Expression' : 'Transformation';
const name = getName();
- const datasourceName = getDatasourceName();
const handleAction = (e: React.MouseEvent, action: () => void) => {
e.stopPropagation();
@@ -131,10 +127,14 @@ export const QueryTransformCard = memo(
- {/* Content: Name and datasource */}
+ {/* Content: Name */}
-
{name}
- {datasourceName &&
{datasourceName}
}
+
+ {type === 'query' && datasourceIcon && (
+ 
+ )}
+ {name}
+
$x$v0P5*`5iGm~|@f0fKJ
z-qY88fpMx(B|q4Olpu9R4E>QMayC^;`^Xe8(Oe~dbNl0HaYyBv3k1CU&gXT4s?6sI
zPuRBLHr?58SH%dsmnBTA4D1#%!
zAmQ3hUeaC;gYM&kOC(iML8QBgv^qxpe3(Gk^h6^B@p=4dQK7RT
zgzAah@gZUu4sz19V)O~Q^!onZ6MxSPb`yN4Bg()KCI`2E4?67v0|FofLVCd_$ff5cMGNNj{f8
zLu?ZN_3V?2{9A52*yvq<6y)sh&_HpPGy-Zud*2MS_cBie8URF6LF?<_
zAe^*>sAOO8fW}s59gdUk)g!k|NHY$`)9Ww9OU|p_Go;`BCu0w;ce=lL@01VEZ|42%
zqvfOK9q8;=$*nc!CTej{bcQ#vdL4hC?1#hoVa|u(_m=S6@cMv(%HBK{!T;@Lxj-)G
z(DqHA$1ck+6I@@{_xo%1)O~(T{#Ml$x#7#A`q(lem^f!22EAhlwlG3~1t~E|=9n0U
zQJ^RwU|<4>|BVIlmdd)X?&2*PdMj=*?RwRRndA4b|Q9P
zWy$n*fD)E^ESRnGY+M;-5yjRLSh58r6{W3^T6mPqMLG`y0uZjNj~tkSe|=m5s9>J=
zwbEV|w!);8TKk=9=>RQC~ofm=dzpcvfc2~AGBqaa#R)I0hQixSuhK$eL}cGIYNTMsTgQpg{5a9wi@JE
zU`1aS;!Zj;Ko|M%kx&IX2&462UZIW;YIelal=)_rWKfR>zwwIjpdP6ayN_S88DU7=
zc#K2`$8qAcl_EQPe#1l6-zj-Zsu*h|S2(#|uDdsmclkBT{t=VhWKMB%{msk3Gv6yY&Xjw!JxyxhaEDF;>3z#$Gs0kd+`KZVZRW)`Tf{D3gZTJPuW1RPhx@Jq%jPoJwUpRP~n6Mmrt3gny-&+k7gT(ZB_fa(|Qrrph6)bFs@!c(LWZDqsVCpydpg_%{
z{{d4a1rrpOSv}Ro1;i2(2hjFEFs0b@F+q{`CrC^$Q-<1=?G@yUf`1s=zMHjIqQU!G
zm|=3nH9DUfpN5C1uOXPxI`8)6i}l#X
zbEyvJ4oa2xaWi_a6b56E5Y6M(0$aEU_XVAMCPx3k80E;-LTh%r#3sg1EivR0DnE4;
zL&_E+Ma87?&ouA0_T>1?iIU&b@D&UYYt{cV^wEk58)Wi8QJ5>-haxOV(R}r>GEwdN
zS_Jw4s}K$>gb?K*LIAZWAwZOr7zSfP1pf{picy3ZT$5(n%ULs2=G&?0PK-55G42mU
z?AR_DA<;plFE~mh8nq(p0TjV=6|1>X+>1PYAM*ERLQFw89jgW%-KLP5d?OG^Fj)*N
zH09n;wCa0Ozpg$ft_3Vowl7Uj(zt4NqqP)Nd0hwxeZ92pz&^M6)v&g0Z1)f`270fPhWJbR^a!C$7IQ`w<{k%y-{=I^r!6KqJ5(JbjU%;Tk}De|m+Ebf9nB
zas}c@%yZ89#q)J{X1uY%j$41zkw9Do0<-~cEyTus2I~QCHAE7SA*=!S5+VgOp)=2C
zX!pnh_TMeQ65)*nK%1i3MQhL{;+3Bg#o7q_ipbX3+FWaPyWP&${l#Q+`V4mduW}Wu
zEy3XiF2$ryDE)o#FF^nZ5J3WrkYI=a5Jv!5B|)|cz)pZ}N=}_Tnd)V189A)nL6b(n
zgy=(mX(0*!7VR20dGR>F_x)Ii5e@*Pgg_jZ0&rlNh5;~eoecp9#F2zSP^yZ;K(xBM
zFn%Bd0AY+_EVc$w!lHyo8iT#`H3>=FEAcG~p?`u?JH9M_d5SPYtvEX#T(uL|`P8_Y@&R{EA?H8OITly*Mz)
z<|)7yI<_R$Q^%_2uUNW_wHC+NHNWE4;UaEz6lVLf{cBim_t@*wUGKdR4sv@qp!Znv
z4{H6yCxt(aQc|O*|YTa2~%#D%?dx*~d
z>;QCuYefv&%hD;a@>Cny;pByMdP8f03MKN@B5pvhAJV{zfx{zKirU|xek^=un2szU
z4m5!^0CqnN@N{x;wWXdmhpHkpGlq29ZiH(N`Gewb9>4x;19xc}4g-CO^N_qY;^37|Iu8kS-S2pD?qXP?5>}$43}e>BY4}tWPn@`}`hLSnOrU
z^18M&WT$Ri5k#Ts}OEAp)pg&RdOXw5JG~kYj~+
zFIO)x~W=v@sVYG%PE*%QFm9{Il?`s%0cck!>&nRS0a?lq>kOmBRp`*^7I
zh+vY$w&^R-rBJxYCYf>Ihw#6sQD&#aQ%30`q@<{q1VJE0umm^^shDc6(e>-WJgU27
zT4c6G=+)?qUcyi#8}TN{zY6oj2K+QENpds}nPn*GqVl;mPFauOl9AFigi=}$t4c3U
z)!9?%b)!*Qy-k#kpBnPZ?E$c=Ov552pW+*-_VV!`q%~VBR+saN4U7K8hqd~Hcq)SM
zBT*-7-h95cext)SrxgxfOfhh%c7RQADg$|dW@ko7xq_Jfn>K${3>9^@vzR0OUgWp@
zlD{b+jM6DV?$)FZ%9C*x^<2x4!#nh`u?hpKBwg!LhS=(!!tYS;N@UWdOGH4yr&*Gp
znn|JJI3;#@>CZebn=^EPD+P>1YShI_YAbw}8i_6cEQ2776!FVIF73Bgid{xwYxqC{
zL=d$F;~d&1r!;Oz*==4DWtNSkGEL{Gn<&o^s~Sm*sA7Jz{-QD>1c7IbgHX51VX{``
z^*>cuvc1>Lxz;n;>Z7$T|5;tz%i8WxEA5lD34Z=0YtG_o&a6qTI{_h0_7&g{7^|BU
z3#tAD^b1ttAN95`*Y821YJ`k-igh=cEVCUcC((H$GfqtXDTpnJPgm6E05~?c@0mCj
zE>KfLJtCc$B3L-ii8=M`139Q~!0FOb#iv^mtq5_DaK)fl>M6$=C2hjuk_$mrOv5f0
zKW}iXq;XD|0`!x*S7+YJg|}d_)Y7|0$5O>QiXB+ieFqidLmddk<&S*>#kAqOgRU%A
z;$5IqlJ$%LS_-7Fc&HqpmnxzNrKd54zYnc1hA%Ul>df|7P&B(nh>S#zgId(4%$Uvz
ziL4IwONZrZ+L>ZdJCNXbNT?1i_BnKbLYxpumSBlUOHzu7C~0S5KICQJp(+%n?@o%7
ze4}aU$e*|4(H3bokLy