@grafana/plugin-ui 0.15.0 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -0
- package/dist/cjs/index.cjs +341 -3149
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/_virtual/index.js +3 -5
- package/dist/esm/_virtual/index.js.map +1 -1
- package/dist/esm/async-query-data/DatasourceWithAsyncBackend.js +1 -1
- package/dist/esm/async-query-data/RunQueryButtons.js +5 -5
- package/dist/esm/async-query-data/RunQueryButtons.js.map +1 -1
- package/dist/esm/components/ConfigEditor/AdvancedSettings/AdvancedHttpSettings.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/Auth.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/auth-method/AuthMethodSettings.js +4 -4
- package/dist/esm/components/ConfigEditor/Auth/auth-method/AuthMethodSettings.js.map +1 -1
- package/dist/esm/components/ConfigEditor/Auth/auth-method/BasicAuth.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/custom-headers/CustomHeader.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/custom-headers/CustomHeaders.js +3 -3
- package/dist/esm/components/ConfigEditor/Auth/custom-headers/CustomHeaders.js.map +1 -1
- package/dist/esm/components/ConfigEditor/Auth/tls/SelfSignedCertificate.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/tls/SkipTLSVerification.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/tls/TLSClientAuth.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/tls/TLSSettings.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/tls/TLSSettingsSection.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/types.js +1 -1
- package/dist/esm/components/ConfigEditor/Auth/utils.js +1 -1
- package/dist/esm/components/ConfigEditor/ConfigSection/ConfigDescriptionLink.js +1 -1
- package/dist/esm/components/ConfigEditor/ConfigSection/ConfigSection.js +1 -1
- package/dist/esm/components/ConfigEditor/ConfigSection/ConfigSubSection.js +1 -1
- package/dist/esm/components/ConfigEditor/ConfigSection/GenericConfigSection.js +2 -2
- package/dist/esm/components/ConfigEditor/ConfigSection/GenericConfigSection.js.map +1 -1
- package/dist/esm/components/ConfigEditor/Connection/ConnectionSettings.js +1 -1
- package/dist/esm/components/ConfigEditor/DataSourceDescription.js +1 -1
- package/dist/esm/components/ConfigEditor/SecureSocksProxyToggle.js +1 -1
- package/dist/esm/components/CustomHeadersSettings/CustomHeadersSettings.js +2 -2
- package/dist/esm/components/CustomHeadersSettings/CustomHeadersSettings.js.map +1 -1
- package/dist/esm/components/DataLinks/DataLink.js +3 -3
- package/dist/esm/components/DataLinks/DataLink.js.map +1 -1
- package/dist/esm/components/DataLinks/DataLinks.js +1 -1
- package/dist/esm/components/DataSourcePicker/DataSourcePicker.js +2 -2
- package/dist/esm/components/DataSourcePicker/DataSourcePicker.js.map +1 -1
- package/dist/esm/components/DatePicker/DatePicker.js +3 -3
- package/dist/esm/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/DatePickerWithInput/DatePickerWithInput.js +2 -2
- package/dist/esm/components/DatePickerWithInput/DatePickerWithInput.js.map +1 -1
- package/dist/esm/components/DebounceInput/DebounceInput.js +4 -4
- package/dist/esm/components/DebounceInput/DebounceInput.js.map +1 -1
- package/dist/esm/components/Plugins/PluginSignatureBadge.js +1 -1
- package/dist/esm/components/QueryEditor/AccessoryButton.js +1 -1
- package/dist/esm/components/QueryEditor/CatalogSelector.js +5 -5
- package/dist/esm/components/QueryEditor/CatalogSelector.js.map +1 -1
- package/dist/esm/components/QueryEditor/ConfirmModal.js +3 -3
- package/dist/esm/components/QueryEditor/ConfirmModal.js.map +1 -1
- package/dist/esm/components/QueryEditor/DatasetSelector.js +2 -2
- package/dist/esm/components/QueryEditor/DatasetSelector.js.map +1 -1
- package/dist/esm/components/QueryEditor/EditorField.js +1 -1
- package/dist/esm/components/QueryEditor/EditorFieldGroup.js +1 -1
- package/dist/esm/components/QueryEditor/EditorHeader.js +1 -1
- package/dist/esm/components/QueryEditor/EditorList.js +2 -2
- package/dist/esm/components/QueryEditor/EditorList.js.map +1 -1
- package/dist/esm/components/QueryEditor/EditorRow.js +1 -1
- package/dist/esm/components/QueryEditor/EditorRows.js +1 -1
- package/dist/esm/components/QueryEditor/EditorStack.js +1 -1
- package/dist/esm/components/QueryEditor/EditorSwitch.js +1 -1
- package/dist/esm/components/QueryEditor/FlexItem.js +1 -1
- package/dist/esm/components/QueryEditor/InlineSelect.js +2 -2
- package/dist/esm/components/QueryEditor/InlineSelect.js.map +1 -1
- package/dist/esm/components/QueryEditor/InputGroup.js +4 -4
- package/dist/esm/components/QueryEditor/InputGroup.js.map +1 -1
- package/dist/esm/components/QueryEditor/QueryEditor.js +6 -6
- package/dist/esm/components/QueryEditor/QueryEditor.js.map +1 -1
- package/dist/esm/components/QueryEditor/QueryHeader.js +4 -4
- package/dist/esm/components/QueryEditor/QueryHeader.js.map +1 -1
- package/dist/esm/components/QueryEditor/RunQueryButton.js +1 -1
- package/dist/esm/components/QueryEditor/Space.js +1 -1
- package/dist/esm/components/QueryEditor/TableSelector.js +1 -1
- package/dist/esm/components/QueryEditor/query-editor-raw/QueryEditorRaw.js +4 -4
- package/dist/esm/components/QueryEditor/query-editor-raw/QueryEditorRaw.js.map +1 -1
- package/dist/esm/components/QueryEditor/query-editor-raw/QueryToolbox.js +3 -3
- package/dist/esm/components/QueryEditor/query-editor-raw/QueryToolbox.js.map +1 -1
- package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js +5 -5
- package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js.map +1 -1
- package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js +3 -3
- package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js.map +1 -1
- package/dist/esm/components/QueryEditor/types.js +1 -1
- package/dist/esm/components/QueryEditor/utils/useSqlChange.js +2 -2
- package/dist/esm/components/QueryEditor/utils/useSqlChange.js.map +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/EditorField.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/EditorRow.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/EditorRows.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/GroupByRow.js +2 -2
- package/dist/esm/components/QueryEditor/visual-query-builder/GroupByRow.js.map +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/OrderByRow.js +5 -5
- package/dist/esm/components/QueryEditor/visual-query-builder/OrderByRow.js.map +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/Preview.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/SQLGroupByRow.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/SQLOrderByRow.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/SQLSelectRow.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/SQLWhereRow.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/SelectRow.js +5 -5
- package/dist/esm/components/QueryEditor/visual-query-builder/SelectRow.js.map +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/VisualEditor.js +1 -1
- package/dist/esm/components/QueryEditor/visual-query-builder/WhereRow.js +6 -6
- package/dist/esm/components/QueryEditor/visual-query-builder/WhereRow.js.map +1 -1
- package/dist/esm/components/QueryEditorRow/QueryEditorRow.js +1 -1
- package/dist/esm/components/SQLEditor/components/SQLEditor.js +6 -6
- package/dist/esm/components/SQLEditor/components/SQLEditor.js.map +1 -1
- package/dist/esm/components/SQLEditor/hooks/useLatestCallback.js +4 -4
- package/dist/esm/components/SQLEditor/hooks/useLatestCallback.js.map +1 -1
- package/dist/esm/components/Segment/Segment.js +4 -4
- package/dist/esm/components/Segment/Segment.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/LabelFilterItem.js +5 -5
- package/dist/esm/components/VisualQueryBuilder/components/LabelFilterItem.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/LabelFilters.js +3 -3
- package/dist/esm/components/VisualQueryBuilder/components/LabelFilters.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationEditor.js +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationEditorBody.js +4 -4
- package/dist/esm/components/VisualQueryBuilder/components/OperationEditorBody.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationExplainedBox.js +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationHeader.js +3 -3
- package/dist/esm/components/VisualQueryBuilder/components/OperationHeader.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationInfoButton.js +3 -3
- package/dist/esm/components/VisualQueryBuilder/components/OperationInfoButton.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationList.js +2 -2
- package/dist/esm/components/VisualQueryBuilder/components/OperationList.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationListExplained.js +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationParamEditor.js +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/OperationsEditorRow.js +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/QueryBuilderHints.js +2 -2
- package/dist/esm/components/VisualQueryBuilder/components/QueryBuilderHints.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/QueryEditorModeToggle.js +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/QueryHeaderSwitch.js +2 -2
- package/dist/esm/components/VisualQueryBuilder/components/QueryHeaderSwitch.js.map +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/QueryOptionGroup.js +1 -1
- package/dist/esm/components/VisualQueryBuilder/components/RawQuery.js +1 -1
- package/dist/esm/components/VisualQueryBuilder/types.js +1 -1
- package/dist/esm/hooks/useDebounce.js +3 -3
- package/dist/esm/hooks/useDebounce.js.map +1 -1
- package/package.json +4 -2
- package/dist/esm/_virtual/_commonjsHelpers.js +0 -6
- package/dist/esm/_virtual/_commonjsHelpers.js.map +0 -1
- package/dist/esm/_virtual/index2.js +0 -6
- package/dist/esm/_virtual/index2.js.map +0 -1
- package/dist/esm/_virtual/index3.js +0 -4
- package/dist/esm/_virtual/index3.js.map +0 -1
- package/dist/esm/_virtual/react.development.js +0 -4
- package/dist/esm/_virtual/react.development.js.map +0 -1
- package/dist/esm/_virtual/react.production.min.js +0 -4
- package/dist/esm/_virtual/react.production.min.js.map +0 -1
- package/dist/esm/node_modules/react/cjs/react.development.js +0 -2752
- package/dist/esm/node_modules/react/cjs/react.development.js.map +0 -1
- package/dist/esm/node_modules/react/cjs/react.production.min.js +0 -39
- package/dist/esm/node_modules/react/cjs/react.production.min.js.map +0 -1
- package/dist/esm/node_modules/react/index.js +0 -20
- package/dist/esm/node_modules/react/index.js.map +0 -1
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { __require as requireReact } from '../node_modules/react/index.js';
|
|
1
|
+
import { __require as requireSemver } from '../node_modules/semver/index.js';
|
|
3
2
|
|
|
4
|
-
var
|
|
5
|
-
var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
|
|
3
|
+
var semverExports = requireSemver();
|
|
6
4
|
|
|
7
|
-
export {
|
|
5
|
+
export { semverExports as s };
|
|
8
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DataSourceWithBackend, config, getBackendSrv, toDataQueryResponse } from '@grafana/runtime';
|
|
2
|
-
import { s as semverExports } from '../_virtual/
|
|
2
|
+
import { s as semverExports } from '../_virtual/index.js';
|
|
3
3
|
import { getRequestLooper } from './requestLooper.js';
|
|
4
4
|
import { of } from '../node_modules/rxjs/dist/esm5/internal/observable/of.js';
|
|
5
5
|
import { merge } from '../node_modules/rxjs/dist/esm5/internal/observable/merge.js';
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { Button } from '@grafana/ui';
|
|
3
3
|
import { LoadingState } from '@grafana/data';
|
|
4
4
|
|
|
5
5
|
const RunQueryButtons = (props) => {
|
|
6
6
|
const { state } = props;
|
|
7
|
-
const [running, setRunning] =
|
|
8
|
-
const [stopping, setStopping] =
|
|
9
|
-
const [prevState, setPrevState] =
|
|
10
|
-
const [lastQuery, setLastQuery] =
|
|
7
|
+
const [running, setRunning] = useState(false);
|
|
8
|
+
const [stopping, setStopping] = useState(false);
|
|
9
|
+
const [prevState, setPrevState] = useState(state);
|
|
10
|
+
const [lastQuery, setLastQuery] = useState(props.query);
|
|
11
11
|
if (state !== prevState) {
|
|
12
12
|
setPrevState(state);
|
|
13
13
|
if (state && state !== LoadingState.Loading) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RunQueryButtons.js","sources":["../../../src/async-query-data/RunQueryButtons.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button } from '@grafana/ui';\nimport { type DataQuery, LoadingState } from '@grafana/data';\n\nexport interface RunQueryButtonsProps<TQuery extends DataQuery> {\n enableRun?: boolean;\n onRunQuery: () => void;\n onCancelQuery: (query: TQuery) => void;\n query: TQuery;\n state?: LoadingState;\n}\n\nexport const RunQueryButtons = <TQuery extends DataQuery>(props: RunQueryButtonsProps<TQuery>) => {\n const { state } = props;\n const [running, setRunning] = useState(false);\n const [stopping, setStopping] = useState(false);\n const [prevState, setPrevState] = useState(state);\n const [lastQuery, setLastQuery] = useState(props.query);\n\n if (state !== prevState) {\n setPrevState(state);\n if (state && state !== LoadingState.Loading) {\n setRunning(false);\n setStopping(false);\n }\n }\n\n const onRunQuery = () => {\n setRunning(true);\n setLastQuery(props.query);\n props.onRunQuery();\n };\n\n const onCancelQuery = props.onCancelQuery\n ? () => {\n props.onCancelQuery?.(lastQuery);\n setStopping(true);\n }\n : undefined;\n\n return (\n <>\n <Button\n variant={props.enableRun ? 'primary' : 'secondary'}\n size=\"sm\"\n onClick={onRunQuery}\n icon={running && !stopping ? 'fa fa-spinner' : undefined}\n disabled={state === LoadingState.Loading || !props.enableRun}\n >\n Run query\n </Button>\n <Button\n variant={running && !stopping ? 'primary' : 'secondary'}\n size=\"sm\"\n disabled={!running || stopping}\n icon={stopping ? 'fa fa-spinner' : undefined}\n onClick={onCancelQuery}\n >\n Stop query\n </Button>\n </>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"RunQueryButtons.js","sources":["../../../src/async-query-data/RunQueryButtons.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button } from '@grafana/ui';\nimport { type DataQuery, LoadingState } from '@grafana/data';\n\nexport interface RunQueryButtonsProps<TQuery extends DataQuery> {\n enableRun?: boolean;\n onRunQuery: () => void;\n onCancelQuery: (query: TQuery) => void;\n query: TQuery;\n state?: LoadingState;\n}\n\nexport const RunQueryButtons = <TQuery extends DataQuery>(props: RunQueryButtonsProps<TQuery>) => {\n const { state } = props;\n const [running, setRunning] = useState(false);\n const [stopping, setStopping] = useState(false);\n const [prevState, setPrevState] = useState(state);\n const [lastQuery, setLastQuery] = useState(props.query);\n\n if (state !== prevState) {\n setPrevState(state);\n if (state && state !== LoadingState.Loading) {\n setRunning(false);\n setStopping(false);\n }\n }\n\n const onRunQuery = () => {\n setRunning(true);\n setLastQuery(props.query);\n props.onRunQuery();\n };\n\n const onCancelQuery = props.onCancelQuery\n ? () => {\n props.onCancelQuery?.(lastQuery);\n setStopping(true);\n }\n : undefined;\n\n return (\n <>\n <Button\n variant={props.enableRun ? 'primary' : 'secondary'}\n size=\"sm\"\n onClick={onRunQuery}\n icon={running && !stopping ? 'fa fa-spinner' : undefined}\n disabled={state === LoadingState.Loading || !props.enableRun}\n >\n Run query\n </Button>\n <Button\n variant={running && !stopping ? 'primary' : 'secondary'}\n size=\"sm\"\n disabled={!running || stopping}\n icon={stopping ? 'fa fa-spinner' : undefined}\n onClick={onCancelQuery}\n >\n Stop query\n </Button>\n </>\n );\n};\n"],"names":[],"mappings":";;;;AAYa,MAAA,eAAA,GAAkB,CAA2B,KAAwC,KAAA;AAChG,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA;AAClB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA,CAAS,MAAM,KAAK,CAAA;AAEtD,EAAA,IAAI,UAAU,SAAW,EAAA;AACvB,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAI,IAAA,KAAA,IAAS,KAAU,KAAA,YAAA,CAAa,OAAS,EAAA;AAC3C,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,WAAA,CAAY,KAAK,CAAA;AAAA;AACnB;AAGF,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,YAAA,CAAa,MAAM,KAAK,CAAA;AACxB,IAAA,KAAA,CAAM,UAAW,EAAA;AAAA,GACnB;AAEA,EAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,aAAA,GACxB,MAAM;AAlCZ,IAAA,IAAA,EAAA;AAmCQ,IAAA,CAAA,EAAA,GAAA,KAAA,CAAM,kBAAN,IAAsB,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,KAAA,EAAA,SAAA,CAAA;AACtB,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,GAElB,GAAA,SAAA;AAEJ,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,KAAM,CAAA,SAAA,GAAY,SAAY,GAAA,WAAA;AAAA,MACvC,IAAK,EAAA,IAAA;AAAA,MACL,OAAS,EAAA,UAAA;AAAA,MACT,IAAM,EAAA,OAAA,IAAW,CAAC,QAAA,GAAW,eAAkB,GAAA,SAAA;AAAA,MAC/C,QAAU,EAAA,KAAA,KAAU,YAAa,CAAA,OAAA,IAAW,CAAC,KAAM,CAAA;AAAA,KAAA;AAAA,IACpD;AAAA,GAGD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,OAAA,IAAW,CAAC,QAAA,GAAW,SAAY,GAAA,WAAA;AAAA,MAC5C,IAAK,EAAA,IAAA;AAAA,MACL,QAAA,EAAU,CAAC,OAAW,IAAA,QAAA;AAAA,MACtB,IAAA,EAAM,WAAW,eAAkB,GAAA,SAAA;AAAA,MACnC,OAAS,EAAA;AAAA,KAAA;AAAA,IACV;AAAA,GAGH,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState, useMemo } from 'react';
|
|
2
2
|
import { css } from '@emotion/css';
|
|
3
3
|
import { useTheme2, Field, Select } from '@grafana/ui';
|
|
4
4
|
import '@grafana/data';
|
|
@@ -39,9 +39,9 @@ const AuthMethodSettings = ({
|
|
|
39
39
|
readOnly
|
|
40
40
|
}) => {
|
|
41
41
|
var _a, _b, _c, _d;
|
|
42
|
-
const [authMethodChanged, setAuthMethodChanged] =
|
|
42
|
+
const [authMethodChanged, setAuthMethodChanged] = useState(false);
|
|
43
43
|
const { colors, spacing } = useTheme2();
|
|
44
|
-
const visibleMethods =
|
|
44
|
+
const visibleMethods = useMemo(
|
|
45
45
|
() => {
|
|
46
46
|
var _a2;
|
|
47
47
|
return visibleMethodsFromProps != null ? visibleMethodsFromProps : [
|
|
@@ -54,7 +54,7 @@ const AuthMethodSettings = ({
|
|
|
54
54
|
[customMethods, visibleMethodsFromProps]
|
|
55
55
|
);
|
|
56
56
|
const hasSelect = visibleMethods.length > 1;
|
|
57
|
-
const preparedOptions =
|
|
57
|
+
const preparedOptions = useMemo(() => {
|
|
58
58
|
var _a2;
|
|
59
59
|
const customOptions = (_a2 = customMethods == null ? undefined : customMethods.reduce((acc, method) => {
|
|
60
60
|
acc[method.id] = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthMethodSettings.js","sources":["../../../../../../src/components/ConfigEditor/Auth/auth-method/AuthMethodSettings.tsx"],"sourcesContent":["import React, { type ReactElement, useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useTheme2, Select, Field } from '@grafana/ui';\nimport { type SelectableValue } from '@grafana/data';\nimport { BasicAuth, type Props as BasicAuthProps } from './BasicAuth';\nimport { ConfigSubSection } from '../../ConfigSection';\nimport { AuthMethod, type CustomMethod, type CustomMethodId, type AuthMethodSelectOption } from '../types';\n\nconst defaultOptions: Record<AuthMethod, SelectableValue<AuthMethod>> = {\n [AuthMethod.BasicAuth]: {\n label: 'Basic authentication',\n value: AuthMethod.BasicAuth,\n description: 'Authenticate with your data source username and password',\n },\n [AuthMethod.CrossSiteCredentials]: {\n label: 'Enable cross-site access control requests',\n value: AuthMethod.CrossSiteCredentials,\n description:\n 'Allow cross-site Access-Control requests with your existing credentials and cookies. This enables the server to authenticate the user and perform authorized requests on their behalf on other domains.',\n },\n [AuthMethod.OAuthForward]: {\n label: 'Forward OAuth Identity',\n value: AuthMethod.OAuthForward,\n description:\n 'Forward the OAuth access token (and if available: the OIDC ID token) of the user querying to the data source',\n },\n [AuthMethod.NoAuth]: {\n label: 'No Authentication',\n value: AuthMethod.NoAuth,\n description: 'Data source is available without authentication',\n },\n};\n\nexport type Props = {\n selectedMethod: AuthMethod | CustomMethodId;\n mostCommonMethod?: AuthMethod | CustomMethodId;\n visibleMethods?: Array<AuthMethod | CustomMethodId>;\n defaultOptionsOverrides?: Partial<Record<AuthMethod, AuthMethodSelectOption>>;\n customMethods?: CustomMethod[];\n onAuthMethodSelect: (authType: AuthMethod | CustomMethodId) => void;\n basicAuth?: Omit<BasicAuthProps, 'readOnly'>;\n readOnly: boolean;\n};\n\nexport const AuthMethodSettings = ({\n selectedMethod,\n mostCommonMethod,\n visibleMethods: visibleMethodsFromProps,\n defaultOptionsOverrides,\n customMethods,\n onAuthMethodSelect,\n basicAuth,\n readOnly,\n}: Props) => {\n const [authMethodChanged, setAuthMethodChanged] = useState(false);\n const { colors, spacing } = useTheme2();\n const visibleMethods: Array<AuthMethod | CustomMethodId> = useMemo(\n () =>\n visibleMethodsFromProps ?? [\n AuthMethod.BasicAuth,\n AuthMethod.OAuthForward,\n AuthMethod.NoAuth,\n ...(customMethods?.map((m) => m.id) ?? []),\n ],\n [customMethods, visibleMethodsFromProps]\n );\n const hasSelect = visibleMethods.length > 1;\n\n const preparedOptions = useMemo(() => {\n const customOptions =\n customMethods?.reduce<Record<CustomMethodId, SelectableValue<CustomMethodId>>>((acc, method) => {\n acc[method.id] = {\n label: method.label,\n value: method.id,\n description: method.description,\n };\n return acc;\n }, {}) ?? {};\n\n const preparedDefaultOptions = {} as Record<AuthMethod, SelectableValue<AuthMethod>>;\n let k: keyof typeof AuthMethod;\n for (k in defaultOptions) {\n preparedDefaultOptions[k] = {\n ...defaultOptions[k],\n ...defaultOptionsOverrides?.[k],\n };\n }\n\n const allOptions: Record<AuthMethod | CustomMethodId, SelectableValue<AuthMethod | CustomMethodId>> = {\n ...customOptions,\n ...preparedDefaultOptions,\n };\n\n return visibleMethods\n .filter((method) => Boolean(allOptions[method]))\n .map((method) => {\n const option = allOptions[method];\n if (method === mostCommonMethod && hasSelect) {\n return {\n ...option,\n label: `${option.label} (most common)`,\n };\n }\n return option;\n });\n }, [visibleMethods, customMethods, defaultOptionsOverrides, mostCommonMethod, hasSelect]);\n\n let selected = selectedMethod;\n if (!hasSelect) {\n selected = visibleMethods[0];\n } else if (selectedMethod === AuthMethod.NoAuth && mostCommonMethod && !authMethodChanged) {\n selected = mostCommonMethod;\n }\n\n let AuthFieldsComponent: ReactElement | null = null;\n if (selected === AuthMethod.BasicAuth && basicAuth) {\n AuthFieldsComponent = <BasicAuth {...basicAuth} readOnly={readOnly} />;\n } else if (selected.startsWith('custom-')) {\n AuthFieldsComponent = customMethods?.find((m) => m.id === selected)?.component ?? null;\n }\n\n const title = hasSelect ? 'Authentication methods' : (preparedOptions[0].label ?? '');\n\n const description = hasSelect\n ? 'Choose an authentication method to access the data source'\n : (preparedOptions[0].description ?? '');\n\n const styles = {\n authMethods: css({\n marginTop: spacing(2.5),\n ...(hasSelect && {\n padding: spacing(2),\n border: `1px solid ${colors.border.weak}`,\n }),\n }),\n selectedMethodFields: css({\n marginTop: spacing(1.5),\n }),\n };\n\n return (\n <ConfigSubSection title={title} description={description}>\n <div className={styles.authMethods}>\n {hasSelect && (\n <Field label=\"Authentication method\">\n <Select\n inputId=\"auth-method-select\"\n options={preparedOptions}\n value={selected}\n onChange={(option) => {\n setAuthMethodChanged(true);\n onAuthMethodSelect(option.value!);\n }}\n disabled={readOnly}\n />\n </Field>\n )}\n {AuthFieldsComponent && <div className={styles.selectedMethodFields}>{AuthFieldsComponent}</div>}\n </div>\n </ConfigSubSection>\n );\n};\n"],"names":["useState","useMemo","_a"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AuthMethodSettings.js","sources":["../../../../../../src/components/ConfigEditor/Auth/auth-method/AuthMethodSettings.tsx"],"sourcesContent":["import React, { type ReactElement, useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useTheme2, Select, Field } from '@grafana/ui';\nimport { type SelectableValue } from '@grafana/data';\nimport { BasicAuth, type Props as BasicAuthProps } from './BasicAuth';\nimport { ConfigSubSection } from '../../ConfigSection';\nimport { AuthMethod, type CustomMethod, type CustomMethodId, type AuthMethodSelectOption } from '../types';\n\nconst defaultOptions: Record<AuthMethod, SelectableValue<AuthMethod>> = {\n [AuthMethod.BasicAuth]: {\n label: 'Basic authentication',\n value: AuthMethod.BasicAuth,\n description: 'Authenticate with your data source username and password',\n },\n [AuthMethod.CrossSiteCredentials]: {\n label: 'Enable cross-site access control requests',\n value: AuthMethod.CrossSiteCredentials,\n description:\n 'Allow cross-site Access-Control requests with your existing credentials and cookies. This enables the server to authenticate the user and perform authorized requests on their behalf on other domains.',\n },\n [AuthMethod.OAuthForward]: {\n label: 'Forward OAuth Identity',\n value: AuthMethod.OAuthForward,\n description:\n 'Forward the OAuth access token (and if available: the OIDC ID token) of the user querying to the data source',\n },\n [AuthMethod.NoAuth]: {\n label: 'No Authentication',\n value: AuthMethod.NoAuth,\n description: 'Data source is available without authentication',\n },\n};\n\nexport type Props = {\n selectedMethod: AuthMethod | CustomMethodId;\n mostCommonMethod?: AuthMethod | CustomMethodId;\n visibleMethods?: Array<AuthMethod | CustomMethodId>;\n defaultOptionsOverrides?: Partial<Record<AuthMethod, AuthMethodSelectOption>>;\n customMethods?: CustomMethod[];\n onAuthMethodSelect: (authType: AuthMethod | CustomMethodId) => void;\n basicAuth?: Omit<BasicAuthProps, 'readOnly'>;\n readOnly: boolean;\n};\n\nexport const AuthMethodSettings = ({\n selectedMethod,\n mostCommonMethod,\n visibleMethods: visibleMethodsFromProps,\n defaultOptionsOverrides,\n customMethods,\n onAuthMethodSelect,\n basicAuth,\n readOnly,\n}: Props) => {\n const [authMethodChanged, setAuthMethodChanged] = useState(false);\n const { colors, spacing } = useTheme2();\n const visibleMethods: Array<AuthMethod | CustomMethodId> = useMemo(\n () =>\n visibleMethodsFromProps ?? [\n AuthMethod.BasicAuth,\n AuthMethod.OAuthForward,\n AuthMethod.NoAuth,\n ...(customMethods?.map((m) => m.id) ?? []),\n ],\n [customMethods, visibleMethodsFromProps]\n );\n const hasSelect = visibleMethods.length > 1;\n\n const preparedOptions = useMemo(() => {\n const customOptions =\n customMethods?.reduce<Record<CustomMethodId, SelectableValue<CustomMethodId>>>((acc, method) => {\n acc[method.id] = {\n label: method.label,\n value: method.id,\n description: method.description,\n };\n return acc;\n }, {}) ?? {};\n\n const preparedDefaultOptions = {} as Record<AuthMethod, SelectableValue<AuthMethod>>;\n let k: keyof typeof AuthMethod;\n for (k in defaultOptions) {\n preparedDefaultOptions[k] = {\n ...defaultOptions[k],\n ...defaultOptionsOverrides?.[k],\n };\n }\n\n const allOptions: Record<AuthMethod | CustomMethodId, SelectableValue<AuthMethod | CustomMethodId>> = {\n ...customOptions,\n ...preparedDefaultOptions,\n };\n\n return visibleMethods\n .filter((method) => Boolean(allOptions[method]))\n .map((method) => {\n const option = allOptions[method];\n if (method === mostCommonMethod && hasSelect) {\n return {\n ...option,\n label: `${option.label} (most common)`,\n };\n }\n return option;\n });\n }, [visibleMethods, customMethods, defaultOptionsOverrides, mostCommonMethod, hasSelect]);\n\n let selected = selectedMethod;\n if (!hasSelect) {\n selected = visibleMethods[0];\n } else if (selectedMethod === AuthMethod.NoAuth && mostCommonMethod && !authMethodChanged) {\n selected = mostCommonMethod;\n }\n\n let AuthFieldsComponent: ReactElement | null = null;\n if (selected === AuthMethod.BasicAuth && basicAuth) {\n AuthFieldsComponent = <BasicAuth {...basicAuth} readOnly={readOnly} />;\n } else if (selected.startsWith('custom-')) {\n AuthFieldsComponent = customMethods?.find((m) => m.id === selected)?.component ?? null;\n }\n\n const title = hasSelect ? 'Authentication methods' : (preparedOptions[0].label ?? '');\n\n const description = hasSelect\n ? 'Choose an authentication method to access the data source'\n : (preparedOptions[0].description ?? '');\n\n const styles = {\n authMethods: css({\n marginTop: spacing(2.5),\n ...(hasSelect && {\n padding: spacing(2),\n border: `1px solid ${colors.border.weak}`,\n }),\n }),\n selectedMethodFields: css({\n marginTop: spacing(1.5),\n }),\n };\n\n return (\n <ConfigSubSection title={title} description={description}>\n <div className={styles.authMethods}>\n {hasSelect && (\n <Field label=\"Authentication method\">\n <Select\n inputId=\"auth-method-select\"\n options={preparedOptions}\n value={selected}\n onChange={(option) => {\n setAuthMethodChanged(true);\n onAuthMethodSelect(option.value!);\n }}\n disabled={readOnly}\n />\n </Field>\n )}\n {AuthFieldsComponent && <div className={styles.selectedMethodFields}>{AuthFieldsComponent}</div>}\n </div>\n </ConfigSubSection>\n );\n};\n"],"names":["_a"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from '
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { css, cx } from '@emotion/css';
|
|
3
3
|
import { useTheme2, InlineFieldRow, InlineField, Input, SecretInput, IconButton } from '@grafana/ui';
|
|
4
4
|
import { useCommonStyles } from '../styles.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import { css } from '@emotion/css';
|
|
3
3
|
import { useTheme2, Button } from '@grafana/ui';
|
|
4
4
|
import { CustomHeader } from './CustomHeader.js';
|
|
@@ -7,14 +7,14 @@ import '@grafana/data';
|
|
|
7
7
|
|
|
8
8
|
const CustomHeaders = ({ headers: headersFromProps, onChange, readOnly }) => {
|
|
9
9
|
const { spacing } = useTheme2();
|
|
10
|
-
const [headers, setHeaders] =
|
|
10
|
+
const [headers, setHeaders] = useState(
|
|
11
11
|
headersFromProps.map((header) => ({
|
|
12
12
|
...header,
|
|
13
13
|
id: uniqueId(),
|
|
14
14
|
value: ""
|
|
15
15
|
}))
|
|
16
16
|
);
|
|
17
|
-
|
|
17
|
+
useEffect(() => {
|
|
18
18
|
setHeaders((headers2) => {
|
|
19
19
|
let changed = false;
|
|
20
20
|
const newHeaders = headers2.map((header) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomHeaders.js","sources":["../../../../../../src/components/ConfigEditor/Auth/custom-headers/CustomHeaders.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { css } from '@emotion/css';\nimport { Button, useTheme2 } from '@grafana/ui';\nimport { CustomHeader } from './CustomHeader';\nimport { ConfigSubSection } from '../../ConfigSection';\nimport type { Header, HeaderWithValue, LocalHeader } from '../types';\n\nexport type Props = {\n headers: Header[];\n onChange: (headers: HeaderWithValue[]) => void;\n readOnly: boolean;\n};\n\nexport const CustomHeaders = ({ headers: headersFromProps, onChange, readOnly }: Props) => {\n const { spacing } = useTheme2();\n\n const [headers, setHeaders] = useState<LocalHeader[]>(\n headersFromProps.map((header) => ({\n ...header,\n id: uniqueId(),\n value: '',\n }))\n );\n\n useEffect(() => {\n setHeaders((headers) => {\n let changed = false;\n const newHeaders = headers.map<LocalHeader>((header) => {\n const configured = headersFromProps.find((h) => h.name === header.name)?.configured;\n if (typeof configured !== 'undefined' && header.configured !== configured) {\n changed = true;\n return { ...header, configured };\n }\n return header;\n });\n\n if (changed) {\n return newHeaders;\n }\n\n return headers;\n });\n }, [headersFromProps]);\n\n const onHeaderAdd = () => {\n setHeaders([...headers, { id: uniqueId(), name: '', value: '', configured: false }]);\n };\n\n const onHeaderChange = (id: string, header: LocalHeader) => {\n setHeaders(headers.map((h) => (h.id === id ? { ...header } : h)));\n };\n\n const onHeaderDelete = (id: string) => {\n const index = headers.findIndex((h) => h.id === id);\n if (index === -1) {\n return;\n }\n const newHeaders = [...headers];\n newHeaders.splice(index, 1);\n setHeaders(newHeaders);\n onChange(\n newHeaders.map(({ name, value, configured }) => ({\n name,\n value,\n configured,\n }))\n );\n };\n\n const onBlur = () => {\n onChange(\n headers.map(({ name, value, configured }) => ({\n name,\n value,\n configured,\n }))\n );\n };\n\n const styles = {\n container: css({\n marginTop: spacing(3),\n }),\n addHeaderButton: css({\n marginTop: spacing(1.5),\n }),\n };\n\n return (\n <div className={styles.container}>\n <ConfigSubSection\n title=\"HTTP headers\"\n description=\"Pass along additional context and metadata about the request/response\"\n isCollapsible\n isInitiallyOpen={headers.length > 0}\n >\n <div>\n {headers.map((header) => (\n <CustomHeader\n key={header.id}\n header={header}\n onChange={(header) => onHeaderChange(header.id, header)}\n onDelete={() => onHeaderDelete(header.id)}\n onBlur={onBlur}\n readOnly={readOnly}\n />\n ))}\n </div>\n <div className={styles.addHeaderButton}>\n <Button icon=\"plus\" variant=\"secondary\" fill=\"outline\" onClick={onHeaderAdd} disabled={readOnly}>\n {headers.length === 0 ? 'Add header' : 'Add another header'}\n </Button>\n </div>\n </ConfigSubSection>\n </div>\n );\n};\n\nfunction uniqueId(): string {\n return Math.random().toString(16).slice(2);\n}\n"],"names":["
|
|
1
|
+
{"version":3,"file":"CustomHeaders.js","sources":["../../../../../../src/components/ConfigEditor/Auth/custom-headers/CustomHeaders.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { css } from '@emotion/css';\nimport { Button, useTheme2 } from '@grafana/ui';\nimport { CustomHeader } from './CustomHeader';\nimport { ConfigSubSection } from '../../ConfigSection';\nimport type { Header, HeaderWithValue, LocalHeader } from '../types';\n\nexport type Props = {\n headers: Header[];\n onChange: (headers: HeaderWithValue[]) => void;\n readOnly: boolean;\n};\n\nexport const CustomHeaders = ({ headers: headersFromProps, onChange, readOnly }: Props) => {\n const { spacing } = useTheme2();\n\n const [headers, setHeaders] = useState<LocalHeader[]>(\n headersFromProps.map((header) => ({\n ...header,\n id: uniqueId(),\n value: '',\n }))\n );\n\n useEffect(() => {\n setHeaders((headers) => {\n let changed = false;\n const newHeaders = headers.map<LocalHeader>((header) => {\n const configured = headersFromProps.find((h) => h.name === header.name)?.configured;\n if (typeof configured !== 'undefined' && header.configured !== configured) {\n changed = true;\n return { ...header, configured };\n }\n return header;\n });\n\n if (changed) {\n return newHeaders;\n }\n\n return headers;\n });\n }, [headersFromProps]);\n\n const onHeaderAdd = () => {\n setHeaders([...headers, { id: uniqueId(), name: '', value: '', configured: false }]);\n };\n\n const onHeaderChange = (id: string, header: LocalHeader) => {\n setHeaders(headers.map((h) => (h.id === id ? { ...header } : h)));\n };\n\n const onHeaderDelete = (id: string) => {\n const index = headers.findIndex((h) => h.id === id);\n if (index === -1) {\n return;\n }\n const newHeaders = [...headers];\n newHeaders.splice(index, 1);\n setHeaders(newHeaders);\n onChange(\n newHeaders.map(({ name, value, configured }) => ({\n name,\n value,\n configured,\n }))\n );\n };\n\n const onBlur = () => {\n onChange(\n headers.map(({ name, value, configured }) => ({\n name,\n value,\n configured,\n }))\n );\n };\n\n const styles = {\n container: css({\n marginTop: spacing(3),\n }),\n addHeaderButton: css({\n marginTop: spacing(1.5),\n }),\n };\n\n return (\n <div className={styles.container}>\n <ConfigSubSection\n title=\"HTTP headers\"\n description=\"Pass along additional context and metadata about the request/response\"\n isCollapsible\n isInitiallyOpen={headers.length > 0}\n >\n <div>\n {headers.map((header) => (\n <CustomHeader\n key={header.id}\n header={header}\n onChange={(header) => onHeaderChange(header.id, header)}\n onDelete={() => onHeaderDelete(header.id)}\n onBlur={onBlur}\n readOnly={readOnly}\n />\n ))}\n </div>\n <div className={styles.addHeaderButton}>\n <Button icon=\"plus\" variant=\"secondary\" fill=\"outline\" onClick={onHeaderAdd} disabled={readOnly}>\n {headers.length === 0 ? 'Add header' : 'Add another header'}\n </Button>\n </div>\n </ConfigSubSection>\n </div>\n );\n};\n\nfunction uniqueId(): string {\n return Math.random().toString(16).slice(2);\n}\n"],"names":["headers","header"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { css } from '@emotion/css';
|
|
3
3
|
import { useTheme2, IconButton } from '@grafana/ui';
|
|
4
4
|
|
|
@@ -12,7 +12,7 @@ const GenericConfigSection = ({
|
|
|
12
12
|
className
|
|
13
13
|
}) => {
|
|
14
14
|
const { colors, typography, spacing } = useTheme2();
|
|
15
|
-
const [isOpen, setIsOpen] =
|
|
15
|
+
const [isOpen, setIsOpen] = useState(isCollapsible ? isInitiallyOpen : true);
|
|
16
16
|
const iconName = isOpen ? "angle-up" : "angle-down";
|
|
17
17
|
const isSubSection = kind === "sub-section";
|
|
18
18
|
const collapsibleButtonAriaLabel = `${isOpen ? "Collapse" : "Expand"} section ${title}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenericConfigSection.js","sources":["../../../../../src/components/ConfigEditor/ConfigSection/GenericConfigSection.tsx"],"sourcesContent":["import React, { useState, type ReactNode } from 'react';\nimport { css } from '@emotion/css';\nimport { useTheme2, IconButton, type IconName } from '@grafana/ui';\n\nexport type Props = {\n title: string;\n description?: ReactNode;\n isCollapsible?: boolean;\n isInitiallyOpen?: boolean;\n kind?: 'section' | 'sub-section';\n className?: string;\n};\n\nexport const GenericConfigSection = ({\n children,\n title,\n description,\n isCollapsible = false,\n isInitiallyOpen = true,\n kind = 'section',\n className,\n}: React.PropsWithChildren<Props>) => {\n const { colors, typography, spacing } = useTheme2();\n const [isOpen, setIsOpen] = useState(isCollapsible ? isInitiallyOpen : true);\n const iconName: IconName = isOpen ? 'angle-up' : 'angle-down';\n const isSubSection = kind === 'sub-section';\n const collapsibleButtonAriaLabel = `${isOpen ? 'Collapse' : 'Expand'} section ${title}`;\n\n const styles = {\n header: css({\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n }),\n title: css({\n margin: 0,\n }),\n subtitle: css({\n margin: 0,\n fontWeight: typography.fontWeightRegular,\n }),\n descriptionText: css({\n marginTop: spacing(isSubSection ? 0.25 : 0.5),\n marginBottom: 0,\n ...typography.bodySmall,\n color: colors.text.secondary,\n }),\n content: css({\n marginTop: spacing(2),\n }),\n };\n\n return (\n <div className={className}>\n <div className={styles.header}>\n {kind === 'section' ? <h3 className={styles.title}>{title}</h3> : <h6 className={styles.subtitle}>{title}</h6>}\n {isCollapsible && (\n <IconButton\n name={iconName}\n onClick={() => setIsOpen(!isOpen)}\n type=\"button\"\n size=\"xl\"\n aria-label={collapsibleButtonAriaLabel}\n />\n )}\n </div>\n {description && <p className={styles.descriptionText}>{description}</p>}\n {isOpen && <div className={styles.content}>{children}</div>}\n </div>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"GenericConfigSection.js","sources":["../../../../../src/components/ConfigEditor/ConfigSection/GenericConfigSection.tsx"],"sourcesContent":["import React, { useState, type ReactNode } from 'react';\nimport { css } from '@emotion/css';\nimport { useTheme2, IconButton, type IconName } from '@grafana/ui';\n\nexport type Props = {\n title: string;\n description?: ReactNode;\n isCollapsible?: boolean;\n isInitiallyOpen?: boolean;\n kind?: 'section' | 'sub-section';\n className?: string;\n};\n\nexport const GenericConfigSection = ({\n children,\n title,\n description,\n isCollapsible = false,\n isInitiallyOpen = true,\n kind = 'section',\n className,\n}: React.PropsWithChildren<Props>) => {\n const { colors, typography, spacing } = useTheme2();\n const [isOpen, setIsOpen] = useState(isCollapsible ? isInitiallyOpen : true);\n const iconName: IconName = isOpen ? 'angle-up' : 'angle-down';\n const isSubSection = kind === 'sub-section';\n const collapsibleButtonAriaLabel = `${isOpen ? 'Collapse' : 'Expand'} section ${title}`;\n\n const styles = {\n header: css({\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n }),\n title: css({\n margin: 0,\n }),\n subtitle: css({\n margin: 0,\n fontWeight: typography.fontWeightRegular,\n }),\n descriptionText: css({\n marginTop: spacing(isSubSection ? 0.25 : 0.5),\n marginBottom: 0,\n ...typography.bodySmall,\n color: colors.text.secondary,\n }),\n content: css({\n marginTop: spacing(2),\n }),\n };\n\n return (\n <div className={className}>\n <div className={styles.header}>\n {kind === 'section' ? <h3 className={styles.title}>{title}</h3> : <h6 className={styles.subtitle}>{title}</h6>}\n {isCollapsible && (\n <IconButton\n name={iconName}\n onClick={() => setIsOpen(!isOpen)}\n type=\"button\"\n size=\"xl\"\n aria-label={collapsibleButtonAriaLabel}\n />\n )}\n </div>\n {description && <p className={styles.descriptionText}>{description}</p>}\n {isOpen && <div className={styles.content}>{children}</div>}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAgB,GAAA,KAAA;AAAA,EAChB,eAAkB,GAAA,IAAA;AAAA,EAClB,IAAO,GAAA,SAAA;AAAA,EACP;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAY,EAAA,OAAA,KAAY,SAAU,EAAA;AAClD,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,IAAI,QAAS,CAAA,aAAA,GAAgB,kBAAkB,IAAI,CAAA;AAC3E,EAAM,MAAA,QAAA,GAAqB,SAAS,UAAa,GAAA,YAAA;AACjD,EAAA,MAAM,eAAe,IAAS,KAAA,aAAA;AAC9B,EAAA,MAAM,6BAA6B,CAAG,EAAA,MAAA,GAAS,UAAa,GAAA,QAAQ,YAAY,KAAK,CAAA,CAAA;AAErF,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,QAAQ,GAAI,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,MAAQ,EAAA;AAAA,KACT,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,MAAQ,EAAA,CAAA;AAAA,MACR,YAAY,UAAW,CAAA;AAAA,KACxB,CAAA;AAAA,IACD,iBAAiB,GAAI,CAAA;AAAA,MACnB,SAAW,EAAA,OAAA,CAAQ,YAAe,GAAA,IAAA,GAAO,GAAG,CAAA;AAAA,MAC5C,YAAc,EAAA,CAAA;AAAA,MACd,GAAG,UAAW,CAAA,SAAA;AAAA,MACd,KAAA,EAAO,OAAO,IAAK,CAAA;AAAA,KACpB,CAAA;AAAA,IACD,SAAS,GAAI,CAAA;AAAA,MACX,SAAA,EAAW,QAAQ,CAAC;AAAA,KACrB;AAAA,GACH;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAA,kBACF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,MAAA,EAAA,EACpB,IAAS,KAAA,SAAA,mBAAa,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAG,WAAW,MAAO,CAAA,KAAA,EAAA,EAAQ,KAAM,CAAA,mBAAS,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAG,WAAW,MAAO,CAAA,QAAA,EAAA,EAAW,KAAM,CAAA,EACxG,aACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,QAAA;AAAA,MACN,OAAS,EAAA,MAAM,SAAU,CAAA,CAAC,MAAM,CAAA;AAAA,MAChC,IAAK,EAAA,QAAA;AAAA,MACL,IAAK,EAAA,IAAA;AAAA,MACL,YAAY,EAAA;AAAA;AAAA,GAGlB,CACC,EAAA,WAAA,oBAAgB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,WAAW,MAAO,CAAA,eAAA,EAAA,EAAkB,WAAY,CAAA,EAClE,0BAAW,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,OAAA,EAAA,EAAU,QAAS,CACvD,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { PureComponent } from 'react';
|
|
2
2
|
import { css } from '@emotion/css';
|
|
3
3
|
import { uniqueId } from 'lodash';
|
|
4
4
|
import '@grafana/data';
|
|
@@ -66,7 +66,7 @@ const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }) => {
|
|
|
66
66
|
));
|
|
67
67
|
};
|
|
68
68
|
CustomHeaderRow.displayName = "CustomHeaderRow";
|
|
69
|
-
class CustomHeadersSettings extends
|
|
69
|
+
class CustomHeadersSettings extends PureComponent {
|
|
70
70
|
constructor(props) {
|
|
71
71
|
super(props);
|
|
72
72
|
__publicField(this, "state", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomHeadersSettings.js","sources":["../../../../src/components/CustomHeadersSettings/CustomHeadersSettings.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { type DataSourceSettings } from '@grafana/data';\nimport { stylesFactory, LegacyForms, Button, Icon } from '@grafana/ui';\n\nexport interface CustomHeader {\n id: string;\n name: string;\n value: string;\n configured: boolean;\n}\n\nexport type CustomHeaders = CustomHeader[];\n\nexport interface Props {\n dataSourceConfig: DataSourceSettings<any, any>;\n onChange: (config: DataSourceSettings) => void;\n}\n\nexport interface State {\n headers: CustomHeaders;\n}\n\ninterface CustomHeaderRowProps {\n header: CustomHeader;\n onReset: (id: string) => void;\n onRemove: (id: string) => void;\n onChange: (value: CustomHeader) => void;\n onBlur: () => void;\n}\n\nconst getCustomHeaderRowStyles = stylesFactory(() => {\n return {\n layout: css`\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n > * {\n margin-left: 4px;\n margin-bottom: 0;\n height: 100%;\n &:first-child,\n &:last-child {\n margin-left: 0;\n }\n }\n `,\n };\n});\n\nconst CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }: CustomHeaderRowProps) => {\n const styles = getCustomHeaderRowStyles();\n return (\n <div className={styles.layout}>\n <LegacyForms.FormField\n label=\"Header\"\n name=\"name\"\n placeholder=\"X-Custom-Header\"\n labelWidth={5}\n value={header.name || ''}\n onChange={(e) => onChange({ ...header, name: e.target.value })}\n onBlur={onBlur}\n />\n <LegacyForms.SecretFormField\n label=\"Value\"\n aria-label=\"Value\"\n name=\"value\"\n isConfigured={header.configured}\n value={header.value}\n labelWidth={5}\n inputWidth={header.configured ? 11 : 12}\n placeholder=\"Header Value\"\n onReset={() => onReset(header.id)}\n onChange={(e) => onChange({ ...header, value: e.target.value })}\n onBlur={onBlur}\n />\n <Button\n type=\"button\"\n aria-label=\"Remove header\"\n variant=\"secondary\"\n size=\"xs\"\n onClick={(_e) => onRemove(header.id)}\n >\n <Icon name=\"trash-alt\" />\n </Button>\n </div>\n );\n};\n\nCustomHeaderRow.displayName = 'CustomHeaderRow';\n\nexport class CustomHeadersSettings extends PureComponent<Props, State> {\n state: State = {\n headers: [],\n };\n\n constructor(props: Props) {\n super(props);\n const { jsonData, secureJsonData, secureJsonFields } = this.props.dataSourceConfig;\n this.state = {\n headers: Object.keys(jsonData)\n .sort()\n .filter((key) => key.startsWith('httpHeaderName'))\n .map((key, index) => {\n return {\n id: uniqueId(),\n name: jsonData[key],\n value: secureJsonData !== undefined ? secureJsonData[key] : '',\n configured: (secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`]) || false,\n };\n }),\n };\n }\n\n updateSettings = () => {\n const { headers } = this.state;\n\n // we remove every httpHeaderName* field\n const newJsonData = Object.fromEntries(\n Object.entries(this.props.dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith('httpHeaderName'))\n );\n\n // we remove every httpHeaderValue* field\n const newSecureJsonData = Object.fromEntries(\n Object.entries(this.props.dataSourceConfig.secureJsonData || {}).filter(\n ([key, val]) => !key.startsWith('httpHeaderValue')\n )\n );\n\n // then we add the current httpHeader-fields\n for (const [index, header] of headers.entries()) {\n newJsonData[`httpHeaderName${index + 1}`] = header.name;\n if (!header.configured) {\n newSecureJsonData[`httpHeaderValue${index + 1}`] = header.value;\n }\n }\n\n this.props.onChange({\n ...this.props.dataSourceConfig,\n jsonData: newJsonData,\n secureJsonData: newSecureJsonData,\n });\n };\n\n onHeaderAdd = () => {\n this.setState((prevState) => {\n return {\n headers: [...prevState.headers, { id: uniqueId(), name: '', value: '', configured: false }],\n };\n });\n };\n\n onHeaderChange = (headerIndex: number, value: CustomHeader) => {\n this.setState(({ headers }) => {\n return {\n headers: headers.map((item, index) => {\n if (headerIndex !== index) {\n return item;\n }\n return { ...value };\n }),\n };\n });\n };\n\n onHeaderReset = (headerId: string) => {\n this.setState(({ headers }) => {\n return {\n headers: headers.map((h, i) => {\n if (h.id !== headerId) {\n return h;\n }\n return {\n ...h,\n value: '',\n configured: false,\n };\n }),\n };\n });\n };\n\n onHeaderRemove = (headerId: string) => {\n this.setState(\n ({ headers }) => ({\n headers: headers.filter((h) => h.id !== headerId),\n }),\n this.updateSettings\n );\n };\n\n render() {\n const { headers } = this.state;\n return (\n <div className={'gf-form-group'}>\n <div className=\"gf-form\">\n <h6>Custom HTTP Headers</h6>\n </div>\n <div>\n {headers.map((header, i) => (\n <CustomHeaderRow\n key={header.id}\n header={header}\n onChange={(h) => {\n this.onHeaderChange(i, h);\n }}\n onBlur={this.updateSettings}\n onRemove={this.onHeaderRemove}\n onReset={this.onHeaderReset}\n />\n ))}\n </div>\n <div className=\"gf-form\">\n <Button\n variant=\"secondary\"\n icon=\"plus\"\n type=\"button\"\n onClick={(e) => {\n this.onHeaderAdd();\n }}\n >\n Add header\n </Button>\n </div>\n </div>\n );\n }\n}\n\nexport default CustomHeadersSettings;\n"],"names":["PureComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CustomHeadersSettings.js","sources":["../../../../src/components/CustomHeadersSettings/CustomHeadersSettings.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { type DataSourceSettings } from '@grafana/data';\nimport { stylesFactory, LegacyForms, Button, Icon } from '@grafana/ui';\n\nexport interface CustomHeader {\n id: string;\n name: string;\n value: string;\n configured: boolean;\n}\n\nexport type CustomHeaders = CustomHeader[];\n\nexport interface Props {\n dataSourceConfig: DataSourceSettings<any, any>;\n onChange: (config: DataSourceSettings) => void;\n}\n\nexport interface State {\n headers: CustomHeaders;\n}\n\ninterface CustomHeaderRowProps {\n header: CustomHeader;\n onReset: (id: string) => void;\n onRemove: (id: string) => void;\n onChange: (value: CustomHeader) => void;\n onBlur: () => void;\n}\n\nconst getCustomHeaderRowStyles = stylesFactory(() => {\n return {\n layout: css`\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n > * {\n margin-left: 4px;\n margin-bottom: 0;\n height: 100%;\n &:first-child,\n &:last-child {\n margin-left: 0;\n }\n }\n `,\n };\n});\n\nconst CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }: CustomHeaderRowProps) => {\n const styles = getCustomHeaderRowStyles();\n return (\n <div className={styles.layout}>\n <LegacyForms.FormField\n label=\"Header\"\n name=\"name\"\n placeholder=\"X-Custom-Header\"\n labelWidth={5}\n value={header.name || ''}\n onChange={(e) => onChange({ ...header, name: e.target.value })}\n onBlur={onBlur}\n />\n <LegacyForms.SecretFormField\n label=\"Value\"\n aria-label=\"Value\"\n name=\"value\"\n isConfigured={header.configured}\n value={header.value}\n labelWidth={5}\n inputWidth={header.configured ? 11 : 12}\n placeholder=\"Header Value\"\n onReset={() => onReset(header.id)}\n onChange={(e) => onChange({ ...header, value: e.target.value })}\n onBlur={onBlur}\n />\n <Button\n type=\"button\"\n aria-label=\"Remove header\"\n variant=\"secondary\"\n size=\"xs\"\n onClick={(_e) => onRemove(header.id)}\n >\n <Icon name=\"trash-alt\" />\n </Button>\n </div>\n );\n};\n\nCustomHeaderRow.displayName = 'CustomHeaderRow';\n\nexport class CustomHeadersSettings extends PureComponent<Props, State> {\n state: State = {\n headers: [],\n };\n\n constructor(props: Props) {\n super(props);\n const { jsonData, secureJsonData, secureJsonFields } = this.props.dataSourceConfig;\n this.state = {\n headers: Object.keys(jsonData)\n .sort()\n .filter((key) => key.startsWith('httpHeaderName'))\n .map((key, index) => {\n return {\n id: uniqueId(),\n name: jsonData[key],\n value: secureJsonData !== undefined ? secureJsonData[key] : '',\n configured: (secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`]) || false,\n };\n }),\n };\n }\n\n updateSettings = () => {\n const { headers } = this.state;\n\n // we remove every httpHeaderName* field\n const newJsonData = Object.fromEntries(\n Object.entries(this.props.dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith('httpHeaderName'))\n );\n\n // we remove every httpHeaderValue* field\n const newSecureJsonData = Object.fromEntries(\n Object.entries(this.props.dataSourceConfig.secureJsonData || {}).filter(\n ([key, val]) => !key.startsWith('httpHeaderValue')\n )\n );\n\n // then we add the current httpHeader-fields\n for (const [index, header] of headers.entries()) {\n newJsonData[`httpHeaderName${index + 1}`] = header.name;\n if (!header.configured) {\n newSecureJsonData[`httpHeaderValue${index + 1}`] = header.value;\n }\n }\n\n this.props.onChange({\n ...this.props.dataSourceConfig,\n jsonData: newJsonData,\n secureJsonData: newSecureJsonData,\n });\n };\n\n onHeaderAdd = () => {\n this.setState((prevState) => {\n return {\n headers: [...prevState.headers, { id: uniqueId(), name: '', value: '', configured: false }],\n };\n });\n };\n\n onHeaderChange = (headerIndex: number, value: CustomHeader) => {\n this.setState(({ headers }) => {\n return {\n headers: headers.map((item, index) => {\n if (headerIndex !== index) {\n return item;\n }\n return { ...value };\n }),\n };\n });\n };\n\n onHeaderReset = (headerId: string) => {\n this.setState(({ headers }) => {\n return {\n headers: headers.map((h, i) => {\n if (h.id !== headerId) {\n return h;\n }\n return {\n ...h,\n value: '',\n configured: false,\n };\n }),\n };\n });\n };\n\n onHeaderRemove = (headerId: string) => {\n this.setState(\n ({ headers }) => ({\n headers: headers.filter((h) => h.id !== headerId),\n }),\n this.updateSettings\n );\n };\n\n render() {\n const { headers } = this.state;\n return (\n <div className={'gf-form-group'}>\n <div className=\"gf-form\">\n <h6>Custom HTTP Headers</h6>\n </div>\n <div>\n {headers.map((header, i) => (\n <CustomHeaderRow\n key={header.id}\n header={header}\n onChange={(h) => {\n this.onHeaderChange(i, h);\n }}\n onBlur={this.updateSettings}\n onRemove={this.onHeaderRemove}\n onReset={this.onHeaderReset}\n />\n ))}\n </div>\n <div className=\"gf-form\">\n <Button\n variant=\"secondary\"\n icon=\"plus\"\n type=\"button\"\n onClick={(e) => {\n this.onHeaderAdd();\n }}\n >\n Add header\n </Button>\n </div>\n </div>\n );\n }\n}\n\nexport default CustomHeadersSettings;\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import { css } from '@emotion/css';
|
|
3
3
|
import '@grafana/data';
|
|
4
4
|
import { stylesFactory, Button, DataLinkInput, LegacyForms } from '@grafana/ui';
|
|
@@ -127,9 +127,9 @@ const DataLink = (props) => {
|
|
|
127
127
|
)));
|
|
128
128
|
};
|
|
129
129
|
function useInternalLink(datasourceUid) {
|
|
130
|
-
const [showInternalLink, setShowInternalLink] =
|
|
130
|
+
const [showInternalLink, setShowInternalLink] = useState(!!datasourceUid);
|
|
131
131
|
const previousUid = usePrevious(datasourceUid);
|
|
132
|
-
|
|
132
|
+
useEffect(() => {
|
|
133
133
|
if (!previousUid && datasourceUid && !showInternalLink) {
|
|
134
134
|
setShowInternalLink(true);
|
|
135
135
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataLink.js","sources":["../../../../src/components/DataLinks/DataLink.tsx"],"sourcesContent":["import React, { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { type VariableSuggestion, type DataSourceInstanceSettings, type DataSourceJsonData } from '@grafana/data';\nimport { Button, LegacyForms, DataLinkInput, stylesFactory } from '@grafana/ui';\nconst { FormField, Switch } = LegacyForms;\nimport { type DataLinkConfig } from './types';\nimport { usePrevious } from 'react-use';\nimport { DataSourcePicker } from '../DataSourcePicker/DataSourcePicker';\n\nconst getStyles = stylesFactory(() => ({\n firstRow: css`\n display: flex;\n `,\n nameField: css`\n flex: 2;\n `,\n regexField: css`\n flex: 3;\n `,\n row: css`\n display: flex;\n align-items: baseline;\n `,\n}));\n\ntype Props = {\n value: DataLinkConfig;\n datasources?: Array<DataSourceInstanceSettings<DataSourceJsonData>>;\n onChange: (value: DataLinkConfig) => void;\n onDelete: () => void;\n suggestions: VariableSuggestion[];\n className?: string;\n};\nexport const DataLink = (props: Props) => {\n const { value, onChange, onDelete, suggestions, className } = props;\n const styles = getStyles();\n const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);\n\n const handleChange = (field: keyof typeof value) => (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange({\n ...value,\n [field]: event.currentTarget.value,\n });\n };\n\n return (\n <div className={className}>\n <div className={styles.firstRow + ' gf-form'}>\n <FormField\n className={styles.nameField}\n labelWidth={6}\n // A bit of a hack to prevent using default value for the width from FormField\n inputWidth={null}\n label=\"Field\"\n type=\"text\"\n value={value.field}\n tooltip={'Can be exact field name or a regex pattern that will match on the field name.'}\n onChange={handleChange('field')}\n />\n <Button\n variant={'destructive'}\n title=\"Remove field\"\n icon=\"times\"\n onClick={(event) => {\n event.preventDefault();\n onDelete();\n }}\n />\n </div>\n <div className=\"gf-form\">\n <FormField\n className={styles.nameField}\n inputWidth={null}\n label=\"Label\"\n type=\"text\"\n value={value.label}\n onChange={handleChange('label')}\n tooltip={'Use to provide a meaningful label to the data matched in the regex'}\n />\n <FormField\n className={styles.regexField}\n inputWidth={null}\n label=\"Regex\"\n type=\"text\"\n value={value.matcherRegex}\n onChange={handleChange('matcherRegex')}\n tooltip={\n 'Use to parse and capture some part of the log message. You can use the captured groups in the template.'\n }\n />\n </div>\n <div className=\"gf-form\">\n <FormField\n label={showInternalLink ? 'Query' : 'URL'}\n labelWidth={6}\n inputEl={\n <DataLinkInput\n placeholder={showInternalLink ? '${__value.raw}' : 'http://example.com/${__value.raw}'}\n value={value.url || ''}\n onChange={(newValue) =>\n onChange({\n ...value,\n url: newValue,\n })\n }\n suggestions={suggestions}\n />\n }\n className={css`\n width: 100%;\n `}\n />\n </div>\n\n <div className={styles.row}>\n <Switch\n labelClass={'width-6'}\n label=\"Internal link\"\n checked={showInternalLink}\n onChange={() => {\n if (showInternalLink) {\n onChange({\n ...value,\n datasourceUid: undefined,\n });\n }\n setShowInternalLink(!showInternalLink);\n }}\n />\n {showInternalLink && (\n <DataSourcePicker\n // Uid and value should be always set in the db and so in the items.\n onChange={(ds) => {\n onChange({\n ...value,\n datasourceUid: ds.uid,\n });\n }}\n current={value.datasourceUid}\n />\n )}\n </div>\n </div>\n );\n};\n\nfunction useInternalLink(datasourceUid?: string): [boolean, Dispatch<SetStateAction<boolean>>] {\n const [showInternalLink, setShowInternalLink] = useState<boolean>(!!datasourceUid);\n const previousUid = usePrevious(datasourceUid);\n\n // Force internal link visibility change if uid changed outside of this component.\n useEffect(() => {\n if (!previousUid && datasourceUid && !showInternalLink) {\n setShowInternalLink(true);\n }\n if (previousUid && !datasourceUid && showInternalLink) {\n setShowInternalLink(false);\n }\n }, [previousUid, datasourceUid, showInternalLink]);\n\n return [showInternalLink, setShowInternalLink];\n}\n"],"names":[
|
|
1
|
+
{"version":3,"file":"DataLink.js","sources":["../../../../src/components/DataLinks/DataLink.tsx"],"sourcesContent":["import React, { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { type VariableSuggestion, type DataSourceInstanceSettings, type DataSourceJsonData } from '@grafana/data';\nimport { Button, LegacyForms, DataLinkInput, stylesFactory } from '@grafana/ui';\nconst { FormField, Switch } = LegacyForms;\nimport { type DataLinkConfig } from './types';\nimport { usePrevious } from 'react-use';\nimport { DataSourcePicker } from '../DataSourcePicker/DataSourcePicker';\n\nconst getStyles = stylesFactory(() => ({\n firstRow: css`\n display: flex;\n `,\n nameField: css`\n flex: 2;\n `,\n regexField: css`\n flex: 3;\n `,\n row: css`\n display: flex;\n align-items: baseline;\n `,\n}));\n\ntype Props = {\n value: DataLinkConfig;\n datasources?: Array<DataSourceInstanceSettings<DataSourceJsonData>>;\n onChange: (value: DataLinkConfig) => void;\n onDelete: () => void;\n suggestions: VariableSuggestion[];\n className?: string;\n};\nexport const DataLink = (props: Props) => {\n const { value, onChange, onDelete, suggestions, className } = props;\n const styles = getStyles();\n const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);\n\n const handleChange = (field: keyof typeof value) => (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange({\n ...value,\n [field]: event.currentTarget.value,\n });\n };\n\n return (\n <div className={className}>\n <div className={styles.firstRow + ' gf-form'}>\n <FormField\n className={styles.nameField}\n labelWidth={6}\n // A bit of a hack to prevent using default value for the width from FormField\n inputWidth={null}\n label=\"Field\"\n type=\"text\"\n value={value.field}\n tooltip={'Can be exact field name or a regex pattern that will match on the field name.'}\n onChange={handleChange('field')}\n />\n <Button\n variant={'destructive'}\n title=\"Remove field\"\n icon=\"times\"\n onClick={(event) => {\n event.preventDefault();\n onDelete();\n }}\n />\n </div>\n <div className=\"gf-form\">\n <FormField\n className={styles.nameField}\n inputWidth={null}\n label=\"Label\"\n type=\"text\"\n value={value.label}\n onChange={handleChange('label')}\n tooltip={'Use to provide a meaningful label to the data matched in the regex'}\n />\n <FormField\n className={styles.regexField}\n inputWidth={null}\n label=\"Regex\"\n type=\"text\"\n value={value.matcherRegex}\n onChange={handleChange('matcherRegex')}\n tooltip={\n 'Use to parse and capture some part of the log message. You can use the captured groups in the template.'\n }\n />\n </div>\n <div className=\"gf-form\">\n <FormField\n label={showInternalLink ? 'Query' : 'URL'}\n labelWidth={6}\n inputEl={\n <DataLinkInput\n placeholder={showInternalLink ? '${__value.raw}' : 'http://example.com/${__value.raw}'}\n value={value.url || ''}\n onChange={(newValue) =>\n onChange({\n ...value,\n url: newValue,\n })\n }\n suggestions={suggestions}\n />\n }\n className={css`\n width: 100%;\n `}\n />\n </div>\n\n <div className={styles.row}>\n <Switch\n labelClass={'width-6'}\n label=\"Internal link\"\n checked={showInternalLink}\n onChange={() => {\n if (showInternalLink) {\n onChange({\n ...value,\n datasourceUid: undefined,\n });\n }\n setShowInternalLink(!showInternalLink);\n }}\n />\n {showInternalLink && (\n <DataSourcePicker\n // Uid and value should be always set in the db and so in the items.\n onChange={(ds) => {\n onChange({\n ...value,\n datasourceUid: ds.uid,\n });\n }}\n current={value.datasourceUid}\n />\n )}\n </div>\n </div>\n );\n};\n\nfunction useInternalLink(datasourceUid?: string): [boolean, Dispatch<SetStateAction<boolean>>] {\n const [showInternalLink, setShowInternalLink] = useState<boolean>(!!datasourceUid);\n const previousUid = usePrevious(datasourceUid);\n\n // Force internal link visibility change if uid changed outside of this component.\n useEffect(() => {\n if (!previousUid && datasourceUid && !showInternalLink) {\n setShowInternalLink(true);\n }\n if (previousUid && !datasourceUid && showInternalLink) {\n setShowInternalLink(false);\n }\n }, [previousUid, datasourceUid, showInternalLink]);\n\n return [showInternalLink, setShowInternalLink];\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { PureComponent } from 'react';
|
|
2
2
|
import { Select, HorizontalGroup } from '@grafana/ui';
|
|
3
3
|
import '@grafana/data';
|
|
4
4
|
import { selectors } from '@grafana/e2e-selectors';
|
|
@@ -8,7 +8,7 @@ import { getDataSourceSrv } from '@grafana/runtime';
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
9
9
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
10
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
11
|
-
class DataSourcePicker extends
|
|
11
|
+
class DataSourcePicker extends PureComponent {
|
|
12
12
|
constructor(props) {
|
|
13
13
|
super(props);
|
|
14
14
|
__publicField(this, "dataSourceSrv", getDataSourceSrv());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataSourcePicker.js","sources":["../../../../src/components/DataSourcePicker/DataSourcePicker.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { HorizontalGroup, Select } from '@grafana/ui';\nimport { type DataSourceInstanceSettings, type SelectableValue } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { isUnsignedPluginSignature, PluginSignatureBadge } from '../Plugins/PluginSignatureBadge';\nimport { getDataSourceSrv, type DataSourceSrv } from '@grafana/runtime';\n\nexport interface Props {\n onChange: (ds: DataSourceInstanceSettings) => void;\n current: string | null;\n hideTextValue?: boolean;\n onBlur?: () => void;\n autoFocus?: boolean;\n openMenuOnFocus?: boolean;\n placeholder?: string;\n tracing?: boolean;\n mixed?: boolean;\n dashboard?: boolean;\n metrics?: boolean;\n annotations?: boolean;\n variables?: boolean;\n pluginId?: string;\n noDefault?: boolean;\n}\n\nexport interface State {\n error?: string;\n}\n\nexport class DataSourcePicker extends PureComponent<Props, State> {\n dataSourceSrv: DataSourceSrv = getDataSourceSrv();\n\n static defaultProps: Partial<Props> = {\n autoFocus: false,\n openMenuOnFocus: false,\n placeholder: 'Select datasource',\n };\n\n state: State = {};\n\n constructor(props: Props) {\n super(props);\n }\n\n componentDidMount() {\n const { current } = this.props;\n const dsSettings = this.dataSourceSrv.getInstanceSettings(current!);\n if (!dsSettings) {\n this.setState({ error: 'Could not find data source ' + current });\n }\n }\n\n onChange = (item: SelectableValue<string>) => {\n const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value!);\n\n if (dsSettings) {\n this.props.onChange(dsSettings);\n this.setState({ error: undefined });\n }\n };\n\n private getCurrentValue(): SelectableValue<string> {\n const { current, hideTextValue, noDefault } = this.props;\n\n if (!current && noDefault) {\n return {\n label: 'No datasources found',\n };\n }\n\n const ds = this.dataSourceSrv.getInstanceSettings(current!);\n\n if (ds) {\n return {\n label: ds.name.substr(0, 37),\n value: ds.name,\n imgUrl: ds.meta.info.logos.small,\n hideText: hideTextValue,\n meta: ds.meta,\n };\n }\n\n return {\n label: (current ?? 'no name') + ' - not found',\n value: (current ?? 'no name') + ' - not found',\n imgUrl: '',\n hideText: hideTextValue,\n };\n }\n\n getDataSourceOptions(): Array<SelectableValue<string>> {\n const options: Array<SelectableValue<string>> = this.dataSourceSrv.getList().map((ds) => ({\n value: ds.uid,\n label: ds.name,\n imgUrl: ds.meta.info.logos.small,\n meta: ds.meta,\n }));\n\n return options;\n }\n\n render() {\n const { autoFocus, onBlur, openMenuOnFocus, placeholder } = this.props;\n const { error } = this.state;\n const options = this.getDataSourceOptions();\n const value = this.getCurrentValue();\n\n return (\n <div aria-label={selectors.components.DataSourcePicker.container}>\n <Select\n className=\"ds-picker select-container\"\n isMulti={false}\n isClearable={false}\n backspaceRemovesValue={false}\n onChange={this.onChange}\n options={options}\n autoFocus={autoFocus}\n onBlur={onBlur}\n openMenuOnFocus={openMenuOnFocus}\n maxMenuHeight={500}\n placeholder={placeholder}\n noOptionsMessage=\"No datasources found\"\n value={value}\n invalid={!!error}\n getOptionLabel={(o) => {\n if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {\n return (\n <HorizontalGroup align=\"center\" justify=\"space-between\">\n <span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} />\n </HorizontalGroup>\n );\n }\n return o.label || '';\n }}\n />\n </div>\n );\n }\n}\n"],"names":[
|
|
1
|
+
{"version":3,"file":"DataSourcePicker.js","sources":["../../../../src/components/DataSourcePicker/DataSourcePicker.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { HorizontalGroup, Select } from '@grafana/ui';\nimport { type DataSourceInstanceSettings, type SelectableValue } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { isUnsignedPluginSignature, PluginSignatureBadge } from '../Plugins/PluginSignatureBadge';\nimport { getDataSourceSrv, type DataSourceSrv } from '@grafana/runtime';\n\nexport interface Props {\n onChange: (ds: DataSourceInstanceSettings) => void;\n current: string | null;\n hideTextValue?: boolean;\n onBlur?: () => void;\n autoFocus?: boolean;\n openMenuOnFocus?: boolean;\n placeholder?: string;\n tracing?: boolean;\n mixed?: boolean;\n dashboard?: boolean;\n metrics?: boolean;\n annotations?: boolean;\n variables?: boolean;\n pluginId?: string;\n noDefault?: boolean;\n}\n\nexport interface State {\n error?: string;\n}\n\nexport class DataSourcePicker extends PureComponent<Props, State> {\n dataSourceSrv: DataSourceSrv = getDataSourceSrv();\n\n static defaultProps: Partial<Props> = {\n autoFocus: false,\n openMenuOnFocus: false,\n placeholder: 'Select datasource',\n };\n\n state: State = {};\n\n constructor(props: Props) {\n super(props);\n }\n\n componentDidMount() {\n const { current } = this.props;\n const dsSettings = this.dataSourceSrv.getInstanceSettings(current!);\n if (!dsSettings) {\n this.setState({ error: 'Could not find data source ' + current });\n }\n }\n\n onChange = (item: SelectableValue<string>) => {\n const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value!);\n\n if (dsSettings) {\n this.props.onChange(dsSettings);\n this.setState({ error: undefined });\n }\n };\n\n private getCurrentValue(): SelectableValue<string> {\n const { current, hideTextValue, noDefault } = this.props;\n\n if (!current && noDefault) {\n return {\n label: 'No datasources found',\n };\n }\n\n const ds = this.dataSourceSrv.getInstanceSettings(current!);\n\n if (ds) {\n return {\n label: ds.name.substr(0, 37),\n value: ds.name,\n imgUrl: ds.meta.info.logos.small,\n hideText: hideTextValue,\n meta: ds.meta,\n };\n }\n\n return {\n label: (current ?? 'no name') + ' - not found',\n value: (current ?? 'no name') + ' - not found',\n imgUrl: '',\n hideText: hideTextValue,\n };\n }\n\n getDataSourceOptions(): Array<SelectableValue<string>> {\n const options: Array<SelectableValue<string>> = this.dataSourceSrv.getList().map((ds) => ({\n value: ds.uid,\n label: ds.name,\n imgUrl: ds.meta.info.logos.small,\n meta: ds.meta,\n }));\n\n return options;\n }\n\n render() {\n const { autoFocus, onBlur, openMenuOnFocus, placeholder } = this.props;\n const { error } = this.state;\n const options = this.getDataSourceOptions();\n const value = this.getCurrentValue();\n\n return (\n <div aria-label={selectors.components.DataSourcePicker.container}>\n <Select\n className=\"ds-picker select-container\"\n isMulti={false}\n isClearable={false}\n backspaceRemovesValue={false}\n onChange={this.onChange}\n options={options}\n autoFocus={autoFocus}\n onBlur={onBlur}\n openMenuOnFocus={openMenuOnFocus}\n maxMenuHeight={500}\n placeholder={placeholder}\n noOptionsMessage=\"No datasources found\"\n value={value}\n invalid={!!error}\n getOptionLabel={(o) => {\n if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {\n return (\n <HorizontalGroup align=\"center\" justify=\"space-between\">\n <span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} />\n </HorizontalGroup>\n );\n }\n return o.label || '';\n }}\n />\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { memo } from 'react';
|
|
2
2
|
import Calendar from 'react-calendar';
|
|
3
3
|
import { useTheme2, ClickOutsideWrapper, Icon } from '@grafana/ui';
|
|
4
4
|
import { getStyles, getBodyStyles } from './styles.js';
|
|
5
5
|
|
|
6
|
-
const DatePicker =
|
|
6
|
+
const DatePicker = memo((props) => {
|
|
7
7
|
const theme = useTheme2();
|
|
8
8
|
const styles = getStyles(theme);
|
|
9
9
|
const { isOpen, onClose } = props;
|
|
@@ -13,7 +13,7 @@ const DatePicker = reactExports.memo((props) => {
|
|
|
13
13
|
return /* @__PURE__ */ React.createElement(ClickOutsideWrapper, { useCapture: true, includeButtonPress: false, onClick: onClose }, /* @__PURE__ */ React.createElement("div", { className: styles.modal, "data-testid": "date-picker" }, /* @__PURE__ */ React.createElement(Body, { ...props })));
|
|
14
14
|
});
|
|
15
15
|
DatePicker.displayName = "DatePicker";
|
|
16
|
-
const Body =
|
|
16
|
+
const Body = memo(({ value, onChange }) => {
|
|
17
17
|
const theme = useTheme2();
|
|
18
18
|
const styles = getBodyStyles(theme);
|
|
19
19
|
return /* @__PURE__ */ React.createElement(
|