@grafana/plugin-ui 0.1.10

package/README.md

@@ -0,0 +1,45 @@
+# plugin-ui
+
+React components for Grafana plugins
+
+## Compatibility
+
+There are situations when we require backwards compatibility with core Grafana and new features are only supported by newer versions.
+
+To handle this, we've introduced the `compatibility.ts` file which contains a list of features and the versions they support for better maintainability.
+
+### Considerations
+
+The way we are currently checking whether a feature is supported is by using the Grafana's [BuildInfo](https://grafana.com/docs/grafana/latest/packages_api/data/buildinfo/#version-property).
+
+However, there are cases when this version [may be masked](https://grafana.com/docs/grafana/latest/packages_api/data/buildinfo/#hideversion-property) from plugins.
+
+Only anonymous users (with read-only access) will be able to have their versions hidden, so this should be taken into consideration when deciding whether we should be adding a new feature to our compatibility list.
+
+## Unreleased Components
+
+Sometimes we may want improvements/updates of `@grafana/ui` components but we don't want to update the minimum required versions of Grafana in our plugins and continue supporting older versions.
+
+To work around this, we can import and export the version of the component we want from `@grafana/ui` in this project. Plugins can then use the component exported from here rather than `@grafana/ui`.
+
+If updates to a component in `@grafana/ui` are available in `master` but not a Grafana release yet, we can copy the components directly into `unreleasedComponents` to be used in plugins.
+
+Alternatively, we could use the `@grafana/ui: canary` version instead. However, there are the following tradeoffs:
+
+- Multiple `canary` versions will be released in-between `@grafana/ui` releases
+
+  - This means in-between these release cycles where the component changes aren't available in a package version, the `yarn.lock` file will need to be updated for every change we make in this project
+
+- `canary` versions include `@grafana/ui: master` branch
+  - This means component changes in the `master` branch which aren't scheduled for the next major release will be included in the `canary` package.
+  - For example, we have changes in `<ComponentA />` that won't be released until `v7.5.x` and `<ComponentB />` has changes which are intended to be released for `v7.6`. Using `canary` of `@grafana/ui` will expose the `<ComponentB />` major updates too, which we do not want.
+
+Once a `@grafana/ui` package is then released and available with the component updates, we can remove the component from this folder and export the imported version from the new `@grafana/ui` package instead.
+
+This means any component in `unreleasedComponents` should not be modified - they should stay in sync with what is in `@grafana/ui` (besides changes in imports or stories) and removed from this project as soon as we can replace it with an actual package version.
+
+## Storybook
+
+```
+yarn storybook
+```

package/dist/8x/fixtures/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateOptions = exports.selectOption = void 0;
+var select_1 = require("./select");
+Object.defineProperty(exports, "selectOption", { enumerable: true, get: function () { return select_1.selectOption; } });
+Object.defineProperty(exports, "generateOptions", { enumerable: true, get: function () { return select_1.generateOptions; } });
+//# sourceMappingURL=index.js.map

package/dist/8x/fixtures/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/8x/fixtures/index.ts"],"names":[],"mappings":";;;AAAA,mCAAyD;AAAhD,sGAAA,YAAY,OAAA;AAAE,yGAAA,eAAe,OAAA"}

package/dist/8x/fixtures/select.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectOption = exports.generateOptions = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const chance_1 = require("chance");
+const lodash_1 = require("lodash");
+const generateOptions = () => {
+    const numberOfOptions = 5;
+    return Array.from(new Array(numberOfOptions), () => {
+        const name = (0, chance_1.Chance)().name();
+        return {
+            label: name,
+            value: (0, lodash_1.kebabCase)(name),
+        };
+    });
+};
+exports.generateOptions = generateOptions;
+/**
+ * react-select (used by @grafana/ui) renders very differently from the native Select HTML element
+ * and because they do not pass data-testid down, it is difficult to grab the
+ * correct element and simulate selecting different options
+ * created a helper function to click and select a different option manually
+ * @param optionLabel
+ * @param index If there are multiple inputs and you don't want the first one taken, then pass in the index
+ */
+const selectOption = (optionLabel, index, role) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    role = role || 'combobox';
+    // this needs to be here to support autoFocus=true prop
+    react_1.fireEvent.blur(react_1.screen.getAllByRole(role)[index || 0]);
+    // open the dropdown
+    react_1.fireEvent.keyDown(react_1.screen.getAllByRole(role)[index || 0], {
+        key: 'ArrowDown',
+        keyCode: 40,
+    });
+    // wait for the list to show
+    const option = yield (0, react_1.waitFor)(() => react_1.screen.getByText(optionLabel));
+    // select the option
+    user_event_1.default.click(option);
+});
+exports.selectOption = selectOption;
+//# sourceMappingURL=select.js.map

