Skip to content

Commit

Permalink
log and tooltip fix (#183)
Browse files Browse the repository at this point in the history
  • Loading branch information
GurinderRawala authored Aug 16, 2024
1 parent 538f96a commit d4ead5f
Show file tree
Hide file tree
Showing 7 changed files with 35 additions and 105 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -355,6 +355,7 @@
"kbar": "0.1.0-beta.40",
"lodash": "4.17.21",
"logfmt": "^1.3.2",
"loglevel": "^1.9.1",
"lru-cache": "10.0.0",
"lru-memoize": "^1.1.0",
"marked": "5.1.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,6 @@ const getStyles = (theme: GrafanaTheme2) => {
wrapper: css`
background: ${bg};
border: 1px solid ${headerBg};
border-radius: ${theme.shape.borderRadius(2)};
`,
header: css`
background: ${headerBg};
Expand All @@ -158,14 +157,19 @@ const getStyles = (theme: GrafanaTheme2) => {
padding: 8px;
th {
font-weight: ${theme.typography.fontWeightMedium};
padding: ${theme.spacing(0.25, 2)};
padding: ${theme.spacing(0.25)};
padding-left: ${theme.spacing(1)};
}
tr {
background-color: ${theme.colors.background.primary};
&:nth-child(even) {
background-color: ${tableBgOdd};
}
}
td {
padding: ${theme.spacing(0.25)};
padding-right: ${theme.spacing(1)};
}
`,
highlight: css`
/* !important is required to overwrite default table styles */
Expand Down
41 changes: 13 additions & 28 deletions public/app/fn-app/create-mfe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,18 +60,14 @@ type DeepPartial<T> = {

class createMfe {
private static readonly containerSelector = '#grafanaRoot';

private static readonly logPrefix = '[FN Grafana]';
private static logger = FnLoggerService;

mode: FNDashboardProps['mode'];
static Component: ComponentType<Omit<FNDashboardProps, FnPropMappedFromState>>;
constructor(readonly props: FNDashboardProps) {
this.mode = props.mode;
}

/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
private static logger = (...args: any[]) => console.log(createMfe.logPrefix, ...args);

static getLifeCycles(component: ComponentType<Omit<FNDashboardProps, FnPropMappedFromState>>) {
const lifeCycles: FrameworkLifeCycles = {
bootstrap: this.boot(),
Expand Down Expand Up @@ -168,7 +164,7 @@ class createMfe {
* If isRuntimeOnly then the stylesheets of the turned off theme are not removed
*/
private static loadFnTheme = (mode: FNDashboardProps['mode'] = GrafanaThemeType.Light, isRuntimeOnly = false) => {
createMfe.logger('Trying to load theme.', { mode });
createMfe.logger.info('Trying to load theme.', { mode });

const grafanaTheme2 = createMfe.createGrafanaTheme2(mode);

Expand All @@ -179,7 +175,7 @@ class createMfe {
createMfe.publishTheme(bootConfigWithTheme.theme2);

if (isRuntimeOnly) {
createMfe.logger('Successfully loaded theme', { mode });
createMfe.logger.info('Successfully loaded theme', { mode });

return;
}
Expand All @@ -190,7 +186,7 @@ class createMfe {
newCssLink.href = config.bootData.themePaths[mode];
document.body.appendChild(newCssLink);

createMfe.logger('Successfully loaded theme.', { mode });
createMfe.logger.info('Successfully loaded theme.', { mode });
};

private static getContainer(props: FNDashboardProps) {
Expand All @@ -201,8 +197,6 @@ class createMfe {

static mountFnApp(Component: ComponentType<Omit<FNDashboardProps, FnPropMappedFromState>>) {
const lifeCycleFn: FrameworkLifeCycles['mount'] = (props: FNDashboardProps) => {
createMfe.logger('Trying to mount grafana...');

return new Promise((res, rej) => {
try {
createMfe.loadFnTheme(props.mode);
Expand All @@ -214,19 +208,19 @@ class createMfe {
...pick(props, ...fnStateProps),
};

FnLoggerService.log(null, '[FN Grafana] Dispatching initial state.', { initialState });
createMfe.logger.info('[FN Grafana] Dispatching initial state.', { initialState });

dispatch(updateFnState(initialState));

createMfe.renderMfeComponent(props, () => {
createMfe.logger('Mounted grafana.', { props });
createMfe.logger.info('Mounted grafana.', { props });

return res(true);
});
} catch (err) {
const message = `[FN Grafana]: Failed to mount grafana. ${err}`;

FnLoggerService.log(null, message);
FnLoggerService.info(null, message);

const fnError = new Error(message);

Expand All @@ -246,13 +240,13 @@ class createMfe {
const container = createMfe.getContainer(props);

if (container) {
createMfe.logger('Trying to unmount grafana...');
createMfe.logger.info('Trying to unmount grafana...');

ReactDOM.unmountComponentAtNode(container);

createMfe.logger('Successfully unmounted grafana.');
createMfe.logger.info('Successfully unmounted grafana.');
} else {
createMfe.logger('Failed to unmount grafana. Container does not exist.');
createMfe.logger.error('Failed to unmount grafana. Container does not exist.');
}

backendSrv.cancelAllInFlightRequests();
Expand All @@ -266,26 +260,17 @@ class createMfe {
static updateFnApp() {
const lifeCycleFn: FrameworkLifeCycles['update'] = ({ mode, ...other }: FNDashboardProps) => {
if (mode) {
createMfe.logger('Trying to update grafana with theme.', { mode });

dispatch(
updatePartialFnStates({
mode,
})
);
/**
* NOTE:
* Here happens the theme change.
*
* TODO:
* We could probably made the theme change smoother
* if we use state to update the theme
*/

createMfe.loadFnTheme(mode);
}

if (other.uid) {
createMfe.logger('Trying to update grafana with hidden variables.', { updatedProps: other });
createMfe.logger.info('Trying to render dashboard using update: ', { updatedProps: other });

dispatch(
updatePartialFnStates({
Expand All @@ -310,7 +295,7 @@ class createMfe {
const container = createMfe.getContainer(props);

ReactDOM.render(React.createElement(createMfe.Component, props), container, () => {
createMfe.logger('Created mfe component.', { props, container });
createMfe.logger.info('Created mfe component.', { props, container });
onSuccess();
});
}
Expand Down
80 changes: 5 additions & 75 deletions public/app/fn_logger.ts
Original file line number Diff line number Diff line change
@@ -1,79 +1,9 @@
import { isBoolean, noop } from 'lodash';
import log from 'loglevel';

const SHOULD_LOG = process.env.NODE_ENV !== 'production';
const SHOULD_LOG = process.env.SHOULD_LOG === 'true';

type Console = Pick<typeof console, 'info' | 'error' | 'debug' | 'warn' | 'log'>;
const FnLoggerService = log.getLogger('[FN Grafana]');

export class FnLoggerService {
private static readonly DEFAULT_SHOULD_LOG = false;
FnLoggerService.setLevel(SHOULD_LOG ? log.levels.DEBUG : log.levels.ERROR);

private static logger(shouldLog: boolean | null) {
/* eslint-disable-next-line */
const flag = isBoolean(shouldLog)
? shouldLog
: isBoolean(SHOULD_LOG)
? SHOULD_LOG
: FnLoggerService.DEFAULT_SHOULD_LOG;

if (flag) {
return console as Console;
}

const noopConsole: Console = {
info: noop,
error: noop,
debug: noop,
warn: noop,
log: noop,
};

return noopConsole;
}

/* eslint-disable @typescript-eslint/no-explicit-any */
static debug = (shouldLog: boolean | null, ...args: any[]) => {
FnLoggerService.logger(shouldLog).debug(FnLoggerService.valuesToString(...args));
};

static error = (shouldLog: boolean | null, ...args: any[]) => {
FnLoggerService.logger(shouldLog).error(FnLoggerService.valuesToString(...args));
};

static warn = (shouldLog: boolean | null, ...args: any[]) => {
FnLoggerService.logger(shouldLog).warn(FnLoggerService.valuesToString(...args));
};

static info = (shouldLog: boolean | null, ...args: any[]) => {
FnLoggerService.logger(shouldLog).info(FnLoggerService.valuesToString(...args));
};

static log = (shouldLog: boolean | null, ...args: any[]) => {
FnLoggerService.logger(shouldLog).log(FnLoggerService.valuesToString(...args));
};
/* eslint-enable @typescript-eslint/no-explicit-any */

/* eslint-disable @typescript-eslint/no-explicit-any */
private static readonly valuesToString = (...args: any[]): string =>
args.map(FnLoggerService.valueToString).join(' ');
/* eslint-enable @typescript-eslint/no-explicit-any */

private static readonly valueToString = <V>(value: V): string => {
if (typeof value === 'string') {
return value;
}

if (Array.isArray(value)) {
return value.map(FnLoggerService.valueToString).join(' ');
}

if (value instanceof Error) {
return value.message;
}

try {
return JSON.stringify(value);
} catch {
return String(value);
}
};
}
export { FnLoggerService };
1 change: 1 addition & 0 deletions scripts/webpack/webpack.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ module.exports = (env = {}) => {
new DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
SHOULD_LOG: JSON.stringify('true'),
},
}),
],
Expand Down
1 change: 1 addition & 0 deletions scripts/webpack/webpack.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ module.exports = (env = {}) =>
new DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
SHOULD_LOG: JSON.stringify('false'),
},
}),
new WebpackManifestPlugin({
Expand Down
8 changes: 8 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -19954,6 +19954,7 @@ __metadata:
lint-staged: 13.2.3
lodash: 4.17.21
logfmt: ^1.3.2
loglevel: ^1.9.1
lru-cache: 10.0.0
lru-memoize: ^1.1.0
marked: 5.1.1
Expand Down Expand Up @@ -23523,6 +23524,13 @@ __metadata:
languageName: node
linkType: hard

"loglevel@npm:^1.9.1":
version: 1.9.1
resolution: "loglevel@npm:1.9.1"
checksum: e1c8586108c4d566122e91f8a79c8df728920e3a714875affa5120566761a24077ec8ec9e5fc388b022e39fc411ec6e090cde1b5775871241b045139771eeb06
languageName: node
linkType: hard

"long@npm:^5.0.0":
version: 5.2.3
resolution: "long@npm:5.2.3"
Expand Down

0 comments on commit d4ead5f

Please sign in to comment.