Skip to content

Commit

Permalink
fix: scroll
Browse files Browse the repository at this point in the history 
Signed-off-by: Philippe Martin <[email protected]>
  • Loading branch information
@feloy
feloy committed Jun 19, 2024
1 parent 179ac89 commit 3782509
Showing 1 changed file with 91 additions and 83 deletions.
174 changes: 91 additions & 83 deletions packages/frontend/src/pages/InferenceServerDetails.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export function goToUpPage(): void {
}
</script>

<DetailsPage
<DetailsPage
title="Service details"
breadcrumbLeftPart="Model Services"
breadcrumbRightPart="Service details"
Expand Down Expand Up @@ -152,102 +152,110 @@ export function goToUpPage(): void {
{/if}
</svelte:fragment>
<svelte:fragment slot="content">
<div slot="content" class="flex flex-col min-w-full min-h-full">
<div class="min-w-full min-h-full flex-1">
<div class="mt-4 px-5 space-y-5">
{#if service !== undefined}
<!-- models info -->
<div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4">
<div>
<span class="text-sm">Models</span>
<div class="w-full bg-charcoal-600 rounded-md p-2 flex flex-col gap-y-4">
{#each service.models as model}
<div class="flex flex-row gap-2 items-center">
<div class="grow text-sm" aria-label="Model name">
<a href="/model/{model.id}">{model.name}</a>
</div>
<div>
<div
class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
<Fa class="mr-2" icon="{faScaleBalanced}" />
{model.license}
<div slot="content" class="h-full overflow-y-auto">
<div class="flex flex-col min-w-full min-h-full">
<div class="min-w-full min-h-full flex-1">
<div class="mt-4 px-5 space-y-5">
{#if service !== undefined}
<!-- models info -->
<div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4">
<div>
<span class="text-sm">Models</span>
<div class="w-full bg-charcoal-600 rounded-md p-2 flex flex-col gap-y-4">
{#each service.models as model}
<div class="flex flex-row gap-2 items-center">
<div class="grow text-sm" aria-label="Model name">
<a href="/model/{model.id}">{model.name}</a>
</div>
</div>
<div>
<div
class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
<Fa class="mr-2" icon="{faBuildingColumns}" />
{model.registry}
<div>
<div
class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
<Fa class="mr-2" icon="{faScaleBalanced}" />
{model.license}
</div>
</div>
<div>
<div
class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
<Fa class="mr-2" icon="{faBuildingColumns}" />
{model.registry}
</div>
</div>
</div>
</div>
{/each}
{/each}
</div>
</div>
</div>
</div>

<!-- server details -->
<div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4 mt-2">
<span class="text-sm">Server</span>
<div class="flex flex-row gap-4">
<div class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
http://localhost:{service.connection.port}/v1
</div>

<div class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
CPU Inference
<Fa class="ml-2" icon="{faMicrochip}" />
<!-- server details -->
<div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4 mt-2">
<span class="text-sm">Server</span>
<div class="flex flex-row gap-4">
<div
class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
http://localhost:{service.connection.port}/v1
</div>

<div
class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
CPU Inference
<Fa class="ml-2" icon="{faMicrochip}" />
</div>
</div>
</div>
</div>

<!-- code client -->
<div>
<div class="flex flex-row">
<span class="text-base grow">Client code</span>

<!-- language choice -->
<select
required
aria-label="snippet language selection"
bind:value="{selectedLanguage}"
on:change="{onLanguageChange}"
id="languages"
class="border text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
name="languages">
{#each $snippetLanguages as language}
<option class="my-1" value="{language.key}">{language.label}</option>
{/each}
</select>
{#if selectedVariant !== undefined}

<!-- code client -->
<div>
<div class="flex flex-row">
<span class="text-base grow">Client code</span>

<!-- language choice -->
<select
required
aria-label="snippet language variant"
id="variants"
bind:value="{selectedVariant}"
on:change="{() => generate(selectedLanguage, selectedVariant)}"
disabled="{variants.length === 1}"
class="border ml-1 text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
name="variants">
{#each variants as variant}
<option class="my-1" value="{variant.key}">{variant.key}</option>
aria-label="snippet language selection"
bind:value="{selectedLanguage}"
on:change="{onLanguageChange}"
id="languages"
class="border text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
name="languages">
{#each $snippetLanguages as language}
<option class="my-1" value="{language.key}">{language.label}</option>
{/each}
</select>
{/if}
</div>
{#if selectedVariant !== undefined}
<select
required
aria-label="snippet language variant"
id="variants"
bind:value="{selectedVariant}"
on:change="{() => generate(selectedLanguage, selectedVariant)}"
disabled="{variants.length === 1}"
class="border ml-1 text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
name="variants">
{#each variants as variant}
<option class="my-1" value="{variant.key}">{variant.key}</option>
{/each}
</select>
{/if}
</div>

{#if snippet !== undefined}
<div class="bg-charcoal-900 rounded-md w-full p-4 mt-2 relative">
<code class="whitespace-break-spaces text-sm" bind:this="{code}">
{snippet}
</code>
<div class="absolute right-4 top-4 z-10">
<Button icon="{copied ? faCheck : faCopy}" type="secondary" title="Copy" on:click="{copySnippet}" />
{#if snippet !== undefined}
<div class="bg-charcoal-900 rounded-md w-full p-4 mt-2 relative">
<code class="whitespace-break-spaces text-sm" bind:this="{code}">
{snippet}
</code>
<div class="absolute right-4 top-4 z-10">
<Button
icon="{copied ? faCheck : faCopy}"
type="secondary"
title="Copy"
on:click="{copySnippet}" />
</div>
</div>
</div>
{/if}
</div>
{/if}
{/if}
</div>
{/if}
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 3782509

Please sign in to comment.