diff --git a/package.json b/package.json index 4f6ed36..9c42d3a 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "@babel/core": "7.7.7", "@babel/preset-env": "7.7.7", "@babel/preset-react": "7.6.3", - "@emotion/core": "10.0.27", + "@emotion/css": "11.1.3", + "@emotion/react": "11.1.5", "@grafana/data": "^8.0.6", "@grafana/runtime": "^8.0.6", "@grafana/toolkit": "^8.0.6", diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx index bb5444b..377cc51 100644 --- a/src/components/ActionButton/ActionButton.tsx +++ b/src/components/ActionButton/ActionButton.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { cx, css } from 'emotion'; +import { cx, css } from '@emotion/css'; import { stylesFactory, useTheme } from '@grafana/ui'; import { GrafanaTheme, GrafanaThemeType } from '@grafana/data'; import { FAIcon } from '../FAIcon/FAIcon'; diff --git a/src/components/ConfigProvider/ConfigProvider.tsx b/src/components/ConfigProvider/ConfigProvider.tsx index 58c4705..96ecdf6 100644 --- a/src/components/ConfigProvider/ConfigProvider.tsx +++ b/src/components/ConfigProvider/ConfigProvider.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { config, GrafanaBootConfig } from '@grafana/runtime'; -import { ThemeContext, getTheme } from '@grafana/ui'; -import { GrafanaThemeType } from '@grafana/data'; +import { ThemeContext } from '@grafana/ui'; +import { createTheme } from '@grafana/data'; export const ConfigContext = React.createContext(config); export const ConfigConsumer = ConfigContext.Consumer; @@ -14,10 +14,11 @@ export const provideConfig = (component: React.ComponentType) => { return ConfigProvider; }; -export const getCurrentThemeName = () => - config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark; - -export const getCurrentTheme = () => getTheme(getCurrentThemeName()); +export const getCurrentTheme = () => createTheme({ + colors: { + mode: config.bootData.user.lightTheme ? 'light' : 'dark', + }, +}); export const ThemeProvider = ({ children }: { children: React.ReactNode }) => { return ( diff --git a/src/components/FAIcon/FAIcon.tsx b/src/components/FAIcon/FAIcon.tsx index 04e03d1..6d35ee8 100644 --- a/src/components/FAIcon/FAIcon.tsx +++ b/src/components/FAIcon/FAIcon.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; interface Props { icon: string; diff --git a/src/components/GFHeartIcon/GFHeartIcon.tsx b/src/components/GFHeartIcon/GFHeartIcon.tsx index 4a67f2c..c252ac9 100644 --- a/src/components/GFHeartIcon/GFHeartIcon.tsx +++ b/src/components/GFHeartIcon/GFHeartIcon.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; interface Props { status: 'critical' | 'warning' | 'online' | 'ok' | 'problem'; diff --git a/src/components/Tooltip/Popper.tsx b/src/components/Tooltip/Popper.tsx index ef1a72c..c378d1e 100644 --- a/src/components/Tooltip/Popper.tsx +++ b/src/components/Tooltip/Popper.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { cx, css } from 'emotion'; +import { cx, css } from '@emotion/css'; import { Manager, Popper as ReactPopper, Reference } from 'react-popper'; import Transition from 'react-transition-group/Transition'; import { stylesFactory } from '@grafana/ui'; diff --git a/src/datasource-zabbix/components/ZabbixInput.tsx b/src/datasource-zabbix/components/ZabbixInput.tsx index b8d98d2..c3048b3 100644 --- a/src/datasource-zabbix/components/ZabbixInput.tsx +++ b/src/datasource-zabbix/components/ZabbixInput.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; import { EventsWithValidation, ValidationEvents, useTheme } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; import { isRegex, variableRegex } from '../utils'; diff --git a/src/datasource-zabbix/utils.ts b/src/datasource-zabbix/utils.ts index 9fd7c84..e44ad56 100644 --- a/src/datasource-zabbix/utils.ts +++ b/src/datasource-zabbix/utils.ts @@ -457,10 +457,12 @@ export function getValueMapping(item, valueMappings: any[]): ValueMapping[] | nu return (mapping.mappings as any[]).map((m, i) => { const valueMapping: ValueMapping = { - id: i, + // id: i, type: MappingType.ValueToText, - value: m.value, - text: m.newvalue, + options: { + value: m.value, + text: m.newvalue, + } }; return valueMapping; }); diff --git a/src/panel-triggers/components/AckModal.tsx b/src/panel-triggers/components/AckModal.tsx index f849b8f..f2dc1c7 100644 --- a/src/panel-triggers/components/AckModal.tsx +++ b/src/panel-triggers/components/AckModal.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { cx, css } from 'emotion'; +import { cx, css } from '@emotion/css'; import { ZBX_ACK_ACTION_ADD_MESSAGE, ZBX_ACK_ACTION_ACK, ZBX_ACK_ACTION_CHANGE_SEVERITY, ZBX_ACK_ACTION_CLOSE } from '../../datasource-zabbix/constants'; import { Button, VerticalGroup, Spinner, Modal, Input, Checkbox, RadioButtonGroup, stylesFactory, withTheme, Themeable, TextArea } from '@grafana/ui'; import { FAIcon } from '../../components'; diff --git a/src/panel-triggers/components/AlertList/AlertIcon.tsx b/src/panel-triggers/components/AlertList/AlertIcon.tsx index 936208e..a446e2c 100644 --- a/src/panel-triggers/components/AlertList/AlertIcon.tsx +++ b/src/panel-triggers/components/AlertList/AlertIcon.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { cx, css } from 'emotion'; +import { cx, css } from '@emotion/css'; import { GFHeartIcon } from '../../../components'; import { ProblemDTO } from '../../../datasource-zabbix/types'; diff --git a/src/panel-triggers/components/ExecScriptModal.tsx b/src/panel-triggers/components/ExecScriptModal.tsx index e9a5f7b..bbc3f98 100644 --- a/src/panel-triggers/components/ExecScriptModal.tsx +++ b/src/panel-triggers/components/ExecScriptModal.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { cx, css } from 'emotion'; +import { cx, css } from '@emotion/css'; import { GrafanaTheme, SelectableValue } from '@grafana/data'; import { Button, Spinner, Modal, Select, stylesFactory, withTheme, Themeable } from '@grafana/ui'; import { ZBXScript, APIExecuteScriptResponse } from '../../datasource-zabbix/zabbix/connectors/zabbix_api/types'; diff --git a/src/panel-triggers/components/Problems/AckCell.tsx b/src/panel-triggers/components/Problems/AckCell.tsx index 8b5d529..710cf44 100644 --- a/src/panel-triggers/components/Problems/AckCell.tsx +++ b/src/panel-triggers/components/Problems/AckCell.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { css } from 'emotion'; +import { css } from '@emotion/css'; import { RTCell } from '../../types'; import { ProblemDTO } from '../../../datasource-zabbix/types'; import { FAIcon } from '../../../components'; diff --git a/webpack/webpack.base.conf.js b/webpack/webpack.base.conf.js index b99259d..9aa3ca4 100644 --- a/webpack/webpack.base.conf.js +++ b/webpack/webpack.base.conf.js @@ -1,7 +1,7 @@ const path = require('path'); const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); +// const CleanWebpackPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ExtractTextPluginLight = new ExtractTextPlugin('./css/grafana-zabbix.light.css'); @@ -27,8 +27,29 @@ module.exports = { }, externals: [ // remove the line below if you don't want to use builtin versions - 'jquery', 'lodash', 'moment', 'angular', 'emotion', - 'react', 'react-dom', '@grafana/ui', '@grafana/data', '@grafana/runtime', + 'lodash', + 'jquery', + 'moment', + 'slate', + 'emotion', + '@emotion/react', + '@emotion/css', + 'prismjs', + 'slate-plain-serializer', + '@grafana/slate-react', + 'react', + 'react-dom', + 'react-redux', + 'redux', + 'rxjs', + 'react-router-dom', + 'd3', + 'angular', + '@grafana/ui', + '@grafana/runtime', + '@grafana/data', + 'monaco-editor', + 'react-monaco-editor', function (context, request, callback) { var prefix = 'grafana/'; if (request.indexOf(prefix) === 0) { @@ -56,21 +77,39 @@ module.exports = { module: { rules: [ { - test: /\.js$/, - exclude: /(external)/, - use: { - loader: 'babel-loader', - query: { - presets: ['@babel/preset-env'] - } - } + test: /\.tsx?$/, + loaders: [ + { + loader: 'babel-loader', + options: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: ['angularjs-annotate'], + sourceMaps: true, + }, + }, + { + loader: 'ts-loader', + options: { + onlyCompileBundledFiles: true, + transpileOnly: true, + }, + }, + ], + exclude: /(node_modules)/, }, { - test: /\.tsx?$/, - exclude: /node_modules|external/, + test: /\.jsx?$/, loaders: [ - "ts-loader" + { + loader: 'babel-loader', + options: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: ['angularjs-annotate'], + sourceMaps: true, + }, + }, ], + exclude: /(node_modules)/, }, { test: /\.html$/, diff --git a/yarn.lock b/yarn.lock index a21ab64..f722e10 100644 --- a/yarn.lock +++ b/yarn.lock @@ -288,7 +288,7 @@ dependencies: "@babel/types" "^7.14.5" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.7.4": +"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.7.4": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0" integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g== @@ -1598,16 +1598,6 @@ source-map "^0.5.7" stylis "^4.0.3" -"@emotion/cache@^10.0.27": - version "10.0.29" - resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" - integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ== - dependencies: - "@emotion/sheet" "0.9.4" - "@emotion/stylis" "0.8.5" - "@emotion/utils" "0.11.3" - "@emotion/weak-memoize" "0.2.5" - "@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3", "@emotion/cache@^11.4.0": version "11.4.0" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0" @@ -1619,18 +1609,6 @@ "@emotion/weak-memoize" "^0.2.5" stylis "^4.0.3" -"@emotion/core@10.0.27": - version "10.0.27" - resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.27.tgz#7c3f78be681ab2273f3bf11ca3e2edc4a9dd1fdc" - integrity sha512-XbD5R36pVbohQMnKfajHv43g8EbN4NHdF6Zh9zg/C0nr0jqwOw3gYnC07Xj3yG43OYSRyrGsoQ5qPwc8ycvLZw== - dependencies: - "@babel/runtime" "^7.5.5" - "@emotion/cache" "^10.0.27" - "@emotion/css" "^10.0.27" - "@emotion/serialize" "^0.11.15" - "@emotion/sheet" "0.9.4" - "@emotion/utils" "0.11.3" - "@emotion/css@11.1.3": version "11.1.3" resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.1.3.tgz#9ed44478b19e5d281ccbbd46d74d123d59be793f" @@ -1642,25 +1620,11 @@ "@emotion/sheet" "^1.0.0" "@emotion/utils" "^1.0.0" -"@emotion/css@^10.0.27": - version "10.0.27" - resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c" - integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw== - dependencies: - "@emotion/serialize" "^0.11.15" - "@emotion/utils" "0.11.3" - babel-plugin-emotion "^10.0.27" - -"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0": +"@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/memoize@0.7.4": - version "0.7.4" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" - integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== - "@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" @@ -1692,17 +1656,6 @@ "@emotion/weak-memoize" "^0.2.5" hoist-non-react-statics "^3.3.1" -"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16": - version "0.11.16" - resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad" - integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg== - dependencies: - "@emotion/hash" "0.8.0" - "@emotion/memoize" "0.7.4" - "@emotion/unitless" "0.7.5" - "@emotion/utils" "0.11.3" - csstype "^2.5.7" - "@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965" @@ -1714,37 +1667,22 @@ "@emotion/utils" "^1.0.0" csstype "^3.0.2" -"@emotion/sheet@0.9.4": - version "0.9.4" - resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5" - integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA== - "@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698" integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g== -"@emotion/stylis@0.8.5": - version "0.8.5" - resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" - integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== - -"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5": +"@emotion/unitless@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== -"@emotion/utils@0.11.3": - version "0.11.3" - resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924" - integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw== - "@emotion/utils@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af" integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA== -"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5": +"@emotion/weak-memoize@^0.2.5": version "0.2.5" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== @@ -3952,22 +3890,6 @@ babel-plugin-dynamic-import-node@^2.3.3: dependencies: object.assign "^4.1.0" -babel-plugin-emotion@^10.0.27: - version "10.2.2" - resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz#a1fe3503cff80abfd0bdda14abd2e8e57a79d17d" - integrity sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@emotion/hash" "0.8.0" - "@emotion/memoize" "0.7.4" - "@emotion/serialize" "^0.11.16" - babel-plugin-macros "^2.0.0" - babel-plugin-syntax-jsx "^6.18.0" - convert-source-map "^1.5.0" - escape-string-regexp "^1.0.5" - find-root "^1.1.0" - source-map "^0.5.7" - babel-plugin-istanbul@^5.1.0: version "5.2.0" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854" @@ -4006,7 +3928,7 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1: +babel-plugin-macros@^2.6.1: version "2.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg== @@ -4044,11 +3966,6 @@ babel-plugin-syntax-class-properties@^6.8.0: resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de" integrity sha1-1+sjt5oxf4VDlixQW4J8fWysJ94= -babel-plugin-syntax-jsx@^6.18.0: - version "6.18.0" - resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" - integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= - babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -5523,7 +5440,7 @@ cssstyle@^2.0.0, cssstyle@^2.2.0: dependencies: cssom "~0.3.6" -csstype@^2.2.0, csstype@^2.5.7: +csstype@^2.2.0: version "2.6.16" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.16.tgz#544d69f547013b85a40d15bff75db38f34fe9c39" integrity sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==