Skip to content

Commit

Permalink
0.0.17-alpha (#40)
Browse files Browse the repository at this point in the history 
* disable csrf check for development mode

* WIP

* fix api key auth

* Reduce Pezzo Client execution to 1 request

* format

* remove console logs

* add db migration

* WIP

* feat: finish onboarding phase

* fix: race condition

* feat: projects

* remove project selector

* fix formatting

* fix build errors

* add auth context

* lots of stuff

* fix bug and remove unused queries

* fix bug where existing prompt validation does not work

* fix prompt history value to 4 decimal points

* remove console log

* feat: dashboard and metrics (#42)

* basic metric reporting

* relocate prompt tester component

* add schema.graphql to gitignore

* add influxdb env variable to .env + validation

* fix formatting

* remove influx db env variable

* Merge branch 'release/0.0.17-alpha' into feature/metrics

* fix empty state and mismatching headers

* increase gutter and change no data message

* convert name to get

* add linebreak

* remove environment slug

* update docker compose and readme

* remove environmentslug from base executor

* add influxdb volume

* make influx password longer

* update influxdb password

* update influxdb admin password in docker-compose

* fix formatting

* add await to fix race condition

* remove unused imports

* remove settimeout

* fix formatting

* fix: remove env slug & add margins

* fix formatting

---------

Co-authored-by: Itay Elgazar <[email protected]>
  • Loading branch information
@arielweinberger @ItayElgazar
arielweinberger and ItayElgazar authored May 21, 2023
1 parent 18c402a commit 9fa96b9
Show file tree
Hide file tree
Showing 103 changed files with 2,708 additions and 1,770 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,5 @@ Thumbs.db
**/@generated
.nx-container

.env.local
.env.local
schema.graphql
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ npm install

### Spin up development dependencies via Docker Compose

Pezzo relies on Postgres and [Supertokens](https://supertokens.com/). You can spin it up using Docker Compose:
Pezzo relies on Postgres, [InfluxDB](https://github.com/influxdata/influxdb) and [Supertokens](https://supertokens.com/). You can spin it up using Docker Compose:

```
docker-compose -f docker-compose.dev.yaml up
Expand Down
170 changes: 88 additions & 82 deletions apps/console/src/app/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Navigate, Route, Routes } from "react-router-dom";
import { Route, Routes, Navigate, Outlet } from "react-router-dom";
import * as reactRouterDom from "react-router-dom";
import "antd/dist/reset.css";
import "./styles.css";
Expand All @@ -12,99 +12,105 @@ import { EnvironmentsPage } from "./pages/environments";
import { PromptsPage } from "./pages/prompts";
import { PromptPage } from "./pages/prompts/[promptId]";
import { APIKeysPage } from "./pages/api-keys";
import { SideNavigationLayout } from "./components/layout/SideNavigationLayout";

import { initSuperTokens } from "./lib/auth/supertokens";
import { SuperTokensWrapper } from "supertokens-auth-react";
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
import { SessionAuth } from "supertokens-auth-react/recipe/session";
import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
import { InfoPage } from "./pages/InfoPage";
import { ProjectsPage } from "./pages/projects/ProjectsPage";
import { SessionAuth } from "supertokens-auth-react/recipe/session";
import { LayoutWrapper } from "./components/layout/LayoutWrapper";
import { OnboardingPage } from "./pages/onboarding";
import { AuthProvider } from "./lib/providers/AuthProvider";

initSuperTokens();

export function App() {
return (
<>
<ThemeProvider>
<main className="app">
<SuperTokensWrapper>
<QueryClientProvider client={queryClient}>
<CurrentPromptProvider>
<PromptTesterProvider>
<Routes>
{/* We don't render the SideNavigationLayout for non-authorized routes */}
{getSuperTokensRoutesForReactRouterDom(reactRouterDom, [
ThirdPartyEmailPasswordPreBuiltUI,
])}

{/* Authorized routes */}
<Route element={<SideNavigationLayout />}>
<Route index element={<Navigate to="/prompts" />} />
<Route
path="/prompts"
element={
<SessionAuth>
<PromptsPage />
</SessionAuth>
}
/>
<Route
path="/prompts/:promptId"
element={
<SessionAuth>
<PromptPage />
</SessionAuth>
}
/>
<Route
path="/environments"
element={
<SessionAuth>
<EnvironmentsPage />
</SessionAuth>
}
/>
<Route
path="/api-keys"
element={
<SessionAuth>
<APIKeysPage />
</SessionAuth>
}
/>
<Route path="/info" element={<InfoPage />} />
</Route>
</Routes>
</PromptTesterProvider>
</CurrentPromptProvider>
</QueryClientProvider>
</SuperTokensWrapper>
</main>
</ThemeProvider>
</>
// <StyledApp>
// <NxWelcome title="console" />
<ThemeProvider>
<main className="app">
<SuperTokensWrapper>
<QueryClientProvider client={queryClient}>
{/* Non-authorized routes */}
<Routes>
{/* We don't render the LayoutWrapper for non-authorized routes */}
{getSuperTokensRoutesForReactRouterDom(reactRouterDom, [
ThirdPartyEmailPasswordPreBuiltUI,
])}
</Routes>
{/* Authorized routes */}
<Routes>
<Route
element={
<SessionAuth>
<AuthProvider>
<Outlet />
</AuthProvider>
</SessionAuth>
}
>
<Route
path="/onboarding"
element={
<LayoutWrapper withSideNav={false}>
<OnboardingPage />
</LayoutWrapper>
}
/>

// {/* START: routes */}
// {/* These routes and navigation have been generated for you */}
// {/* Feel free to move and update them to fit your needs */}
// <br />
// <hr />
// <br />
// <div role="navigation">
// <ul>
// <li>
// <Link to="/">Home</Link>
// </li>
// <li>
// <Link to="/page-2">Page 2</Link>
// </li>
// </ul>
// </div>
{/* Projects selection */}
<Route
element={
<LayoutWrapper withSideNav={false}>
<Outlet />
</LayoutWrapper>
}
>
<Route index element={<Navigate to="/projects" />} />
<Route path="/projects" element={<ProjectsPage />} />
</Route>

// {/* END: routes */}
// </StyledApp>
{/* In-project routes */}
<Route
path="/projects/:projectId"
element={
<CurrentPromptProvider>
<PromptTesterProvider>
<LayoutWrapper withSideNav={true}>
<Outlet />
</LayoutWrapper>
</PromptTesterProvider>
</CurrentPromptProvider>
}
>
<Route
index
path="/projects/:projectId/prompts"
element={<PromptsPage />}
/>
<Route
path="/projects/:projectId/prompts/:promptId"
element={<PromptPage />}
/>
<Route
path="/projects/:projectId/environments"
element={<EnvironmentsPage />}
/>
<Route
path="/projects/:projectId/api-keys"
element={<APIKeysPage />}
/>
<Route
path="/projects/:projectId/info"
element={<InfoPage />}
/>
</Route>
</Route>
</Routes>
</QueryClientProvider>
</SuperTokensWrapper>
</main>
</ThemeProvider>
);
}

Expand Down
11 changes: 9 additions & 2 deletions apps/console/src/app/components/api-keys/ProviderApiKeyListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import styled from "@emotion/styled";
import { CloseOutlined, EditOutlined, SaveOutlined } from "@ant-design/icons";
import { useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { UPDATE_PROVIDER_API_KEY } from "../../graphql/mutations/provider-api-keys";
import { UPDATE_PROVIDER_API_KEY } from "../../graphql/mutations/api-keys";
import { gqlClient, queryClient } from "../../lib/graphql";
import { CreateProviderApiKeyInput } from "@pezzo/graphql";
import { useEffect } from "react";
import { useCurrentProject } from "../../lib/providers/CurrentProjectContext";

const APIKeyContainer = styled.div`
display: flex;
Expand All @@ -25,12 +26,14 @@ export const ProviderApiKeyListItem = ({
value,
iconBase64,
}: Props) => {
const { project } = useCurrentProject();
const updateKeyMutation = useMutation({
mutationFn: (data: CreateProviderApiKeyInput) =>
gqlClient.request(UPDATE_PROVIDER_API_KEY, {
data: {
provider: data.provider,
value: data.value,
projectId: data.projectId,
},
}),
onSuccess: () => {
Expand All @@ -52,7 +55,11 @@ export const ProviderApiKeyListItem = ({
};

const handleSave = async () => {
await updateKeyMutation.mutateAsync({ provider, value: editValue });
await updateKeyMutation.mutateAsync({
provider,
value: editValue,
projectId: project.id,
});
setIsEditing(false);
};

Expand Down
3 changes: 3 additions & 0 deletions apps/console/src/app/components/environments/CreateEnvironmentModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { slugify } from "../../lib/utils/string-utils";
import { CREATE_ENVIRONMENT } from "../../graphql/mutations/environments";
import { CreateEnvironmentMutation } from "@pezzo/graphql";
import { GraphQLErrorResponse } from "../../graphql/types";
import { useCurrentProject } from "../../lib/providers/CurrentProjectContext";

interface Props {
open: boolean;
Expand All @@ -19,6 +20,7 @@ type Inputs = {
};

export const CreateEnvironmentModal = ({ open, onClose, onCreated }: Props) => {
const { project } = useCurrentProject();
const [form] = Form.useForm<Inputs>();

const { mutate, error } = useMutation<
Expand All @@ -31,6 +33,7 @@ export const CreateEnvironmentModal = ({ open, onClose, onCreated }: Props) => {
data: {
slug: data.slug,
name: data.name,
projectId: project.id,
},
}),
onSuccess: (data) => {
Expand Down
44 changes: 44 additions & 0 deletions apps/console/src/app/components/layout/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Breadcrumb, Layout, Menu, Space } from "antd";
import styled from "@emotion/styled";
import LogoSquare from "../../../assets/logo.svg";
import { colors } from "../../lib/theme/colors";

const Logo = styled.img`
height: 40px;
display: block;
`;

export const Header = () => {
return (
<Layout.Header
style={{
padding: 20,
position: "sticky",
top: 0,
zIndex: 1,
width: "100%",
display: "flex",
alignItems: "center",
background: "#141414",
borderBottom: `1px solid ${colors.neutral["700"]}`,
}}
>
<div style={{ display: "flex", alignItems: "center" }}>
<Space size="large">
<Logo src={LogoSquare} alt="Logo" />
</Space>
</div>

<div
style={{
display: "flex",
flex: "100%",
alignItems: "center",
justifyContent: "flex-end",
}}
></div>

<Menu theme="dark" mode="horizontal" />
</Layout.Header>
);
};
57 changes: 57 additions & 0 deletions apps/console/src/app/components/layout/LayoutWrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { Breadcrumb, Layout, Row, Space, theme } from "antd";
import { SideNavigation } from "./SideNavigation";
import styled from "@emotion/styled";
import { Header } from "./Header";
import { useBreadcrumbItems } from "../../lib/hooks/useBreadcrumbItems";

const StyledContent = styled(Layout.Content)`
padding: 18px;
max-width: 1280px;
margin-inline: auto;
max-height: calc(100vh - 64px);
overflow-y: auto;
scrollbar-width: none; /* Firefox */
::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
::-ms-scrollbar {
display: none; /* IE */
}
`;

interface Props {
children: React.ReactNode;
withSideNav: boolean;
withHeader?: boolean;
}

export const LayoutWrapper = ({
children,
withSideNav,
withHeader = true,
}: Props) => {
const breadcrumbItems = useBreadcrumbItems();
const { token } = theme.useToken();

return (
<Layout
style={{ height: "100vh", maxHeight: "100vh", flexDirection: "column" }}
>
{withHeader && <Header />}
<div style={{ display: "flex", flexDirection: "row", height: "100%" }}>
{withSideNav && <SideNavigation />}
<StyledContent>
<Breadcrumb
items={breadcrumbItems}
style={{
marginBottom: token.marginLG,
}}
/>
{children}
</StyledContent>
</div>
</Layout>
);
};
Loading

0 comments on commit 9fa96b9

Please sign in to comment.