@grafana/plugin-ui 0.11.0 → 0.12.0

package/README.md

@@ -2,6 +2,25 @@
 
 React components for Grafana plugins
 
+## Development
+Requires running a local version of Grafana from source.
+### Setting up local version of @grafana/plugin-ui with app plugin
+
+1. Run `yarn install && yarn dev`
+1. Run `yarn link ../path/to/plugin-ui` from app plugin directory. Make sure not to commit the changes to grafana/grafana that are introduced to the package.json.
+1. Start app plugin development server.
+
+To avoid needing to manually rebuild core grafana on every change you make in this repo while developing, instead of running `yarn dev`, run
+```bash
+yarn tsc -p ./tsconfig.build.json && yarn rollup -c rollup.config.ts --configPlugin esbuild -w --watch.onEnd="cd ../grafana/public/app/plugins/datasource/loki && yarn build
+```
+Replacing the --watch.onEnd command with whatever you are targeting.
+
+There is a better way of doing this, when you find it, please add it here so it's not so painful working with this repo.
+
+## Deploying
+Increment the version in the package.json and make sure the [CHANGELOG.md](CHANGELOG.md) includes a message for each merged PR. The `publish-npm` workflow should trigger on version changes, which will publish the release on npm.
+
 ## Grafana compatibility
 
 Plugin-ui@0.9.0 is compatible with Grafana versions 10.4.0 and higher. If the `grafanaDependency` field in your plugin.json file is set to an earlier version, you should amend it to `>=10.4.0`
@@ -9,6 +28,7 @@ When you do that, consider also incrementing your plugin's major version to make
 
 ## Storybook
 
+Storybook is pretty broken, components link to assets that only exist within Grafana, as such most components haven't bothered to add support for storybook.
 ```
 yarn storybook
 ```

package/dist/cjs/index.cjs

