You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@arrow.apache.org by ag...@apache.org on 2021/06/26 13:40:18 UTC
[arrow-datafusion] branch master updated: in ballista also check
for UI prettier changes (#578)
This is an automated email from the ASF dual-hosted git repository.
agrove pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/arrow-datafusion.git
The following commit(s) were added to refs/heads/master by this push:
new f8aaa4a in ballista also check for UI prettier changes (#578)
f8aaa4a is described below
commit f8aaa4aee53e637870efeadc3bb23e487314d365
Author: Jiayu Liu <Ji...@users.noreply.github.com>
AuthorDate: Sat Jun 26 21:40:11 2021 +0800
in ballista also check for UI prettier changes (#578)
---
.github/workflows/dev.yml | 7 +
ballista/ui/scheduler/index.d.ts | 2 +-
ballista/ui/scheduler/package.json | 2 +-
ballista/ui/scheduler/react-table-config.d.ts | 229 +++++++++----------
ballista/ui/scheduler/src/App.tsx | 58 ++---
ballista/ui/scheduler/src/components/DataTable.tsx | 242 ++++++++++++---------
ballista/ui/scheduler/src/components/Footer.tsx | 22 +-
ballista/ui/scheduler/src/components/Header.tsx | 123 ++++++-----
ballista/ui/scheduler/src/components/NodesList.tsx | 10 +-
.../ui/scheduler/src/components/QueriesList.tsx | 180 ++++++++-------
ballista/ui/scheduler/src/components/Summary.tsx | 13 +-
ballista/ui/scheduler/yarn.lock | 8 +-
12 files changed, 504 insertions(+), 392 deletions(-)
diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml
index 3f52ccd..f9e6b27 100644
--- a/.github/workflows/dev.yml
+++ b/.github/workflows/dev.yml
@@ -50,3 +50,10 @@ jobs:
# if you encounter error, try rerun the command below with --write instead of --check
# and commit the changes
npx prettier@2.3.0 --check {ballista,datafusion,datafusion-examples,dev,docs,python}/**/*.md README.md DEVELOPERS.md
+ - name: Prettier check for Ballista UI
+ run: |
+ cd ballista/ui/scheduler
+ npx yarn
+ # if you encounter error, try rerun the command below with --write instead of --check
+ # and commit the changes
+ npx yarn prettier --check **/*.{ts,tsx}
diff --git a/ballista/ui/scheduler/index.d.ts b/ballista/ui/scheduler/index.d.ts
index 9f71581..be0f38b 100644
--- a/ballista/ui/scheduler/index.d.ts
+++ b/ballista/ui/scheduler/index.d.ts
@@ -15,4 +15,4 @@
// specific language governing permissions and limitations
// under the License.
-declare module "@chakra-ui/icons";
\ No newline at end of file
+declare module "@chakra-ui/icons";
diff --git a/ballista/ui/scheduler/package.json b/ballista/ui/scheduler/package.json
index fe1e72d..9a5d200 100644
--- a/ballista/ui/scheduler/package.json
+++ b/ballista/ui/scheduler/package.json
@@ -52,7 +52,7 @@
"devDependencies": {
"@types/react-table": "^7.0.28",
"@types/react-timeago": "^4.1.2",
- "prettier": "^2.2.1"
+ "prettier": "^2.3.0"
},
"proxy": "http://localhost:50050"
}
diff --git a/ballista/ui/scheduler/react-table-config.d.ts b/ballista/ui/scheduler/react-table-config.d.ts
index 4bdce76..2c9994f 100644
--- a/ballista/ui/scheduler/react-table-config.d.ts
+++ b/ballista/ui/scheduler/react-table-config.d.ts
@@ -16,122 +16,131 @@
// under the License.
import {
- UseColumnOrderInstanceProps,
- UseColumnOrderState,
- UseExpandedHooks,
- UseExpandedInstanceProps,
- UseExpandedOptions,
- UseExpandedRowProps,
- UseExpandedState,
- UseFiltersColumnOptions,
- UseFiltersColumnProps,
- UseFiltersInstanceProps,
- UseFiltersOptions,
- UseFiltersState,
- UseGlobalFiltersColumnOptions,
- UseGlobalFiltersInstanceProps,
- UseGlobalFiltersOptions,
- UseGlobalFiltersState,
- UseGroupByCellProps,
- UseGroupByColumnOptions,
- UseGroupByColumnProps,
- UseGroupByHooks,
- UseGroupByInstanceProps,
- UseGroupByOptions,
- UseGroupByRowProps,
- UseGroupByState,
- UsePaginationInstanceProps,
- UsePaginationOptions,
- UsePaginationState,
- UseResizeColumnsColumnOptions,
- UseResizeColumnsColumnProps,
- UseResizeColumnsOptions,
- UseResizeColumnsState,
- UseRowSelectHooks,
- UseRowSelectInstanceProps,
- UseRowSelectOptions,
- UseRowSelectRowProps,
- UseRowSelectState,
- UseRowStateCellProps,
- UseRowStateInstanceProps,
- UseRowStateOptions,
- UseRowStateRowProps,
- UseRowStateState,
- UseSortByColumnOptions,
- UseSortByColumnProps,
- UseSortByHooks,
- UseSortByInstanceProps,
- UseSortByOptions,
- UseSortByState
-} from 'react-table'
+ UseColumnOrderInstanceProps,
+ UseColumnOrderState,
+ UseExpandedHooks,
+ UseExpandedInstanceProps,
+ UseExpandedOptions,
+ UseExpandedRowProps,
+ UseExpandedState,
+ UseFiltersColumnOptions,
+ UseFiltersColumnProps,
+ UseFiltersInstanceProps,
+ UseFiltersOptions,
+ UseFiltersState,
+ UseGlobalFiltersColumnOptions,
+ UseGlobalFiltersInstanceProps,
+ UseGlobalFiltersOptions,
+ UseGlobalFiltersState,
+ UseGroupByCellProps,
+ UseGroupByColumnOptions,
+ UseGroupByColumnProps,
+ UseGroupByHooks,
+ UseGroupByInstanceProps,
+ UseGroupByOptions,
+ UseGroupByRowProps,
+ UseGroupByState,
+ UsePaginationInstanceProps,
+ UsePaginationOptions,
+ UsePaginationState,
+ UseResizeColumnsColumnOptions,
+ UseResizeColumnsColumnProps,
+ UseResizeColumnsOptions,
+ UseResizeColumnsState,
+ UseRowSelectHooks,
+ UseRowSelectInstanceProps,
+ UseRowSelectOptions,
+ UseRowSelectRowProps,
+ UseRowSelectState,
+ UseRowStateCellProps,
+ UseRowStateInstanceProps,
+ UseRowStateOptions,
+ UseRowStateRowProps,
+ UseRowStateState,
+ UseSortByColumnOptions,
+ UseSortByColumnProps,
+ UseSortByHooks,
+ UseSortByInstanceProps,
+ UseSortByOptions,
+ UseSortByState,
+} from "react-table";
-declare module 'react-table' {
- // take this file as-is, or comment out the sections that don't apply to your plugin configuration
+declare module "react-table" {
+ // take this file as-is, or comment out the sections that don't apply to your plugin configuration
- export interface TableOptions<D extends Record<string, unknown>>
- extends UseExpandedOptions<D>,
- UseFiltersOptions<D>,
- UseGlobalFiltersOptions<D>,
- UseGroupByOptions<D>,
- UsePaginationOptions<D>,
- UseResizeColumnsOptions<D>,
- UseRowSelectOptions<D>,
- UseRowStateOptions<D>,
- UseSortByOptions<D>,
- // note that having Record here allows you to add anything to the options, this matches the spirit of the
- // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
- // feature set, this is a safe default.
- Record<string, any> {}
+ export interface TableOptions<
+ D extends Record<string, unknown>
+ > extends UseExpandedOptions<D>,
+ UseFiltersOptions<D>,
+ UseGlobalFiltersOptions<D>,
+ UseGroupByOptions<D>,
+ UsePaginationOptions<D>,
+ UseResizeColumnsOptions<D>,
+ UseRowSelectOptions<D>,
+ UseRowStateOptions<D>,
+ UseSortByOptions<D>,
+ // note that having Record here allows you to add anything to the options, this matches the spirit of the
+ // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
+ // feature set, this is a safe default.
+ Record<string, any> {}
- export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
- extends UseExpandedHooks<D>,
- UseGroupByHooks<D>,
- UseRowSelectHooks<D>,
- UseSortByHooks<D> {}
+ export interface Hooks<
+ D extends Record<string, unknown> = Record<string, unknown>
+ > extends UseExpandedHooks<D>,
+ UseGroupByHooks<D>,
+ UseRowSelectHooks<D>,
+ UseSortByHooks<D> {}
- export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
- extends UseColumnOrderInstanceProps<D>,
- UseExpandedInstanceProps<D>,
- UseFiltersInstanceProps<D>,
- UseGlobalFiltersInstanceProps<D>,
- UseGroupByInstanceProps<D>,
- UsePaginationInstanceProps<D>,
- UseRowSelectInstanceProps<D>,
- UseRowStateInstanceProps<D>,
- UseSortByInstanceProps<D> {}
+ export interface TableInstance<
+ D extends Record<string, unknown> = Record<string, unknown>
+ > extends UseColumnOrderInstanceProps<D>,
+ UseExpandedInstanceProps<D>,
+ UseFiltersInstanceProps<D>,
+ UseGlobalFiltersInstanceProps<D>,
+ UseGroupByInstanceProps<D>,
+ UsePaginationInstanceProps<D>,
+ UseRowSelectInstanceProps<D>,
+ UseRowStateInstanceProps<D>,
+ UseSortByInstanceProps<D> {}
- export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
- extends UseColumnOrderState<D>,
- UseExpandedState<D>,
- UseFiltersState<D>,
- UseGlobalFiltersState<D>,
- UseGroupByState<D>,
- UsePaginationState<D>,
- UseResizeColumnsState<D>,
- UseRowSelectState<D>,
- UseRowStateState<D>,
- UseSortByState<D> {}
+ export interface TableState<
+ D extends Record<string, unknown> = Record<string, unknown>
+ > extends UseColumnOrderState<D>,
+ UseExpandedState<D>,
+ UseFiltersState<D>,
+ UseGlobalFiltersState<D>,
+ UseGroupByState<D>,
+ UsePaginationState<D>,
+ UseResizeColumnsState<D>,
+ UseRowSelectState<D>,
+ UseRowStateState<D>,
+ UseSortByState<D> {}
- export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
- extends UseFiltersColumnOptions<D>,
- UseGlobalFiltersColumnOptions<D>,
- UseGroupByColumnOptions<D>,
- UseResizeColumnsColumnOptions<D>,
- UseSortByColumnOptions<D> {}
+ export interface ColumnInterface<
+ D extends Record<string, unknown> = Record<string, unknown>
+ > extends UseFiltersColumnOptions<D>,
+ UseGlobalFiltersColumnOptions<D>,
+ UseGroupByColumnOptions<D>,
+ UseResizeColumnsColumnOptions<D>,
+ UseSortByColumnOptions<D> {}
- export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
- extends UseFiltersColumnProps<D>,
- UseGroupByColumnProps<D>,
- UseResizeColumnsColumnProps<D>,
- UseSortByColumnProps<D> {}
+ export interface ColumnInstance<
+ D extends Record<string, unknown> = Record<string, unknown>
+ > extends UseFiltersColumnProps<D>,
+ UseGroupByColumnProps<D>,
+ UseResizeColumnsColumnProps<D>,
+ UseSortByColumnProps<D> {}
- export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = any>
- extends UseGroupByCellProps<D>,
- UseRowStateCellProps<D> {}
+ export interface Cell<
+ D extends Record<string, unknown> = Record<string, unknown>,
+ V = any
+ > extends UseGroupByCellProps<D>,
+ UseRowStateCellProps<D> {}
- export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
- extends UseExpandedRowProps<D>,
- UseGroupByRowProps<D>,
- UseRowSelectRowProps<D>,
- UseRowStateRowProps<D> {}
-}
\ No newline at end of file
+ export interface Row<
+ D extends Record<string, unknown> = Record<string, unknown>
+ > extends UseExpandedRowProps<D>,
+ UseGroupByRowProps<D>,
+ UseRowSelectRowProps<D>,
+ UseRowStateRowProps<D> {}
+}
diff --git a/ballista/ui/scheduler/src/App.tsx b/ballista/ui/scheduler/src/App.tsx
index 5864a27..adb5896 100644
--- a/ballista/ui/scheduler/src/App.tsx
+++ b/ballista/ui/scheduler/src/App.tsx
@@ -15,12 +15,12 @@
// specific language governing permissions and limitations
// under the License.
-import React, {useState, useEffect} from "react";
-import {Box, Grid, VStack} from "@chakra-ui/react";
-import {Header} from "./components/Header";
-import { Summary} from "./components/Summary";
-import {QueriesList, Query, QueryStatus} from "./components/QueriesList";
-import {Footer} from "./components/Footer";
+import React, { useState, useEffect } from "react";
+import { Box, Grid, VStack } from "@chakra-ui/react";
+import { Header } from "./components/Header";
+import { Summary } from "./components/Summary";
+import { QueriesList, Query, QueryStatus } from "./components/QueriesList";
+import { Footer } from "./components/Footer";
import "./App.css";
@@ -38,22 +38,23 @@ const getRandomQueries = (num: number): Query[] => {
for (let i = 0; i < num; i++) {
nodes.push({
started: new Date().toISOString(),
- query: "SELECT \n" +
- " employee.id,\n" +
- " employee.first_name,\n" +
- " employee.last_name,\n" +
- " SUM(DATEDIFF(\"SECOND\", call.start_time, call.end_time)) AS call_duration_sum\n" +
- "FROM call\n" +
- "INNER JOIN employee ON call.employee_id = employee.id\n" +
- "GROUP BY\n" +
- " employee.id,\n" +
- " employee.first_name,\n" +
- " employee.last_name\n" +
- "ORDER BY\n" +
- " employee.id ASC;",
+ query:
+ "SELECT \n" +
+ " employee.id,\n" +
+ " employee.first_name,\n" +
+ " employee.last_name,\n" +
+ ' SUM(DATEDIFF("SECOND", call.start_time, call.end_time)) AS call_duration_sum\n' +
+ "FROM call\n" +
+ "INNER JOIN employee ON call.employee_id = employee.id\n" +
+ "GROUP BY\n" +
+ " employee.id,\n" +
+ " employee.first_name,\n" +
+ " employee.last_name\n" +
+ "ORDER BY\n" +
+ " employee.id ASC;",
status: QueryStatus.RUNNING,
progress: Math.round(Math.random() * 100),
- uuid: uuidv4()
+ uuid: uuidv4(),
});
}
return nodes;
@@ -61,19 +62,18 @@ const getRandomQueries = (num: number): Query[] => {
const queries = getRandomQueries(17);
-const App : React.FunctionComponent<any> = () => {
-
- const [schedulerState, setSchedulerState] = useState(undefined)
+const App: React.FunctionComponent<any> = () => {
+ const [schedulerState, setSchedulerState] = useState(undefined);
function getSchedulerState() {
return fetch(`/state`, {
- method: 'POST',
+ method: "POST",
headers: {
- 'Accept': 'application/json'
- }
+ Accept: "application/json",
+ },
})
- .then(res => res.json())
- .then(res => setSchedulerState(res));
+ .then((res) => res.json())
+ .then((res) => setSchedulerState(res));
}
useEffect(() => {
@@ -92,6 +92,6 @@ const App : React.FunctionComponent<any> = () => {
</Grid>
</Box>
);
-}
+};
export default App;
diff --git a/ballista/ui/scheduler/src/components/DataTable.tsx b/ballista/ui/scheduler/src/components/DataTable.tsx
index 38176d3..188ddc8 100644
--- a/ballista/ui/scheduler/src/components/DataTable.tsx
+++ b/ballista/ui/scheduler/src/components/DataTable.tsx
@@ -16,116 +16,164 @@
// under the License.
import React from "react";
-import {Link, Table, Thead, Flex, Tbody, Text, Tr, Th, Td, VStack, chakra} from "@chakra-ui/react";
-import {TriangleDownIcon, TriangleUpIcon} from "@chakra-ui/icons";
-import {useTable, useSortBy, usePagination, Column as RTColumn} from "react-table";
-import {HiChevronLeft, HiChevronRight} from "react-icons/all";
+import {
+ Link,
+ Table,
+ Thead,
+ Flex,
+ Tbody,
+ Text,
+ Tr,
+ Th,
+ Td,
+ VStack,
+ chakra,
+} from "@chakra-ui/react";
+import { TriangleDownIcon, TriangleUpIcon } from "@chakra-ui/icons";
+import {
+ useTable,
+ useSortBy,
+ usePagination,
+ Column as RTColumn,
+} from "react-table";
+import { HiChevronLeft, HiChevronRight } from "react-icons/all";
import TimeAgo from "react-timeago";
type RenderFn = (props: any) => React.ReactNode;
interface Row {
- [name: string]: any;
+ [name: string]: any;
}
// eslint-disable-next-line
-export type Column<Row> = RTColumn | {
- isNumeric?: boolean;
- render?: RenderFn;
-};
+export type Column<Row> =
+ | RTColumn
+ | {
+ isNumeric?: boolean;
+ render?: RenderFn;
+ };
interface DataTableProps {
- columns: Column<Row>[];
- data: Row[];
- pageSize?: number;
- maxW?: number;
- pb?: number;
+ columns: Column<Row>[];
+ data: Row[];
+ pageSize?: number;
+ maxW?: number;
+ pb?: number;
}
-export const DateCell : (props: any) => React.ReactNode = (props: any) => {
- return <TimeAgo minPeriod={60} date={props.value}
- formatter={(value: number, unit: TimeAgo.Unit, suffix: TimeAgo.Suffix) => {
- if (unit === 'second') return 'just now';
- const plural: string = value !== 1 ? 's' : '';
- return `${value} ${unit}${plural} ${suffix}`;
- }}
+export const DateCell: (props: any) => React.ReactNode = (props: any) => {
+ return (
+ <TimeAgo
+ minPeriod={60}
+ date={props.value}
+ formatter={(
+ value: number,
+ unit: TimeAgo.Unit,
+ suffix: TimeAgo.Suffix
+ ) => {
+ if (unit === "second") return "just now";
+ const plural: string = value !== 1 ? "s" : "";
+ return `${value} ${unit}${plural} ${suffix}`;
+ }}
/>
-}
+ );
+};
-export const LinkCell : (props: any) => React.ReactNode = (props: any) => {
- return (
- <Link href={props.href} isExternal>
- {props.value}
- </Link>
- )
-}
+export const LinkCell: (props: any) => React.ReactNode = (props: any) => {
+ return (
+ <Link href={props.href} isExternal>
+ {props.value}
+ </Link>
+ );
+};
-export const DataTable: React.FunctionComponent<DataTableProps> = ({data, columns, pageSize = 10, maxW, pb}) => {
- const {
- getTableProps,
- getTableBodyProps,
- headerGroups,
- rows,
- prepareRow,
- pageOptions,
- canNextPage,
- nextPage,
- canPreviousPage,
- previousPage,
- state: {pageIndex},
- } = useTable({columns: columns as any, data, initialState: {pageIndex: 0, pageSize},}, useSortBy, usePagination);
+export const DataTable: React.FunctionComponent<DataTableProps> = ({
+ data,
+ columns,
+ pageSize = 10,
+ maxW,
+ pb,
+}) => {
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ rows,
+ prepareRow,
+ pageOptions,
+ canNextPage,
+ nextPage,
+ canPreviousPage,
+ previousPage,
+ state: { pageIndex },
+ } = useTable(
+ { columns: columns as any, data, initialState: { pageIndex: 0, pageSize } },
+ useSortBy,
+ usePagination
+ );
- const last = data.length;
- const start = (pageIndex * pageSize) + 1;
- const end = Math.min((pageIndex + 1) * pageSize, last);
+ const last = data.length;
+ const start = pageIndex * pageSize + 1;
+ const end = Math.min((pageIndex + 1) * pageSize, last);
- return (
- <VStack maxW={maxW} pb={pb}>
- <Table {...getTableProps()} size={"sm"}>
- <Thead>
- {headerGroups.map((headerGroup) => (
- <Tr {...headerGroup.getHeaderGroupProps()}>
- {headerGroup.headers.map((column: any) => (
- <Th
- {...column.getHeaderProps(column.getSortByToggleProps())}
- isNumeric={column.isNumeric}
- >
- {column.render("Header")}
- <chakra.span pl="4">
- {column.isSorted ? (
- column.isSortedDesc ? (
- <TriangleDownIcon aria-label="sorted descending"/>
- ) : (
- <TriangleUpIcon aria-label="sorted ascending"/>
- )
- ) : null}
- </chakra.span>
- </Th>
- ))}
- </Tr>
- ))}
- </Thead>
- <Tbody {...getTableBodyProps()}>
- {rows.slice(start - 1, end).map((row: any) => {
- prepareRow(row);
- return (
- <Tr {...row.getRowProps()}>
- {row.cells.map((cell: any) => (
- <Td {...cell.getCellProps()} isNumeric={cell.column.isNumeric}>
- {cell.render("Cell")}
- </Td>
- ))}
- </Tr>
- );
- })}
- </Tbody>
- </Table>
- {pageOptions.length > 1 ?
- (<Flex width={"100%"} pr={10} justifyContent={"flex-end"} pt={4}>
- <Text fontSize={"sm"} pr={2}>Showing {start} to {end} of {last}. </Text>
- <HiChevronLeft color={canPreviousPage ? 'black': 'dimgray'} onClick={previousPage}/>
- <HiChevronRight color={canNextPage ? 'black': 'dimgray'} onClick={nextPage}/>
- </Flex>) : null}
- </VStack>
- );
- }
-;
+ return (
+ <VStack maxW={maxW} pb={pb}>
+ <Table {...getTableProps()} size={"sm"}>
+ <Thead>
+ {headerGroups.map((headerGroup) => (
+ <Tr {...headerGroup.getHeaderGroupProps()}>
+ {headerGroup.headers.map((column: any) => (
+ <Th
+ {...column.getHeaderProps(column.getSortByToggleProps())}
+ isNumeric={column.isNumeric}
+ >
+ {column.render("Header")}
+ <chakra.span pl="4">
+ {column.isSorted ? (
+ column.isSortedDesc ? (
+ <TriangleDownIcon aria-label="sorted descending" />
+ ) : (
+ <TriangleUpIcon aria-label="sorted ascending" />
+ )
+ ) : null}
+ </chakra.span>
+ </Th>
+ ))}
+ </Tr>
+ ))}
+ </Thead>
+ <Tbody {...getTableBodyProps()}>
+ {rows.slice(start - 1, end).map((row: any) => {
+ prepareRow(row);
+ return (
+ <Tr {...row.getRowProps()}>
+ {row.cells.map((cell: any) => (
+ <Td
+ {...cell.getCellProps()}
+ isNumeric={cell.column.isNumeric}
+ >
+ {cell.render("Cell")}
+ </Td>
+ ))}
+ </Tr>
+ );
+ })}
+ </Tbody>
+ </Table>
+ {pageOptions.length > 1 ? (
+ <Flex width={"100%"} pr={10} justifyContent={"flex-end"} pt={4}>
+ <Text fontSize={"sm"} pr={2}>
+ Showing {start} to {end} of {last}.{" "}
+ </Text>
+ <HiChevronLeft
+ color={canPreviousPage ? "black" : "dimgray"}
+ onClick={previousPage}
+ />
+ <HiChevronRight
+ color={canNextPage ? "black" : "dimgray"}
+ onClick={nextPage}
+ />
+ </Flex>
+ ) : null}
+ </VStack>
+ );
+};
diff --git a/ballista/ui/scheduler/src/components/Footer.tsx b/ballista/ui/scheduler/src/components/Footer.tsx
index ab03898..acab608 100644
--- a/ballista/ui/scheduler/src/components/Footer.tsx
+++ b/ballista/ui/scheduler/src/components/Footer.tsx
@@ -16,13 +16,19 @@
// under the License.
import React from "react";
-import {Flex, Text} from "@chakra-ui/react";
-
+import { Flex, Text } from "@chakra-ui/react";
export const Footer: React.FunctionComponent = () => {
- return (
- <Flex borderTop={"1px solid #f1f1f1"} w={"100%"} p={4} justifyContent={"flex-end"}>
- <Text fontSize="md" fontStyle={"italic"}>Licensed under the Apache License, Version 2.0.</Text>
- </Flex>
- )
-}
\ No newline at end of file
+ return (
+ <Flex
+ borderTop={"1px solid #f1f1f1"}
+ w={"100%"}
+ p={4}
+ justifyContent={"flex-end"}
+ >
+ <Text fontSize="md" fontStyle={"italic"}>
+ Licensed under the Apache License, Version 2.0.
+ </Text>
+ </Flex>
+ );
+};
diff --git a/ballista/ui/scheduler/src/components/Header.tsx b/ballista/ui/scheduler/src/components/Header.tsx
index 1a0b0f1..5f80212 100644
--- a/ballista/ui/scheduler/src/components/Header.tsx
+++ b/ballista/ui/scheduler/src/components/Header.tsx
@@ -16,67 +16,80 @@
// under the License.
import React from "react";
-import {Box, Flex, Text, Button} from "@chakra-ui/react";
+import { Box, Flex, Text, Button } from "@chakra-ui/react";
import Logo from "./logo.svg";
-import {AiFillGithub, HiDocumentText} from "react-icons/all";
-import {SchedulerState} from "./Summary";
+import { AiFillGithub, HiDocumentText } from "react-icons/all";
+import { SchedulerState } from "./Summary";
-export const NavBarContainer: React.FunctionComponent<React.PropsWithChildren<any>> = ({children, ...props}) => {
- return (
- <Flex
- as="nav"
- align="center"
- justify="space-between"
- wrap="wrap"
- w="100%"
- padding={1}
- bg={["white"]}
- {...props}
- >
- {children}
- </Flex>
- );
+export const NavBarContainer: React.FunctionComponent<
+ React.PropsWithChildren<any>
+> = ({ children, ...props }) => {
+ return (
+ <Flex
+ as="nav"
+ align="center"
+ justify="space-between"
+ wrap="wrap"
+ w="100%"
+ padding={1}
+ bg={["white"]}
+ {...props}
+ >
+ {children}
+ </Flex>
+ );
};
interface HeaderProps {
- schedulerState?: SchedulerState
+ schedulerState?: SchedulerState;
}
-export const Header: React.FunctionComponent<HeaderProps> = ({schedulerState}) => {
- return (
- <NavBarContainer borderBottom={"1px"} borderBottomColor={"#f1f1f1"}>
- <Box w="100%" alignItems={"flex-start"}>
- <NavBarContainer>
- <Flex flexDirection={"row"} alignItems={"center"}>
- <img alt={"Ballista Logo"} src={Logo}/>
- <Text
- background={"aliceblue"}
- ml={4}
- fontSize="md"
- padding={1}
- borderRadius={4}
- >
- Version - {schedulerState?.version}
- </Text>
- </Flex>
- <Flex>
- <a rel={"noreferrer"} target={"_blank"} href={"https://ballistacompute.org/docs/"}>
- <Button mr={4} colorScheme="blue" size="sm" rightIcon={<HiDocumentText/>}>
- Docs
- </Button>
- </a>
- <a
- rel="noreferrer"
- href={"https://github.com/apache/arrow-datafusion"}
- target={"_blank"}
- >
- <Button colorScheme="blue" size="sm" rightIcon={<AiFillGithub/>}>
- GitHub
- </Button>
- </a>
- </Flex>
- </NavBarContainer>
- </Box>
+export const Header: React.FunctionComponent<HeaderProps> = ({
+ schedulerState,
+}) => {
+ return (
+ <NavBarContainer borderBottom={"1px"} borderBottomColor={"#f1f1f1"}>
+ <Box w="100%" alignItems={"flex-start"}>
+ <NavBarContainer>
+ <Flex flexDirection={"row"} alignItems={"center"}>
+ <img alt={"Ballista Logo"} src={Logo} />
+ <Text
+ background={"aliceblue"}
+ ml={4}
+ fontSize="md"
+ padding={1}
+ borderRadius={4}
+ >
+ Version - {schedulerState?.version}
+ </Text>
+ </Flex>
+ <Flex>
+ <a
+ rel={"noreferrer"}
+ target={"_blank"}
+ href={"https://ballistacompute.org/docs/"}
+ >
+ <Button
+ mr={4}
+ colorScheme="blue"
+ size="sm"
+ rightIcon={<HiDocumentText />}
+ >
+ Docs
+ </Button>
+ </a>
+ <a
+ rel="noreferrer"
+ href={"https://github.com/apache/arrow-datafusion"}
+ target={"_blank"}
+ >
+ <Button colorScheme="blue" size="sm" rightIcon={<AiFillGithub />}>
+ GitHub
+ </Button>
+ </a>
+ </Flex>
</NavBarContainer>
- );
+ </Box>
+ </NavBarContainer>
+ );
};
diff --git a/ballista/ui/scheduler/src/components/NodesList.tsx b/ballista/ui/scheduler/src/components/NodesList.tsx
index 2690e86..3ad85fc 100644
--- a/ballista/ui/scheduler/src/components/NodesList.tsx
+++ b/ballista/ui/scheduler/src/components/NodesList.tsx
@@ -16,12 +16,12 @@
// under the License.
import React from "react";
-import {Box } from "@chakra-ui/react";
-import {Column, DateCell, DataTable} from "./DataTable";
+import { Box } from "@chakra-ui/react";
+import { Column, DateCell, DataTable } from "./DataTable";
export enum NodeStatus {
RUNNING = "RUNNING",
- TERMINATED = "TERMINATED"
+ TERMINATED = "TERMINATED",
}
export interface NodeInfo {
@@ -32,7 +32,7 @@ export interface NodeInfo {
started: string;
}
-const columns : Column<any>[] = [
+const columns: Column<any>[] = [
{
Header: "Node",
accessor: "id",
@@ -57,7 +57,7 @@ const columns : Column<any>[] = [
];
interface NodesListProps {
- nodes: NodeInfo[]
+ nodes: NodeInfo[];
}
export const NodesList: React.FunctionComponent<NodesListProps> = ({
diff --git a/ballista/ui/scheduler/src/components/QueriesList.tsx b/ballista/ui/scheduler/src/components/QueriesList.tsx
index 2d7166a..447a507 100644
--- a/ballista/ui/scheduler/src/components/QueriesList.tsx
+++ b/ballista/ui/scheduler/src/components/QueriesList.tsx
@@ -16,100 +16,126 @@
// under the License.
import React from "react";
-import {CircularProgress, CircularProgressLabel, VStack, Skeleton, Stack, Text, Flex, Box} from "@chakra-ui/react";
-import {Column, DateCell, DataTable, LinkCell} from "./DataTable";
-import {FaStop} from "react-icons/fa";
-import {GrPowerReset} from "react-icons/gr";
+import {
+ CircularProgress,
+ CircularProgressLabel,
+ VStack,
+ Skeleton,
+ Stack,
+ Text,
+ Flex,
+ Box,
+} from "@chakra-ui/react";
+import { Column, DateCell, DataTable, LinkCell } from "./DataTable";
+import { FaStop } from "react-icons/fa";
+import { GrPowerReset } from "react-icons/gr";
export enum QueryStatus {
- QUEUED = "QUEUED",
- RUNNING = "RUNNING",
- FAILED = "FAILED",
- COMPLETED = "COMPLETED",
+ QUEUED = "QUEUED",
+ RUNNING = "RUNNING",
+ FAILED = "FAILED",
+ COMPLETED = "COMPLETED",
}
export interface Query {
- uuid: string;
- query: string;
- status: QueryStatus;
- progress: number;
- started: string;
+ uuid: string;
+ query: string;
+ status: QueryStatus;
+ progress: number;
+ started: string;
}
export interface QueriesListProps {
- queries?: Query[];
+ queries?: Query[];
}
export const ActionsCell: (props: any) => React.ReactNode = (props: any) => {
- return (
- <Flex>
- <FaStop color={"red"} title={"stop"}/>
- <Box mx={2}></Box>
- <GrPowerReset title={"Retry"}/>
- </Flex>
- )
-}
+ return (
+ <Flex>
+ <FaStop color={"red"} title={"stop"} />
+ <Box mx={2}></Box>
+ <GrPowerReset title={"Retry"} />
+ </Flex>
+ );
+};
export const ProgressCell: (props: any) => React.ReactNode = (props: any) => {
- return (
- <CircularProgress value={props.value} color="orange.400">
- <CircularProgressLabel>{props.value}%</CircularProgressLabel>
- </CircularProgress>
- )
-}
+ return (
+ <CircularProgress value={props.value} color="orange.400">
+ <CircularProgressLabel>{props.value}%</CircularProgressLabel>
+ </CircularProgress>
+ );
+};
const columns: Column<any>[] = [
- {
- Header: "UUID",
- accessor: "uuid",
- Cell: LinkCell
- },
- {
- Header: "Query",
- accessor: "query",
- },
- {
- Header: "Status",
- accessor: "status",
- },
- {
- Header: "Progress",
- accessor: "progress",
- Cell: ProgressCell,
- },
- {
- Header: "Started",
- accessor: "started",
- Cell: DateCell,
- },
- {
- Header: "Actions",
- accessor: "",
- Cell: ActionsCell,
- }
+ {
+ Header: "UUID",
+ accessor: "uuid",
+ Cell: LinkCell,
+ },
+ {
+ Header: "Query",
+ accessor: "query",
+ },
+ {
+ Header: "Status",
+ accessor: "status",
+ },
+ {
+ Header: "Progress",
+ accessor: "progress",
+ Cell: ProgressCell,
+ },
+ {
+ Header: "Started",
+ accessor: "started",
+ Cell: DateCell,
+ },
+ {
+ Header: "Actions",
+ accessor: "",
+ Cell: ActionsCell,
+ },
];
const getSkeletion = () => (
- <>
- <Skeleton height={5}/>
- <Skeleton height={5}/>
- <Skeleton height={5}/>
- <Skeleton height={5}/>
- <Skeleton height={5}/>
- <Skeleton height={5}/>
- </>
-)
+ <>
+ <Skeleton height={5} />
+ <Skeleton height={5} />
+ <Skeleton height={5} />
+ <Skeleton height={5} />
+ <Skeleton height={5} />
+ <Skeleton height={5} />
+ </>
+);
-export const QueriesList: React.FunctionComponent<QueriesListProps> = ({queries}) => {
- const isLoaded = typeof queries !== "undefined";
+export const QueriesList: React.FunctionComponent<QueriesListProps> = ({
+ queries,
+}) => {
+ const isLoaded = typeof queries !== "undefined";
- //TODO: Remove blur once queries api is ready
- return (
- <VStack flex={1} p={4} w={"100%"} alignItems={"flex-start"} filter="blur(3px)">
- <Text mb={4}>Queries</Text>
- <Stack w={"100%"} flex={1}>
- {isLoaded ? <DataTable columns={columns} data={queries || []} pageSize={10} pb={10}/> : getSkeletion()}
- </Stack>
- </VStack>
- )
-};
\ No newline at end of file
+ //TODO: Remove blur once queries api is ready
+ return (
+ <VStack
+ flex={1}
+ p={4}
+ w={"100%"}
+ alignItems={"flex-start"}
+ filter="blur(3px)"
+ >
+ <Text mb={4}>Queries</Text>
+ <Stack w={"100%"} flex={1}>
+ {isLoaded ? (
+ <DataTable
+ columns={columns}
+ data={queries || []}
+ pageSize={10}
+ pb={10}
+ />
+ ) : (
+ getSkeletion()
+ )}
+ </Stack>
+ </VStack>
+ );
+};
diff --git a/ballista/ui/scheduler/src/components/Summary.tsx b/ballista/ui/scheduler/src/components/Summary.tsx
index 2e52498..9fe1a23 100644
--- a/ballista/ui/scheduler/src/components/Summary.tsx
+++ b/ballista/ui/scheduler/src/components/Summary.tsx
@@ -39,13 +39,14 @@ export interface SchedulerState {
}
export interface SummaryProps {
- schedulerState?: SchedulerState
+ schedulerState?: SchedulerState;
}
-export const Summary: React.FunctionComponent<SummaryProps> = ({schedulerState}) => {
-
+export const Summary: React.FunctionComponent<SummaryProps> = ({
+ schedulerState,
+}) => {
if (!schedulerState) {
- return <Text>Scheduler isn't running</Text>
+ return <Text>Scheduler isn't running</Text>;
}
return (
@@ -58,7 +59,9 @@ export const Summary: React.FunctionComponent<SummaryProps> = ({schedulerState})
alignItems={"flex-start"}
fontWeight={"normal"}
>
- <Text fontWeight={"light"} mb={2}>General Cluster Info</Text>
+ <Text fontWeight={"light"} mb={2}>
+ General Cluster Info
+ </Text>
<Flex>
<Label>Status</Label>
<Flex alignItems={"center"}>
diff --git a/ballista/ui/scheduler/yarn.lock b/ballista/ui/scheduler/yarn.lock
index f2ea84b..9374802 100644
--- a/ballista/ui/scheduler/yarn.lock
+++ b/ballista/ui/scheduler/yarn.lock
@@ -9537,10 +9537,10 @@ prepend-http@^1.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
-prettier@^2.2.1:
- version "2.2.1"
- resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
- integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+prettier@^2.3.0:
+ version "2.3.1"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.1.tgz#76903c3f8c4449bc9ac597acefa24dc5ad4cbea6"
+ integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==
pretty-bytes@^5.3.0:
version "5.6.0"