fully swapped

onyx-dot-app · Oct 30, 2024 · bfe827c · bfe827c
1 parent 139d03c
commit bfe827c
Show file tree

Hide file tree

Showing 15 changed files with 307 additions and 324 deletions.
diff --git a/web/src/app/admin/configuration/search/page.tsx b/web/src/app/admin/configuration/search/page.tsx
@@ -3,7 +3,8 @@
 import { ThreeDotsLoader } from "@/components/Loading";
 import { AdminPageTitle } from "@/components/admin/Title";
 import { errorHandlingFetcher } from "@/lib/fetcher";
-import { Text, Title } from "@tremor/react";
+import Text from "@/components/ui/text";
+import Title from "@/components/ui/title";
 import { Button } from "@/components/ui/button";
 import useSWR from "swr";
 import { ModelPreview } from "../../../../components/embedding/ModelSelector";

diff --git a/web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx b/web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx
@@ -280,7 +280,7 @@ export function ProviderCreationModal({
               </div>
 
               {errorMsg && (
-                <Callout title="Error" color="red">
+                <Callout title="Error" type="danger">
                   {errorMsg}
                 </Callout>
               )}

diff --git a/web/src/app/admin/token-rate-limits/page.tsx b/web/src/app/admin/token-rate-limits/page.tsx
@@ -2,7 +2,7 @@
 
 import { AdminPageTitle } from "@/components/admin/Title";
 import { Button } from "@/components/ui/button";
-import { Tabs, TablList } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import Text from "@/components/ui/text";
 import { useState } from "react";
 import { FiGlobe, FiUser, FiUsers } from "react-icons/fi";
@@ -148,44 +148,54 @@ function Main() {
       </Button>
 
       {isPaidEnterpriseFeaturesEnabled && (
-        <TabGroup className="mt-6" index={tabIndex} onIndexChange={setTabIndex}>
-          <TabList variant="line">
-            <Tab icon={FiGlobe}>Global</Tab>
-            <Tab icon={FiUser}>User</Tab>
-            <Tab icon={FiUsers}>User Groups</Tab>
-          </TabList>
-          <TabPanels className="mt-6">
-            <TabPanel>
-              <GenericTokenRateLimitTable
-                fetchUrl={GLOBAL_TOKEN_FETCH_URL}
-                title={"Global Token Rate Limits"}
-                description={GLOBAL_DESCRIPTION}
-              />
-            </TabPanel>
-            <TabPanel>
-              <GenericTokenRateLimitTable
-                fetchUrl={USER_TOKEN_FETCH_URL}
-                title={"User Token Rate Limits"}
-                description={USER_DESCRIPTION}
-              />
-            </TabPanel>
-            <TabPanel>
-              <GenericTokenRateLimitTable
-                fetchUrl={USER_GROUP_FETCH_URL}
-                title={"User Group Token Rate Limits"}
-                description={USER_GROUP_DESCRIPTION}
-                responseMapper={(data: Record<string, TokenRateLimit[]>) =>
-                  Object.entries(data).flatMap(([group_name, elements]) =>
-                    elements.map((element) => ({
-                      ...element,
-                      group_name,
-                    }))
-                  )
-                }
-              />
-            </TabPanel>
-          </TabPanels>
-        </TabGroup>
+        <Tabs
+          value={tabIndex.toString()}
+          onValueChange={(val) => setTabIndex(parseInt(val))}
+        >
+          <TabsList>
+            <TabsTrigger value="0" className="flex items-center gap-2">
+              <FiGlobe />
+              Global
+            </TabsTrigger>
+            <TabsTrigger value="1" className="flex items-center gap-2">
+              <FiUser />
+              User
+            </TabsTrigger>
+            <TabsTrigger value="2" className="flex items-center gap-2">
+              <FiUsers />
+              User Groups
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="0">
+            <GenericTokenRateLimitTable
+              fetchUrl={GLOBAL_TOKEN_FETCH_URL}
+              title={"Global Token Rate Limits"}
+              description={GLOBAL_DESCRIPTION}
+            />
+          </TabsContent>
+          <TabsContent value="1">
+            <GenericTokenRateLimitTable
+              fetchUrl={USER_TOKEN_FETCH_URL}
+              title={"User Token Rate Limits"}
+              description={USER_DESCRIPTION}
+            />
+          </TabsContent>
+          <TabsContent value="2">
+            <GenericTokenRateLimitTable
+              fetchUrl={USER_GROUP_FETCH_URL}
+              title={"User Group Token Rate Limits"}
+              description={USER_GROUP_DESCRIPTION}
+              responseMapper={(data: Record<string, TokenRateLimit[]>) =>
+                Object.entries(data).flatMap(([group_name, elements]) =>
+                  elements.map((element) => ({
+                    ...element,
+                    group_name,
+                  }))
+                )
+              }
+            />
+          </TabsContent>
+        </Tabs>
       )}
 
       {!isPaidEnterpriseFeaturesEnabled && (

diff --git a/web/src/app/ee/admin/performance/DateRangeSelector.tsx b/web/src/app/ee/admin/performance/DateRangeSelector.tsx
@@ -84,7 +84,11 @@ export function DateRangeSelector({
             mode="range"
             defaultMonth={value?.from}
             selected={value}
-            onSelect={onValueChange}
+            onSelect={(range) => {
+              if (range?.from && range?.to) {
+                onValueChange({ from: range.from, to: range.to });
+              }
+            }}
             numberOfMonths={2}
           />
           <div className="border-t p-3">
@@ -107,133 +111,3 @@ export function DateRangeSelector({
     </div>
   );
 }
-
-interface DateRangePickerItemProps {
-  value: string;
-  from: Date;
-  to?: Date;
-  children: React.ReactNode;
-}
-
-interface DateRangePickerProps {
-  value?: DateRangePickerValue;
-  onValueChange?: (value: DateRangePickerValue) => void;
-  maxDate?: Date;
-  defaultValue?: DateRangePickerValue;
-  className?: string;
-  enableClear?: boolean;
-  selectPlaceholder?: string;
-  children?: React.ReactNode;
-}
-
-export function DateRangePickerItem({
-  value,
-  from,
-  to,
-  children,
-}: DateRangePickerItemProps) {
-  return null;
-}
-
-export function DateRangePicker({
-  value,
-  onValueChange,
-  maxDate,
-  defaultValue,
-  className,
-  enableClear = true,
-  selectPlaceholder = "Select range",
-  children,
-}: DateRangePickerProps) {
-  const [localValue, setLocalValue] = useState<DateRangePickerValue>(
-    defaultValue || {
-      from: undefined,
-      to: undefined,
-      selectValue: undefined,
-    }
-  );
-
-  const handleValueChange = (newValue: DateRangePickerValue) => {
-    setLocalValue(newValue);
-    onValueChange?.(newValue);
-  };
-
-  // Extract preset options from children
-  const presetOptions = React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && child.type === DateRangePickerItem) {
-      return {
-        label: child.props.children,
-        value: {
-          from: child.props.from,
-          to: child.props.to || maxDate || new Date(),
-          selectValue: child.props.value,
-        },
-      };
-    }
-    return null;
-  })?.filter(Boolean);
-
-  return (
-    <div className={cn("grid gap-2", className)}>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            className={cn(
-              "w-[300px] justify-start text-left font-normal",
-              !value && "text-muted-foreground"
-            )}
-          >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {value?.selectValue ? (
-              presetOptions?.find(
-                (opt) => opt.value.selectValue === value.selectValue
-              )?.label
-            ) : value?.from ? (
-              value.to ? (
-                <>
-                  {format(value.from, "LLL dd, y")} -{" "}
-                  {format(value.to, "LLL dd, y")}
-                </>
-              ) : (
-                format(value.from, "LLL dd, y")
-              )
-            ) : (
-              <span>{selectPlaceholder}</span>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <div className="space-y-4 p-3">
-            {presetOptions?.map((preset) => (
-              <Button
-                key={preset.value.selectValue}
-                variant="ghost"
-                className="w-full justify-start"
-                onClick={() => handleValueChange(preset.value)}
-              >
-                {preset.label}
-              </Button>
-            ))}
-          </div>
-          <Separator className="my-2" />
-          <Calendar
-            initialFocus
-            mode="range"
-            defaultMonth={value?.from}
-            selected={{ from: value?.from, to: value?.to }}
-            onSelect={(range) =>
-              handleValueChange({
-                from: range?.from,
-                to: range?.to,
-                selectValue: undefined,
-              })
-            }
-            numberOfMonths={2}
-            max={maxDate}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}
diff --git a/web/src/app/ee/admin/performance/query-history/FeedbackBadge.tsx b/web/src/app/ee/admin/performance/query-history/FeedbackBadge.tsx
@@ -10,28 +10,28 @@ export function FeedbackBadge({
   switch (feedback) {
     case "like":
       feedbackBadge = (
-        <Badge color="green" className="text-sm">
+        <Badge variant="success" className="text-sm">
           Like
         </Badge>
       );
       break;
     case "dislike":
       feedbackBadge = (
-        <Badge color="red" className="text-sm">
+        <Badge variant="destructive" className="text-sm">
           Dislike
         </Badge>
       );
       break;
     case "mixed":
       feedbackBadge = (
-        <Badge color="purple" className="text-sm">
+        <Badge variant="purple" className="text-sm">
           Mixed
         </Badge>
       );
       break;
     default:
       feedbackBadge = (
-        <Badge color="gray" className="text-sm">
+        <Badge variant="outline" className="text-sm">
           N/A
         </Badge>
       );

diff --git a/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx b/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
@@ -6,6 +6,7 @@ import {
   TableRow,
   TableBody,
   TableCell,
+  TableHeader,
 } from "@/components/ui/table";
 import Text from "@/components/ui/text";
 
@@ -78,7 +79,6 @@ function SelectFeedbackType({
         <Select
           value={value}
           onValueChange={onValueChange as (value: string) => void}
-          enableClear={false}
         >
           <SelectItem value="all" icon={FiMinus}>
             Any
@@ -119,7 +119,14 @@ export function QueryHistoryTable() {
 
               <DateRangeSelector
                 value={timeRange}
-                onValueChange={setTimeRange}
+                onValueChange={(value) => {
+                  if (value) {
+                    setTimeRange({
+                      ...value,
+                      selectValue: timeRange.selectValue,
+                    });
+                  }
+                }}
               />
             </div>
 

diff --git a/web/src/app/ee/admin/performance/usage/DanswerBotChart.tsx b/web/src/app/ee/admin/performance/usage/DanswerBotChart.tsx
@@ -1,10 +1,10 @@
 import { ThreeDotsLoader } from "@/components/Loading";
 import { getDatesList, useDanswerBotAnalytics } from "../lib";
-import { AreaChart } from "@tremor/react";
 import { DateRangePickerValue } from "@/app/ee/admin/performance/DateRangeSelector";
 import Text from "@/components/ui/text";
 import Title from "@/components/ui/title";
 import CardSection from "@/components/admin/CardSection";
+import { AreaChartDisplay } from "@/components/ui/areaChart";
 
 export function DanswerBotChart({
   timeRange,
@@ -43,8 +43,8 @@ export function DanswerBotChart({
     );
 
     chart = (
-      <AreaChart
-        className="mt-4 h-80"
+      <AreaChartDisplay
+        className="mt-4"
         data={dateRange.map((dateStr) => {
           const danswerBotAnalyticsForDate =
             dateToDanswerBotAnalytics.get(dateStr);

diff --git a/web/src/app/ee/admin/performance/usage/FeedbackChart.tsx b/web/src/app/ee/admin/performance/usage/FeedbackChart.tsx
@@ -1,11 +1,11 @@
 import { ThreeDotsLoader } from "@/components/Loading";
 import { getDatesList, useQueryAnalytics } from "../lib";
-import { AreaChart } from "@tremor/react";
 import Text from "@/components/ui/text";
 import Title from "@/components/ui/title";
 
 import { DateRangePickerValue } from "@/app/ee/admin/performance/DateRangeSelector";
 import CardSection from "@/components/admin/CardSection";
+import { AreaChartDisplay } from "@/components/ui/areaChart";
 
 export function FeedbackChart({
   timeRange,
@@ -43,8 +43,8 @@ export function FeedbackChart({
     );
 
     chart = (
-      <AreaChart
-        className="mt-4 h-80"
+      <AreaChartDisplay
+        className="mt-4"
         data={dateRange.map((dateStr) => {
           const queryAnalyticsForDate = dateToQueryAnalytics.get(dateStr);
           return {