update theme look and feel

genia-dev · Dec 25, 2023 · 6f8e077 · 6f8e077
1 parent 9ced327
commit 6f8e077
Show file tree

Hide file tree

Showing 8 changed files with 547 additions and 8 deletions.
diff --git a/vibraniumdome-app/src/app/components/layout/sidebar.tsx b/vibraniumdome-app/src/app/components/layout/sidebar.tsx
@@ -46,6 +46,7 @@ export default function Sidebar({ className }: SidebarProps) {
                 <Separator />
                 <div className="w-full flex justify-end">
                     <Button
+                        variant="outline" size="icon"
                         onClick={handleToggle}
                         className={cn("bg-background h-10 w-10 mx-2 px-2", isOpen && "rotate-180")}
                     >

diff --git a/vibraniumdome-app/src/app/components/layout/user-nav.tsx b/vibraniumdome-app/src/app/components/layout/user-nav.tsx
@@ -30,7 +30,7 @@ export function UserNav({ user }: Props) {
                     <div className="flex flex-col space-y-1 leading-none">
                         {user.name && <p className="font-medium">{user.name}</p>}
                         {user.email && (
-                            <p className="w-[200px] truncate text-sm text-zinc-700">
+                            <p className="w-[200px] truncate text-sm text-muted-foreground">
                                 {user.email}
                             </p>
                         )}
@@ -43,7 +43,7 @@ export function UserNav({ user }: Props) {
                 {/* <DropdownMenuSeparator /> */}
                 <DropdownMenuItem asChild>
                     <Button
-                        variant="outline"
+                        variant="secondary"
                         className="w-full"
                         onClick={() => {
                             void signOut();

diff --git a/vibraniumdome-app/src/app/dashboard/page.tsx b/vibraniumdome-app/src/app/dashboard/page.tsx
@@ -15,7 +15,7 @@ export default async function LogsTable() {
   const token = session?.jwt ?? ""
   const opensearchDashboardUrl = process.env.OPENSEARCH_DASHBOARD_URL
   const iframesrc = opensearchDashboardUrl?.replace('<JWT>', token);
-  return <iframe src={iframesrc} height="2000" width="100%"></iframe>
+  return <iframe className="bg-background" src={iframesrc} height="100%" width="100%"/>
   // return (
   //     <div className="hidden flex-col md:flex">
   //       <div className="border-b">

diff --git a/vibraniumdome-app/src/app/policies/page.tsx b/vibraniumdome-app/src/app/policies/page.tsx
@@ -50,7 +50,7 @@ export default async function PoliciesTable() {
 
         <div className="flex-1 space-y-4 p-8 pt-6">
           <div className="flex items-center justify-between space-y-2">
-            <h2 className="text-xl font-semibold">Policies</h2>
+            <h2 className="text-2xl font-semibold">Policies</h2>
             <div className="flex items-center space-x-2">
               <CreatePolicyDialog/>
             </div>

diff --git a/vibraniumdome-app/src/app/users/components/create-policy-dialog.tsx b/vibraniumdome-app/src/app/users/components/create-policy-dialog.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { Button } from "~/app/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/app/components/ui/dialog"
+import { Input } from "~/app/components/ui/input"
+import { Label } from "~/app/components/ui/label"
+import { Textarea } from "~/app/components/ui/textarea"
+import * as React from "react"
+import { useRouter } from "next/navigation";
+import { api } from "~/trpc/react";
+
+export type Policy = {
+    id: string
+    name: string
+    llmAppName: number
+    content: string
+    createdAt: string
+  }
+
+export function CreatePolicyDialog() {
+    const [open, setOpen] = React.useState(false);
+    const router = useRouter();
+
+    const [policyName, setPolicyName] = React.useState('');
+    const [llmAppName, setLlmAppName] = React.useState('');
+    const textareaRef = React.useRef(null);
+
+    const createPolicy = api.policy.create.useMutation({
+        onSuccess: () => {
+          router.refresh();
+        },
+      });
+
+    const saveChanges = async () => {
+        setOpen(false);
+        await createPolicy.mutate({name: policyName,
+                                    llmAppName: llmAppName,
+                                    // @ts-ignore
+                                    content: textareaRef.current?.value,
+                                })
+    };
+
+    const defaultPolicy = api.policy.getDefaultPolicy.useQuery().data;
+
+    return (
+    <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+            <Button>Create Policy</Button>
+        </DialogTrigger>
+
+        <DialogContent className="sm:max-w-[825px]">
+            <DialogHeader>
+            <DialogTitle>Create policy</DialogTitle>
+            <DialogDescription>
+                Make policy changes. Click save when you're done.
+            </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="policyName" className="text-right">
+                Policy Name
+                </Label>
+                <Input
+                id="name"
+                defaultValue=""
+                className="col-span-3"
+                onChange={(e) => setPolicyName(e.target.value)}
+                />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="llmAppName" className="text-right">
+                LLM App Name
+                </Label>
+                <Input
+                id="llmAppName"
+                defaultValue=""
+                className="col-span-3"
+                onChange={(e) => setLlmAppName(e.target.value)}
+                />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="llmAppName" className="text-right">
+                Policy Content
+                </Label>
+                <Textarea className="col-span-3" 
+                            ref={textareaRef}
+                            defaultValue={JSON.stringify(defaultPolicy?.content, null, 4)}
+                            placeholder=""
+                            />
+            </div>
+            </div>
+            <DialogFooter>
+                <Button type="submit" onClick={saveChanges}>Save changes</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+    )
+
+}