feat: show ip info

src/pages/vm.tsx

@@ -6,6 +6,8 @@ import { ApiUrl } from "../const";
 import { EventPublisher } from "@snort/system";
 import { useCallback, useEffect, useState } from "react";
 import VpsPayment from "../components/vps-payment";
+import CostLabel from "../components/cost";
+import { AsyncButton } from "../components/button";
 
 export default function VmPage() {
   const { state } = useLocation() as { state?: VmInstance };
@@ -39,7 +41,24 @@ export default function VmPage() {
   }
   return (
     <div className="flex flex-col gap-4">
-      <VpsInstanceRow vm={state} />
+      <VpsInstanceRow vm={state} actions={false} />
+      {action === undefined && <>
+        <div className="text-xl">Renewal</div>
+        <div className="flex justify-between items-center">
+          <div>{new Date(state.expires).toDateString()}</div>
+          {state.template?.cost_plan && <div><CostLabel cost={state.template?.cost_plan} /></div>}
+        </div>
+        <AsyncButton onClick={() => navigate("/vm/renew", { state })}>
+          Extend Now
+        </AsyncButton>
+        <div className="text-xl">Network</div>
+        <div className="flex gap-4">
+          {(state.ip_assignments?.length ?? 0) === 0 && <div className="text-sm text-red-500">No IP's assigned</div>}
+          {state.ip_assignments?.map(a => <div key={a.id} className="text-sm bg-neutral-900 px-3 py-1 rounded-lg">
+            {a.ip.split("/")[0]}
+          </div>)}
+        </div>
+      </>}
       {action === "renew" && (
         <>
           <h3>Renew VPS</h3>
@@ -56,6 +75,7 @@ export default function VmPage() {
                 navigate("/vm", {
                   state: newState,
                 });
+                setPayment(undefined);
               }}
             />
           )}