Edit frontend readme (#699)

CONTRIBUTING.md

@@ -64,6 +64,7 @@ and test your code changes.
 First, follow the [Quickstart Guide](https://docs.odigos.io/intro) in odigos docs to create a local k8s development cluster with a demo application and a functioning odigos installation.
 
 Make sure you are able to:
+
 - [x] run Odigos cli in your terminal.
 - [x] open the demo application ui in your browser to interact with it.
 - [x] install odigos in your development cluster with `odigos install`.
@@ -79,10 +80,11 @@ Test your cli code changes by running `go run .` from the `cli` directory:
 
 ```bash
 ➜  odigos git:(main) cd cli/
-➜  cli git:(main) go run .       
+➜  cli git:(main) go run .
 ```
 
 - To run `odigos install` cli command from a local source, you will need to supply a version flag to tell odigos which image tags to install:
+
 ```bash
 ➜  cli git:(main) go run . install --version v0.1.81
 Installing Odigos version v0.1.81 in namespace odigos-system ...
@@ -91,17 +93,37 @@ Installing Odigos version v0.1.81 in namespace odigos-system ...
 - If you test changes to the `install` command, you will need to `go run . uninstall` first before you can `go run . install` again.
 
 ### How to Develop Odigos Locally
+
 The main steps involved when debugging Odigos locally are:
 
 - Use a Kind kubernetes cluster
 - Build custom images of Odigos and load them into Kind via:
+
 ```
 TAG=<CURRENT-ODIGOS-VERSION> make build-images load-to-kind
 ```
 
 - Ensure the TAG matches the Odigos version output from: `odigos version`
 - Restart all pods in the `odigos-system` namespace:
+
 ```
 kubectl delete pods --all -n odigos-system
 ```
+
 See the [Odigos docs](https://docs.odigos.io/intro) for the full steps on debugging Odigos locally.
+
+### How to Build and run Odigos Frontend Locally
+
+- go to frontend folder
+- run:
+
+```
+go build -o odigos-backend && ./odigos-backend --port 8085 --debug --address 0.0.0.0
+```
+
+- go to webapp
+- run:
+
+```
+ npm run dev
+```

frontend/webapp/README.md

@@ -2,7 +2,13 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+First, run odigos backend:
+
+```bash
+../odigos-backend --port 8085 --debug --address 0.0.0.0
+```
+
+Next, run the development server:
 
 ```bash
 npm run dev
@@ -14,11 +20,7 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+You can start editing the pages by modifying `app` folder. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 

frontend/webapp/containers/overview/overview/overview.tsx

@@ -27,9 +27,9 @@ export function OverviewContainer() {
   );
 
   const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
-
   const sourcesNodes = useMemo(() => {
     const groupedSources = groupSourcesNamespace(sources);
+
     const nodes = getNodes(
       containerHeight,
       groupedSources.length > 1 ? groupSourcesNamespace(sources) : sources,

frontend/webapp/containers/setup/setup.section/setup.section.tsx

@@ -1,25 +1,25 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from 'react';
 import {
   SetupContentWrapper,
   SetupSectionContainer,
   StepListWrapper,
   BackButtonWrapper,
-} from "./setup.section.styled";
-import { SetupHeader } from "../setup.header/setup.header";
-import { DestinationSection } from "../destination/destination.section";
-import { ConnectionSection } from "../connection/connection.section";
-import { SourcesSection } from "../sources/sources.section";
-import { KeyvalText, Steps } from "@/design.system";
-import { CONFIG, NOTIFICATION, SETUP } from "@/utils/constants";
-import { useSectionData, useNotification } from "@/hooks";
-import { STEPS, Step } from "./utils";
-import { setNamespaces } from "@/services";
-import { useSearchParams } from "next/navigation";
-import { useMutation } from "react-query";
-import { SelectedSources } from "@/types/sources";
-import { WhiteArrow } from "@/assets/icons/app";
+} from './setup.section.styled';
+import { SetupHeader } from '../setup.header/setup.header';
+import { DestinationSection } from '../destination/destination.section';
+import { ConnectionSection } from '../connection/connection.section';
+import { SourcesSection } from '../sources/sources.section';
+import { KeyvalText, Steps } from '@/design.system';
+import { CONFIG, NOTIFICATION, SETUP } from '@/utils/constants';
+import { useSectionData, useNotification } from '@/hooks';
+import { STEPS, Step } from './utils';
+import { setNamespaces } from '@/services';
+import { useSearchParams } from 'next/navigation';
+import { useMutation } from 'react-query';
+import { SelectedSources } from '@/types/sources';
+import { WhiteArrow } from '@/assets/icons/app';
 
-const STATE = "state";
+const STATE = 'state';
 
 const sectionComponents = {
   [SETUP.STEPS.ID.CHOOSE_SOURCE]: SourcesSection,