starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-25 00:01:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

move assets usage dropdown to component

Browse Source
This commit is contained in:
Diego Imbert
2025-07-09 17:23:30 +02:00
parent b11ced4e29
commit 622ea4ab12
2 changed files with 64 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/assets/AssetsUsageDropdown.svelte
+58
View File
@@ -0,0 +1,58 @@
<script lang="ts">
import type { AssetUsageAccessType, AssetUsageKind } from '$lib/gen'
import { Drawer, DrawerContent } from '../common'
import RowIcon from '../common/table/RowIcon.svelte'
import {
assetDisplaysAsInputInFlowGraph,
assetDisplaysAsOutputInFlowGraph
} from '../graph/renderers/nodes/AssetNode.svelte'
import { getAssetUsagePageUri } from './lib'
let usagesDrawerData:
| {
usages: {
path: string
kind: AssetUsageKind
access_type?: AssetUsageAccessType
}[]
}
| undefined = $state()
export function open(data: typeof usagesDrawerData) {
usagesDrawerData = data
}
</script>
<Drawer
open={usagesDrawerData !== undefined}
size="900px"
on:close={() => (usagesDrawerData = undefined)}
>
<DrawerContent title="Asset usage" on:close={() => (usagesDrawerData = undefined)}>
<ul class="flex flex-col border rounded-md divide-y">
{#each usagesDrawerData?.usages ?? [] as u}
<li>
<a
href={getAssetUsagePageUri(u)}
aria-label={`${u.kind}/${u.path}`}
class="text-sm text-primary flex items-center py-3 px-4 gap-3 hover:bg-surface-hover cursor-pointer"
>
<RowIcon kind={u.kind} />
<div class="flex flex-col justify-center flex-1">
<span class="font-semibold">{u.path}</span>
<span class="text-xs text-tertiary">{u.kind}</span>
</div>
<div class="flex gap-2">
{#if assetDisplaysAsInputInFlowGraph(u)}
<div class="text-xs border text-tertiary max-w-fit p-1 rounded-md">Read</div>
{/if}
{#if assetDisplaysAsOutputInFlowGraph(u)}
<div class="text-xs border text-tertiary max-w-fit p-1 rounded-md">Write</div>
{/if}
</div>
</a>
</li>
{/each}
</ul>
</DrawerContent>
</Drawer>
frontend/src/routes/(root)/(logged)/assets/+page.svelte
+6 -53
View File
@@ -1,32 +1,16 @@
<script lang="ts">
import { getAssetUsagePageUri } from '$lib/components/assets/lib'
import CenteredPage from '$lib/components/CenteredPage.svelte'
import { DrawerContent, Tab, Tabs } from '$lib/components/common'
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
import RowIcon from '$lib/components/common/table/RowIcon.svelte'
import { Tab, Tabs } from '$lib/components/common'
import PageHeader from '$lib/components/PageHeader.svelte'
import { type AssetUsageAccessType, type AssetUsageKind } from '$lib/gen'
import { userStore, workspaceStore, userWorkspaces } from '$lib/stores'
import {
assetDisplaysAsInputInFlowGraph,
assetDisplaysAsOutputInFlowGraph
} from '$lib/components/graph/renderers/nodes/AssetNode.svelte'
import { Boxes, DollarSign } from 'lucide-svelte'
import S3Icon from '$lib/components/icons/S3Icon.svelte'
import ResourceListPage from '$lib/components/assets/ResourceListPage.svelte'
import VariablesListPage from '$lib/components/assets/VariablesListPage.svelte'
import Tooltip from '$lib/components/Tooltip.svelte'
import S3ObjectsListPage from '$lib/components/assets/S3ObjectsListPage.svelte'
import AssetsUsageDropdown from '$lib/components/assets/AssetsUsageDropdown.svelte'
let usagesDrawerData:
| {
usages: {
path: string
kind: AssetUsageKind
access_type?: AssetUsageAccessType
}[]
}
| undefined = $state()
let selectedTab: 'resources' | 'variables' | 's3objects' = $state('resources')
let resourceListPage: ResourceListPage | undefined = $state()
@@ -41,6 +25,7 @@
return undefined
}
})
let assetsUsageDropdown: AssetsUsageDropdown | undefined = $state()
</script>
{#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.resources}
@@ -95,12 +80,12 @@
{#if selectedTab === 'resources'}
<ResourceListPage
bind:this={resourceListPage}
onOpenUsages={(usages) => (usagesDrawerData = { usages })}
onOpenUsages={(usages) => assetsUsageDropdown?.open({ usages })}
/>
{:else if selectedTab === 'variables'}
<VariablesListPage
bind:this={variablesListPage}
onOpenUsages={(usages) => (usagesDrawerData = { usages })}
onOpenUsages={(usages) => assetsUsageDropdown?.open({ usages })}
/>
{:else if selectedTab === 's3objects'}
<S3ObjectsListPage />
@@ -108,36 +93,4 @@
</CenteredPage>
{/if}
<Drawer
open={usagesDrawerData !== undefined}
size="900px"
on:close={() => (usagesDrawerData = undefined)}
>
<DrawerContent title="Asset occurrences" on:close={() => (usagesDrawerData = undefined)}>
<ul class="flex flex-col border rounded-md divide-y">
{#each usagesDrawerData?.usages ?? [] as u}
<li>
<a
href={getAssetUsagePageUri(u)}
aria-label={`${u.kind}/${u.path}`}
class="text-sm text-primary flex items-center py-3 px-4 gap-3 hover:bg-surface-hover cursor-pointer"
>
<RowIcon kind={u.kind} />
<div class="flex flex-col justify-center flex-1">
<span class="font-semibold">{u.path}</span>
<span class="text-xs text-tertiary">{u.kind}</span>
</div>
<div class="flex gap-2">
{#if assetDisplaysAsInputInFlowGraph(u)}
<div class="text-xs border text-tertiary max-w-fit p-1 rounded-md">Read</div>
{/if}
{#if assetDisplaysAsOutputInFlowGraph(u)}
<div class="text-xs border text-tertiary max-w-fit p-1 rounded-md">Write</div>
{/if}
</div>
</a>
</li>
{/each}
</ul>
</DrawerContent>
</Drawer>
<AssetsUsageDropdown bind:this={assetsUsageDropdown} />