package/dist/8x/fixtures/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/8x/fixtures/select.ts"],"names":[],"mappings":";;;;AACA,kDAAoE;AACpE,qFAAoD;AACpD,mCAAgC;AAChC,mCAAmC;AAE5B,MAAM,eAAe,GAAG,GAAmC,EAAE;IAClE,MAAM,eAAe,GAAG,CAAC,CAAC;IAE1B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE;QACjD,MAAM,IAAI,GAAG,IAAA,eAAM,GAAE,CAAC,IAAI,EAAE,CAAC;QAE7B,OAAO;YACL,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,IAAA,kBAAS,EAAC,IAAI,CAAC;SACvB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAXW,QAAA,eAAe,mBAW1B;AAEF;;;;;;;GAOG;AACI,MAAM,YAAY,GAAG,CAAO,WAAmB,EAAE,KAAc,EAAE,IAAa,EAAE,EAAE;IACvF,IAAI,GAAG,IAAI,IAAI,UAAU,CAAC;IAC1B,uDAAuD;IACvD,iBAAS,CAAC,IAAI,CAAC,cAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;IAEtD,oBAAoB;IACpB,iBAAS,CAAC,OAAO,CAAC,cAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE;QACvD,GAAG,EAAE,WAAW;QAChB,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IAEH,4BAA4B;IAC5B,MAAM,MAAM,GAAG,MAAM,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;IAElE,oBAAoB;IACpB,oBAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AAC1B,CAAC,CAAA,CAAC;AAhBW,QAAA,YAAY,gBAgBvB"}

package/dist/8x/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./fixtures"), exports);
+//# sourceMappingURL=index.js.map

package/dist/8x/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/8x/index.ts"],"names":[],"mappings":";;;AAAA,qDAA2B"}

package/dist/components/AsyncButtonCascader/AsyncButtonCascader.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncButtonCascader = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ui_1 = require("@grafana/ui");
+const css_1 = require("@emotion/css");
+// @ts-ignore
+const rc_cascader_1 = tslib_1.__importDefault(require("rc-cascader"));
+const ui_2 = require("@grafana/ui");
+const getStyles = ((theme) => {
+    return {
+        popup: (0, css_1.css) `
+      label: popup;
+      z-index: ${theme.zIndex.dropdown};
+    `,
+        icon: (0, css_1.css) `
+      margin: 1px 0 0 4px;
+    `,
+    };
+});
+const AsyncButtonCascader = props => {
+    const { onChange, className, loadData } = props, rest = tslib_1.__rest(props, ["onChange", "className", "loadData"]);
+    const theme = (0, ui_2.useTheme2)();
+    const styles = getStyles(theme);
+    return (react_1.default.createElement(rc_cascader_1.default, Object.assign({ onChange: onChange, loadData: loadData, changeOnSelect: true, popupClassName: styles.popup }, rest, { expandIcon: null }),
+        react_1.default.createElement("button", { className: (0, css_1.cx)('gf-form-label', className), disabled: props.disabled },
+            props.children,
+            " ",
+            react_1.default.createElement(ui_1.Icon, { name: "angle-down", className: styles.icon }))));
+};
+exports.AsyncButtonCascader = AsyncButtonCascader;
+exports.AsyncButtonCascader.displayName = 'AsyncButtonCascader';
+//# sourceMappingURL=AsyncButtonCascader.js.map

