mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-29 16:15:51 +00:00
141 lines
3.4 KiB
Svelte
141 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { GridApi, createGrid, type IDatasource } from 'ag-grid-community'
|
|
|
|
import 'ag-grid-community/styles/ag-grid.css'
|
|
import 'ag-grid-community/styles/ag-theme-alpine.css'
|
|
import { twMerge } from 'tailwind-merge'
|
|
import DarkModeObserver from './DarkModeObserver.svelte'
|
|
import { HelpersService } from '$lib/gen'
|
|
import { enterpriseLicense, workspaceStore } from '$lib/stores'
|
|
|
|
// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
|
|
|
|
let selectedRowIndex = -1
|
|
export let s3resource: string
|
|
|
|
let datasource: IDatasource = {
|
|
rowCount: 0,
|
|
getRows: async function (params) {
|
|
try {
|
|
const searchCol = params.filterModel ? Object.keys(params.filterModel)?.[0] : undefined
|
|
const res = (await HelpersService.loadParquetPreview({
|
|
workspace: $workspaceStore!,
|
|
path: s3resource,
|
|
offset: params.startRow,
|
|
limit: params.endRow - params.startRow,
|
|
sortCol: params.sortModel?.[0]?.colId,
|
|
sortDesc: params.sortModel?.[0]?.sort == 'desc',
|
|
searchCol: searchCol,
|
|
searchTerm: searchCol ? params.filterModel?.[searchCol]?.filter : undefined
|
|
})) as any
|
|
|
|
const data: any[] = []
|
|
|
|
res?.columns?.forEach((c) => {
|
|
c.values.forEach((v, i) => {
|
|
if (data[i] == undefined) {
|
|
data.push({ __index: params.startRow + i })
|
|
}
|
|
if (!$enterpriseLicense && params.startRow + i > 3) {
|
|
data[i][c.name] = 'Require EE'
|
|
} else {
|
|
data[i][c.name] = v
|
|
}
|
|
})
|
|
})
|
|
|
|
params.successCallback(data)
|
|
} catch (e) {
|
|
console.error(e)
|
|
params.failCallback()
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleRow(row: any) {
|
|
if (row) {
|
|
let rowIndex = row.rowIndex
|
|
let data = { ...row.data }
|
|
delete data['__index']
|
|
if (selectedRowIndex !== rowIndex) {
|
|
selectedRowIndex = rowIndex
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleRows(rows: any[]) {
|
|
toggleRow(rows[0])
|
|
}
|
|
|
|
let eGui: HTMLDivElement
|
|
|
|
$: eGui && mountGrid()
|
|
|
|
async function mountGrid() {
|
|
if (eGui) {
|
|
const res = await HelpersService.loadParquetPreview({
|
|
workspace: $workspaceStore!,
|
|
path: s3resource,
|
|
limit: 0
|
|
})
|
|
|
|
createGrid(
|
|
eGui,
|
|
{
|
|
rowModelType: 'infinite',
|
|
datasource,
|
|
// @ts-ignore
|
|
columnDefs: res.columns.map((c) => {
|
|
return {
|
|
field: c.name,
|
|
sortable: true,
|
|
filter: true,
|
|
filterParams: {
|
|
filterOptions: ['contains'],
|
|
maxNumConditions: 1
|
|
}
|
|
}
|
|
}),
|
|
pagination: false,
|
|
// defaultColDef: {
|
|
// flex: 1
|
|
// },
|
|
suppressColumnMoveAnimation: true,
|
|
rowSelection: 'multiple',
|
|
rowMultiSelectWithClick: true,
|
|
suppressRowDeselection: true,
|
|
|
|
onSelectionChanged: (e) => {
|
|
onSelectionChanged(e.api)
|
|
},
|
|
getRowId: (data) => {
|
|
return (data as any).data['__index']
|
|
}
|
|
},
|
|
{}
|
|
)
|
|
}
|
|
}
|
|
|
|
function onSelectionChanged(api: GridApi<any>) {
|
|
const rows = api.getSelectedNodes()
|
|
if (rows != undefined) {
|
|
toggleRows(rows)
|
|
}
|
|
}
|
|
|
|
let darkMode: boolean = false
|
|
</script>
|
|
|
|
<DarkModeObserver bind:darkMode />
|
|
|
|
<div class={twMerge('mt-4 border shadow-sm divide-y flex flex-col h-full min-h-[600px]')}>
|
|
<div class="ag-theme-alpine h-full" class:ag-theme-alpine-dark={darkMode} style="height: 600px;">
|
|
<div bind:this={eGui} style="height:100%; " />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="flex gap-1 absolute bottom-1 right-2 text-sm text-secondary"
|
|
>{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows</div
|
|
> -->
|