feat(provider): settings feature (#476)

* added server-access and server-form files

* added wallet import page - wip, fixed issue with file upload in server access forms

* added become-provider steps ui

* server access step added with state support

* added provider config and provider attribute screen

* added provider process with hoc to prevent access to pages

* added progress for becoming prvider for final stage

* Code clean up and added navigation logic to homecontainer

* package lock updated

* more cleanup and remove general warnings

* removed unused npm package

* fix minor error on api

* Added dashboard and actions page

* change status api endpoint

* added stat line and pie charts

* Added console apis to get dashboard data and show appropriate details

* fixed actions and changed home component

* token varification and refresh token fix

* changed wallet connect from wallet status to wallet provider

* fixed issue in loading provider status

* fixed home loading issue

* fixed refresh token, added disabled menu items

* fixed build process

* feat(provider): added sentry and docker

* fix(provider): fixed wallet switching and getting status

* feat(provider): reduced number of events in dashboard

* feat(provider): added docker compose changes for provider-console

* feat(provider): added deployments and deployment detail page

* fix(provider): change hours to seconds for calculation purpose)

* feat(provider): added auth for deployments and deployment details page

* feat(provider): added env and removed settingsprovider

* fix(provider): fix lint errors and removed console.logs

* fix(provider): become-provider looped, fixed it

* fix(provider): router and reset process fixed

* fix(provider): removed Get Started button for now

* fix(provider): removed unused import in nav

* fix(provider): change functions to react fc component

* fix(provider): fix lint issues

* fix(provider): change functions to react fc component

* fix(provider): added docker build and fix build related issues

* feat(provider): control machine edit, add from sidebar

* feat(provider): added attributes screen

* fix(provider): control machine auto connect on page load

* fix(provider): fix loading not showing while connecting provider control machine

* fix(provider): close drawer on successfull connection

* feat(provider): change favicon to akash favicon

* feat(provider): provider add, edit and remove and show acitons list page

* fix(provider): fix url when provider process finish

* feat(provider): provider pricing feature added

* feat(provider): added pricing update and extracted provider context

* fix(provider): auto import and lint issues fixed

* feat(provider): added restart provider feature and settings page with more settings

* fix(provider): fix lint issues

* fix(provider): pricing loading screen fix

* fix(provider): merge issues with main

* fix(provider): pricing update fix

* chore: package-lock modified

* fix(provider): issue related to string coming empty

apps/provider-console/src/components/layout/Sidebar.tsx

@@ -78,9 +78,9 @@ export const Sidebar: React.FC<Props> = ({ isMobileOpen, handleDrawerToggle, isN
         {
           title: "Settings",
           icon: props => <Settings {...props} />,
-          url: "#",
-          activeRoutes: ["#"],
-          disabled: true
+          url: UrlService.settings(),
+          activeRoutes: [UrlService.settings()],
+          disabled: false
         }
       ]
     },

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 (
+      <Layout>
+        <Alert>Please update control machine before accessing provider settings</Alert>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="flex items-center">
+        <div className="w-10 flex-1">
+          <Title>Settings</Title>
+        </div>
+      </div>
+
+      <div className="mt-8 space-y-8">
+        <div className="rounded-lg border p-6">
+          <h2 className="text-xl font-semibold">Restart Provider</h2>
+          <p className="mt-2 text-gray-600">Restart your provider instance. This may cause temporary service interruption.</p>
+          <Button onClick={() => restartProvider()} className="mt-4" disabled={isRestartLoading}>
+            {isRestartLoading ? "Restarting..." : "Restart Provider"}
+          </Button>
+          <div className="mt-4">{showSuccess && <div className="text-green-500">Provider restarted successfully</div>}</div>
+        </div>
+
+        <div className="rounded-lg border p-6">
+          <h2 className="text-xl font-semibold">Upgrade Provider</h2>
+          <p className="mt-2 text-gray-600">Upgrade your provider to the latest version.</p>
+          <Button onClick={() => upgradeProvider()} className="mt-4" variant="outline">
+            Upgrade Provider
+          </Button>
+        </div>
+
+        <div className="rounded-lg border p-6">
+          <h2 className="text-xl font-semibold">Provider URL</h2>
+          <p className="mt-2 text-gray-600">Update the URL for your provider service.</p>
+          <div className="mt-4 flex gap-4">
+            <Input
+              value={url || stripProviderPrefixAndPort(providerDetails?.hostUri || "")}
+              onChange={e => setUrl(e.target.value)}
+              placeholder={"Enter new URL"}
+              error={urlError ? true : undefined}
+              className={cn("min-w-[400px]")}
+            />
+            <Button onClick={handleUrlUpdate}>Update URL</Button>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default withAuth(SettingsPage);

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";
-}
+}
+
+export const stripProviderPrefixAndPort = (url: string) => {
+  return url
+    .replace(/^https?:\/\/provider\./, '') // Remove https://provider. or http://provider.
+    .replace(/:\d+$/, ''); // Remove port number at the end
+};