feat: show container connection type and endpoint (#5098)

Make the container and the kubernetes endpoint look more similar. Show the connection type, since it might not match the provider. Signed-off-by: Anders F Björklund <anders.f.bjorklund@gmail.com>
containers · Dec 7, 2023 · 1a9a785 · 1a9a785
1 parent 2cf8821
commit 1a9a785
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionDetailsSummary.svelte b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionDetailsSummary.svelte
@@ -62,6 +62,11 @@ $: providerContainerConfiguration = tmpProviderContainerConfiguration.filter(
           {/if}
         </div>
       {/each}
+      <div class="flex flex-row mt-5">
+        <span class="font-semibold min-w-[150px]">Type</span>
+        <span aria-label="{containerConnectionInfo.type}"
+          >{#if containerConnectionInfo.type === 'docker'}Docker{:else if containerConnectionInfo.type === 'podman'}Podman{/if}</span>
+      </div>
       <div class="flex flex-row mt-5">
         <span class="font-semibold min-w-[150px]">Endpoint</span>
         <span aria-label="{containerConnectionInfo.endpoint.socketPath}"

diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionDetailsSummary.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionDetailsSummary.svelte
@@ -43,6 +43,10 @@ $: providerConnectionConfiguration = tmpProviderContainerConfiguration.filter(
           <span>{connectionSetting.value}</span>
         </div>
       {/each}
+      <div class="flex flex-row mt-5">
+        <span class="font-semibold min-w-[150px]">Type</span>
+        <span aria-label="kubernetes">Kubernetes</span>
+      </div>
       <div class="flex flex-row mt-5">
         <span class="font-semibold min-w-[150px]">Endpoint</span>
         <span aria-label="{kubernetesConnectionInfo.endpoint.apiURL}">{kubernetesConnectionInfo.endpoint.apiURL}</span>

diff --git a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
@@ -473,6 +473,15 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                   <ConnectionErrorInfoButton status="{status}" />
                 {/if}
               </div>
+              <div class="mt-2">
+                <div class="text-gray-700 text-xs">
+                  {#if container.type === 'docker'}Docker{:else if container.type === 'podman'}Podman{/if} endpoint
+                </div>
+                <div class="mt-1">
+                  <span class="my-auto text-xs" class:text-gray-900="{container.status !== 'started'}"
+                    >{container.endpoint.socketPath}</span>
+                </div>
+              </div>
 
               {#if providerContainerConfiguration.has(provider.internalId)}
                 {@const providerConfiguration = providerContainerConfiguration.get(provider.internalId) || []}