Skip to content

Commit

Permalink
Merge branch 'main' into deployment
Browse files Browse the repository at this point in the history
  • Loading branch information
@thokra-nav
thokra-nav authored Jan 31, 2025
2 parents bcc0c77 + c04936f commit 1325508
Showing 1 changed file with 123 additions and 114 deletions.
237 changes: 123 additions & 114 deletions src/routes/team/[team]/(teamPages)/bigquery/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import SortDescendingIcon from '$lib/icons/SortDescendingIcon.svelte';
import Pagination from '$lib/Pagination.svelte';
import { changeParams } from '$lib/utils/searchparams.svelte';
import { BodyShort, Button, Detail } from '@nais/ds-svelte-community';
import { BodyLong, BodyShort, Button, Detail } from '@nais/ds-svelte-community';
import {
ActionMenu,
ActionMenuDivider,
Expand Down Expand Up @@ -108,127 +108,136 @@
</Card>
</div>
<Card columns={12}>
<div class="list">
<div class="list-header">
<div class="count">
<BodyShort size="small" style="font-weight: bold;">
{datasets.pageInfo.totalCount} entries
</BodyShort>
</div>
<div style="display: flex; gap: 1rem;">
{#if datasets.nodes.length > 0 || $BigQuery.data.team.totalCount.pageInfo.totalCount > 0}
<div class="list">
<div class="list-header">
<div class="count">
<BodyShort size="small" style="font-weight: bold;">
{datasets.pageInfo.totalCount} entries
</BodyShort>
</div>
<div style="display: flex; gap: 1rem;">
<ActionMenu>
{#snippet trigger(props)}
<Button
variant="tertiary-neutral"
size="small"
iconPosition="right"
{...props}
icon={ChevronDownIcon}
>
<span style="font-weight: normal"># of rows</span>
</Button>
{/snippet}
{#key orderField}
<ActionMenuRadioGroup value={orderField} label="Order by">
<ActionMenuRadioItem
value={BigQueryDatasetOrderField.NAME}
onselect={(value) => {
handleSortField(value as string);
}}>Name</ActionMenuRadioItem
<div style="display: flex; gap: 1rem;">
<ActionMenu>
{#snippet trigger(props)}
<Button
variant="tertiary-neutral"
size="small"
iconPosition="right"
{...props}
icon={ChevronDownIcon}
>
<span style="font-weight: normal"># of rows</span>
</Button>
{/snippet}
{#key orderField}
<ActionMenuRadioGroup value={orderField} label="Order by">
<ActionMenuRadioItem
value={BigQueryDatasetOrderField.NAME}
onselect={(value) => {
handleSortField(value as string);
}}>Name</ActionMenuRadioItem
>

<ActionMenuRadioItem
value={BigQueryDatasetOrderField.ENVIRONMENT}
onselect={(value) => {
handleSortField(value as string);
}}>Environment</ActionMenuRadioItem
>
</ActionMenuRadioGroup>
{/key}
<ActionMenuDivider />
{#key orderDirection}
<ActionMenuRadioGroup value={orderDirection} label="Sort direction">
<ActionMenuRadioItem
value={OrderDirection.ASC}
onselect={(value) => {
handleSortDirection(value as string);
}}
>
<div class="icon">
<SortAscendingIcon size="1rem" />Ascending
</div>
</ActionMenuRadioItem>
<ActionMenuRadioItem
value={OrderDirection.DESC}
onselect={(value) => {
handleSortDirection(value as string);
}}
>
<div class="icon">
<SortDescendingIcon size="1rem" />Descending
</div>
</ActionMenuRadioItem>
</ActionMenuRadioGroup>
{/key}
<ActionMenuDivider />
{#key rows}
<ActionMenuRadioGroup value={rows} label="Rows per page">
<ActionMenuRadioItem
value="5"
onselect={(value) => handleNumberOfRows(value as number)}>5</ActionMenuRadioItem
>
<ActionMenuRadioItem
value="10"
onselect={(value) => handleNumberOfRows(value as number)}
>10</ActionMenuRadioItem
>
<ActionMenuRadioItem
value="25"
onselect={(value) => handleNumberOfRows(value as number)}
>25</ActionMenuRadioItem
>
<ActionMenuRadioItem
value="50"
onselect={(value) => handleNumberOfRows(value as number)}
>50</ActionMenuRadioItem
>
</ActionMenuRadioGroup>
{/key}
</ActionMenu>
<ActionMenuRadioItem
value={BigQueryDatasetOrderField.ENVIRONMENT}
onselect={(value) => {
handleSortField(value as string);
}}>Environment</ActionMenuRadioItem
>
</ActionMenuRadioGroup>
{/key}
<ActionMenuDivider />
{#key orderDirection}
<ActionMenuRadioGroup value={orderDirection} label="Sort direction">
<ActionMenuRadioItem
value={OrderDirection.ASC}
onselect={(value) => {
handleSortDirection(value as string);
}}
>
<div class="icon">
<SortAscendingIcon size="1rem" />Ascending
</div>
</ActionMenuRadioItem>
<ActionMenuRadioItem
value={OrderDirection.DESC}
onselect={(value) => {
handleSortDirection(value as string);
}}
>
<div class="icon">
<SortDescendingIcon size="1rem" />Descending
</div>
</ActionMenuRadioItem>
</ActionMenuRadioGroup>
{/key}
<ActionMenuDivider />
{#key rows}
<ActionMenuRadioGroup value={rows} label="Rows per page">
<ActionMenuRadioItem
value="5"
onselect={(value) => handleNumberOfRows(value as number)}
>5</ActionMenuRadioItem
>
<ActionMenuRadioItem
value="10"
onselect={(value) => handleNumberOfRows(value as number)}
>10</ActionMenuRadioItem
>
<ActionMenuRadioItem
value="25"
onselect={(value) => handleNumberOfRows(value as number)}
>25</ActionMenuRadioItem
>
<ActionMenuRadioItem
value="50"
onselect={(value) => handleNumberOfRows(value as number)}
>50</ActionMenuRadioItem
>
</ActionMenuRadioGroup>
{/key}
</ActionMenu>
</div>
</div>
</div>
</div>
{#each datasets.nodes as ds}
<div class="list-item">
<div class="activity-link-wrapper">
<div class="list-link">
<a href="/team/{teamSlug}/{ds.environment.name}/bigquery/{ds.name}">
{ds.name}
</a>
<Detail>{ds.environment.name}</Detail>
{#each datasets.nodes as ds}
<div class="list-item">
<div class="activity-link-wrapper">
<div class="list-link">
<a href="/team/{teamSlug}/{ds.environment.name}/bigquery/{ds.name}">
{ds.name}
</a>
<Detail>{ds.environment.name}</Detail>
</div>
</div>
</div>
</div>
{:else}
<p>No BigQuery datasets</p>
{/each}
</div>
{/each}
</div>

{#if datasets.pageInfo.hasPreviousPage || datasets.pageInfo.hasNextPage}
<Pagination
page={datasets.pageInfo}
loaders={{
loadPreviousPage: () => {
changeQuery({ before: datasets.pageInfo.startCursor ?? '' });
BigQuery.loadPreviousPage({ last: rows });
},
loadNextPage: () => {
changeQuery({ after: datasets.pageInfo.endCursor ?? '' });
BigQuery.loadNextPage({ first: rows });
}
}}
/>
{#if datasets.pageInfo.hasPreviousPage || datasets.pageInfo.hasNextPage}
<Pagination
page={datasets.pageInfo}
loaders={{
loadPreviousPage: () => {
changeQuery({ before: datasets.pageInfo.startCursor ?? '' });
BigQuery.loadPreviousPage({ last: rows });
},
loadNextPage: () => {
changeQuery({ after: datasets.pageInfo.endCursor ?? '' });
BigQuery.loadNextPage({ first: rows });
}
}}
/>
{/if}
{:else}
<BodyLong
><strong>No BigQuery datasets found.</strong> BigQuery datasets store structured data
optimized for analytical workloads.
<a href="https://docs.nais.io/persistence/bigquery"
>Learn more about BigQuery datasets and how to get started.</a
>
</BodyLong>
{/if}
</Card>
{/if}
Expand Down

0 comments on commit 1325508

Please sign in to comment.