Add SDK Name, Logo and Version to Workflow Details (#2613)

* Add all sdk versions and logos

* Remove toolchain

* Rearrange logo

* use typescript

* Remove dash and font-mono

Author: Alex-Tideman

Diff for: src/lib/components/lines-and-dots/sdk-logo.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { fullEventHistory } from '$lib/stores/events';
+  import { getSDKandVersion } from '$lib/utilities/get-sdk-version';
+  import { isWorkflowTaskCompletedEvent } from '$lib/utilities/is-event-type';
+  import dotNet from '$lib/vendor/sdk-logos/dot-net-logo.png';
+  import go from '$lib/vendor/sdk-logos/go-logo.png';
+  import java from '$lib/vendor/sdk-logos/java-logo.png';
+  import php from '$lib/vendor/sdk-logos/php-logo.png';
+  import python from '$lib/vendor/sdk-logos/python-logo.png';
+  import ruby from '$lib/vendor/sdk-logos/ruby-logo.png';
+  import rust from '$lib/vendor/sdk-logos/rust-logo.png';
+  import typescript from '$lib/vendor/sdk-logos/ts-logo.png';
+
+  const sdkLogos: Record<string, string> = {
+    go,
+    typescript,
+    java,
+    python,
+    '.net': dotNet,
+    ruby,
+    php,
+    rust,
+  };
+
+  $: workflowCompletedTasks = $fullEventHistory.filter(
+    isWorkflowTaskCompletedEvent,
+  );
+
+  $: ({ sdk, version } = getSDKandVersion(workflowCompletedTasks));
+  $: logo = sdkLogos[sdk.toLowerCase()];
+</script>
+
+{#if sdk && version}
+  <div class="flex h-4 items-center justify-between gap-16 whitespace-nowrap">
+    <span class="font-mono">SDK</span>
+    <p class="flex items-center gap-1">
+      {#if logo}
+        <img src={logo} alt="SDK Icon" class="h-6 w-6" />
+      {/if}
+      {sdk}
+      {version}
+    </p>
+  </div>
+{/if}

Diff for: src/lib/components/lines-and-dots/workflow-details.svelte

@@ -13,6 +13,7 @@
     routeForWorkflowsWithQuery,
   } from '$lib/utilities/route-for';
 
+  import SdkLogo from './sdk-logo.svelte';
   import WorkflowDetail from './workflow-detail.svelte';
 
   export let workflow: WorkflowExecution;
@@ -131,6 +132,7 @@
   <div
     class="flex w-full flex-col gap-2 {deployment ? '2xl:w-1/4' : 'xl:w-1/3'}"
   >
+    <SdkLogo />
     {#if workflow?.parent}
       <WorkflowDetail
         title={translate('workflows.parent-workflow')}

Diff for: src/lib/utilities/get-sdk-version.test.ts

@@ -0,0 +1,208 @@
+import { describe, expect, it } from 'vitest';
+
+import { getSDKandVersion } from './get-sdk-version';
+
+describe('getSDKandVersion', () => {
+  const workflowTaskCompletedEvent = {
+    attributes: {
+      sdkMetadata: {},
+    },
+  };
+  it('should return empty string if neither exist in task', () => {
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('');
+    expect(version).toBe('');
+  });
+
+  it('should return Go sdk and version if both exist in task', () => {
+    const workflowTaskCompletedEvent = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-go',
+          sdkVersion: '1.29.1',
+        },
+      },
+    };
+
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('Go');
+    expect(version).toBe('1.29.1');
+  });
+
+  it('should return Java sdk and version if both exist in task', () => {
+    const workflowTaskCompletedEvent = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-java',
+          sdkVersion: '1.0.5',
+        },
+      },
+    };
+
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('Java');
+    expect(version).toBe('1.0.5');
+  });
+
+  it('should return Typescript sdk and version if both exist in task', () => {
+    const workflowTaskCompletedEvent = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-typescript',
+          sdkVersion: '2.20.5',
+        },
+      },
+    };
+
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('Typescript');
+    expect(version).toBe('2.20.5');
+  });
+
+  it('should return Dotnet sdk and version if both exist in task', () => {
+    const workflowTaskCompletedEvent = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-dotnet',
+          sdkVersion: '2.20.5',
+        },
+      },
+    };
+
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('.NET');
+    expect(version).toBe('2.20.5');
+  });
+
+  it('should return Python sdk and version if both exist in task', () => {
+    const workflowTaskCompletedEvent = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-python',
+          sdkVersion: '0.2.11',
+        },
+      },
+    };
+
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('Python');
+    expect(version).toBe('0.2.11');
+  });
+
+  it('should return Php sdk and version if both exist in task', () => {
+    const workflowTaskCompletedEvent = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-php',
+          sdkVersion: '0.2.11',
+        },
+      },
+    };
+
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('Php');
+    expect(version).toBe('0.2.11');
+  });
+
+  it('should return Rust sdk and version if both exist in task', () => {
+    const workflowTaskCompletedEvent = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-rust',
+          sdkVersion: '1.3.2',
+        },
+      },
+    };
+
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('Rust');
+    expect(version).toBe('1.3.2');
+  });
+
+  it('should return Ruby sdk and version if both exist in task', () => {
+    const workflowTaskCompletedEvent = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-ruby',
+          sdkVersion: '1.3.21',
+        },
+      },
+    };
+
+    const sdk = getSDKandVersion([workflowTaskCompletedEvent]).sdk;
+    const version = getSDKandVersion([workflowTaskCompletedEvent]).version;
+    expect(sdk).toBe('Ruby');
+    expect(version).toBe('1.3.21');
+  });
+
+  it('should return newer Go version with multiple tasks', () => {
+    const workflowTaskCompletedEvent1 = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-go',
+          sdkVersion: '1.29.1',
+        },
+      },
+    };
+
+    const workflowTaskCompletedEvent2 = {
+      attributes: {
+        sdkMetadata: {
+          sdkVersion: '1.30.5',
+        },
+      },
+    };
+    const events = [workflowTaskCompletedEvent1, workflowTaskCompletedEvent2];
+
+    const sdk = getSDKandVersion(events).sdk;
+    const version = getSDKandVersion(events).version;
+    expect(sdk).toBe('Go');
+    expect(version).toBe('1.30.5');
+  });
+
+  it('should return newer SDK version with multiple tasks', () => {
+    const workflowTaskCompletedEvent1 = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-go',
+          sdkVersion: '1.29.1',
+        },
+      },
+    };
+
+    const workflowTaskCompletedEvent2 = {
+      attributes: {
+        sdkMetadata: {
+          sdkName: 'temporal-ruby',
+          sdkVersion: '1.2.3',
+        },
+      },
+    };
+
+    const workflowTaskCompletedEvent3 = {
+      attributes: {
+        sdkMetadata: {
+          sdkVersion: '1.2.10',
+        },
+      },
+    };
+    const events = [
+      workflowTaskCompletedEvent1,
+      workflowTaskCompletedEvent2,
+      workflowTaskCompletedEvent3,
+    ];
+
+    const sdk = getSDKandVersion(events).sdk;
+    const version = getSDKandVersion(events).version;
+    expect(sdk).toBe('Ruby');
+    expect(version).toBe('1.2.10');
+  });
+});

Diff for: src/lib/utilities/get-sdk-version.ts

@@ -0,0 +1,31 @@
+import type { WorkflowTaskCompletedEvent } from '$lib/types/events';
+
+import { capitalize } from './format-camel-case';
+
+export const getSDKandVersion = (
+  tasks: WorkflowTaskCompletedEvent[],
+): { sdk: string; version: string } => {
+  let sdk = '';
+  let version = '';
+
+  if (!tasks?.length) return { sdk, version };
+
+  tasks.forEach((event) => {
+    const sdkMetadata = event?.attributes?.sdkMetadata;
+    if (sdkMetadata) {
+      const sdkName = sdkMetadata?.sdkName;
+      const sdkVersion = sdkMetadata?.sdkVersion;
+      if (sdkName) {
+        sdk = capitalize(sdkName.split('-')[1]);
+        if (sdk === 'Dotnet') {
+          sdk = '.NET';
+        }
+      }
+      if (sdkVersion) {
+        version = sdkVersion;
+      }
+    }
+  });
+
+  return { sdk, version };
+};