apache · elijahbenizzy · Apr 24, 2024 · Apr 24, 2024 · Apr 24, 2024 · Apr 24, 2024
diff --git a/docs/concepts/ui.rst b/docs/concepts/ui.rst
@@ -61,17 +61,7 @@ This will do the following:
 3. Start the backend server
 4. Start the frontend server
 
-This takes a bit of time! So be patient. The server will be running on port 3000 -- in the logs you'll see something like this:
-
-.. code-block:: bash
-
-    2024-04-18 15:57:07 You can now view frontend in the browser.
-    2024-04-18 15:57:07
-    2024-04-18 15:57:07   Local:            http://localhost:3000
-    2024-04-18 15:57:07   On Your Network:  http://172.19.0.4:3000
-
-
-Then navigate to ``http://localhost:3000`` in your browser, and enter your email (this will be the username used within the app).
+This takes a bit of time! So be patient. The server will be running on port 8242. Then navigate to ``http://localhost:8242`` in your browser, and enter your email (this will be the username used within the app).
 
 Building the Docker Images locally
 __________________________________

diff --git a/ui/backend/server/entrypoint.sh b/ui/backend/server/entrypoint.sh
@@ -1,4 +1,4 @@
 set -e
 
 python manage.py migrate  # Apply database migrations
-python manage.py runserver 0.0.0.0:8000  # Start the server
+python manage.py runserver 0.0.0.0:8241  # Start the server
diff --git a/ui/backend/server/server/default_views.py b/ui/backend/server/server/default_views.py
@@ -9,6 +9,7 @@ def root_index(request) -> HttpResponse:
       <header></header>
       <body>
         <h1><center>Welcome to the backend server!</center></h1>
