diff --git a/apps/provider-console/src/components/layout/Sidebar.tsx b/apps/provider-console/src/components/layout/Sidebar.tsx index 443de05c9..455aa1925 100644 --- a/apps/provider-console/src/components/layout/Sidebar.tsx +++ b/apps/provider-console/src/components/layout/Sidebar.tsx @@ -78,9 +78,9 @@ export const Sidebar: React.FC = ({ isMobileOpen, handleDrawerToggle, isN { title: "Settings", icon: props => , - url: "#", - activeRoutes: ["#"], - disabled: true + url: UrlService.settings(), + activeRoutes: [UrlService.settings()], + disabled: false } ] }, diff --git a/apps/provider-console/src/pages/settings/index.tsx b/apps/provider-console/src/pages/settings/index.tsx new file mode 100644 index 000000000..6ac27851d --- /dev/null +++ b/apps/provider-console/src/pages/settings/index.tsx @@ -0,0 +1,112 @@ +import { useState } from "react"; +import { Alert, Button, Input } from "@akashnetwork/ui/components"; +import { cn } from "@akashnetwork/ui/utils"; +import { z } from "zod"; + +import { Layout } from "@src/components/layout/Layout"; +import { Title } from "@src/components/shared/Title"; +import { withAuth } from "@src/components/shared/withAuth"; +import { useControlMachine } from "@src/context/ControlMachineProvider"; +import { useProvider } from "@src/context/ProviderContext"; +import restClient from "@src/utils/restClient"; +import { sanitizeMachineAccess } from "@src/utils/sanityUtils"; +import { stripProviderPrefixAndPort } from "@src/utils/urlUtils"; + +const urlSchema = z.string().url(); + +const SettingsPage: React.FC = () => { + const [url, setUrl] = useState(""); + const [urlError, setUrlError] = useState(""); + const [isRestartLoading, setIsRestartLoading] = useState(false); + const [showSuccess, setShowSuccess] = useState(false); + + const { providerDetails } = useProvider(); + const { activeControlMachine } = useControlMachine(); + + const handleUrlUpdate = () => { + try { + urlSchema.parse(url); + + // TODO: call update provider url api here + setUrlError(""); + } catch (error) { + setUrlError("Please enter a valid URL"); + } + }; + + const restartProvider = async () => { + try { + setIsRestartLoading(true); + const request = { + control_machine: sanitizeMachineAccess(activeControlMachine) + }; + const response = await restClient.post("/restart-provider", request); + if (response) { + setShowSuccess(true); + setTimeout(() => setShowSuccess(false), 20000); + } + } catch (error) { + console.error(error); + } finally { + setIsRestartLoading(false); + } + }; + + const upgradeProvider = () => { + // TODO: call upgrade provider api here + }; + + if (!activeControlMachine) { + return ( + + Please update control machine before accessing provider settings + + ); + } + + return ( + +
+
+ Settings +
+
+ +
+
+

Restart Provider

+

Restart your provider instance. This may cause temporary service interruption.

+ +
{showSuccess &&
Provider restarted successfully
}
+
+ +
+

Upgrade Provider

+

Upgrade your provider to the latest version.

+ +
+ +
+

Provider URL

+

Update the URL for your provider service.

+
+ setUrl(e.target.value)} + placeholder={"Enter new URL"} + error={urlError ? true : undefined} + className={cn("min-w-[400px]")} + /> + +
+
+
+
+ ); +}; + +export default withAuth(SettingsPage); diff --git a/apps/provider-console/src/utils/urlUtils.ts b/apps/provider-console/src/utils/urlUtils.ts index dba63c4d3..b4f6ef10a 100644 --- a/apps/provider-console/src/utils/urlUtils.ts +++ b/apps/provider-console/src/utils/urlUtils.ts @@ -18,9 +18,16 @@ export class UrlService { static home = () => "/"; static deployments = () => "/deployments"; static attributes = () => "/attributes"; + static settings = () => "/settings"; static getStarted = () => "/get-started"; static privacyPolicy = () => "/privacy-policy"; static termsOfService = () => "/terms-of-service"; static actions = () => "/actions"; static pricing = () => "/pricing"; -} \ No newline at end of file +} + +export const stripProviderPrefixAndPort = (url: string) => { + return url + .replace(/^https?:\/\/provider\./, '') // Remove https://provider. or http://provider. + .replace(/:\d+$/, ''); // Remove port number at the end +};