fix: alternate connector support for visual metrics (#5909)

* wip * cleanup * wip * cleanup * feedback
rilldata · Oct 16, 2024 · 0ed923e · 0ed923e · github-actions · Oct 16, 2024
1 parent b9a0800
commit 0ed923e
Show file tree

Hide file tree

Showing 15 changed files with 735 additions and 398 deletions.
diff --git a/web-common/src/components/forms/Input.svelte b/web-common/src/components/forms/Input.svelte
@@ -2,10 +2,8 @@
  import { EyeIcon, EyeOffIcon } from "lucide-svelte";
  import { onMount } from "svelte";
  import { slide } from "svelte/transition";
- import InfoCircle from "../icons/InfoCircle.svelte";
- import Tooltip from "../tooltip/Tooltip.svelte";
- import TooltipContent from "../tooltip/TooltipContent.svelte";
  import Select from "./Select.svelte";
+ import InputLabel from "./InputLabel.svelte";
 
  const voidFunction = () => {};
 
@@ -93,24 +91,9 @@
 
 <div class="component-wrapper" class:w-full={full} style:width>
  {#if label}
- <div class="label-wrapper">
- <label for={id} class="line-clamp-1">
- {label}
- {#if optional}
- <span class="text-gray-500 text-[12px] font-normal">(optional)</span>
- {/if}
- </label>
- {#if hint}
- <Tooltip location="right" alignment="middle" distance={8}>
- <div class="text-gray-500">
- <InfoCircle size="13px" />
- </div>
- <TooltipContent maxWidth="400px" slot="tooltip-content">
- {@html hint}
- </TooltipContent>
- </Tooltip>
- {/if}
- </div>
+ <InputLabel {label} {optional} {id} {hint}>
+ <slot name="mode-switch" slot="mode-switch" />
+ </InputLabel>
  {/if}
 
  {#if fields && fields?.length > 1}
@@ -203,7 +186,7 @@
  {id}
  bind:selectElement
  bind:value
- options={options ?? []}
+ {options}
  {onChange}
  fontSize={14}
  {truncate}
@@ -235,14 +218,6 @@
  @apply flex flex-col gap-y-1 h-fit justify-center;
  }
 
- .label-wrapper {
- @apply flex items-center gap-x-1;
- }
-
- label {
- @apply text-sm font-medium text-gray-800;
- }
-
  .option-wrapper {
  @apply flex h-6 text-sm w-fit mb-1 rounded-[2px];
  }

diff --git a/web-common/src/components/forms/InputLabel.svelte b/web-common/src/components/forms/InputLabel.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+ import Tooltip from "../tooltip/Tooltip.svelte";
+ import TooltipContent from "../tooltip/TooltipContent.svelte";
+ import InfoCircle from "../icons/InfoCircle.svelte";
+
+ export let id: string;
+ export let label: string;
+ export let hint: string | undefined = undefined;
+ export let optional = false;
+</script>
+
+<div class="label-wrapper">
+ <label for={id} class="line-clamp-1">
+ {label}
+ {#if optional}
+ <span class="text-gray-500 text-[12px] font-normal">(optional)</span>
+ {/if}
+ </label>
+ {#if hint}
+ <Tooltip location="right" alignment="middle" distance={8}>
+ <div class="text-gray-500">
+ <InfoCircle size="13px" />
+ </div>
+ <TooltipContent maxWidth="400px" slot="tooltip-content">
+ {@html hint}
+ </TooltipContent>
+ </Tooltip>
+ {/if}
+ <slot name="mode-switch" />
+</div>
+
+<style lang="postcss">
+ .label-wrapper {
+ @apply flex items-center gap-x-1;
+ }
+
+ label {
+ @apply text-sm font-medium text-gray-800;
+ }
+</style>
diff --git a/web-common/src/components/tag/Tag.svelte b/web-common/src/components/tag/Tag.svelte
@@ -16,6 +16,10 @@
  export let height = 21;
  export let text: string = "";
 
+ let className: string | undefined = undefined;
+
+ export { className as class };
+
  function getColorClass(color: string) {
  switch (color) {
  case "gray":
@@ -46,7 +50,7 @@
  style:height="{height}px"
  class="px-2 border rounded-[20px] items-center justify-center inline-flex shrink-0 {getColorClass(
  color,
- )}"
+ )} {className}"
 >
  <span class="text-xs font-normal">
  {#if text !== ""}

diff --git a/web-common/src/features/connectors/ConnectorEntry.svelte b/web-common/src/features/connectors/ConnectorEntry.svelte
@@ -6,14 +6,16 @@
  createRuntimeServiceGetInstance,
  } from "../../runtime-client";
  import { runtime } from "../../runtime-client/runtime-store";
- import { connectorExplorerStore } from "./connector-explorer-store";
+ import type { ConnectorExplorerStore } from "./connector-explorer-store";
  import { connectorIconMapping } from "./connector-icon-mapping";
  import DatabaseExplorer from "./olap/DatabaseExplorer.svelte";
 
  export let connector: V1AnalyzedConnector;
+ export let store: ConnectorExplorerStore;
 
  $: connectorName = connector?.name as string;
- $: expanded = connectorExplorerStore.getItem(connectorName);
+ $: expandedStore = store.getItem(connectorName);
+ $: expanded = $expandedStore;
  $: ({ instanceId } = $runtime);
  $: instance = createRuntimeServiceGetInstance(instanceId, {
  sensitive: true,
@@ -29,44 +31,48 @@
  <li aria-label={connector.name} class="connector-entry">
  <button
  class="connector-entry-header"
- on:click={() => connectorExplorerStore.toggleItem(connectorName)}
+ on:click={() => {
+ store.toggleItem(connectorName);
+ }}
  >
  <CaretDownIcon
- className="transform transition-transform text-gray-400 {$expanded
+ className="transform transition-transform text-gray-400 {expanded
  ? 'rotate-0'
  : '-rotate-90'}"
  size="14px"
  />
- <div class="flex-none">
+ <span class="flex-none">
  {#if connector.driver?.name}
  <svelte:component
  this={connectorIconMapping[connector.driver.name]}
  size="16px"
  />
  {/if}
- </div>
+ </span>
+
  <h4>{connector.name}</h4>
- <div class="flex-grow" />
+
  {#if isOlapConnector}
- <Tag height={16}>OLAP</Tag>
+ <Tag height={16} class="ml-auto">OLAP</Tag>
  {/if}
  </button>
- {#if $expanded}
- <DatabaseExplorer {instanceId} {connector} />
+
+ {#if expanded}
+ <DatabaseExplorer {instanceId} {connector} {store} />
  {/if}
  </li>
  {/if}
 {/if}
 
 <style lang="postcss">
  .connector-entry {
- @apply flex flex-col;
+ @apply flex flex-col flex-none;
  }
 
  .connector-entry-header {
- @apply flex gap-x-1 items-center;
- @apply w-full px-2 py-1;
- @apply sticky top-0 z-10 bg-white;
+ @apply flex gap-x-1 items-center flex-none;
+ @apply w-full px-2 h-6 outline-none;
+ @apply z-10 bg-white;
  }
 
  button:hover {

diff --git a/web-common/src/features/connectors/ConnectorExplorer.svelte b/web-common/src/features/connectors/ConnectorExplorer.svelte
@@ -4,15 +4,16 @@
  import { createRuntimeServiceAnalyzeConnectors } from "../../runtime-client";
  import { runtime } from "../../runtime-client/runtime-store";
  import ConnectorEntry from "./ConnectorEntry.svelte";
- import { connectorExplorerStore } from "./connector-explorer-store";
+ import type { ConnectorExplorerStore } from "./connector-explorer-store";
 
- $: showConnectors = $connectorExplorerStore.showConnectors;
+ export let store: ConnectorExplorerStore;
 
  $: connectors = createRuntimeServiceAnalyzeConnectors($runtime.instanceId, {
  query: {
  // sort alphabetically
  select: (data) => {
  if (!data?.connectors) return;
+
  const connectors = data.connectors.sort((a, b) =>
  (a?.name as string).localeCompare(b?.name as string),
  );
@@ -23,27 +24,25 @@
  $: ({ data, error } = $connectors);
 </script>
 
-{#if showConnectors}
- <div class="wrapper">
- {#if error}
+<div class="wrapper">
+ {#if error}
+ <span class="message">
+ {error.message}
+ </span>
+ {:else if data?.connectors}
+ {#if data.connectors.length === 0}
  <span class="message">
- {error.message}
+ No connectors found. Add data to get started!
  </span>
- {:else if data?.connectors}
- {#if data.connectors.length === 0}
- <span class="message">
- No connectors found. Add data to get started!
- </span>
- {:else}
- <ol transition:slide={{ duration }}>
- {#each data.connectors as connector (connector.name)}
- <ConnectorEntry {connector} />
- {/each}
- </ol>
- {/if}
+ {:else}
+ <ol transition:slide={{ duration }}>
+ {#each data.connectors as connector (connector.name)}
+ <ConnectorEntry {connector} {store} />
+ {/each}
+ </ol>
  {/if}
- </div>
-{/if}
+ {/if}
+</div>
 
 <style lang="postcss">
  .wrapper {
@@ -52,7 +51,7 @@
 
  .message {
  @apply pl-2 pr-3.5 py-2;
- @apply flex;
+ @apply flex flex-none;
  @apply text-gray-500;
  }
 </style>