From c8d57f59c7fcc8f2576869be06a239f1959ba8cb Mon Sep 17 00:00:00 2001 From: fabio vincenzi Date: Wed, 27 Mar 2024 12:25:52 +0100 Subject: [PATCH 1/2] Create link for experiment to classic ui --- src/src/components/SideBar/SideBar.tsx | 19 ++-- .../ExperimentHeader/ExperimentHeader.tsx | 26 +++++- .../ExperimentSelectionPopover.tsx | 90 +++++++++++++------ src/src/services/api/api.ts | 36 ++++++-- .../api/namespaces/namespacesService.ts | 34 +++++++ 5 files changed, 159 insertions(+), 46 deletions(-) create mode 100644 src/src/services/api/namespaces/namespacesService.ts diff --git a/src/src/components/SideBar/SideBar.tsx b/src/src/components/SideBar/SideBar.tsx index 249214f9..3a2fb280 100644 --- a/src/src/components/SideBar/SideBar.tsx +++ b/src/src/components/SideBar/SideBar.tsx @@ -19,6 +19,7 @@ import { DOCUMENTATIONS } from 'config/references'; import routes, { IRoute } from 'routes/routes'; +import namespacesService from 'services/api/namespaces/namespacesService'; import { trackEvent } from 'services/analytics'; import { getItem } from 'utils/storage'; @@ -51,18 +52,20 @@ function SideBar(): React.FunctionComponentElement { }, []); useEffect(() => { - fetch(`${getBaseHost()}/admin/namespaces/list`) - .then((response) => response.json()) - .then((data) => - setNamespaces(data.map((item: { code: any }) => item.code)), - ); - - fetch(`${getBaseHost()}${getPrefix()}admin/namespaces/current`) - .then((response) => response.json()) + namespacesService + .fetchCurrentNamespace() + .call() .then((data) => { const selected = data.code; setSelectedNamespace(selected); }); + + namespacesService + .fetchNamespacesList() + .call() + .then((data) => + setNamespaces(data.map((item: { code: any }) => item.code)), + ); }, []); function selectNamespace(event: React.ChangeEvent<{ value: unknown }>) { diff --git a/src/src/pages/Experiment/components/ExperimentHeader/ExperimentHeader.tsx b/src/src/pages/Experiment/components/ExperimentHeader/ExperimentHeader.tsx index 59cd4f6d..13022835 100644 --- a/src/src/pages/Experiment/components/ExperimentHeader/ExperimentHeader.tsx +++ b/src/src/pages/Experiment/components/ExperimentHeader/ExperimentHeader.tsx @@ -1,16 +1,20 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import classNames from 'classnames'; +import { Link as RouteLink } from 'react-router-dom'; import { NavLink, useRouteMatch } from 'react-router-dom'; import moment from 'moment'; import { Skeleton } from '@material-ui/lab'; -import { Tooltip } from '@material-ui/core'; +import { Link, Tooltip } from '@material-ui/core'; import { Button, Icon, Text } from 'components/kit'; import ControlPopover from 'components/ControlPopover/ControlPopover'; import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary'; import { DATE_WITH_SECONDS } from 'config/dates/dates'; +import { getBaseHost } from 'config/config'; + +import namespacesService from 'services/api/namespaces/namespacesService'; import ExperimentNavigationPopover from '../ExperimentNavigationPopover'; @@ -27,6 +31,12 @@ function ExperimentHeader({ getExperimentsData, }: IExperimentHeaderProps): React.FunctionComponentElement { const { url } = useRouteMatch(); + const [selectedNamespace, setSelectedNamespace] = useState(''); + useEffect(() => { + namespacesService.fetchCurrentNamespacePath().then((data) => { + setSelectedNamespace(data); + }); + }, []); return ( @@ -108,6 +118,18 @@ function ExperimentHeader({ (experimentData?.creation_time || 0) * 1000, ).format(DATE_WITH_SECONDS)}`} + +
Open in Classic UI
+ ) : ( ([]); + const [selectedNamespace, setSelectedNamespace] = React.useState(''); + React.useEffect(() => { + namespacesService.fetchCurrentNamespacePath().then((data) => { + setSelectedNamespace(data); + }); + }, []); React.useEffect(() => { setVisibleExperiments(experimentsData || []); @@ -236,35 +245,60 @@ function ExperimentSelectionPopover({ > {shortenExperimentName(experiment?.name)} -
- - +
+ + + {`${moment(experiment.creation_time * 1000).format( + DATE_WITH_SECONDS, + )}`} + +
+ e.stopPropagation()} + style={{ marginLeft: '1rem' }} > - {`${moment(experiment.creation_time * 1000).format( - DATE_WITH_SECONDS, - )}`} - +
+ Open in Classic UI +
+
diff --git a/src/src/services/api/api.ts b/src/src/services/api/api.ts index 003e34c8..feccc959 100644 --- a/src/src/services/api/api.ts +++ b/src/src/services/api/api.ts @@ -1,4 +1,4 @@ -import { getAPIHost } from 'config/config'; +import { getAPIHost, getBaseHost } from 'config/config'; function createAPIRequestWrapper( url: string, @@ -11,7 +11,7 @@ function createAPIRequestWrapper( return { call: (exceptionHandler?: (error: ResponseDataType) => any) => new Promise((resolve: (data: ResponseDataType) => void, reject) => { - fetch(`${getAPIHost()}/${url}`, { ...options, signal }) + fetch(`${url}`, { ...options, signal }) .then(async (response) => { try { if (response.status >= 400) { @@ -65,7 +65,7 @@ function getStream( .join('&'); return createAPIRequestWrapper( - `${url}${ + `${getAPIHost()}/${url}${ options?.method === 'POST' ? '' : queryString ? '?' + queryString : '' }`, { @@ -86,7 +86,7 @@ function getStream1( options?: RequestInit, ) { return createAPIRequestWrapper( - `${url}${ + `${getAPIHost()}/${url}${ options?.method === 'POST' && params ? '?' + new URLSearchParams(params).toString() : '' @@ -103,13 +103,32 @@ function getStream1( ); } +function getFromBaseHost( + url: string, + params?: {}, + options?: RequestInit, +) { + return createAPIRequestWrapper( + `${getBaseHost()}${url}${ + params ? '?' + new URLSearchParams(params).toString() : '' + }`, + { + method: 'GET', + ...options, + headers: getRequestHeaders(), + }, + ); +} + function get( url: string, params?: {}, options?: RequestInit, ) { return createAPIRequestWrapper( - `${url}${params ? '?' + new URLSearchParams(params).toString() : ''}`, + `${getAPIHost()}/${url}${ + params ? '?' + new URLSearchParams(params).toString() : '' + }`, { method: 'GET', ...options, @@ -123,7 +142,7 @@ function post( data: object, options?: RequestInit, ) { - return createAPIRequestWrapper(url, { + return createAPIRequestWrapper(`${getAPIHost()}/${url}`, { method: 'POST', ...options, headers: getRequestHeaders(), @@ -136,7 +155,7 @@ function put( data: object, options?: RequestInit, ) { - return createAPIRequestWrapper(url, { + return createAPIRequestWrapper(`${getAPIHost()}/${url}`, { method: 'PUT', ...options, headers: getRequestHeaders(), @@ -145,7 +164,7 @@ function put( } function remove(url: string, options?: RequestInit) { - return createAPIRequestWrapper(url, { + return createAPIRequestWrapper(`${getAPIHost()}/${url}`, { method: 'DELETE', ...options, }); @@ -164,6 +183,7 @@ function getRequestHeaders() { const API = { get, + getFromBaseHost, getStream, getStream1, post, diff --git a/src/src/services/api/namespaces/namespacesService.ts b/src/src/services/api/namespaces/namespacesService.ts new file mode 100644 index 00000000..60c97596 --- /dev/null +++ b/src/src/services/api/namespaces/namespacesService.ts @@ -0,0 +1,34 @@ +import { getPrefix } from 'config/config'; + +import { IAppData } from 'types/services/models/metrics/metricsAppModel'; +import { IApiRequest } from 'types/services/services'; + +import API from '../api'; + +const endpoints = { + NAMESPACES: '/admin/namespaces/list', + CURRENT_NAMESPACE: `${getPrefix()}admin/namespaces/current`, +}; + +function fetchNamespacesList(): IApiRequest { + return API.getFromBaseHost(endpoints.NAMESPACES); +} + +function fetchCurrentNamespace(): IApiRequest { + return API.getFromBaseHost(endpoints.CURRENT_NAMESPACE); +} + +async function fetchCurrentNamespacePath(): Promise { + const data = await fetchCurrentNamespace().call(); + const selected = data.code; + return selected === 'default' ? '' : `/ns/${data.code}`; +} + +const namespacesService = { + endpoints, + fetchNamespacesList, + fetchCurrentNamespace, + fetchCurrentNamespacePath, +}; + +export default namespacesService; From af47152dff11b6010ac281990332b78bc2b334b2 Mon Sep 17 00:00:00 2001 From: fabio vincenzi Date: Fri, 29 Mar 2024 09:59:11 +0100 Subject: [PATCH 2/2] use icon --- .../components/ExperimentHeader/ExperimentHeader.tsx | 8 +++++++- .../ExperimentSelectionPopover.tsx | 4 ++++ src/src/services/api/namespaces/namespacesService.ts | 4 ++-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/src/pages/Experiment/components/ExperimentHeader/ExperimentHeader.tsx b/src/src/pages/Experiment/components/ExperimentHeader/ExperimentHeader.tsx index 13022835..08d8dd83 100644 --- a/src/src/pages/Experiment/components/ExperimentHeader/ExperimentHeader.tsx +++ b/src/src/pages/Experiment/components/ExperimentHeader/ExperimentHeader.tsx @@ -128,7 +128,13 @@ function ExperimentHeader({ target='_blank' style={{ marginLeft: '2rem' }} > -
Open in Classic UI
+
+ + Open in Classic UI +
) : ( diff --git a/src/src/pages/Experiment/components/ExperimentSelectionPopover/ExperimentSelectionPopover.tsx b/src/src/pages/Experiment/components/ExperimentSelectionPopover/ExperimentSelectionPopover.tsx index 2147b22d..6cdf5187 100644 --- a/src/src/pages/Experiment/components/ExperimentSelectionPopover/ExperimentSelectionPopover.tsx +++ b/src/src/pages/Experiment/components/ExperimentSelectionPopover/ExperimentSelectionPopover.tsx @@ -296,6 +296,10 @@ function ExperimentSelectionPopover({ style={{ marginLeft: '1rem' }} >
+ Open in Classic UI
diff --git a/src/src/services/api/namespaces/namespacesService.ts b/src/src/services/api/namespaces/namespacesService.ts index 60c97596..3b4c3e82 100644 --- a/src/src/services/api/namespaces/namespacesService.ts +++ b/src/src/services/api/namespaces/namespacesService.ts @@ -6,8 +6,8 @@ import { IApiRequest } from 'types/services/services'; import API from '../api'; const endpoints = { - NAMESPACES: '/admin/namespaces/list', - CURRENT_NAMESPACE: `${getPrefix()}admin/namespaces/current`, + NAMESPACES: '/chooser/namespaces', + CURRENT_NAMESPACE: `${getPrefix()}chooser/namespaces/current`, }; function fetchNamespacesList(): IApiRequest {