package/dist/components/AsyncButtonCascader/AsyncButtonCascader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncButtonCascader.js","sourceRoot":"","sources":["../../../src/components/AsyncButtonCascader/AsyncButtonCascader.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,oCAAmC;AACnC,sCAAuC;AAEvC,aAAa;AACb,sEAAyD;AACzD,oCAAwC;AAexC,MAAM,SAAS,GAAG,CAAC,CAAC,KAAoB,EAAE,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,IAAA,SAAG,EAAA;;iBAEG,KAAK,CAAC,MAAM,CAAC,QAAQ;KACjC;QACD,IAAI,EAAE,IAAA,SAAG,EAAA;;KAER;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEI,MAAM,mBAAmB,GAAuC,KAAK,CAAC,EAAE;IAC7E,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,kBAAK,KAAK,EAAlD,qCAA0C,CAAQ,CAAC;IACzD,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEhC,OAAO,CACL,8BAAC,qBAAU,kBACT,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,IAAI,EACpB,cAAc,EAAE,MAAM,CAAC,KAAK,IACxB,IAAI,IACR,UAAU,EAAE,IAAI;QAEhB,0CAAQ,SAAS,EAAE,IAAA,QAAE,EAAC,eAAe,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxE,KAAK,CAAC,QAAQ;;YAAE,8BAAC,SAAI,IAAC,IAAI,EAAC,YAAY,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,CAC5D,CACE,CACd,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,mBAAmB,uBAmB9B;AAEF,2BAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}

package/dist/components/Cascader/Cascader.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cascader = void 0;
+var ui_1 = require("@grafana/ui");
+Object.defineProperty(exports, "Cascader", { enumerable: true, get: function () { return ui_1.Cascader; } });
+//# sourceMappingURL=Cascader.js.map

package/dist/components/Cascader/Cascader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.js","sourceRoot":"","sources":["../../../src/components/Cascader/Cascader.tsx"],"names":[],"mappings":";;;AAAA,kCAAuC;AAA9B,8FAAA,QAAQ,OAAA"}

package/dist/components/DataLinks/DataLink.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataLink = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const css_1 = require("@emotion/css");
+const ui_1 = require("@grafana/ui");
+const { FormField, Switch } = ui_1.LegacyForms;
+const react_use_1 = require("react-use");
+const DataSourcePicker_1 = require("../DataSourcePicker/DataSourcePicker");
+const getStyles = (0, ui_1.stylesFactory)(() => ({
+    firstRow: (0, css_1.css) `
+    display: flex;
+  `,
+    nameField: (0, css_1.css) `
+    flex: 2;
+  `,
+    regexField: (0, css_1.css) `
+    flex: 3;
+  `,
+    row: (0, css_1.css) `
+    display: flex;
+    align-items: baseline;
+  `,
+}));
+const DataLink = (props) => {
+    const { value, onChange, onDelete, suggestions, className } = props;
+    const styles = getStyles();
+    const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);
+    const handleChange = (field) => (event) => {
+        onChange(Object.assign(Object.assign({}, value), { [field]: event.currentTarget.value }));
+    };
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("div", { className: styles.firstRow + ' gf-form' },
+            react_1.default.createElement(FormField, { className: styles.nameField, labelWidth: 6, 
+                // A bit of a hack to prevent using default value for the width from FormField
+                inputWidth: null, label: "Field", type: "text", value: value.field, tooltip: 'Can be exact field name or a regex pattern that will match on the field name.', onChange: handleChange('field') }),
+            react_1.default.createElement(ui_1.Button, { variant: 'destructive', title: "Remove field", icon: "times", onClick: event => {
+                    event.preventDefault();
+                    onDelete();
+                } })),
+        react_1.default.createElement("div", { className: "gf-form" },
+            react_1.default.createElement(FormField, { className: styles.nameField, inputWidth: null, label: "Label", type: "text", value: value.label, onChange: handleChange('label'), tooltip: 'Use to provide a meaningful label to the data matched in the regex' }),
+            react_1.default.createElement(FormField, { className: styles.regexField, inputWidth: null, label: "Regex", type: "text", value: value.matcherRegex, onChange: handleChange('matcherRegex'), tooltip: 'Use to parse and capture some part of the log message. You can use the captured groups in the template.' })),
+        react_1.default.createElement("div", { className: "gf-form" },
+            react_1.default.createElement(FormField, { label: showInternalLink ? 'Query' : 'URL', labelWidth: 6, inputEl: react_1.default.createElement(ui_1.DataLinkInput, { placeholder: showInternalLink ? '${__value.raw}' : 'http://example.com/${__value.raw}', value: value.url || '', onChange: newValue => onChange(Object.assign(Object.assign({}, value), { url: newValue })), suggestions: suggestions }), className: (0, css_1.css) `
+            width: 100%;
+          ` })),
+        react_1.default.createElement("div", { className: styles.row },
+            react_1.default.createElement(Switch, { labelClass: 'width-6', label: "Internal link", checked: showInternalLink, onChange: () => {
+                    if (showInternalLink) {
+                        onChange(Object.assign(Object.assign({}, value), { datasourceUid: undefined }));
+                    }
+                    setShowInternalLink(!showInternalLink);
+                } }),
+            showInternalLink && (react_1.default.createElement(DataSourcePicker_1.DataSourcePicker
+            // Uid and value should be always set in the db and so in the items.
+            , { 
+                // Uid and value should be always set in the db and so in the items.
+                onChange: ds => {
+                    onChange(Object.assign(Object.assign({}, value), { datasourceUid: ds.uid }));
+                }, current: value.datasourceUid })))));
+};
+exports.DataLink = DataLink;
+function useInternalLink(datasourceUid) {
+    const [showInternalLink, setShowInternalLink] = (0, react_1.useState)(!!datasourceUid);
+    const previousUid = (0, react_use_1.usePrevious)(datasourceUid);
+    // Force internal link visibility change if uid changed outside of this component.
+    (0, react_1.useEffect)(() => {
+        if (!previousUid && datasourceUid && !showInternalLink) {
+            setShowInternalLink(true);
+        }
+        if (previousUid && !datasourceUid && showInternalLink) {
+            setShowInternalLink(false);
+        }
+    }, [previousUid, datasourceUid, showInternalLink]);
+    return [showInternalLink, setShowInternalLink];
+}
+//# sourceMappingURL=DataLink.js.map

