diff --git a/.betterer.results b/.betterer.results
index 8ab19e8522ff..ee0a82a1a69f 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1579,24 +1579,8 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/core/services/backend_srv.ts:5381": [
- [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
- [0, 0, 0, "Do not use any type assertions.", "2"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "10"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "12"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "15"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "16"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "17"]
+ [0, 0, 0, "Do not use any type assertions.", "0"],
+ [0, 0, 0, "Do not use any type assertions.", "1"]
],
"public/app/core/services/context_srv.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/.yarn/sdks/eslint/bin/eslint.js b/.yarn/sdks/eslint/bin/eslint.js
index 9ef98e400b47..42eab9933127 100755
--- a/.yarn/sdks/eslint/bin/eslint.js
+++ b/.yarn/sdks/eslint/bin/eslint.js
@@ -1,18 +1,25 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require eslint/bin/eslint.js
require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
}
}
diff --git a/.yarn/sdks/eslint/lib/api.js b/.yarn/sdks/eslint/lib/api.js
index 653b22bae06f..ea2b46a70be3 100644
--- a/.yarn/sdks/eslint/lib/api.js
+++ b/.yarn/sdks/eslint/lib/api.js
@@ -1,18 +1,25 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require eslint
require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
}
}
diff --git a/.yarn/sdks/eslint/lib/unsupported-api.js b/.yarn/sdks/eslint/lib/unsupported-api.js
new file mode 100644
index 000000000000..f5f8e24d0e3c
--- /dev/null
+++ b/.yarn/sdks/eslint/lib/unsupported-api.js
@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+ if (!process.versions.pnp) {
+ // Setup the environment to be able to require eslint/use-at-your-own-risk
+ require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
+ }
+}
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = absRequire(`eslint/use-at-your-own-risk`);
diff --git a/.yarn/sdks/eslint/package.json b/.yarn/sdks/eslint/package.json
index 06e74e37b48f..bc7166925cda 100644
--- a/.yarn/sdks/eslint/package.json
+++ b/.yarn/sdks/eslint/package.json
@@ -2,5 +2,13 @@
"name": "eslint",
"version": "8.44.0-sdk",
"main": "./lib/api.js",
- "type": "commonjs"
+ "type": "commonjs",
+ "bin": {
+ "eslint": "./bin/eslint.js"
+ },
+ "exports": {
+ "./package.json": "./package.json",
+ ".": "./lib/api.js",
+ "./use-at-your-own-risk": "./lib/unsupported-api.js"
+ }
}
diff --git a/.yarn/sdks/prettier/bin/prettier.cjs b/.yarn/sdks/prettier/bin/prettier.cjs
new file mode 100755
index 000000000000..00f1f7f745b4
--- /dev/null
+++ b/.yarn/sdks/prettier/bin/prettier.cjs
@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+ if (!process.versions.pnp) {
+ // Setup the environment to be able to require prettier/bin/prettier.cjs
+ require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
+ }
+}
+
+// Defer to the real prettier/bin/prettier.cjs your application uses
+module.exports = absRequire(`prettier/bin/prettier.cjs`);
diff --git a/.yarn/sdks/prettier/index.js b/.yarn/sdks/prettier/index.cjs
old mode 100755
new mode 100644
similarity index 61%
rename from .yarn/sdks/prettier/index.js
rename to .yarn/sdks/prettier/index.cjs
index 8758e367a725..d546c6a7588a
--- a/.yarn/sdks/prettier/index.js
+++ b/.yarn/sdks/prettier/index.cjs
@@ -1,18 +1,25 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require prettier
require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
}
}
diff --git a/.yarn/sdks/prettier/package.json b/.yarn/sdks/prettier/package.json
index 3c1bb0be150c..4301e0948f11 100644
--- a/.yarn/sdks/prettier/package.json
+++ b/.yarn/sdks/prettier/package.json
@@ -1,6 +1,7 @@
{
"name": "prettier",
"version": "3.0.0-sdk",
- "main": "./index.js",
- "type": "commonjs"
+ "main": "./index.cjs",
+ "type": "commonjs",
+ "bin": "./bin/prettier.cjs"
}
diff --git a/.yarn/sdks/typescript/bin/tsc b/.yarn/sdks/typescript/bin/tsc
index 454b950b7e8f..a6bb0e2c16a1 100755
--- a/.yarn/sdks/typescript/bin/tsc
+++ b/.yarn/sdks/typescript/bin/tsc
@@ -1,18 +1,25 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require typescript/bin/tsc
require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
}
}
diff --git a/.yarn/sdks/typescript/bin/tsserver b/.yarn/sdks/typescript/bin/tsserver
index d7a605684df9..957bed2001db 100755
--- a/.yarn/sdks/typescript/bin/tsserver
+++ b/.yarn/sdks/typescript/bin/tsserver
@@ -1,18 +1,25 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require typescript/bin/tsserver
require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
}
}
diff --git a/.yarn/sdks/typescript/lib/tsc.js b/.yarn/sdks/typescript/lib/tsc.js
index 2f62fc96c0a0..a262a77d0f8a 100644
--- a/.yarn/sdks/typescript/lib/tsc.js
+++ b/.yarn/sdks/typescript/lib/tsc.js
@@ -1,18 +1,25 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require typescript/lib/tsc.js
require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
}
}
diff --git a/.yarn/sdks/typescript/lib/tsserver.js b/.yarn/sdks/typescript/lib/tsserver.js
index bbb1e46501b5..1dae54c1abf4 100644
--- a/.yarn/sdks/typescript/lib/tsserver.js
+++ b/.yarn/sdks/typescript/lib/tsserver.js
@@ -1,14 +1,28 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+ if (!process.versions.pnp) {
+ // Setup the environment to be able to require typescript/lib/tsserver.js
+ require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
+ }
+}
+
const moduleWrapper = tsserver => {
if (!process.versions.pnp) {
return tsserver;
@@ -214,11 +228,11 @@ const moduleWrapper = tsserver => {
return tsserver;
};
-if (existsSync(absPnpApiPath)) {
- if (!process.versions.pnp) {
- // Setup the environment to be able to require typescript/lib/tsserver.js
- require(absPnpApiPath).setup();
- }
+const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
+// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
+// Ref https://github.com/microsoft/TypeScript/pull/55326
+if (major > 5 || (major === 5 && minor >= 5)) {
+ moduleWrapper(absRequire(`typescript`));
}
// Defer to the real typescript/lib/tsserver.js your application uses
diff --git a/.yarn/sdks/typescript/lib/tsserverlibrary.js b/.yarn/sdks/typescript/lib/tsserverlibrary.js
index a68f028fe197..7f9d7f964f51 100644
--- a/.yarn/sdks/typescript/lib/tsserverlibrary.js
+++ b/.yarn/sdks/typescript/lib/tsserverlibrary.js
@@ -1,14 +1,28 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+ if (!process.versions.pnp) {
+ // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
+ require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
+ }
+}
+
const moduleWrapper = tsserver => {
if (!process.versions.pnp) {
return tsserver;
@@ -214,11 +228,11 @@ const moduleWrapper = tsserver => {
return tsserver;
};
-if (existsSync(absPnpApiPath)) {
- if (!process.versions.pnp) {
- // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
- require(absPnpApiPath).setup();
- }
+const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
+// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
+// Ref https://github.com/microsoft/TypeScript/pull/55326
+if (major > 5 || (major === 5 && minor >= 5)) {
+ moduleWrapper(absRequire(`typescript`));
}
// Defer to the real typescript/lib/tsserverlibrary.js your application uses
diff --git a/.yarn/sdks/typescript/lib/typescript.js b/.yarn/sdks/typescript/lib/typescript.js
index e14fa87beaa4..317b60b4c035 100644
--- a/.yarn/sdks/typescript/lib/typescript.js
+++ b/.yarn/sdks/typescript/lib/typescript.js
@@ -1,20 +1,27 @@
#!/usr/bin/env node
const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
- // Setup the environment to be able to require typescript/lib/typescript.js
+ // Setup the environment to be able to require typescript
require(absPnpApiPath).setup();
+ if (isPnpLoaderEnabled && register) {
+ register(pathToFileURL(absPnpLoaderPath));
+ }
}
}
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+// Defer to the real typescript your application uses
+module.exports = absRequire(`typescript`);
diff --git a/.yarn/sdks/typescript/package.json b/.yarn/sdks/typescript/package.json
index 15466d2023ff..417fa1369db2 100644
--- a/.yarn/sdks/typescript/package.json
+++ b/.yarn/sdks/typescript/package.json
@@ -2,5 +2,9 @@
"name": "typescript",
"version": "4.8.4-sdk",
"main": "./lib/typescript.js",
- "type": "commonjs"
+ "type": "commonjs",
+ "bin": {
+ "tsc": "./bin/tsc",
+ "tsserver": "./bin/tsserver"
+ }
}
diff --git a/packages/grafana-data/src/themes/breakpoints.ts b/packages/grafana-data/src/themes/breakpoints.ts
index 1ad0d7137810..9edee52f8e12 100644
--- a/packages/grafana-data/src/themes/breakpoints.ts
+++ b/packages/grafana-data/src/themes/breakpoints.ts
@@ -28,7 +28,7 @@ export function createBreakpoints(): ThemeBreakpoints {
const values: ThemeBreakpointValues = {
xs: 0,
sm: 544,
- md: 769, // 1 more than regular ipad in portrait
+ md: 768, // 1 more than regular ipad in portrait
lg: 992,
xl: 1200,
xxl: 1440,
diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts
index 661d433abcd4..6a7f9a517565 100644
--- a/packages/grafana-data/src/themes/createColors.ts
+++ b/packages/grafana-data/src/themes/createColors.ts
@@ -171,16 +171,16 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
blackBase = '45, 51, 62';
primary = {
- main: '#8EC4AD',
- border: palette.blueLightText,
- text: '#F0E4B6',
+ main: '#FF4702',
+ border: '#E33E00',
+ text: '#101828',
};
text = {
- primary: '#2D333E',
- secondary: '#2d333e',
+ primary: '#101828',
+ secondary: '#344054',
disabled: '#9DA7B8',
- link: this.primary.text,
+ link: '#FF4702',
maxContrast: palette.black,
};
@@ -191,7 +191,7 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
};
secondary = {
- main: '#FC9A69',
+ main: '#FF4702',
shade: '#FC9A6990',
contrastText: `rgba(${this.blackBase}, 1)`,
text: this.text.primary,
@@ -220,9 +220,9 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
};
background = {
- canvas: '#F6F5F3',
- primary: '#FDFDFC',
- secondary: '#FDFDFC',
+ primary: '#FAFAFA',
+ canvas: '#FFFFFF',
+ secondary: '#FAFAFA',
};
action = {
diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts
index 36d02b204e73..9180955b9dee 100644
--- a/packages/grafana-data/src/themes/createTypography.ts
+++ b/packages/grafana-data/src/themes/createTypography.ts
@@ -53,8 +53,8 @@ export interface ThemeTypographyInput {
htmlFontSize?: number;
}
-const defaultFontFamily = '"Source Sans Pro", Nunito, Roboto, Arial'; //'"Roboto", "Helvetica", "Arial", sans-serif';
-const defaultFontFamilyMonospace = "'Nunito Mono', 'Roboto Mono', monospace"; // "'Roboto Mono', monospace";
+const defaultFontFamily = '"Poppins", Inter, Satoshi, sans-serif'; //'"Roboto", "Helvetica", "Arial", sans-serif';
+const defaultFontFamilyMonospace = '"SatoshiLight", "FigtreeLight", monospace'; // "'Roboto Mono', monospace";
export function createTypography(colors: ThemeColors, typographyInput: ThemeTypographyInput = {}): ThemeTypography {
const {
@@ -62,13 +62,13 @@ export function createTypography(colors: ThemeColors, typographyInput: ThemeTypo
fontFamilyMonospace = defaultFontFamilyMonospace,
// The default font size of the Material Specification.
fontSize = 14, // px
- fontWeightLight = 300,
- fontWeightRegular = 400,
- fontWeightMedium = 500,
+ fontWeightLight = 200,
+ fontWeightRegular = 300,
+ fontWeightMedium = 400,
fontWeightBold = 500,
// Tell Grafana-UI what's the font-size on the html element.
// 16px is the default font-size used by browsers.
- htmlFontSize = 14,
+ htmlFontSize = 16,
} = typographyInput;
if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/grafana-data/src/themes/fnCreateColors.ts b/packages/grafana-data/src/themes/fnCreateColors.ts
deleted file mode 100644
index f7705578cdf6..000000000000
--- a/packages/grafana-data/src/themes/fnCreateColors.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { merge } from 'lodash';
-
-import { alpha, darken, emphasize, getContrastRatio, lighten } from './colorManipulator';
-import { ThemeColorsBase, ThemeColorsMode, ThemeColors, ThemeColorsInput } from './createColors';
-import { palette } from './fnPalette';
-import { ThemeRichColor } from './types';
-
-interface GetRichColorProps {
- color: Partial<ThemeRichColor>;
- name: string;
-}
-
-class FnDarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
- mode: ThemeColorsMode = 'dark';
-
- // Used to get more white opacity colors
- whiteBase = '219, 217, 215';
-
- border = {
- weak: `rgba(${this.whiteBase}, 0.07)`,
- medium: `rgba(${this.whiteBase}, 0.15)`,
- strong: `rgba(${this.whiteBase}, 0.25)`,
- };
-
- text = {
- primary: '#DBD9D7',
- secondary: '#F0E4B6', // yellow
- disabled: '#9DA7B8',
- link: '#F0E4B6', // yellow
- maxContrast: '#F0E4B6', // yellow
- };
-
- primary = {
- main: '#3F8367',
- text: '#F0E4B6', // yellow
- border: '#ffffff00',
- };
-
- secondary = {
- main: '#F06929',
- shade: '#F0692955',
- text: this.text.primary,
- contrastText: `rgb(${this.whiteBase})`,
- border: this.border.strong,
- };
-
- info = this.primary;
-
- error = {
- main: palette.redDarkMain,
- text: palette.redDarkText,
- };
-
- success = {
- main: '#4BBF73',
- text: '#318B50',
- };
-
- warning = {
- main: '#CF8E07',
- text: this.text.primary,
- };
-
- background = {
- canvas: '#312D2B', //palette.gray05,
- primary: '#3B3835', //palette.gray10,
- secondary: '#5E5855', //palette.gray15,
- };
-
- action = {
- hover: `rgba(${this.whiteBase}, 0.16)`,
- selected: `rgba(${this.whiteBase}, 0.12)`,
- focus: `rgba(${this.whiteBase}, 0.16)`,
- hoverOpacity: 0.08,
- disabledText: this.text.disabled,
- disabledBackground: `rgba(${this.whiteBase}, 0.04)`,
- disabledOpacity: 0.38,
- selectedBorder: palette.orangeDarkMain,
- };
-
- gradients = {
- brandHorizontal: 'linear-gradient(270deg, #F55F3E 0%, #FF8833 100%)',
- brandVertical: 'linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%)',
- };
-
- contrastThreshold = 3;
- hoverFactor = 0.03;
- tonalOffset = 0.15;
-}
-
-class FnLightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
- mode: ThemeColorsMode = 'light';
-
- blackBase = '45, 51, 62';
-
- primary = {
- main: '#8EC4AD',
- border: palette.blueLightText,
- text: '#2d333e', // yellow
- };
-
- text = {
- primary: '#2D333E',
- secondary: '#2d333e',
- disabled: '#9DA7B8',
- link: this.primary.text,
- maxContrast: palette.black,
- };
-
- border = {
- weak: `rgba(${this.blackBase}, 0.12)`,
- medium: `rgba(${this.blackBase}, 0.30)`,
- strong: `rgba(${this.blackBase}, 0.40)`,
- };
-
- secondary = {
- main: '#FC9A69',
- shade: '#FC9A6990',
- contrastText: `rgba(${this.blackBase}, 1)`,
- text: this.text.primary,
- border: this.border.strong,
- };
-
- info = {
- main: '#64B6F7',
- text: palette.blueLightText,
- };
-
- error = {
- main: palette.redLightMain,
- text: palette.redLightText,
- border: palette.redLightText,
- };
-
- success = {
- main: '#83D39E',
- text: palette.greenLightText,
- };
-
- warning = {
- main: '#EB7B18', // FN color
- text: palette.orangeLightText,
- };
-
- background = {
- canvas: '#F6F5F3',
- primary: '#FDFDFC',
- secondary: '#FDFDFC',
- };
-
- action = {
- hover: `rgba(${this.blackBase}, 0.12)`,
- selected: `#F27A40`,
- hoverOpacity: 0.08,
- focus: `rgba(${this.blackBase}, 0.12)`,
- disabledBackground: `rgba(${this.blackBase}, 0.04)`,
- disabledText: this.text.disabled,
- disabledOpacity: 0.38,
- selectedBorder: palette.orangeLightMain,
- };
-
- gradients = {
- brandHorizontal: 'linear-gradient(90deg, #FF8833 0%, #F53E4C 100%)',
- brandVertical: 'linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%)',
- };
-
- contrastThreshold = 3;
- hoverFactor = 0.03;
- tonalOffset = 0.2;
-}
-
-// NOTE: createFnColors used in create-mfe to create grafana theme2 colors
-export function createFnColors(colors: ThemeColorsInput): ThemeColors {
- const dark = new FnDarkColors();
- const light = new FnLightColors();
-
- const base = (colors.mode ?? 'dark') === 'dark' ? dark : light;
-
- const {
- primary = base.primary,
- secondary = base.secondary,
- info = base.info,
- warning = base.warning,
- success = base.success,
- error = base.error,
- tonalOffset = base.tonalOffset,
- hoverFactor = base.hoverFactor,
- contrastThreshold = base.contrastThreshold,
- ...other
- } = colors;
-
- function getContrastText(background: string, threshold: number = contrastThreshold) {
- const contrastText =
- getContrastRatio(dark.text.maxContrast, background, base.background.primary) >= threshold
- ? dark.text.maxContrast
- : light.text.maxContrast;
- // todo, need color framework
- return contrastText;
- }
-
- const getRichColor = ({ color, name }: GetRichColorProps): ThemeRichColor => {
- color = { ...color, name };
- if (!color.main) {
- throw new Error(`Missing main color for ${name}`);
- }
- if (!color.text) {
- color.text = color.main;
- }
- if (!color.border) {
- color.border = color.text;
- }
- if (!color.shade) {
- color.shade = base.mode === 'light' ? darken(color.main, tonalOffset) : lighten(color.main, tonalOffset);
- }
- if (!color.transparent) {
- color.transparent = base.mode === 'light' ? alpha(color.main, 0.08) : alpha(color.main, 0.15);
- }
- if (!color.contrastText) {
- color.contrastText = getContrastText(color.main);
- }
- return color as ThemeRichColor;
- };
-
- return merge(
- {
- ...base,
- primary: getRichColor({ color: primary, name: 'primary' }),
- secondary: getRichColor({ color: secondary, name: 'secondary' }),
- info: getRichColor({ color: info, name: 'info' }),
- error: getRichColor({ color: error, name: 'error' }),
- success: getRichColor({ color: success, name: 'success' }),
- warning: getRichColor({ color: warning, name: 'warning' }),
- getContrastText,
- emphasize: (color: string, factor?: number) => {
- return emphasize(color, factor ?? hoverFactor);
- },
- },
- other
- );
-}
diff --git a/packages/grafana-data/src/themes/fnPalette.ts b/packages/grafana-data/src/themes/fnPalette.ts
deleted file mode 100644
index 48fcd7751fa9..000000000000
--- a/packages/grafana-data/src/themes/fnPalette.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export const palette = {
- white: '#FFFFFF',
- black: '#000000',
-
- gray25: '#2c3235',
- gray15: '#22252b',
- gray10: '#181b1f',
- gray05: '#111217',
-
- darkLayer0: '#18181A',
- darkLayer1: '#212124',
- darkLayer2: '#2a2a2f',
-
- darkBorder1: '#34343B',
- darkBorder2: '#64646B',
-
- // Dashboard bg / layer 0 (light theme)
- gray90: '#F4F5F5',
- // Card bg / layer 1
- gray100: '#F4F5F5',
- // divider line
- gray80: '#D0D1D3',
- lightBorder1: '#E4E7E7',
-
- blueDarkMain: '#3D71D9',
- blueDarkText: '#6E9FFF',
- redDarkMain: '#D9534F', // FN - same as in light, final color to be agreed
- redDarkText: '#13161B', // FN - same as in light, final color to be agreed
- greenDarkMain: '#1A7F4B',
- greenDarkText: '#6CCF8E',
- orangeDarkMain: '#F5B73D',
- orangeDarkText: '#F8D06B',
-
- blueLightMain: '#3871DC',
- blueLightText: '#1F62E0',
- redLightMain: '#D9534F', // FN
- redLightText: '#13161B', // FN
- greenLightMain: '#1B855E',
- greenLightText: '#0A764E',
- orangeLightMain: '#FAD34A',
- orangeLightText: '#8A6C00',
-};
diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index a11ca23fb94b..c202558e856a 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -116,7 +116,7 @@ export const CustomScrollbar = ({
passedProps.style['WebkitOverflowScrolling'] = 'auto';
}
- return <div {...passedProps} className="scrollbar-view" />;
+ return <div {...passedProps} style={{ ...passedProps.style, overflow: 'auto' }} className="scrollbar-view" />;
}, []);
const onScrollStop = useCallback(() => {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
index b3423c7115c5..8801811c979c 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
@@ -111,7 +111,11 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
/>
)}
- <Tooltip content={<TimePickerTooltip timeRange={value} timeZone={timeZone} />} placement="bottom" interactive>
+ <Tooltip
+ content={<TimePickerTooltip timeRange={value} timeZone={timeZone} />}
+ placement="bottom-start"
+ interactive
+ >
<ToolbarButton
data-testid={selectors.components.TimePicker.openButton}
aria-label={t('time-picker.range-picker.current-time-selected', 'Time range selected: {{currentTimeRange}}', {
@@ -162,7 +166,7 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
/>
)}
- <Tooltip content={ZoomOutTooltip} placement="bottom">
+ <Tooltip content={ZoomOutTooltip} placement="bottom-start">
<ToolbarButton
aria-label={t('time-picker.range-picker.zoom-out-button', 'Zoom out time range')}
onClick={onZoom}
@@ -177,11 +181,9 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
TimeRangePicker.displayName = 'TimeRangePicker';
const ZoomOutTooltip = () => (
- <>
- <Trans i18nKey="time-picker.range-picker.zoom-out-tooltip">
- Time range zoom out <br /> CTRL+Z
- </Trans>
- </>
+ <Trans i18nKey="time-picker.range-picker.zoom-out-tooltip">
+ Time range zoom out <br /> CTRL+Z
+ </Trans>
);
export const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
index 0a8c98b8f219..b814bca8c494 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
@@ -57,7 +57,7 @@ export const TimePickerFooter = (props: Props) => {
return null;
}
- const fnColor = theme.isDark ? '#8EC4AD' : '#3A785E';
+ const fnColor = theme.isDark ? '#8EC4AD' : '#344054';
return (
<div>
diff --git a/packages/grafana-ui/src/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx
index 0e00c7b20251..6e39941f2158 100644
--- a/packages/grafana-ui/src/components/Portal/Portal.tsx
+++ b/packages/grafana-ui/src/components/Portal/Portal.tsx
@@ -36,7 +36,12 @@ export function Portal(props: PropsWithChildren<Props>) {
};
}, [portalRoot]);
- return ReactDOM.createPortal(<div ref={forwardedRef}>{children}</div>, node.current);
+ return ReactDOM.createPortal(
+ <div data-qiankun="grafana-full-app" ref={forwardedRef}>
+ {children}
+ </div>,
+ node.current
+ );
}
/** @internal */
diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
index 5e44c91e7bfd..89ff1cc55cc7 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
@@ -102,7 +102,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
);
return tooltip ? (
- <Tooltip content={tooltip} placement="bottom">
+ <Tooltip content={tooltip} placement="bottom-start">
{body}
</Tooltip>
) : (
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts
index c3a87d89adf8..a590d4eaf6ac 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts
@@ -10,14 +10,12 @@ export function getFormElementStyles(theme: GrafanaTheme2) {
fontWeight: theme.typography.body.fontWeight,
lineHeight: theme.typography.body.lineHeight,
},
-
'input, select': {
backgroundColor: theme.components.input.background,
color: theme.components.input.text,
border: 'none',
boxShadow: 'none',
},
-
textarea: {
height: 'auto',
},
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index dcb5dee1935e..9bd69cd87e4c 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -75,10 +75,10 @@ $grid-breakpoints: (
// Define the maximum width of \`.container\` for different screen sizes.
$container-max-widths: (
- sm: 576px,
- md: 720px,
- lg: 940px,
- xl: 1080px,
+ sm: 640px,
+ md: 768px,
+ lg: 1024px,
+ xl: 1536px,
) !default;
// Grid columns
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index f5490b72c0bc..78fb03350cac 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -31,8 +31,8 @@ const theme: GrafanaThemeCommons = {
name: 'Grafana Default',
typography: {
fontFamily: {
- sansSerif: '"Inter", "Helvetica", "Arial", sans-serif',
- monospace: "'Roboto Mono', monospace",
+ sansSerif: '"Poppins", Inter, Satoshi, sans-serif',
+ monospace: '"SatoshiLight", "FigtreeLight", monospace',
},
size: {
base: '14px',
diff --git a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
index e41773dae49c..24734996ff32 100644
--- a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
+++ b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
@@ -29,7 +29,7 @@ const FnText: React.FC = () => {
const FN_TEXT_STYLE: CSSProperties = { fontWeight: 700, fontSize: 14, marginLeft: 8 };
- return <>{FNDashboard ? <span style={{ ...FN_TEXT_STYLE, color: theme.colors.warning.main }}>UTC</span> : ''}</>;
+ return <>{FNDashboard ? <span style={{ ...FN_TEXT_STYLE, color: theme.colors.primary.main }}>UTC</span> : ''}</>;
};
export const TimePickerWithHistory: FC<Props> = (props) => (
diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts
index 623195acd104..af16dfba5832 100644
--- a/public/app/core/services/backend_srv.ts
+++ b/public/app/core/services/backend_srv.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
import { from, lastValueFrom, MonoTypeOperatorFunction, Observable, Subject, Subscription, throwError } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import {
@@ -170,6 +171,18 @@ export class BackendSrv implements BackendService {
return lastValueFrom(this.fetch(options));
}
+ private getCodeRabbitOrg(): { id: string } | null {
+ const selectedOrgStorage = sessionStorage.getItem('selected_org');
+
+ try {
+ return selectedOrgStorage ? (JSON.parse(selectedOrgStorage) as { id: string }) : null;
+ } catch (e) {
+ console.error('Failed to parse selected_org', selectedOrgStorage, 'error:', e);
+ sessionStorage.removeItem('selected_org');
+ return null;
+ }
+ }
+
private parseRequestOptions(options: BackendSrvRequest): BackendSrvRequest {
const orgId = this.dependencies.contextSrv.user?.orgId;
@@ -182,10 +195,22 @@ export class BackendSrv implements BackendService {
options.headers['X-Grafana-Org-Id'] = orgId;
}
+ const codeRabbitOrg = this.getCodeRabbitOrg();
+ if (codeRabbitOrg) {
+ options.headers = options.headers ?? {};
+ options.headers['x-coderabbit-organization'] = codeRabbitOrg.id;
+ }
+
if (options.url.startsWith('/')) {
options.url = options.url.substring(1);
}
+ const codeRabbitToken = sessionStorage.getItem('accessToken');
+ if (codeRabbitToken) {
+ options.headers = options.headers ?? {};
+ options.headers['x-coderabbit-token'] = `Bearer ${codeRabbitToken}`;
+ }
+
if (options.headers?.Authorization) {
options.headers['X-DS-Authorization'] = options.headers.Authorization;
delete options.headers.Authorization;
diff --git a/public/app/features/dashboard/components/DashboardLoading/CodeRabbitLogo.tsx b/public/app/features/dashboard/components/DashboardLoading/CodeRabbitLogo.tsx
new file mode 100644
index 000000000000..2cadfda7b1f2
--- /dev/null
+++ b/public/app/features/dashboard/components/DashboardLoading/CodeRabbitLogo.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+type LogoFullProps = React.SVGProps<SVGSVGElement>;
+
+export const CodeRabbitLogo: React.FC<LogoFullProps> = (props) => {
+ return (
+ <svg width={props.width || 180} viewBox="0 0 130 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M27.7831 14.7414C27.7831 18.7788 26.06 22.4289 23.297 24.9676H19.963C20.0344 24.6413 19.8611 24.417 19.6368 24.2641C19.1678 23.9378 18.8721 23.3975 18.9435 22.8367C19.127 21.3583 20.0242 19.4722 23.297 17.7389C25.5095 16.5562 25.9173 14.1194 26.0702 13.7626C26.2945 13.1712 26.2334 12.6717 25.7644 12.1925C24.9181 11.3258 24.0005 10.5408 22.8892 10.031C21.3293 9.29691 19.7387 9.33769 18.1584 9.92904C17.8831 10.031 17.9443 9.81689 17.9239 9.72513C17.7098 8.68517 17.353 7.686 16.8432 6.748C15.8134 4.8924 14.3758 3.52618 12.2348 3.06737C11.9187 2.996 11.5924 2.97561 11.2662 2.93483C11.1132 2.91444 11.0317 2.95522 11.0725 3.13874C11.3579 4.50496 11.7556 5.82019 12.6222 6.94171C13.0198 7.46169 13.5602 7.80834 14.0904 8.16519C14.6511 8.55262 15.2425 8.90948 15.7726 9.34789C16.2722 9.7761 16.6801 10.2757 16.8738 10.9894C16.8024 10.918 16.7718 10.8976 16.7514 10.867C15.1201 8.27734 11.9289 7.13544 8.71727 8.07343C8.42159 8.155 8.46238 8.25695 8.60511 8.47106C9.53292 9.89845 10.8074 10.918 12.3163 11.7031C13.4378 12.2842 14.6001 12.7634 15.8644 12.9266C16.4354 12.9979 16.1601 13.3854 16.2518 13.8442C16.3742 14.5579 16.6699 14.7822 16.5679 14.721C14.6307 13.9461 13.0198 13.6402 11.6842 13.6402C6.16836 13.6402 5.27114 18.9012 5.31192 18.9624C5.23036 18.9318 3.90493 18.4424 3.60925 19.7678C3.30338 21.1136 5.10801 21.9905 5.10801 21.9905C5.34251 20.3999 6.7699 20.0533 6.94322 20.0125C6.80049 20.0941 5.87268 20.6345 5.58721 22.1128C5.34251 23.4179 6.37227 24.57 6.7597 24.9676H4.47588C1.72306 22.4289 0 18.7788 0 14.7414C0 7.06406 6.20914 0.844727 13.8865 0.844727C21.5638 0.844727 27.7831 7.06406 27.7831 14.7414ZM17.6894 24.9676H16.2213C16.2926 24.8962 16.3436 24.7943 16.364 24.6821C16.4863 23.9684 15.8746 23.8257 15.8746 23.8257H12.4897C12.4897 23.8257 13.8355 23.7645 15.0691 23.2547C16.2926 22.7348 17.2816 21.8273 17.4549 21.5826C16.884 22.9285 17.1592 24.0602 17.3937 24.6311C17.4447 24.7739 17.5569 24.8962 17.6894 24.9676Z"
+ fill="#FF4702"
+ />
+ <path
+ d="M39.0497 22.0712C37.741 22.0712 36.5833 21.7818 35.5766 21.203C34.5825 20.6115 33.796 19.8062 33.2171 18.7869C32.6509 17.755 32.3677 16.5721 32.3677 15.2383C32.3677 13.9044 32.6509 12.7278 33.2171 11.7085C33.796 10.6767 34.5825 9.87132 35.5766 9.29247C36.5833 8.70103 37.741 8.40531 39.0497 8.40531C40.0061 8.40531 40.8806 8.57519 41.6734 8.91495C42.4788 9.24213 43.1709 9.70773 43.7497 10.3117C44.3412 10.9158 44.7942 11.6142 45.1088 12.4069L42.2585 13.3696C42.0698 12.9292 41.8118 12.5454 41.4846 12.2182C41.1701 11.891 40.8051 11.6393 40.3899 11.4632C39.9872 11.287 39.5405 11.1989 39.0497 11.1989C38.3576 11.1989 37.741 11.3688 37.1999 11.7085C36.6588 12.0483 36.2372 12.5265 35.9352 13.1431C35.6332 13.7471 35.4822 14.4455 35.4822 15.2383C35.4822 16.031 35.6332 16.7357 35.9352 17.3523C36.2498 17.9564 36.6777 18.4345 37.2188 18.7869C37.7724 19.1266 38.4016 19.2965 39.1063 19.2965C39.6223 19.2965 40.0816 19.2021 40.4842 19.0134C40.8869 18.8246 41.233 18.5604 41.5224 18.2206C41.8244 17.8809 42.0824 17.4908 42.2963 17.0503L45.1465 18.013C44.8445 18.8183 44.3978 19.5293 43.8063 20.1459C43.2149 20.7499 42.5165 21.2218 41.7112 21.5616C40.9058 21.9014 40.0186 22.0712 39.0497 22.0712ZM50.2913 22.0712C49.2972 22.0712 48.4226 21.8636 47.6676 21.4483C46.9126 21.0205 46.3148 20.4353 45.8744 19.6929C45.4466 18.9505 45.2326 18.0948 45.2326 17.1258C45.2326 16.1569 45.4403 15.3012 45.8555 14.5588C46.2834 13.8163 46.8748 13.2375 47.6298 12.8222C48.3974 12.3944 49.2657 12.1804 50.2347 12.1804C51.2288 12.1804 52.1033 12.3944 52.8584 12.8222C53.626 13.2375 54.2174 13.8163 54.6327 14.5588C55.0605 15.3012 55.2744 16.1569 55.2744 17.1258C55.2744 18.0948 55.0605 18.9505 54.6327 19.6929C54.2174 20.4353 53.6323 21.0205 52.8772 21.4483C52.1222 21.8636 51.2602 22.0712 50.2913 22.0712ZM50.2913 19.3532C50.6688 19.3532 51.0023 19.2588 51.2917 19.07C51.5937 18.8813 51.8265 18.6233 51.9901 18.2961C52.1663 17.9564 52.2543 17.5663 52.2543 17.1258C52.2543 16.6854 52.1663 16.3016 51.9901 15.9744C51.8265 15.6347 51.5937 15.3704 51.2917 15.1816C50.9897 14.9929 50.6436 14.8985 50.2535 14.8985C49.8634 14.8985 49.5174 14.9929 49.2154 15.1816C48.9134 15.3704 48.6743 15.6347 48.4981 15.9744C48.3345 16.3016 48.2527 16.6854 48.2527 17.1258C48.2527 17.5663 48.3345 17.9564 48.4981 18.2961C48.6743 18.6233 48.9134 18.8813 49.2154 19.07C49.53 19.2588 49.8886 19.3532 50.2913 19.3532ZM62.5421 21.8447L62.41 20.0893V8.63182H65.3546V21.8447H62.5421ZM59.7297 22.0712C58.8488 22.0712 58.0875 21.8762 57.4457 21.4861C56.8165 21.0834 56.3258 20.5109 55.9734 19.7684C55.6337 19.026 55.4638 18.1451 55.4638 17.1258C55.4638 16.094 55.6337 15.2131 55.9734 14.4833C56.3258 13.7408 56.8165 13.1745 57.4457 12.7844C58.0875 12.3818 58.8488 12.1804 59.7297 12.1804C60.5099 12.1804 61.1642 12.3818 61.6927 12.7844C62.2338 13.1745 62.6365 13.7408 62.9008 14.4833C63.165 15.2131 63.2971 16.094 63.2971 17.1258C63.2971 18.1451 63.165 19.026 62.9008 19.7684C62.6365 20.5109 62.2338 21.0834 61.6927 21.4861C61.1642 21.8762 60.5099 22.0712 59.7297 22.0712ZM60.5036 19.3532C60.8685 19.3532 61.1957 19.2588 61.4851 19.07C61.7745 18.8813 62.001 18.6233 62.1646 18.2961C62.3282 17.9564 62.41 17.5663 62.41 17.1258C62.41 16.6854 62.3282 16.3016 62.1646 15.9744C62.001 15.6347 61.7745 15.3704 61.4851 15.1816C61.1957 14.9929 60.8622 14.8985 60.4847 14.8985C60.1072 14.8985 59.7737 14.9929 59.4843 15.1816C59.1949 15.3704 58.9621 15.6347 58.7859 15.9744C58.6223 16.3016 58.5342 16.6854 58.5216 17.1258C58.5342 17.5663 58.6223 17.9564 58.7859 18.2961C58.9621 18.6233 59.1949 18.8813 59.4843 19.07C59.7863 19.2588 60.126 19.3532 60.5036 19.3532ZM71.0476 22.0712C70.0661 22.0712 69.1978 21.8636 68.4428 21.4483C67.6878 21.0331 67.0963 20.4542 66.6685 19.7118C66.2407 18.9693 66.0267 18.1074 66.0267 17.1258C66.0267 16.1443 66.2407 15.2823 66.6685 14.5399C67.0963 13.7974 67.6878 13.2186 68.4428 12.8033C69.2104 12.3881 70.0913 12.1804 71.0854 12.1804C71.9788 12.1804 72.7842 12.3944 73.5015 12.8222C74.2187 13.25 74.785 13.8918 75.2003 14.7475C75.6281 15.5906 75.842 16.6351 75.842 17.8809H68.7448L69.0657 17.5222C69.0657 17.9501 69.1538 18.3276 69.33 18.6548C69.5061 18.9819 69.7515 19.2336 70.0661 19.4098C70.3807 19.5734 70.733 19.6552 71.1231 19.6552C71.5887 19.6552 71.9788 19.5545 72.2934 19.3532C72.608 19.1392 72.8282 18.875 72.9541 18.5604L75.5778 19.4475C75.3261 20.0515 74.9675 20.5486 74.5019 20.9387C74.0489 21.3288 73.5266 21.6182 72.9352 21.807C72.3438 21.9831 71.7146 22.0712 71.0476 22.0712ZM69.1412 16.3142L68.8392 15.9178H73.0673L72.7842 16.3142C72.7842 15.836 72.6898 15.4648 72.5011 15.2005C72.3123 14.9237 72.0795 14.7223 71.8027 14.5965C71.5384 14.4707 71.2679 14.4077 70.991 14.4077C70.7142 14.4077 70.431 14.4707 70.1416 14.5965C69.8648 14.7223 69.6257 14.9237 69.4243 15.2005C69.2356 15.4648 69.1412 15.836 69.1412 16.3142ZM76.6456 21.8447V8.63182H81.8364C82.7927 8.63182 83.6421 8.82058 84.3846 9.19809C85.127 9.56302 85.7059 10.0789 86.1211 10.7459C86.549 11.4002 86.7629 12.1553 86.7629 13.011C86.7629 13.8666 86.549 14.628 86.1211 15.2949C85.6933 15.9618 85.1018 16.4841 84.3468 16.8616C83.6044 17.2265 82.7487 17.409 81.7797 17.409H79.6845V21.8447H76.6456ZM83.8183 21.8447L80.836 16.5973L83.1199 14.9174L87.2914 21.8447H83.8183ZM79.6845 14.6154H81.742C82.0943 14.6154 82.4089 14.5462 82.6858 14.4077C82.9626 14.2693 83.1765 14.0806 83.3275 13.8415C83.4911 13.5898 83.5729 13.313 83.5729 13.011C83.5729 12.5454 83.3967 12.1616 83.0444 11.8595C82.7046 11.5575 82.2516 11.4065 81.6854 11.4065H79.6845V14.6154ZM93.5259 21.8447L93.4316 19.8062V17.1447C93.4316 16.6414 93.3875 16.2009 93.2994 15.8234C93.2239 15.4459 93.0666 15.1565 92.8275 14.9551C92.601 14.7412 92.2676 14.6343 91.8271 14.6343C91.4748 14.6343 91.1665 14.716 90.9022 14.8796C90.638 15.0432 90.4115 15.2634 90.2227 15.5403L87.6368 14.6909C87.8633 14.2253 88.159 13.8037 88.5239 13.4262C88.9014 13.0487 89.3607 12.7467 89.9018 12.5202C90.4429 12.2937 91.0721 12.1804 91.7894 12.1804C92.7709 12.1804 93.6014 12.3629 94.281 12.7278C94.9605 13.0927 95.4701 13.6024 95.8099 14.2567C96.1496 14.9111 96.3195 15.685 96.3195 16.5784L96.2818 21.8447H93.5259ZM90.94 22.0712C89.8326 22.0712 88.9706 21.8259 88.354 21.3351C87.7374 20.8317 87.4291 20.1145 87.4291 19.1833C87.4291 18.1892 87.75 17.4467 88.3918 16.956C89.0336 16.4652 89.9333 16.2198 91.091 16.2198H93.6769V18.1262H92.1858C91.5692 18.1262 91.1224 18.2143 90.8456 18.3905C90.5688 18.5541 90.4303 18.7932 90.4303 19.1078C90.4303 19.3343 90.531 19.5167 90.7324 19.6552C90.9463 19.781 91.2357 19.8439 91.6006 19.8439C91.9656 19.8439 92.2802 19.7684 92.5444 19.6174C92.8213 19.4538 93.0352 19.2399 93.1862 18.9756C93.3498 18.7114 93.4316 18.4282 93.4316 18.1262H94.1866C94.1866 19.372 93.916 20.341 93.3749 21.0331C92.8464 21.7252 92.0348 22.0712 90.94 22.0712ZM97.3584 21.8447V8.63182H100.303V20.0893L100.152 21.8447H97.3584ZM102.983 22.0712C102.203 22.0712 101.549 21.8762 101.02 21.4861C100.492 21.0834 100.095 20.5109 99.8311 19.7684C99.5669 19.026 99.4347 18.1451 99.4347 17.1258C99.4347 16.094 99.5669 15.2131 99.8311 14.4833C100.095 13.7408 100.492 13.1745 101.02 12.7844C101.549 12.3818 102.203 12.1804 102.983 12.1804C103.864 12.1804 104.626 12.3818 105.267 12.7844C105.909 13.1745 106.4 13.7408 106.74 14.4833C107.079 15.2131 107.249 16.094 107.249 17.1258C107.249 18.1451 107.079 19.026 106.74 19.7684C106.4 20.5109 105.909 21.0834 105.267 21.4861C104.626 21.8762 103.864 22.0712 102.983 22.0712ZM102.228 19.3532C102.606 19.3532 102.939 19.2588 103.229 19.07C103.518 18.8813 103.751 18.6233 103.927 18.2961C104.103 17.9564 104.191 17.5663 104.191 17.1258C104.191 16.6854 104.11 16.3016 103.946 15.9744C103.782 15.6347 103.55 15.3704 103.248 15.1816C102.958 14.9929 102.625 14.8985 102.247 14.8985C101.87 14.8985 101.53 14.9929 101.228 15.1816C100.938 15.3704 100.712 15.6347 100.548 15.9744C100.385 16.3142 100.303 16.698 100.303 17.1258C100.303 17.5663 100.385 17.9564 100.548 18.2961C100.712 18.6233 100.938 18.8813 101.228 19.07C101.517 19.2588 101.851 19.3532 102.228 19.3532ZM107.921 21.8447V8.63182H110.866V20.0893L110.715 21.8447H107.921ZM113.546 22.0712C112.766 22.0712 112.112 21.8762 111.583 21.4861C111.055 21.0834 110.658 20.5109 110.394 19.7684C110.13 19.026 109.998 18.1451 109.998 17.1258C109.998 16.094 110.13 15.2131 110.394 14.4833C110.658 13.7408 111.055 13.1745 111.583 12.7844C112.112 12.3818 112.766 12.1804 113.546 12.1804C114.427 12.1804 115.188 12.3818 115.83 12.7844C116.472 13.1745 116.963 13.7408 117.303 14.4833C117.642 15.2131 117.812 16.094 117.812 17.1258C117.812 18.1451 117.642 19.026 117.303 19.7684C116.963 20.5109 116.472 21.0834 115.83 21.4861C115.188 21.8762 114.427 22.0712 113.546 22.0712ZM112.791 19.3532C113.169 19.3532 113.502 19.2588 113.792 19.07C114.081 18.8813 114.314 18.6233 114.49 18.2961C114.666 17.9564 114.754 17.5663 114.754 17.1258C114.754 16.6854 114.673 16.3016 114.509 15.9744C114.345 15.6347 114.113 15.3704 113.811 15.1816C113.521 14.9929 113.188 14.8985 112.81 14.8985C112.433 14.8985 112.093 14.9929 111.791 15.1816C111.501 15.3704 111.275 15.6347 111.111 15.9744C110.948 16.3142 110.866 16.698 110.866 17.1258C110.866 17.5663 110.948 17.9564 111.111 18.2961C111.275 18.6233 111.501 18.8813 111.791 19.07C112.08 19.2588 112.414 19.3532 112.791 19.3532ZM118.654 21.8447V12.4069H121.599V21.8447H118.654ZM120.127 11.1989C119.686 11.1989 119.296 11.0353 118.956 10.7081C118.629 10.3684 118.465 9.97828 118.465 9.53785C118.465 9.07225 118.629 8.68216 118.956 8.36756C119.296 8.04039 119.686 7.8768 120.127 7.8768C120.58 7.8768 120.97 8.04039 121.297 8.36756C121.624 8.68216 121.788 9.07225 121.788 9.53785C121.788 9.97828 121.624 10.3684 121.297 10.7081C120.97 11.0353 120.58 11.1989 120.127 11.1989ZM127.004 22.0712C125.884 22.0712 125.047 21.807 124.494 21.2785C123.953 20.7374 123.682 19.9698 123.682 18.9756V9.46235H126.627V18.2395C126.627 18.617 126.696 18.8938 126.834 19.07C126.973 19.2462 127.187 19.3343 127.476 19.3343C127.589 19.3343 127.721 19.3091 127.872 19.2588C128.023 19.1959 128.162 19.1204 128.288 19.0323L129.307 21.1841C129.005 21.4358 128.64 21.6497 128.212 21.8259C127.797 21.9894 127.394 22.0712 127.004 22.0712ZM122.21 14.8796V12.4069H128.778V14.8796H122.21Z"
+ fill="#FF4702"
+ />
+ </svg>
+ );
+};
diff --git a/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx b/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx
index e78b27c055e1..142aaa4b95dd 100644
--- a/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx
@@ -1,15 +1,14 @@
import { Box, CircularProgress, CircularProgressProps, Typography, type BoxProps } from '@mui/material';
-import React, { type ReactNode, type FC, type HTMLAttributes } from 'react';
+import React, { type ReactNode, type FC } from 'react';
import { useTheme2 } from '@grafana/ui';
-import logoUrl from './fn-logo.svg';
+import { CodeRabbitLogo } from './CodeRabbitLogo';
export type FnLoaderProps = {
outerContainerProps?: Omit<BoxProps, 'children'>;
innerContainerProps?: Omit<BoxProps, 'children'>;
circularProgressProps?: CircularProgressProps;
- imageProps?: HTMLAttributes<HTMLImageElement>;
text?: ReactNode;
};
@@ -17,7 +16,6 @@ export const FnLoader: FC<FnLoaderProps> = ({
outerContainerProps,
innerContainerProps,
circularProgressProps,
- imageProps,
text,
}) => {
const theme = useTheme2();
@@ -31,7 +29,7 @@ export const FnLoader: FC<FnLoaderProps> = ({
paddingTop="150px"
{...outerContainerProps}
>
- <img src={logoUrl} alt={'FluxNinja logo'} style={{ transform: 'scale(4)' }} {...imageProps} />
+ <CodeRabbitLogo width={350} />
<Box marginTop="100px" {...innerContainerProps}>
<CircularProgress
role="alert"
diff --git a/public/app/features/dashboard/components/DashboardLoading/fn-logo.svg b/public/app/features/dashboard/components/DashboardLoading/fn-logo.svg
deleted file mode 100644
index 913aeb864681..000000000000
--- a/public/app/features/dashboard/components/DashboardLoading/fn-logo.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M62.42 41.45C61.61 40.33 61.74 38.76 62.74 37.8C63.44 37.12 64.25 36.51 65.13 35.98C66.01 35.45 66.54 34.54 66.54 33.52V30.23C66.54 21.22 57.8 20.37 53.11 19.92C46.65 19.29 44.97 18.54 44.2 16.14C44.06 15.7 43.83 15.29 43.5 14.97C40.63 12.23 36.79 13.58 35.71 16.44C34.89 18.6 33.08 19.32 26.9 19.92C22.21 20.38 13.47 21.22 13.47 30.23V33.53C13.47 34.54 14.02 35.47 14.88 35.99C15.74 36.51 16.56 37.12 17.26 37.81C18.25 38.77 18.39 40.34 17.58 41.46C16.94 42.35 16.08 43.05 15.1 43.49C14.12 43.93 13.47 44.96 13.47 46.06V49.79C13.47 58.8 22.21 59.65 26.9 60.1C33.36 60.73 35.04 61.48 35.81 63.88C35.95 64.32 36.18 64.73 36.51 65.05C39.38 67.79 43.22 66.44 44.3 63.57C45.12 61.41 46.93 60.69 53.11 60.09C57.8 59.63 66.54 58.79 66.54 49.78V46.06C66.54 44.96 65.91 43.94 64.91 43.49C63.91 43.04 63.07 42.35 62.42 41.46V41.45Z" fill="#EFEEED"/>
- <path d="M73.46 35.39C70.06 35.23 66.12 36.96 63.95 39.59C64.83 41.77 67.13 43 69.43 42.49C68.77 40.84 67.3 39.75 65.63 39.52C68.58 39.17 71.64 37.59 73.46 35.39Z" fill="#F8773D"/>
- <path d="M28.97 37.2C28.56 37.2 28.16 37.29 27.81 37.45C28.06 37.68 28.19 38.06 28.08 38.44C27.98 38.8 27.65 39.09 27.28 39.13C26.93 39.17 26.63 39.05 26.42 38.82C26.18 39.35 26.09 39.96 26.23 40.61C26.49 41.77 27.49 42.66 28.67 42.78C30.35 42.95 31.76 41.63 31.76 39.99C31.76 38.44 30.51 37.19 28.96 37.19M30.22 42.1C29.85 42.1 29.56 41.81 29.56 41.44C29.56 41.07 29.85 40.78 30.22 40.78C30.59 40.78 30.88 41.08 30.88 41.44C30.88 41.8 30.58 42.1 30.22 42.1Z" fill="#56AE89"/>
- <path d="M48.52 38.83C48.27 39.37 48.19 39.99 48.34 40.65C48.58 41.68 49.41 42.52 50.45 42.74C52.41 43.16 54.13 41.51 53.84 39.57C53.66 38.34 52.63 37.36 51.39 37.22C50.86 37.16 50.35 37.25 49.91 37.45C50.16 37.68 50.29 38.04 50.19 38.43C50.1 38.78 49.81 39.05 49.46 39.13C49.11 39.21 48.75 39.08 48.53 38.84M51.67 41.46C51.67 41.1 51.97 40.8 52.33 40.8C52.69 40.8 53 41.1 53 41.46C53 41.82 52.7 42.12 52.33 42.12C51.96 42.12 51.67 41.83 51.67 41.46Z" fill="#56AE89"/>
- <path d="M51.43 32.89C46.28 32.89 48.01 36.56 39.99 37.48C33.01 36.68 33.42 33.79 30.24 33.06C26 32.09 21.75 35.17 21.47 39.52C21.19 43.87 24.48 47.11 28.56 47.11C33.7 47.11 31.98 43.44 39.99 42.52C46.97 43.32 46.56 46.2 49.74 46.94C53.98 47.92 58.23 44.83 58.52 40.48C58.81 36.13 55.51 32.89 51.43 32.89ZM28.96 44.17C26.62 44.17 24.72 42.24 24.79 39.88C24.85 37.7 26.66 35.89 28.84 35.83C31.2 35.76 33.13 37.66 33.13 40C33.13 42.34 31.26 44.17 28.96 44.17ZM51.03 44.17C48.69 44.17 46.79 42.23 46.86 39.87C46.92 37.69 48.74 35.88 50.92 35.82C53.28 35.76 55.2 37.65 55.2 39.99C55.2 42.33 53.34 44.16 51.03 44.16" fill="#56AE89"/>
- <path d="M61.94 34.51C60.97 34.51 60.19 33.72 60.19 32.76V30.23C60.19 27.41 58.46 26.82 52.5 26.24C48.21 25.82 43.05 25.32 40.01 21.58C36.97 25.32 31.81 25.82 27.52 26.24C21.56 26.82 19.83 27.41 19.83 30.23V32.76C19.83 33.73 19.04 34.51 18.08 34.51C17.12 34.51 16.33 33.72 16.33 32.76V30.23C16.33 23.8 22.35 23.22 27.19 22.75C32.95 22.19 36.84 21.52 38.38 17.45C38.64 16.77 39.29 16.32 40.02 16.32C40.75 16.32 41.4 16.77 41.66 17.45C43.2 21.52 47.09 22.19 52.85 22.75C57.69 23.22 63.71 23.8 63.71 30.23V32.76C63.71 33.73 62.92 34.51 61.96 34.51H61.94Z" fill="#F8773D"/>
- <path d="M40 63.69C39.27 63.69 38.62 63.24 38.36 62.56C36.82 58.49 32.93 57.82 27.17 57.26C22.33 56.79 16.31 56.21 16.31 49.78V47.25C16.31 46.28 17.1 45.5 18.06 45.5C19.02 45.5 19.81 46.29 19.81 47.25V49.78C19.81 52.6 21.54 53.19 27.5 53.77C31.79 54.19 36.95 54.69 39.99 58.43C43.03 54.69 48.19 54.19 52.48 53.77C58.44 53.19 60.17 52.6 60.17 49.78V47.25C60.17 46.28 60.96 45.5 61.92 45.5C62.88 45.5 63.67 46.29 63.67 47.25V49.78C63.67 56.21 57.65 56.79 52.81 57.26C47.05 57.82 43.16 58.49 41.62 62.56C41.36 63.24 40.71 63.69 39.98 63.69H40Z" fill="#F8773D"/>
-</svg>
\ No newline at end of file
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 62bca3269682..3bb683e8cae9 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -425,7 +425,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
className={pageClassName}
scrollRef={this.setScrollRef}
scrollTop={updateScrollTop}
- style={{ minHeight: 550 }}
+ style={{ minHeight: '550px' }}
>
{showToolbar && (
<header data-testid={selectors.pages.Dashboard.DashNav.navV2}>
diff --git a/public/app/fn-app/create-mfe.ts b/public/app/fn-app/create-mfe.ts
index 1741114d0fc6..68c666ad7db3 100644
--- a/public/app/fn-app/create-mfe.ts
+++ b/public/app/fn-app/create-mfe.ts
@@ -9,7 +9,7 @@ import React, { ComponentType } from 'react';
import ReactDOM from 'react-dom';
import { createTheme, GrafanaThemeType } from '@grafana/data';
-import { createFnColors } from '@grafana/data/src/themes/fnCreateColors';
+import { createColors } from '@grafana/data/src/themes/createColors';
import { GrafanaTheme2 } from '@grafana/data/src/themes/types';
import { ThemeChangedEvent } from '@grafana/runtime';
import { GrafanaBootConfig } from '@grafana/runtime/src/config';
@@ -113,7 +113,7 @@ class createMfe {
},
});
- config.theme2.colors = createFnColors({ mode });
+ config.theme2.colors = createColors({ mode });
config.theme2.v1 = getTheme(mode);
diff --git a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx b/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx
index bacc95e98ec5..d7979b2873af 100644
--- a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx
+++ b/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx
@@ -4,7 +4,6 @@ import React, { FC, useMemo } from 'react';
import { FnPropMappedFromState, fnPropsMappedFromState } from 'app/core/reducers/fn-slice';
import { StoreState, useSelector } from 'app/types';
-import { AngularRoot } from '../../angular/AngularRoot';
import { FnAppProvider } from '../fn-app-provider';
import { FNDashboardProps } from '../types';
import { RenderPortal } from '../utils';
@@ -16,10 +15,7 @@ type FNDashboardComponentProps = Omit<FNDashboardProps, FnPropMappedFromState>;
export const FNDashboard: FC<FNDashboardComponentProps> = (props) => {
return (
<FnAppProvider fnError={props.fnError}>
- <div className="page-dashboard">
- <AngularRoot />
- <DashboardPortal {...props} />
- </div>
+ <DashboardPortal {...props} />
</FnAppProvider>
);
};
@@ -61,5 +57,9 @@ export const DashboardPortal: FC<FNDashboardComponentProps> = (p) => {
);
}, [props]);
- return <RenderPortal ID="grafana-portal">{content}</RenderPortal>;
+ return (
+ <RenderPortal ID="grafana-portal">
+ <div className="page-dashboard">{content}</div>
+ </RenderPortal>
+ );
};
diff --git a/public/app/fn_dashboard.ts b/public/app/fn_dashboard.ts
index 3110e1b907f7..04a8957f10e1 100644
--- a/public/app/fn_dashboard.ts
+++ b/public/app/fn_dashboard.ts
@@ -6,10 +6,21 @@ config.featureToggles = {
...config.featureToggles,
publicDashboards: true,
};
+interface FnData {
+ themePaths: {
+ light: string;
+ dark: string;
+ };
+}
+
+declare global {
+ interface Window {
+ fnData: FnData;
+ }
+}
config.isPublicDashboardView = false;
-// eslint-disable-next-line
-config.bootData.themePaths = (window as any).fnData?.themePaths;
+config.bootData.themePaths = window.fnData.themePaths;
export const { bootstrap, mount, unmount, update, afterMount, afterUnmount, beforeLoad, beforeMount, beforeUnmount } =
createMfe.create(FNDashboard);
diff --git a/public/microfrontends/fn_dashboard/index.html b/public/microfrontends/fn_dashboard/index.html
index 5399547433dd..43f6195041da 100644
--- a/public/microfrontends/fn_dashboard/index.html
+++ b/public/microfrontends/fn_dashboard/index.html
@@ -1,35 +1,25 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
- <head>
- <title>FluxNinja Microfrontend</title>
+ <head id="qiankun-head">
+ <title>CodeRabbit Micro-frontend</title>
<base href="/" />
- <link rel="stylesheet" href="../../../public/build/grafana.dark.49a5c75f64d6b46fed4b.css" />
</head>
- <body class="theme-dark app-grafana">
+ <body class="theme-light app-grafana">
<div id="grafanaRoot"></div>
-
<script nonce="">
window.fnData = {
themePaths: {
- light: '../../../public/build/grafana.light.c78db6a20e122909520d.css',
- dark: '../../../public/build/grafana.dark.49a5c75f64d6b46fed4b.css'
- }
+ light: '../../../public/build/grafana.light.c4a2b9d7041eee54c2c5.css',
+ dark: '../../../public/build/grafana.dark.c9affdc3c424b7fe7178.css',
+ },
};
</script>
- <script
- nonce=""
- src="../../../public/build/runtime~fn_dashboard.06020b4a7be71213584e.js"
- type="text/javascript"
- ></script>
+ <script nonce="" src="../../../public/build/runtime~fn_dashboard.512db17f9b8f66891b2c.js" type="text/javascript"></script>
- <script
- nonce=""
- src="../../../public/build/fn_dashboard.7c71b58078a7ba2cbcd0.js"
- type="text/javascript"
- ></script>
+ <script nonce="" src="../../../public/build/fn_dashboard.bb3af0c3464201961162.js" type="text/javascript"></script>
</body>
</html>
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index db1ac2a5e364..5edafebf856f 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -67,7 +67,7 @@ $spacers: (
$grid-breakpoints: (
xs: 0px,
sm: 544px,
- md: 769px,
+ md: 768px,
lg: 992px,
xl: 1200px,
) !default;
@@ -77,10 +77,10 @@ $grid-breakpoints: (
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
- sm: 576px,
- md: 720px,
- lg: 940px,
- xl: 1080px,
+ sm: 640px,
+ md: 768px,
+ lg: 1024px,
+ xl: 1536px,
) !default;
// Grid columns
@@ -99,9 +99,9 @@ $height-lg: 48;
// Typography
// -------------------------
/* stylelint-disable-next-line string-quotes */
-$font-family-sans-serif: "Source Sans Pro", Nunito, Roboto, Arial;
+$font-family-sans-serif: "Poppins", Inter, Satoshi, sans-serif;
/* stylelint-disable-next-line string-quotes */
-$font-family-monospace: 'Nunito Mono', 'Roboto Mono', monospace;
+$font-family-monospace: "SatoshiLight", "FigtreeLight", monospace;
$font-file-path: '../fonts' !default;
@@ -114,15 +114,15 @@ $font-size-xs: 10px !default;
$line-height-base: 1.5714285714285714 !default;
-$font-weight-regular: 400 !default;
-$font-weight-semi-bold: 500 !default;
+$font-weight-regular: 300 !default;
+$font-weight-semi-bold: 400 !default;
-$font-size-h1: 2rem !default;
-$font-size-h2: 1.7142857142857142rem !default;
-$font-size-h3: 1.5714285714285714rem !default;
-$font-size-h4: 1.2857142857142858rem !default;
-$font-size-h5: 1.1428571428571428rem !default;
-$font-size-h6: 1rem !default;
+$font-size-h1: 1.75rem !default;
+$font-size-h2: 1.5rem !default;
+$font-size-h3: 1.375rem !default;
+$font-size-h4: 1.125rem !default;
+$font-size-h5: 1rem !default;
+$font-size-h6: 0.875rem !default;
$headings-line-height: 1.5 !default;
@@ -177,7 +177,7 @@ $zindex-typeahead: 1030;
$btn-padding-x: 14px !default;
$btn-padding-y: 0 !default;
$btn-line-height: $line-height-base;
-$btn-font-weight: 500 !default;
+$btn-font-weight: 400 !default;
$btn-padding-x-sm: 7px !default;
$btn-padding-y-sm: 4px !default;
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 552a95785eb5..ca5a3930e651 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -19,9 +19,9 @@ $colors-action-selected: #F27A40;
// New Colors
// -------------------------
-$blue-light: #F0E4B6;
-$blue-base: #8EC4AD;
-$blue-shade: rgb(113, 156, 138);
+$blue-light: #101828;
+$blue-base: #FF4702;
+$blue-shade: rgb(204, 56, 1);
$red-base: #E0226E;
$red-shade: rgb(179, 27, 88);
$green-base: #83D39E;
@@ -57,9 +57,9 @@ $gray-7: #fbfbfb;
$white: #ffffff;
-$layer0: #F6F5F3;
-$layer1: #FDFDFC;
-$layer2: #FDFDFC;
+$layer0: #FFFFFF;
+$layer1: #FAFAFA;
+$layer2: #FAFAFA;
$divider: rgba(45, 51, 62, 0.12);
$border0: rgba(45, 51, 62, 0.12);
@@ -67,12 +67,12 @@ $border1: rgba(45, 51, 62, 0.30);
// Accent colors
// -------------------------
-$blue: #F0E4B6;
+$blue: #101828;
$red: $red-base;
$yellow: #ecbb13;
$orange: #eb7b18;
$purple: #9933cc;
-$variable: #F0E4B6;
+$variable: #101828;
$brand-primary: #eb7b18;
$brand-success: #83D39E;
@@ -93,17 +93,17 @@ $critical: #CF0E5B;
// Scaffolding
// -------------------------
-$body-bg: #F6F5F3;
-$page-bg: #F6F5F3;
-$dashboard-bg: #F6F5F3;
+$body-bg: #FFFFFF;
+$page-bg: #FFFFFF;
+$dashboard-bg: #FFFFFF;
-$text-color: #2D333E;
+$text-color: #101828;
$text-color-strong: #000000;
-$text-color-semi-weak: #2d333e;
-$text-color-weak: #2d333e;
+$text-color-semi-weak: #344054;
+$text-color-weak: #344054;
$text-color-faint: #9DA7B8;
$text-color-emphasis: #000000;
-$text-blue: #F0E4B6;
+$text-blue: #101828;
$text-shadow-faint: none;
@@ -113,14 +113,14 @@ $brand-gradient-vertical: linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.0
// Links
// -------------------------
-$link-color: #2D333E;
+$link-color: #101828;
$link-color-disabled: #9DA7B8;
$link-hover-color: #000000;
-$external-link-color: #F0E4B6;
+$external-link-color: #FF4702;
// Typography
// -------------------------
-$headings-color: #2D333E;
+$headings-color: #101828;
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@@ -128,30 +128,30 @@ $hr-border-color: $gray-4 !default;
// Panel
// -------------------------
-$panel-bg: #FDFDFC;
+$panel-bg: #FAFAFA;
$panel-border: 1px solid rgba(45, 51, 62, 0.12);
$panel-header-hover-bg: rgba(45, 51, 62, 0.12);
$panel-box-shadow: none;
$panel-corner: $panel-bg;
// Page header
-$page-header-bg: #F6F5F3;
+$page-header-bg: #FFFFFF;
$page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: #F6F5F3;
+$page-header-border-color: #FFFFFF;
$divider-border-color: $gray-2;
// Graphite Target Editor
-$tight-form-func-bg: #FDFDFC;
-$tight-form-func-highlight-bg: #f9f9f6;
+$tight-form-func-bg: #FAFAFA;
+$tight-form-func-highlight-bg: #f5f5f5;
-$modal-backdrop-bg: #FDFDFC;
+$modal-backdrop-bg: #FAFAFA;
$code-tag-bg: $gray-6;
$code-tag-border: $gray-4;
// cards
-$card-background: #FDFDFC;
-$card-background-hover: #FDFDFC;
+$card-background: #FAFAFA;
+$card-background-hover: #FAFAFA;
$card-shadow: none;
// Lists
@@ -168,10 +168,10 @@ $scrollbarBorder: $gray-7;
// Tables
// -------------------------
-$table-bg-accent: #FDFDFC;
+$table-bg-accent: #FAFAFA;
$table-border: rgba(45, 51, 62, 0.30);
-$table-bg-odd: rgb(247, 247, 246);
-$table-bg-hover: rgb(240, 240, 239);
+$table-bg-odd: rgb(245, 245, 245);
+$table-bg-hover: rgb(237, 237, 237);
// Buttons
// -------------------------
@@ -207,16 +207,16 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
// Forms
// -------------------------
-$input-bg: #FDFDFC;
+$input-bg: #FAFAFA;
$input-bg-disabled: rgba(45, 51, 62, 0.04);
-$input-color: #2D333E;
+$input-color: #101828;
$input-border-color: rgba(45, 51, 62, 0.30);
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: #5794f2;
$input-color-placeholder: #9DA7B8;
-$input-label-bg: #FDFDFC;
+$input-label-bg: #FAFAFA;
$input-color-select-arrow: #7b8087;
// search
@@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
-$dropdownBackground: #FDFDFC;
+$dropdownBackground: #FAFAFA;
$dropdownBorder: rgba(45, 51, 62, 0.12);
$dropdownDividerTop: rgba(45, 51, 62, 0.12);
$dropdownDividerBottom: rgba(45, 51, 62, 0.12);
@@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2;
// Menu dropdowns
// -------------------------
-$menu-dropdown-bg: #FDFDFC;
+$menu-dropdown-bg: #FAFAFA;
$menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12);
$menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
@@ -283,16 +283,16 @@ $alert-warning-bg: #F3D086;
$alert-info-bg: #F3D086;
// Tooltips and popovers
-$tooltipBackground: #FDFDFC;
-$tooltipColor: #2D333E;
-$tooltipArrowColor: #FDFDFC;
+$tooltipBackground: #FAFAFA;
+$tooltipColor: #101828;
+$tooltipArrowColor: #FAFAFA;
$tooltipBackgroundError: #E0226E;
$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
-$popover-bg: #FDFDFC;
-$popover-color: #2D333E;
+$popover-bg: #FAFAFA;
+$popover-color: #101828;
$popover-border-color: rgba(45, 51, 62, 0.12);
-$popover-header-bg: #FDFDFC;
+$popover-header-bg: #FAFAFA;
$popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
$graph-tooltip-bg: $gray-5;
@@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground;
$popover-help-color: $tooltipColor;
-$popover-code-bg: #FDFDFC;
+$popover-code-bg: #FAFAFA;
$popover-code-boxshadow: 0 0 5px $gray60;
// images
@@ -338,10 +338,10 @@ $diff-label-bg: rgba(45, 51, 62, 0.12);
$diff-label-fg: $gray-2;
$diff-arrow-color: $dark-2;
-$diff-group-bg: #FDFDFC;
+$diff-group-bg: #FAFAFA;
-$diff-json-bg: #FDFDFC;
-$diff-json-fg: #2D333E;
+$diff-json-bg: #FAFAFA;
+$diff-json-fg: #101828;
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 16d7b9414494..b1ed0b911436 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -153,7 +153,6 @@
&:focus {
color: $gray-1;
background-color: transparent;
- border-color: $gray-1;
}
}
diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss
index 7fec07c19ed7..275d2c0073b6 100644
--- a/public/sass/mixins/_buttons.scss
+++ b/public/sass/mixins/_buttons.scss
@@ -56,18 +56,6 @@
&.focus {
color: $white;
background-color: color.adjust($color, $lightness: -17%);
- border-color: color.adjust($color, $lightness: -25%);
- }
- }
-
- &.disabled,
- &:disabled {
- &:focus,
- &.focus {
- border-color: color.adjust($color, $lightness: 20%);
- }
- @include hover {
- border-color: color.adjust($color, $lightness: 20%);
}
}
}
diff --git a/public/views/index-microfrontend-template.html b/public/views/index-microfrontend-template.html
index a6205f112bad..716020df9af6 100644
--- a/public/views/index-microfrontend-template.html
+++ b/public/views/index-microfrontend-template.html
@@ -1,20 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
- <head>
- <title>FluxNinja Microfrontend</title>
+ <head id="qiankun-head">
+ <title>CodeRabbit Micro-frontend</title>
<base href="/" />
- <link rel="stylesheet" href="../../../public/build/<%= htmlWebpackPlugin.files.cssChunks.dark %>" />
</head>
- <body class="theme-dark app-grafana">
+ <body class="theme-light app-grafana">
<div id="grafanaRoot"></div>
-
<script nonce="">
window.fnData = {
themePaths: {
light: '../../../public/build/<%= htmlWebpackPlugin.files.cssChunks.light %>',
- dark: '../../../public/build/<%= htmlWebpackPlugin.files.cssChunks.dark %>'
- }
+ dark: '../../../public/build/<%= htmlWebpackPlugin.files.cssChunks.dark %>',
+ },
};
</script>
@@ -27,11 +25,7 @@
crossorigin="<%= webpackConfig.output.crossOriginLoading %>"
></script>
<% } else { %>
- <script
- nonce=""
- src="../../../<%= htmlWebpackPlugin.files.js[index] %>"
- type="text/javascript"
- ></script>
+ <script nonce="" src="../../../<%= htmlWebpackPlugin.files.js[index] %>" type="text/javascript"></script>
<% } %> <% } %>
</body>
</html>