Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: connect api with dashboard #48

Merged
merged 5 commits into from
Jul 4, 2024
Merged

Conversation

mari1912
Copy link
Collaborator

@mari1912 mari1912 commented Jul 3, 2024

Description

  • Connect dashboard with the api using react-query
  • show data from api
  • add necessary types
  • fix go back and forward on tree table

Related Issues

Visual reference

image

@mari1912 mari1912 self-assigned this Jul 3, 2024
@mari1912 mari1912 changed the base branch from main to feat/add_tree_endpoint July 3, 2024 19:09
@mari1912 mari1912 force-pushed the feat/connect-api-dashboard branch from 538ed5f to dda3bd9 Compare July 3, 2024 19:11
@lfjnascimento lfjnascimento force-pushed the feat/add_tree_endpoint branch 2 times, most recently from b320a7c to d176e45 Compare July 4, 2024 13:22
Base automatically changed from feat/add_tree_endpoint to main July 4, 2024 13:23
@mari1912 mari1912 marked this pull request as ready for review July 4, 2024 14:12
@mari1912 mari1912 force-pushed the feat/connect-api-dashboard branch 2 times, most recently from 4f887bb to fa28899 Compare July 4, 2024 14:19
<TableCell><div className={backgroundClassName}>{row.buildStatus}</div></TableCell>
<TableCell>
<div className={backgroundClassName}>
{row.testStatus + " "}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSS should do this space

@@ -24,22 +20,27 @@ const treeTableColumnsLabelId = [
'treeTable.test'
];

const TreeTableRow = (row: ITreeTableBody): JSX.Element => {
const TreeTableRow = (row: TreeTableBody): JSX.Element => {
const backgroundClassName = "bg-lightGray w-fit h-fit p-1 rounded-lg";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since this won't change, you could move it to a global scope

const fetchTreeCheckoutData = async(): Promise<Checkout[]> => {
const res = await fetch('/api/tree');
if (!res.ok) {
throw new Error('Network response was not ok');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we be more specific? maybe Request to /api/tree response was not ok

dashboard/src/api/Tree.tsx Show resolved Hide resolved
@@ -54,7 +56,19 @@ const TableInfo = ({
};

const TreeMonitorListingPage = (): JSX.Element => {
const listItems = treeTableRows;

const { data } = useTreeTable();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm.. I'm trying to think of a name that makes it clearer what useTreeTable is for 🤔

dashboard/src/types/tree/Tree.tsx Show resolved Hide resolved
onClickBack={onClickGoBack}
onClickForward={onClickGoForward}
/>
<TableInfo
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TableInfo is showing text in white color which is very hard to see given our background color

mari1912 added 5 commits July 4, 2024 14:19
- add checkout type
- add tree table body commmon type
- create a query client
- add query client provider to app
- add use query to get data from tree api
- use data returned from api
- remove mocked list
- disable back/forward button when there is no more data to show
- separate the filter button in a const
- fix end index that is show

closes #20
@mari1912 mari1912 force-pushed the feat/connect-api-dashboard branch from fa28899 to 7cd4711 Compare July 4, 2024 17:23
@mari1912 mari1912 merged commit 07408b5 into main Jul 4, 2024
4 checks passed
@mari1912 mari1912 deleted the feat/connect-api-dashboard branch July 4, 2024 17:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Trees Monitor Listing Page (TMLP)
3 participants