package/dist/components/DataLinks/DataLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataLink.js","sourceRoot":"","sources":["../../../src/components/DataLinks/DataLink.tsx"],"names":[],"mappings":"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"}

package/dist/components/DataLinks/DataLinks.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataLinks = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const css_1 = require("@emotion/css");
+const ui_1 = require("@grafana/ui");
+const data_1 = require("@grafana/data");
+const DataLink_1 = require("./DataLink");
+const getStyles = ((theme) => ({
+    infoText: (0, css_1.css) `
+    padding-bottom: ${theme.v1.spacing.md};
+    color: ${theme.v1.colors.textWeak};
+  `,
+    dataLink: (0, css_1.css) `
+    margin-bottom: ${theme.v1.spacing.sm};
+  `,
+}));
+const DataLinks = (props) => {
+    const { value, onChange } = props;
+    const theme = (0, ui_1.useTheme2)();
+    const styles = getStyles(theme);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h3", { className: 'page-heading' }, "Data links"),
+        react_1.default.createElement("div", { className: styles.infoText }, "Add links to existing fields. Links will be shown in log row details next to the field value."),
+        react_1.default.createElement("div", { className: 'gf-form-group' },
+            value &&
+                value.map((field, index) => {
+                    return (react_1.default.createElement(DataLink_1.DataLink, { className: styles.dataLink, key: index, value: field, onChange: (newField) => {
+                            const newDataLinks = [...value];
+                            newDataLinks.splice(index, 1, newField);
+                            onChange(newDataLinks);
+                        }, onDelete: () => {
+                            const newDataLinks = [...value];
+                            newDataLinks.splice(index, 1);
+                            onChange(newDataLinks);
+                        }, suggestions: [
+                            {
+                                value: data_1.DataLinkBuiltInVars.valueRaw,
+                                label: 'Raw value',
+                                documentation: 'Raw value of the field',
+                                origin: data_1.VariableOrigin.Value,
+                            },
+                        ] }));
+                }),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(ui_1.Button, { variant: 'secondary', className: (0, css_1.css) `
+              margin-right: 10px;
+            `, icon: 'plus', onClick: (event) => {
+                        event.preventDefault();
+                        const newDataLinks = [
+                            ...(value || []),
+                            { field: '', label: '', matcherRegex: '', url: '' },
+                        ];
+                        onChange(newDataLinks);
+                    } }, "Add")))));
+};
+exports.DataLinks = DataLinks;
+//# sourceMappingURL=DataLinks.js.map

