Merge branch 'feature/observability-checkpoint-2' of github.com:Agent…

…a-AI/agenta into feature/observability-checkpoint-2

agenta-backend/agenta_backend/routers/app_router.py

@@ -678,8 +678,16 @@ async def list_environments(
             app_id=app_id, project_id=request.state.project_id
         )
         logger.debug(f"environments_db: {environments_db}")
+
+        fixed_order = ["development", "staging", "production"]
+
+        sorted_environments = sorted(
+            environments_db, key=lambda env: (fixed_order + [env.name]).index(env.name)
+        )
+
         return [
-            await converters.environment_db_to_output(env) for env in environments_db
+            await converters.environment_db_to_output(env)
+            for env in sorted_environments
         ]
     except Exception as e:
         logger.exception(f"An error occurred: {str(e)}")

agenta-backend/agenta_backend/services/db_manager.py

@@ -1719,29 +1719,26 @@ async def create_environment_revision(
 async def list_app_variant_revisions_by_variant(
     app_variant: AppVariantDB, project_id: str
 ) -> List[AppVariantRevisionsDB]:
-    """Returns list of app variant revision for the given app variant
+    """Returns list of app variant revisions for the given app variant.
 
     Args:
-        app_variant (AppVariantDB): The app variant to retrieve environments for.
+        app_variant (AppVariantDB): The app variant to retrieve revisions for.
         project_id (str): The ID of the project.
 
     Returns:
         List[AppVariantRevisionsDB]: A list of AppVariantRevisionsDB objects.
     """
-
     async with engine.session() as session:
         base_query = (
             select(AppVariantRevisionsDB)
             .filter_by(variant_id=app_variant.id, project_id=uuid.UUID(project_id))
             .options(
-                joinedload(AppVariantRevisionsDB.variant_revision)
-                .joinedload(AppVariantDB.app)
-                .load_only(AppDB.app_name)
-            )
-            .options(
-                joinedload(AppVariantRevisionsDB.modified_by).load_only(
+                joinedload(AppVariantRevisionsDB.variant_revision.of_type(AppVariantDB))
+                .joinedload(AppVariantDB.app.of_type(AppDB))
+                .load_only(AppDB.app_name),
+                joinedload(AppVariantRevisionsDB.modified_by.of_type(UserDB)).load_only(
                     UserDB.username, UserDB.email
-                )
+                ),
             )
         )
 

agenta-web/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import {Avatar as MainAvatar} from "antd"
+import {getColorPairFromStr} from "@/lib/helpers/colors"
+import {getInitials} from "@/lib/helpers/utils"
+
+type Props = {
+    name: string
+} & React.ComponentProps<typeof MainAvatar>
+
+const Avatar: React.FC<Props> = ({name, ...props}) => {
+    const color = getColorPairFromStr(name || "")
+
+    return (
+        <MainAvatar
+            shape="square"
+            style={{
+                backgroundColor: color.backgroundColor,
+                color: color.textColor,
+            }}
+            {...props}
+        >
+            {getInitials(name)}
+        </MainAvatar>
+    )
+}
+
+export default Avatar

agenta-web/src/components/Filters/Sort.tsx

@@ -99,10 +99,18 @@ const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
                 .toISOString()
                 .split(".")[0]
         } else if (sortData === "custom" && (customRange?.startTime || customRange?.endTime)) {
-            if (customRange.startTime)
-                customRangeTime.startTime = customRange.startTime.toISOString().split(".")[0]
-            if (customRange.endTime)
-                customRangeTime.endTime = customRange.endTime.toISOString().split(".")[0]
+            if (customRange.startTime) {
+                customRangeTime.startTime = dayjs(customRange.startTime)
+                    .utc()
+                    .toISOString()
+                    .split(".")[0]
+            }
+            if (customRange.endTime) {
+                customRangeTime.endTime = dayjs(customRange.endTime)
+                    .utc()
+                    .toISOString()
+                    .split(".")[0]
+            }
         } else if (sortData === "all time") {
             sortedTime = "1970-01-01T00:00:00"
         }

agenta-web/src/components/HumanEvaluations/AbTestingEvaluation.tsx

@@ -2,7 +2,6 @@ import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEval
 import {HumanEvaluationListTableDataType, JSSTheme} from "@/lib/Types"
 import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
 import {EvaluationType} from "@/lib/enums"
-import {getColorFromStr} from "@/lib/helpers/colors"
 import {getVotesPercentage} from "@/lib/helpers/evaluate"
 import {getInitials, isDemo} from "@/lib/helpers/utils"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"

agenta-web/src/components/Sidebar/Sidebar.tsx

@@ -1,17 +1,6 @@
 import React, {useEffect, useMemo, useState} from "react"
 import {useRouter} from "next/router"
-import {
-    Avatar,
-    Button,
-    Divider,
-    Dropdown,
-    Layout,
-    Menu,
-    Space,
-    Tag,
-    Tooltip,
-    Typography,
-} from "antd"
+import {Button, Divider, Dropdown, Layout, Menu, Space, Tag, Tooltip, Typography} from "antd"
 import Logo from "../Logo/Logo"
 import Link from "next/link"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
@@ -20,13 +9,13 @@ import {createUseStyles} from "react-jss"
 import {useLocalStorage} from "usehooks-ts"
 import {SidebarConfig, useSidebarConfig} from "./config"
 import {JSSTheme} from "@/lib/Types"
-import {getColorFromStr} from "@/lib/helpers/colors"
-import {getInitials, isDemo} from "@/lib/helpers/utils"
+import {isDemo} from "@/lib/helpers/utils"
 import {useProfileData} from "@/contexts/profile.context"
 import {useSession} from "@/hooks/useSession"
 import {CaretDown, Gear, SignOut} from "@phosphor-icons/react"
 import AlertPopup from "../AlertPopup/AlertPopup"
 import {dynamicContext} from "@/lib/helpers/dynamic"
+import Avatar from "@/components/Avatar/Avatar"
 
 const {Sider} = Layout
 const {Text} = Typography
@@ -117,10 +106,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             },
         },
     },
-    userAvatar: {
-        backgroundColor: theme.colorPrimaryBgHover,
-        color: theme.colorPrimary,
-    },
     menuHeader: {
         padding: `${theme.paddingXS}px ${theme.padding}px`,
         color: theme.colorTextDescription,
@@ -375,13 +360,7 @@ const Sidebar: React.FC = () => {
                                             key: org.id,
                                             label: (
                                                 <Space>
-                                                    <Avatar
-                                                        size={"small"}
-                                                        className={classes.userAvatar}
-                                                        shape="square"
-                                                    >
-                                                        {getInitials(org.name)}
-                                                    </Avatar>
+                                                    <Avatar size="small" name={org.name} />
                                                     <Text>{org.name}</Text>
                                                 </Space>
                                             ),
@@ -428,15 +407,7 @@ const Sidebar: React.FC = () => {
                             >
                                 <Button className={classes.avatarMainContainer}>
                                     <div className={classes.avatarContainer}>
-                                        <Avatar
-                                            shape="square"
-                                            style={{
-                                                fontSize: 18,
-                                            }}
-                                            className={classes.userAvatar}
-                                        >
-                                            {getInitials(selectedOrg.name)}
-                                        </Avatar>
+                                        <Avatar className="text-lg" name={selectedOrg.name} />
 
                                         {!collapsed && (
                                             <div>

agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx

@@ -15,7 +15,7 @@ import {Button, DropdownProps, Space, Spin, Tag, Tooltip, Typography} from "antd
 import React, {useEffect, useMemo, useRef, useState} from "react"
 import {createUseStyles} from "react-jss"
 import {getFilterParams, getTypedValue, removeCorrectAnswerPrefix} from "@/lib/helpers/evaluate"
-import {getColorFromStr, getRandomColors} from "@/lib/helpers/colors"
+import {getColorPairFromStr, getRandomColors} from "@/lib/helpers/colors"
 import {CheckOutlined, CloseCircleOutlined, DownloadOutlined, UndoOutlined} from "@ant-design/icons"
 import {getAppValues} from "@/contexts/app.context"
 import {useQueryParam} from "@/hooks/useQuery"
@@ -114,10 +114,10 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         const previous = new Set<string>()
         const colors = getRandomColors()
         return variants.map((v) => {
-            const color = getColorFromStr(v.evaluationId)
-            if (previous.has(color)) return colors.find((c) => !previous.has(c))!
-            previous.add(color)
-            return color
+            const {textColor} = getColorPairFromStr(v.evaluationId)
+            if (previous.has(textColor)) return colors.find((c) => !previous.has(c))!
+            previous.add(textColor)
+            return textColor
         })
     }, [variants])
 

agenta-web/src/components/pages/observability/ObservabilityDashboard.tsx

@@ -213,7 +213,9 @@ const ObservabilityDashboard = () => {
             }),
             render: (_, record) => {
                 return (
-                    <div>{dayjs(record.lifecycle?.created_at).format("HH:mm:ss DD MMM YYYY")}</div>
+                    <div>
+                        {dayjs(record.lifecycle?.created_at).local().format("HH:mm:ss DD MMM YYYY")}
+                    </div>
                 )
             },
         },

agenta-web/src/components/pages/observability/drawer/TraceContent.tsx

@@ -331,9 +331,13 @@ const TraceContent = ({activeTrace}: TraceContentProps) => {
                     <ResultTag
                         value1={
                             <div className={classes.resultTag}>
-                                {dayjs(activeTrace.time.start).format("DD/MM/YYYY, hh:mm:ss A")}
+                                {dayjs(activeTrace.time.start)
+                                    .local()
+                                    .format("DD/MM/YYYY, hh:mm:ss A")}
                                 <ArrowRight size={14} />{" "}
-                                {dayjs(activeTrace.time.end).format("DD/MM/YYYY, hh:mm:ss A")}
+                                {dayjs(activeTrace.time.end)
+                                    .local()
+                                    .format("DD/MM/YYYY, hh:mm:ss A")}
                             </div>
                         }
                     />

agenta-web/src/lib/helpers/colors.ts

@@ -17,29 +17,6 @@ const gradients = [
     "linear-gradient(to bottom right, #60A5FA, #3B82F6)",
 ]
 
-const colors = [
-    "#FF5733",
-    "#00AABB",
-    "#FFC300",
-    "#FF0066",
-    "#22DD55",
-    "#FF3399",
-    "#FF9900",
-    "#44FFAA",
-    "#FF3366",
-    "#0088FF",
-    "#FFCC00",
-    "#DD33FF",
-    "#33FF99",
-    "#FF0033",
-    "#55AAFF",
-    "#FF6600",
-    "#FF00CC",
-    "#11FF44",
-    "#FF9933",
-    "#0099FF",
-]
-
 const tagColors = [
     "blue",
     "purple",
@@ -56,12 +33,28 @@ const tagColors = [
     "gold",
 ]
 
+const colorPairs = [
+    {backgroundColor: "#BAE0FF", textColor: "#1677FF"},
+    {backgroundColor: "#D9F7BE", textColor: "#389E0D"},
+    {backgroundColor: "#efdbff", textColor: "#722ED1"},
+    {backgroundColor: "#fff1b8", textColor: "#AD6800"},
+    {backgroundColor: "#D1F5F1", textColor: "#13C2C2"},
+    {backgroundColor: "#ffd6e7", textColor: "#EB2F96"},
+    {backgroundColor: "#f7cfcf", textColor: "#D61010"},
+    {backgroundColor: "#eaeff5", textColor: "#758391"},
+    {backgroundColor: "#D1E4E8", textColor: "#5E7579"},
+    {backgroundColor: "#F5E6D3", textColor: "#825E31"},
+    {backgroundColor: "#F9F6C1", textColor: "#84803A"},
+    {backgroundColor: "#F4E6E4", textColor: "#9C706A"},
+]
+
 export const getGradientFromStr = (value: string) => {
     return gradients[stringToNumberInRange(value, 0, gradients.length - 1)]
 }
 
-export const getColorFromStr = (value: string) => {
-    return colors[stringToNumberInRange(value, 0, colors.length - 1)]
+export const getColorPairFromStr = (value: string) => {
+    const index = stringToNumberInRange(value, 0, colorPairs.length - 1)
+    return colorPairs[index]
 }
 
 export const fadeColor = (hex: string, opacity: number) => {
@@ -80,4 +73,4 @@ export const fadeColor = (hex: string, opacity: number) => {
 
 export const getTagColors = () => [...tagColors]
 
-export const getRandomColors = () => [...colors]
+export const getRandomColors = () => colorPairs.map((color) => color.textColor)