[Feature]: Display Assigned Gateway Information on Run Pages (#2438)

* [Feature]: Display Assigned Gateway Information on Run Pages #2410

* Show full service URL as link

---------

Co-authored-by: Victor Skvortsov <vds003@gmail.com>

Author: olgenn

frontend/src/locale/en.json

@@ -351,6 +351,7 @@
       "artifacts": "Artifacts",
       "artifacts_count": "Artifacts",
       "hub_user_name": "User",
+      "service_url": "Service URL",
       "statuses": {
         "pending": "Pending",
         "submitted": "Submitted",

frontend/src/pages/Runs/Details/index.tsx

@@ -22,6 +22,7 @@ import {
     getRunListItemPrice,
     getRunListItemRegion,
     getRunListItemResources,
+    getRunListItemServiceUrl,
     getRunListItemSpot,
 } from '../List/helpers';
 import { isAvailableAbortingForRun, isAvailableDeletingForRun, isAvailableStoppingForRun } from '../utils';
@@ -46,6 +47,8 @@ export const RunDetails: React.FC = () => {
         id: paramRunId,
     });
 
+    const serviceUrl = runData ? getRunListItemServiceUrl(runData) : null;
+
     useEffect(() => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -261,6 +264,17 @@ export const RunDetails: React.FC = () => {
                                     <div>${runData.cost}</div>
                                 </div>
                             </ColumnLayout>
+
+                            {serviceUrl && (
+                                <ColumnLayout columns={1} variant="text-grid">
+                                    <div>
+                                        <Box variant="awsui-key-label">{t('projects.run.service_url')}</Box>
+                                        <div>
+                                            <a href={serviceUrl}>{serviceUrl}</a>
+                                        </div>
+                                    </div>
+                                </ColumnLayout>
+                            )}
                         </Container>
 
                         {runData.jobs.length === 1 && (

frontend/src/pages/Runs/List/helpers.ts

@@ -2,6 +2,7 @@ import { groupBy as _groupBy } from 'lodash';
 
 import { finishedJobs } from '../constants';
 import { getJobStatus } from '../Details/Jobs/List/helpers';
+import { getBaseUrl } from 'App/helpers';
 
 export const getGroupedRunsByProjectAndRepoID = (runs: IRun[]) => {
     return _groupBy(runs, ({ project_name }) => project_name);
@@ -84,3 +85,9 @@ export const getRunListItemBackend = (run: IRun) => {
 
     return run.latest_job_submission?.job_provisioning_data?.backend ?? '-';
 };
+
+export const getRunListItemServiceUrl = (run: IRun) => {
+    const url = run.service?.url;
+    if (!url) return null;
+    return url.startsWith('/') ? `${getBaseUrl()}${url}` : url;
+};

frontend/src/types/run.d.ts

@@ -1,12 +1,12 @@
 declare type TRunsRequestParams = {
     project_name?: IProject['project_name'];
-    repo_id?: string,
-    user_name?: string,
-    only_active?: boolean,
-    prev_submitted_at?: string,
-    prev_run_id?: string,
-    limit?: number,
-    ascending?: boolean,
+    repo_id?: string;
+    user_name?: string;
+    only_active?: boolean;
+    prev_submitted_at?: string;
+    prev_run_id?: string;
+    limit?: number;
+    ascending?: boolean;
 };
 
 declare type TDeleteRunsRequestParams = {
@@ -30,133 +30,133 @@ declare type TJobStatus =
     | 'terminated'
     | 'aborted'
     | 'failed'
-    | 'done'
+    | 'done';
 
 declare type TJobErrorCode =
-    | "failed_to_start_due_to_no_capacity"
-    | "interrupted_by_no_capacity"
-    | "waiting_runner_limit_exceeded"
-    | "container_exited_with_error"
-    | "ports_binding_failed"
-
+    | 'failed_to_start_due_to_no_capacity'
+    | 'interrupted_by_no_capacity'
+    | 'waiting_runner_limit_exceeded'
+    | 'container_exited_with_error'
+    | 'ports_binding_failed';
 
 declare interface IAppSpec {
-    port: number,
-    app_name: string,
-    map_to_port?: number,
-    url_path?: string,
-    url_query_params?: {[key: string]: string}
+    port: number;
+    app_name: string;
+    map_to_port?: number;
+    url_path?: string;
+    url_query_params?: { [key: string]: string };
 }
 
 declare interface IJobSpec {
-    app_specs?: IAppSpec
-    commands: string[],
-    env?: {[key: string]: string},
-    home_dir?: string
-    image_name: string
-    job_name: string
-    job_num: number
-    max_duration?: number,
-    working_dir: string
+    app_specs?: IAppSpec;
+    commands: string[];
+    env?: { [key: string]: string };
+    home_dir?: string;
+    image_name: string;
+    job_name: string;
+    job_num: number;
+    max_duration?: number;
+    working_dir: string;
 }
 
 declare interface IGpu {
-    name: string,
-    memory_mib: number,
+    name: string;
+    memory_mib: number;
 }
 
 declare interface IDisk {
-    size_mib: number
+    size_mib: number;
 }
 
 declare interface IResources {
-    cpus: number,
-    memory_mib: number
-    gpus: IGpu[],
-    spot: boolean,
+    cpus: number;
+    memory_mib: number;
+    gpus: IGpu[];
+    spot: boolean;
 
-    disk?: IDisk,
+    disk?: IDisk;
 
-    description?: string
+    description?: string;
 }
 
 declare interface InstanceType {
-    name: string,
-    resources: IResources,
+    name: string;
+    resources: IResources;
 }
 
 declare interface IJobProvisioningData {
-    backend: TBackendType,
-    instance_type: InstanceType,
-    instance_id: string,
-    hostname: string,
-    region: string,
-    price: number,
-    username: string,
-    ssh_port: number,
-    dockerized: boolean,
-    backend_data?: string,
+    backend: TBackendType;
+    instance_type: InstanceType;
+    instance_id: string;
+    hostname: string;
+    region: string;
+    price: number;
+    username: string;
+    ssh_port: number;
+    dockerized: boolean;
+    backend_data?: string;
 }
 
 declare interface IJobSubmission {
-    id: string,
-    job_provisioning_data?: IJobProvisioningData | null,
-    error_code?: TJobErrorCode | null,
-    submission_num: number
-    status: TJobStatus,
-    submitted_at: number,
-    termination_reason?: string | null
-    termination_reason_message?: string | null
+    id: string;
+    job_provisioning_data?: IJobProvisioningData | null;
+    error_code?: TJobErrorCode | null;
+    submission_num: number;
+    status: TJobStatus;
+    submitted_at: number;
+    termination_reason?: string | null;
+    termination_reason_message?: string | null;
 }
 
 declare interface IJob {
-    job_spec: IJobSpec
-    job_submissions: IJobSubmission[]
+    job_spec: IJobSpec;
+    job_submissions: IJobSubmission[];
 }
 
 declare interface IDevEnvironmentConfiguration {
-    type: 'dev-environment'
+    type: 'dev-environment';
 }
 
 declare interface ITaskConfiguration {
-    type: 'task'
+    type: 'task';
 }
 
 declare interface IServiceConfiguration {
-    type: 'service'
+    type: 'service';
+    gateway: string | null;
 }
 declare interface IRunSpec {
-    configuration: IDevEnvironmentConfiguration | ITaskConfiguration | IServiceConfiguration,
-    configuration_path: string,
-    repo_code_hash?: string
-    repo_id: string
-    run_name?: string,
-    ssh_key_pub: string
-    working_dir: string
-    repo_data: IRemoteRunRepoData | ILocalRunRepoData | VirtualRunRepoData
+    configuration: IDevEnvironmentConfiguration | ITaskConfiguration | IServiceConfiguration;
+    configuration_path: string;
+    repo_code_hash?: string;
+    repo_id: string;
+    run_name?: string;
+    ssh_key_pub: string;
+    working_dir: string;
+    repo_data: IRemoteRunRepoData | ILocalRunRepoData | VirtualRunRepoData;
 }
 
 declare interface IModel {
-    name: string
-    base_url: string
-    type: string
+    name: string;
+    base_url: string;
+    type: string;
 }
 
 declare interface IRunService {
-    url: string,
-    model: null | IModel
+    url: string;
+    model: null | IModel;
 }
 
 declare interface IRun {
-    id: string,
-    project_name: string,
-    user: string,
-    submitted_at: string,
-    status: TJobStatus,
-    error?: string
-    jobs: IJob[],
-    run_spec: IRunSpec,
-    latest_job_submission?: IJobSubmission
-    cost: number,
+    id: string;
+    project_name: string;
+    user: string;
+    submitted_at: string;
+    status: TJobStatus;
+    error?: string;
+    jobs: IJob[];
+    run_spec: IRunSpec;
+    latest_job_submission?: IJobSubmission;
+    cost: number;
     service: IRunService | null;
 }