+        <p><center>Did you mean to visit the <a href="http://localhost:8242">frontend</a>? Note this sometimes takes a bit of time to start up.</center> </p>
       </body>
     </html>
     """

diff --git a/ui/deployment/Dockerfile.frontend b/ui/deployment/Dockerfile.frontend
@@ -24,6 +24,8 @@ ENV NODE_OPTIONS="--max-old-space-size=8192"
 
 RUN npm run build
 
-EXPOSE 3000
+EXPOSE 8242
+
+ENV PORT=8242
 
 CMD ["npm", "run", "start"]
diff --git a/ui/deployment/Dockerfile.frontend-prod b/ui/deployment/Dockerfile.frontend-prod
@@ -31,10 +31,12 @@ FROM nginx:stable-alpine as production-stage
 COPY --from=build-stage /usr/src/app/build /usr/share/nginx/html
 
 # Expose port 80 to the outside once the container has launched
-EXPOSE 3000
+EXPOSE 8242
 
 # Use the default nginx.conf provided by tiangolo/nginx-rtmp
 COPY ./deployment/nginx/nginx.conf /etc/nginx/nginx.conf
 
+CMD ["echo", "Frontend running on port 8242, go to http://localhost:8242 to view the app."]
+
 # Start Nginx and keep the process from backgrounding and the container from quitting
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/ui/deployment/docker-compose-prod.yml b/ui/deployment/docker-compose-prod.yml
@@ -23,7 +23,7 @@ services:
         dockerfile: deployment/Dockerfile.backend-prod
     entrypoint: ["/bin/bash", "-c", "cd /code/server && ls && ./entrypoint.sh"]
     ports:
-      - "8000:8000"
+      - "8241:8241"
     environment:
       - DB_HOST=db
       - DB_PORT=5432
@@ -49,7 +49,7 @@ services:
         - REACT_APP_AUTH_MODE=local
         - REACT_APP_USE_POSTHOG=false
     ports:
-      - "3000:3000"
+      - "8242:8242"
     environment:
       - NODE_ENV=development
       - REACT_APP_AUTH_MODE=local

diff --git a/ui/deployment/docker-compose.yml b/ui/deployment/docker-compose.yml
@@ -25,7 +25,7 @@ services:
       - ./backend:/code
       - backend_data:/data/
     ports:
-      - "8000:8000"
+      - "8241:8241"
     environment:
       - DB_HOST=db
       - DB_PORT=5432
@@ -52,12 +52,12 @@ services:
       - ./frontend:/usr/src/app
       - /usr/src/app/node_modules
     ports:
-      - "3000:3000"
+      - "8242:8242"
     environment:
       - NODE_ENV=development
       - REACT_APP_AUTH_MODE=local
       - REACT_APP_USE_POSTHOG=false
-      - REACT_APP_API_URL=http://backend:8000
+      - REACT_APP_API_URL=http://backend:8241
     depends_on:
       - backend
 

diff --git a/ui/deployment/nginx/nginx.conf b/ui/deployment/nginx/nginx.conf
@@ -7,7 +7,7 @@ http {
     default_type  application/octet-stream;
 
     server {
-        listen       3000;
+        listen       8242;
         server_name  localhost;
 
         root   /usr/share/nginx/html;  # Common root for all files.
@@ -23,7 +23,7 @@ http {
 
         # Proxy /api requests to backend
         location /api {
-            proxy_pass http://backend:8000;  # Assuming the API server is on the same host
+            proxy_pass http://backend:8241;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection 'upgrade';
@@ -32,7 +32,7 @@ http {
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_read_timeout 5000;  # Timeout setting as per your node configuration
+            proxy_read_timeout 5000;
         }
     }
 }
diff --git a/ui/frontend/.env.local b/ui/frontend/.env.local
@@ -1,3 +1,3 @@
-REACT_APP_API_URL=localhost:8000
+REACT_APP_API_URL=localhost:8241
 REACT_APP_USE_POSTHOG=false
 REACT_APP_AUTH_MODE=local
diff --git a/ui/frontend/src/components/common/Dropdown.tsx b/ui/frontend/src/components/common/Dropdown.tsx
@@ -1,21 +1,21 @@
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import React, { Fragment } from "react";
-import { AiFillQuestionCircle } from "react-icons/ai";
 import { IconType } from "react-icons/lib";
 import { classNames } from "../../utils";
 import { HelpTooltip } from "./HelpTooltip";
 
 type Selectable = {
   name: string;
+  // eslint-disable-next-line
   value: any;
   icon?: IconType;
 };
 
 export const DropdownSelector: React.FC<{
   choices: Selectable[];
-  setCurrentChoice: (choice: any) => void;
-  currentChoice: any | null;
+  setCurrentChoice: (choice: Selectable) => void;
+  currentChoice: Selectable | null;
   title: string;
   description?: string;
 }> = (props) => {

diff --git a/ui/frontend/src/components/dashboard/Project/ProjectLogInstructions.tsx b/ui/frontend/src/components/dashboard/Project/ProjectLogInstructions.tsx
@@ -10,7 +10,7 @@ const INSTALL_CODE = `# be sure to initialize any python environment you want to
 pip install hamilton[sdk]`;
 
 export const UsingHamiltonAlready = (props: {
-  projectId: string;
+  projectId: string | undefined;
   username: string;
 }) => {
   const exampleCode = `
@@ -62,7 +62,7 @@ dr = (
 };
 
 export const NotUsingHamiltonYet = (props: {
-  projectId: string;
+  projectId: string | undefined;
   username: string;
 }) => {
   const initCode = `\
@@ -108,22 +108,24 @@ cd hamilton/examples/hamilton_ui
         <div className="flex flex-row gap-2 items-center">
           <CheckBox />
 
-          <p className="text-sm text-gray-500">
-            <Link
-              className="text-dwlightblue hover:underline"
-              to={`/dashboard/project/${props.projectId}/runs`}
-            >
-              Track your runs!
-            </Link>
-          </p>
+          {props.projectId !== undefined && (
+            <p className="text-sm text-gray-500">
+              <Link
+                className="text-dwlightblue hover:underline"
+                to={`/dashboard/project/${props.projectId}/runs`}
+              >
+                Track your runs!
+              </Link>
+            </p>
+          )}
         </div>
       </li>
     </>
   );
 };
 
 export const ProjectLogInstructions = (props: {
-  projectId: number;
+  projectId?: number;
   username: string;
   canWrite: boolean;
   hideHeader?: boolean;
@@ -216,12 +218,12 @@ export const ProjectLogInstructions = (props: {
           </div>
           {currentTab === USING_HAMILTON ? (
             <UsingHamiltonAlready
-              projectId={props.projectId.toString()}
+              projectId={props.projectId?.toString()}
               username={props.username}
             />
           ) : (
             <NotUsingHamiltonYet
-              projectId={props.projectId.toString()}
+              projectId={props.projectId?.toString()}
               username={props.username}
             />
           )}

diff --git a/ui/frontend/src/components/dashboard/Project/Projects.tsx b/ui/frontend/src/components/dashboard/Project/Projects.tsx
@@ -124,7 +124,7 @@ export const ProjectCreateOrEditForm = (props: ProjectCreateFormProps) => {
       ? "Project description is required"
       : undefined,
     selectedWriteSharingEntities.length === 0
-      ? "Write access is required by at least one user/team"
+      ? "Write access is required by at least one user (or team, if using the enterprise version)"
       : undefined,
   ].filter((item) => item !== undefined);
 
@@ -288,7 +288,8 @@ export const ProjectCreateOrEditForm = (props: ProjectCreateFormProps) => {
                 Read Access
               </label>
               <p className="mt-1 text-sm leading-6 text-gray-600 w-full">
-                Enter emails or select teams you are a part of.
+                Enter emails
+                {localMode ? " (reach out if you want team/organization-level ACLs)" : " or select teams you are part of."}.
               </p>
               <div className="mt-2">
                 <CreatableSelect
@@ -337,7 +338,8 @@ export const ProjectCreateOrEditForm = (props: ProjectCreateFormProps) => {
                 Write Access
               </label>
               <p className="mt-1 text-sm leading-6 text-gray-600 w-full">
-                Enter emails or select teams you are a part of.
+                Enter emails
+                {localMode ? " (reach out if you want team/organization-level ACLs)" : " or select teams you are part of."}.
               </p>
               <div className="mt-2">
                 <CreatableSelect

diff --git a/ui/frontend/src/ee/auth/LocalAccount.tsx b/ui/frontend/src/ee/auth/LocalAccount.tsx
@@ -8,7 +8,7 @@ export const LocalAccount = () => {
       <div className="mt-20">
         <h1 className="text-3xl font-bold text-gray-700 pl-5 pb-4">Email: {localAccount}</h1>
         <ProjectLogInstructions
-          projectId={1}
+          projectId={undefined}
           username={localAccount || ""}
           canWrite={true}
           hideAPIKey

diff --git a/ui/sdk/src/hamilton_sdk/api/constants.py b/ui/sdk/src/hamilton_sdk/api/constants.py
@@ -1,2 +1,2 @@
-HAMILTON_API_URL = "http://localhost:8000"
-HAMILTON_UI_URL = "http://localhost:3000"
+HAMILTON_API_URL = "http://localhost:8241"
+HAMILTON_UI_URL = "http://localhost:8242"
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ def root_index(request) -> HttpResponse: @@
           <header></header>
           <body>
             <h1><center>Welcome to the backend server!</center></h1>
+            <p><center>Did you mean to visit the <a href="http://localhost:8242">frontend</a>? Note this sometimes takes a bit of time to start up.</center> </p>
           </body>
         </html>
         """
@@ Expand Down @@