package/dist/components/DataLinks/DataLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataLinks.js","sourceRoot":"","sources":["../../../src/components/DataLinks/DataLinks.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,sCAAmC;AACnC,oCAAgD;AAChD,wCAIuB;AAEvB,yCAAsC;AAEtC,MAAM,SAAS,GAAG,CAAC,CAAC,KAAoB,EAAE,EAAE,CAAC,CAAC;IAC5C,QAAQ,EAAE,IAAA,SAAG,EAAA;sBACO,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;aAC5B,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ;GAClC;IACD,QAAQ,EAAE,IAAA,SAAG,EAAA;qBACM,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;GACrC;CACF,CAAC,CAAC,CAAC;AAMG,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEhC,OAAO,CACL;QACE,sCAAI,SAAS,EAAC,cAAc,iBAAgB;QAE5C,uCAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,oGAGzB;QAEN,uCAAK,SAAS,EAAC,eAAe;YAC3B,KAAK;gBACJ,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBACzB,OAAO,CACL,8BAAC,mBAAQ,IACP,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;4BACrB,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;4BAChC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;4BACxC,QAAQ,CAAC,YAAY,CAAC,CAAC;wBACzB,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;4BACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;4BAChC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;4BAC9B,QAAQ,CAAC,YAAY,CAAC,CAAC;wBACzB,CAAC,EACD,WAAW,EAAE;4BACX;gCACE,KAAK,EAAE,0BAAmB,CAAC,QAAQ;gCACnC,KAAK,EAAE,WAAW;gCAClB,aAAa,EAAE,wBAAwB;gCACvC,MAAM,EAAE,qBAAc,CAAC,KAAK;6BAC7B;yBACF,GACD,CACH,CAAC;gBACJ,CAAC,CAAC;YACJ;gBACE,8BAAC,WAAM,IACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,IAAA,SAAG,EAAA;;aAEb,EACD,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;wBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,MAAM,YAAY,GAAG;4BACnB,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;4BAChB,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;yBACpD,CAAC;wBACF,QAAQ,CAAC,YAAY,CAAC,CAAC;oBACzB,CAAC,UAGM,CACL,CACF,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAjEW,QAAA,SAAS,aAiEpB"}