@@ -699,21 +699,19 @@ var QueryEditorExpressionType = /* @__PURE__ */ ((QueryEditorExpressionType2) =>
 function getRawSqlFn(db) {
   return db.toRawSql ? db.toRawSql : (query) => toRawSql(query, Boolean(db.disableDatasets));
 }
-function toRawSql({ sql, dataset, table }, disableDatasets) {
+function toRawSql({ sql, dataset, catalog, table }, disableDatasets) {
   var _a, _b, _c, _d;
   let rawQuery = "";
   if (!sql || !haveColumns(sql.columns)) {
     return rawQuery;
   }
   rawQuery += createSelectClause(sql.columns);
-  if (disableDatasets) {
-    if (table) {
-      rawQuery += `FROM ${table} `;
-    }
-  } else {
-    if (dataset && table) {
-      rawQuery += `FROM ${dataset}.${table} `;
-    }
+  if (catalog && dataset && table) {
+    rawQuery += `FROM ${catalog}.${dataset}.${table} `;
+  } else if (!disableDatasets && dataset && table) {
+    rawQuery += `FROM ${dataset}.${table} `;
+  } else if (table) {
+    rawQuery += `FROM ${table} `;
   }
   if (sql.whereString) {
     rawQuery += `WHERE ${sql.whereString} `;
@@ -2240,6 +2238,8 @@ const defaultTableNameParser = (token) => {
     return { table: parts[0] };
   } else if ((parts == null ? undefined : parts.length) === 2) {
     return { schema: parts[0], table: parts[1] };
+  } else if ((parts == null ? undefined : parts.length) === 3) {
+    return { catalog: parts[0], schema: parts[1], table: parts[2] };
   }
   return null;
 };
@@ -5866,21 +5866,24 @@ function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }) {
 const DatasetSelector = ({
   db,
   dataset,
+  catalog,
   value,
   onChange,
   disabled,
   className,
   applyDefault,
-  inputId
+  inputId,
+  enableCatalogs,
+  "data-testid": dataTestId
 }) => {
   const state = reactUse.useAsync(async () => {
     if (dataset) {
       onChange(toOption(dataset));
       return [toOption(dataset)];
     }
-    const datasets = await db.datasets();
+    const datasets = await db.datasets(catalog);
     return datasets.map(toOption);
-  }, []);
+  }, [catalog]);
   React.useEffect(() => {
     if (!applyDefault) {
       return;
@@ -5908,7 +5911,9 @@ const DatasetSelector = ({
       onChange,
       disabled,
       isLoading: state.loading,
-      menuShouldPortal: true
+      menuShouldPortal: true,
+      "data-testid": dataTestId,
+      placeholder: enableCatalogs ? "Select schema" : "Select dataset"
     }
   );
 };
@@ -5953,55 +5958,6 @@ const CatalogSelector = ({ db, inputId, value, onChange }) => {
       placeholder: "Select catalog",
       isClearable: true,
       allowCustomValue: true,
-      disabled: isLoading,
-      menuShouldPortal: true
-    }
-  );
-};
-
-const SchemaSelector = ({ db, inputId, catalog, value, onChange }) => {
-  const [schemas, setSchemas] = React.useState([]);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const loadSchemas = React.useCallback(async () => {
-    if (!db.schemas || !catalog) {
-      setSchemas([]);
-      return;
-    }
-    setIsLoading(true);
-    try {
-      const schemaList = await db.schemas(catalog);
-      const schemaOptions = schemaList.map((schema) => ({
-        label: schema,
-        value: schema
-      }));
-      setSchemas(schemaOptions);
-    } catch (error) {
-      console.error("Error loading schemas:", error);
-      setSchemas([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [db, catalog]);
-  React.useEffect(() => {
-    loadSchemas();
-  }, [db, catalog, loadSchemas]);
-  const handleChange = (selectable) => {
-    onChange((selectable == null ? undefined : selectable.value) || null);
-  };
-  const selectedValue = schemas.find((schema) => schema.value === value) || null;
-  const isDisabled = isLoading || !catalog;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Select,
-    {
-      inputId,
-      options: schemas,
-      value: selectedValue,
-      onChange: handleChange,
-      isLoading,
-      placeholder: "Select schema",
-      isClearable: true,
-      allowCustomValue: true,
-      disabled: isDisabled,
       menuShouldPortal: true
     }
   );
@@ -6011,7 +5967,6 @@ const TableSelector = ({
   db,
   dataset,
   catalog,
-  schema,
   value,
   className,
   onChange,
@@ -6022,19 +5977,17 @@ const TableSelector = ({
     if (!dataset && !catalog) {
       return [];
     }
-    if (enableCatalogs && (!catalog || !schema)) {
+    if (enableCatalogs && (!catalog || !dataset)) {
       return [];
     }
-    const tables = await db.tables(dataset, catalog, schema);
+    const tables = await db.tables(dataset, catalog);
     return tables.map(data.toOption);
-  }, [dataset, catalog, schema, enableCatalogs]);
-  const isDisabled = state.loading || enableCatalogs && (!catalog || !schema);
+  }, [dataset, catalog, enableCatalogs]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Select,
     {
       inputId,
       className,
-      disabled: isDisabled,
       "aria-label": "Table selector",
       value,
       options: state.value,
@@ -6110,6 +6063,7 @@ function QueryHeader({
   const toRawSql = getRawSqlFn(db);
   const htmlId = React.useId();
   const catalogsEnabled = enableCatalogs != null ? enableCatalogs : db.disableCatalogs === false;
+  const effectiveEnableDatasets = catalogsEnabled ? true : enableDatasets;
   const onEditorModeChange = React.useCallback(
     (newEditorMode) => {
       if (editorMode === EditorMode.Code) {
@@ -6125,12 +6079,13 @@ function QueryHeader({
     onChange(next);
   };
   const onDatasetChange = (e) => {
-    if (e.value === query.dataset) {
+    const datasetValue = e.value || undefined;
+    if (datasetValue === query.dataset) {
       return;
     }
     const next = {
       ...query,
-      dataset: e.value,
+      dataset: datasetValue,
       table: undefined,
       sql: undefined,
       rawSql: ""
@@ -6138,26 +6093,15 @@ function QueryHeader({
     onChange(next);
   };
   const onCatalogChange = (catalog) => {
-    if (catalog === query.catalog) {
+    const catalogValue = catalog || undefined;
+    if (catalogValue === query.catalog) {
       return;
     }
     const next = {
       ...query,
-      catalog: catalog || undefined,
-      schema: undefined,
-      table: undefined,
-      sql: undefined,
-      rawSql: ""
-    };
-    onChange(next);
-  };
-  const onSchemaChange = (schema) => {
-    if (schema === query.schema) {
-      return;
-    }
-    const next = {
-      ...query,
-      schema: schema || undefined,
+      catalog: catalogValue,
+      dataset: undefined,
+      // Reset dataset (which acts as schema when catalog is present)
       table: undefined,
       sql: undefined,
       rawSql: ""
@@ -6266,45 +6210,41 @@ function QueryHeader({
     editorMode === EditorMode.Builder && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Space, { v: 0.5 }),
       /* @__PURE__ */ jsxRuntime.jsxs(EditorRow$1, { children: [
-        enableDatasets === true && !catalogsEnabled && /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: labels.get("dataset") || "Dataset", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
-          DatasetSelector,
+        catalogsEnabled && /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: labels.get("catalog") || "Catalog", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
+          CatalogSelector,
           {
             db,
-            inputId: `sql-dataset-${htmlId}`,
-            dataset: defaultDataset,
-            value: query.dataset === undefined ? null : query.dataset,
-            onChange: onDatasetChange
+            inputId: `sql-catalog-${htmlId}`,
+            value: query.catalog === undefined ? null : query.catalog,
+            onChange: onCatalogChange
           }
         ) }),
-        catalogsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: labels.get("catalog") || "Catalog", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
-            CatalogSelector,
-            {
-              db,
-              inputId: `sql-catalog-${htmlId}`,
-              value: query.catalog === undefined ? null : query.catalog,
-              onChange: onCatalogChange
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: labels.get("schema") || "Schema", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
-            SchemaSelector,
-            {
-              db,
-              inputId: `sql-schema-${htmlId}`,
-              catalog: query.catalog,
-              value: query.schema === undefined ? null : query.schema,
-              onChange: onSchemaChange
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: "Table", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
+        effectiveEnableDatasets && /* @__PURE__ */ jsxRuntime.jsx(
+          EditorField$1,
+          {
+            label: catalogsEnabled ? labels.get("schema") || "Schema" : labels.get("dataset") || "Dataset",
+            width: 25,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              DatasetSelector,
+              {
+                db,
+                inputId: catalogsEnabled ? `sql-schema-${htmlId}` : `sql-dataset-${htmlId}`,
+                "data-testid": catalogsEnabled ? "schema-selector" : "dataset-selector",
+                dataset: catalogsEnabled ? undefined : defaultDataset,
+                value: query.dataset === undefined ? null : query.dataset,
+                onChange: onDatasetChange,
+                catalog: catalogsEnabled ? query.catalog : undefined
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: labels.get("table") || "Table", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
           TableSelector,
           {
             db,
             inputId: `sql-table-${htmlId}`,
-            dataset: catalogsEnabled ? undefined : query.dataset || defaultDataset,
+            dataset: query.dataset || (catalogsEnabled ? undefined : defaultDataset),
             catalog: catalogsEnabled ? query.catalog : undefined,
-            schema: catalogsEnabled ? query.schema : undefined,
             query,
             value: query.table === undefined ? null : query.table,
             onChange: onTableChange,
@@ -6612,7 +6552,13 @@ function useSqlChange({ query, onQueryChange, db }) {
   const onSqlChange = React.useCallback(
     (sql) => {
       const toRawSql = getRawSqlFn(db);
-      const rawSql = toRawSql({ sql, dataset: query.dataset, table: query.table, refId: query.refId });
+      const rawSql = toRawSql({
+        sql,
+        catalog: query.catalog,
+        dataset: query.dataset,
+        table: query.table,
+        refId: query.refId
+      });
       const newQuery = { ...query, sql, rawSql };
       onQueryChange(newQuery);
     },
@@ -7480,14 +7426,17 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
   if (loading || error) {
     return null;
   }
+  const catalogsEnabled = db.disableCatalogs === false;
+  const datasetsEnabled = !db.disableDatasets;
+  const effectiveEnableDatasets = catalogsEnabled ? true : datasetsEnabled;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       QueryHeader,
       {
         db,
         defaultDataset: defaultDataset || "",
-        enableDatasets: !db.disableDatasets,
-        enableCatalogs: db.disableCatalogs === false,
+        enableDatasets: effectiveEnableDatasets,
+        enableCatalogs: catalogsEnabled,
         onChange: onQueryHeaderChange,
         onRunQuery,
         onQueryRowChange: setQueryRowFilter,
@@ -10157,8 +10106,10 @@ function QueryOptionGroup({ title, children, collapsedInfo, queryStats }) {
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.body, children })
       }
     ),
-    queryStats && runtime.config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" }) }),
-    queryStats && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.stats, children: generateQueryStats(queryStats) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.queryStatsWrap, children: [
+      queryStats && runtime.config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" }) }),
+      queryStats && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.stats, children: generateQueryStats(queryStats) })
+    ] })
   ] });
 }
 const getStyles = (theme) => {
@@ -10197,6 +10148,13 @@ const getStyles = (theme) => {
       gap: theme.spacing(2),
       flexWrap: "wrap"
     }),
+    queryStatsWrap: css.css({
+      display: "flex",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      label: "query-stats-wrap",
+      padding: theme.spacing(1)
+    }),
     stats: css.css({
       margin: "0px",
       color: theme.colors.text.secondary,
@@ -40517,7 +40475,6 @@ exports.RunQueryButton = RunQueryButton;
 exports.SQLEditor = SQLEditor;
 exports.SQLEditorMode = SQLEditorMode;
 exports.SQLEditorTestUtils = SQLEditorTestUtils;
-exports.SchemaSelector = SchemaSelector;
 exports.SecureSocksProxyToggle = SecureSocksProxyToggle;
 exports.Segment = Segment;
 exports.Space = Space;