package/dist/components/DataLinks/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./DataLinks"), exports);
+tslib_1.__exportStar(require("./DataLink"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/DataLinks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DataLinks/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB;AACxB,sDAA2B;AAC3B,qDAA0B"}

package/dist/components/DataLinks/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/DataLinks/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/DataLinks/types.ts"],"names":[],"mappings":""}

package/dist/components/DataSourcePicker/DataSourcePicker.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourcePicker = void 0;
+const tslib_1 = require("tslib");
+// Libraries
+const react_1 = tslib_1.__importStar(require("react"));
+// Components
+const ui_1 = require("@grafana/ui");
+const e2e_selectors_1 = require("@grafana/e2e-selectors");
+const PluginSignatureBadge_1 = require("../Plugins/PluginSignatureBadge");
+const runtime_1 = require("@grafana/runtime");
+class DataSourcePicker extends react_1.PureComponent {
+    constructor(props) {
+        super(props);
+        this.dataSourceSrv = (0, runtime_1.getDataSourceSrv)();
+        this.state = {};
+        this.onChange = (item) => {
+            const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value);
+            if (dsSettings) {
+                this.props.onChange(dsSettings);
+                this.setState({ error: undefined });
+            }
+        };
+    }
+    componentDidMount() {
+        const { current } = this.props;
+        const dsSettings = this.dataSourceSrv.getInstanceSettings(current);
+        if (!dsSettings) {
+            this.setState({ error: 'Could not find data source ' + current });
+        }
+    }
+    getCurrentValue() {
+        const { current, hideTextValue, noDefault } = this.props;
+        if (!current && noDefault) {
+            return {
+                label: 'No datasources found',
+            };
+        }
+        const ds = this.dataSourceSrv.getInstanceSettings(current);
+        if (ds) {
+            return {
+                label: ds.name.substr(0, 37),
+                value: ds.name,
+                imgUrl: ds.meta.info.logos.small,
+                hideText: hideTextValue,
+                meta: ds.meta,
+            };
+        }
+        return {
+            label: (current !== null && current !== void 0 ? current : 'no name') + ' - not found',
+            value: (current !== null && current !== void 0 ? current : 'no name') + ' - not found',
+            imgUrl: '',
+            hideText: hideTextValue,
+        };
+    }
+    getDataSourceOptions() {
+        const options = this.dataSourceSrv.getList().map((ds) => ({
+            value: ds.uid,
+            label: ds.name,
+            imgUrl: ds.meta.info.logos.small,
+            meta: ds.meta,
+        }));
+        return options;
+    }
+    render() {
+        const { autoFocus, onBlur, openMenuOnFocus, placeholder } = this.props;
+        const { error } = this.state;
+        const options = this.getDataSourceOptions();
+        const value = this.getCurrentValue();
+        return (react_1.default.createElement("div", { "aria-label": e2e_selectors_1.selectors.components.DataSourcePicker.container },
+            react_1.default.createElement(ui_1.Select, { className: 'ds-picker select-container', isMulti: false, isClearable: false, backspaceRemovesValue: false, onChange: this.onChange, options: options, autoFocus: autoFocus, onBlur: onBlur, openMenuOnFocus: openMenuOnFocus, maxMenuHeight: 500, placeholder: placeholder, noOptionsMessage: 'No datasources found', value: value, invalid: !!error, getOptionLabel: (o) => {
+                    if (o.meta &&
+                        (0, PluginSignatureBadge_1.isUnsignedPluginSignature)(o.meta.signature) &&
+                        o !== value) {
+                        return (react_1.default.createElement(ui_1.HorizontalGroup, { align: 'center', justify: 'space-between' },
+                            react_1.default.createElement("span", null, o.label),
+                            ' ',
+                            react_1.default.createElement(PluginSignatureBadge_1.PluginSignatureBadge, { status: o.meta.signature })));
+                    }
+                    return o.label || '';
+                } })));
+    }
+}
+exports.DataSourcePicker = DataSourcePicker;
+DataSourcePicker.defaultProps = {
+    autoFocus: false,
+    openMenuOnFocus: false,
+    placeholder: 'Select datasource',
+};
+//# sourceMappingURL=DataSourcePicker.js.map

package/dist/components/DataSourcePicker/DataSourcePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataSourcePicker.js","sourceRoot":"","sources":["../../../src/components/DataSourcePicker/DataSourcePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_calendar_1 = tslib_1.__importDefault(require("react-calendar"));
+const ui_1 = require("@grafana/ui");
+const styles_1 = require("./styles");
+exports.DatePicker = (0, react_1.memo)((props) => {
+    const theme = (0, ui_1.useTheme2)();
+    const styles = (0, styles_1.getStyles)(theme);
+    const { isOpen, onClose } = props;
+    if (!isOpen) {
+        return null;
+    }
+    return (react_1.default.createElement(ui_1.ClickOutsideWrapper, { useCapture: true, includeButtonPress: false, onClick: onClose },
+        react_1.default.createElement("div", { className: styles.modal, "data-testid": 'date-picker' },
+            react_1.default.createElement(Body, Object.assign({}, props)))));
+});
+const Body = (0, react_1.memo)(({ value, onChange }) => {
+    const theme = (0, ui_1.useTheme2)();
+    const styles = (0, styles_1.getBodyStyles)(theme);
+    return (react_1.default.createElement(react_calendar_1.default, { className: styles.body, tileClassName: styles.title, value: value || new Date(), nextLabel: react_1.default.createElement(ui_1.Icon, { name: 'angle-right' }), prevLabel: react_1.default.createElement(ui_1.Icon, { name: 'angle-left' }), onChange: (ev) => {
+            if (!Array.isArray(ev)) {
+                onChange(ev);
+            }
+        }, locale: 'en' }));
+});
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":";;;;AAAA,uDAAoC;AACpC,4EAAsC;AACtC,oCAAmE;AACnE,qCAAoD;AASvC,QAAA,UAAU,GAAG,IAAA,YAAI,EAAkB,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,IAAA,kBAAS,EAAC,KAAK,CAAC,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAElC,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,8BAAC,wBAAmB,IAClB,UAAU,EAAE,IAAI,EAChB,kBAAkB,EAAE,KAAK,EACzB,OAAO,EAAE,OAAO;QAEhB,uCAAK,SAAS,EAAE,MAAM,CAAC,KAAK,iBAAc,aAAa;YACrD,8BAAC,IAAI,oBAAK,KAAK,EAAI,CACf,CACc,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,IAAA,YAAI,EAAkB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzD,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,IAAA,sBAAa,EAAC,KAAK,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAC,wBAAQ,IACP,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,aAAa,EAAE,MAAM,CAAC,KAAK,EAC3B,KAAK,EAAE,KAAK,IAAI,IAAI,IAAI,EAAE,EAC1B,SAAS,EAAE,8BAAC,SAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EACtC,SAAS,EAAE,8BAAC,SAAI,IAAC,IAAI,EAAC,YAAY,GAAG,EACrC,QAAQ,EAAE,CAAC,EAAO,EAAE,EAAE;YACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACtB,QAAQ,CAAC,EAAE,CAAC,CAAC;aACd;QACH,CAAC,EACD,MAAM,EAAC,IAAI,GACX,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/DatePicker/styles.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBodyStyles = exports.getStyles = void 0;
+const css_1 = require("@emotion/css");
+exports.getStyles = ((theme) => {
+    const containerBorder = theme.isDark
+        ? theme.v1.palette.dark9
+        : theme.v1.palette.gray5;
+    return {
+        container: (0, css_1.css) `
+      top: -1px;
+      position: absolute;
+      right: 544px;
+      box-shadow: 0px 0px 20px ${theme.v1.colors.dropdownShadow};
+      background-color: ${theme.v1.colors.bodyBg};
+      z-index: -1;
+      border: 1px solid ${containerBorder};
+      border-radius: 2px 0 0 2px;
+
+      &:after {
+        display: block;
+        background-color: ${theme.v1.colors.bodyBg};
+        width: 19px;
+        height: 100%;
+        content: '';
+        position: absolute;
+        top: 0;
+        right: -19px;
+        border-left: 1px solid ${theme.v1.colors.border1};
+      }
+    `,
+        modal: (0, css_1.css) `
+      z-index: ${theme.v1.zIndex.modal};
+    `,
+        content: (0, css_1.css) `
+      margin: 0 auto;
+      width: 268px;
+    `,
+        backdrop: (0, css_1.css) `
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: #202226;
+      opacity: 0.7;
+      z-index: ${theme.v1.zIndex.modalBackdrop};
+      text-align: center;
+    `,
+    };
+});
+exports.getBodyStyles = ((theme) => {
+    const containerBorder = theme.isDark
+        ? theme.v1.palette.dark9
+        : theme.v1.palette.gray5;
+    return {
+        title: (0, css_1.css) `
+      color: ${theme.colors.text};
+      background-color: ${theme.v1.colors.bodyBg};
+      font-size: ${theme.v1.typography.size.md};
+      border: 1px solid transparent;
+
+      &:hover {
+        position: relative;
+      }
+    `,
+        body: (0, css_1.css) `
+      z-index: ${theme.zIndex.modal};
+      position: fixed;
+      background-color: ${theme.v1.colors.bodyBg};
+      width: 268px;
+
+      box-shadow: 0px 0px 20px ${theme.v1.colors.dropdownShadow};
+      border: 1px solid ${containerBorder};
+      border-radius: 2px 0 0 2px;
+
+      .react-calendar__navigation__label,
+      .react-calendar__navigation__arrow,
+      .react-calendar__navigation {
+        padding-top: 4px;
+        background-color: inherit;
+        color: ${theme.colors.text};
+        border: 0;
+        font-weight: ${theme.v1.typography.weight.semibold};
+      }
+
+      .react-calendar__month-view__weekdays {
+        background-color: inherit;
+        text-align: center;
+        color: ${theme.v1.palette.blue77};
+
+        abbr {
+          border: 0;
+          text-decoration: none;
+          cursor: default;
+          display: block;
+          padding: 4px 0 4px 0;
+        }
+      }
+
+      .react-calendar__month-view__days {
+        background-color: inherit;
+      }
+
+      .react-calendar__tile,
+      .react-calendar__tile--now {
+        margin-bottom: 4px;
+        background-color: inherit;
+        height: 26px;
+      }
+
+      .react-calendar__navigation__label,
+      .react-calendar__navigation > button:focus,
+      .time-picker-calendar-tile:focus {
+        outline: 0;
+      }
+
+      .react-calendar__tile--active,
+      .react-calendar__tile--active:hover {
+        color: ${theme.v1.palette.white};
+        font-weight: ${theme.v1.typography.weight.semibold};
+        background: ${theme.v1.palette.blue95};
+        box-shadow: none;
+        border: 0px;
+      }
+
+      .react-calendar__tile--rangeEnd,
+      .react-calendar__tile--rangeStart {
+        padding: 0;
+        border: 0px;
+        color: ${theme.v1.palette.white};
+        font-weight: ${theme.v1.typography.weight.semibold};
+        background: ${theme.v1.palette.blue95};
+
+        abbr {
+          background-color: ${theme.v1.palette.blue77};
+          border-radius: 100px;
+          display: block;
+          padding-top: 2px;
+          height: 26px;
+        }
+      }
+
+      .react-calendar__tile--rangeStart {
+        border-top-left-radius: 20px;
+        border-bottom-left-radius: 20px;
+      }
+
+      .react-calendar__tile--rangeEnd {
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
+      }
+    `,
+    };
+});
+//# sourceMappingURL=styles.js.map

package/dist/components/DatePicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";;;AACA,sCAAmC;AAEtB,QAAA,SAAS,GAAG,CAAC,CAAC,KAAoB,EAAE,EAAE;IACjD,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM;QAClC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK;QACxB,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;IAE3B,OAAO;QACL,SAAS,EAAE,IAAA,SAAG,EAAA;;;;iCAIe,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,cAAc;0BACrC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM;;0BAEtB,eAAe;;;;;4BAKb,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM;;;;;;;iCAOjB,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO;;KAEnD;QACD,KAAK,EAAE,IAAA,SAAG,EAAA;iBACG,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK;KACjC;QACD,OAAO,EAAE,IAAA,SAAG,EAAA;;;KAGX;QACD,QAAQ,EAAE,IAAA,SAAG,EAAA;;;;;;;;iBAQA,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa;;KAEzC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEU,QAAA,aAAa,GAAG,CAAC,CAAC,KAAoB,EAAE,EAAE;IACrD,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM;QAClC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK;QACxB,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;IAE3B,OAAO;QACL,KAAK,EAAE,IAAA,SAAG,EAAA;eACC,KAAK,CAAC,MAAM,CAAC,IAAI;0BACN,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM;mBAC7B,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;;;;;;KAMzC;QACD,IAAI,EAAE,IAAA,SAAG,EAAA;iBACI,KAAK,CAAC,MAAM,CAAC,KAAK;;0BAET,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM;;;iCAGf,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,cAAc;0BACrC,eAAe;;;;;;;;iBAQxB,KAAK,CAAC,MAAM,CAAC,IAAI;;uBAEX,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,QAAQ;;;;;;iBAMzC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8BvB,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK;uBAChB,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,QAAQ;sBACpC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM;;;;;;;;;iBAS5B,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK;uBAChB,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,QAAQ;sBACpC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM;;;8BAGf,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM;;;;;;;;;;;;;;;;;KAiBhD;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}