mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

can upload and get dashboard

pull/387/head
Tim Pechersky 2021-11-10 15:30:29 +00:00
rodzic 402fcddf87
commit c95662e8dc
6 zmienionych plików z 268 dodań i 20 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

187
frontend/src/components/NewDashboard.js
Wyświetl plik

@ -39,9 +39,21 @@ const NewDashboard = (props) => {
subscriptions: [
{
label: "",
id: null,
abi: false,
subscription_id: null,
isMethods: false,
isEvents: false,
generic: {
transactions: {
in: false,
out: false,
},
value: {
in: false,
out: false,
balance: false,
},
},
},
],
}
@ -99,20 +111,54 @@ const NewDashboard = (props) => {
// borderWidth="1px"
variant="simple"
colorScheme="blue"
justifyContent="center"
// justifyContent="center"
textAlign="center"
borderBottomRadius="xl"
alignItems="baseline"
// alignItems="baseline"
h="auto"
size="sm"
mt={0}
>
<Thead>
<Tr>
<Th>Address</Th>
<Th w="90px">ABI State</Th>
<Th w="90px">Methods</Th>
<Th w="90px">Events</Th>
<Th w="60px"></Th>
<Th textAlign="center">Address</Th>
<Th textAlign="center" colSpan="3">
ABI
</Th>
<Th textAlign="center" colSpan="2">
Transactions
</Th>
<Th textAlign="center" colSpan="3">
Value
</Th>
</Tr>
<Tr>
<Th></Th>
<Th p={1} textAlign="center">
ABI
</Th>
<Th p={1} textAlign="center">
Methods
</Th>
<Th p={1} textAlign="center">
Events
</Th>
<Th p={1} textAlign="center">
In
</Th>
<Th p={1} textAlign="center">
Out
</Th>
<Th p={1} textAlign="center">
In
</Th>
<Th p={1} textAlign="center">
Out
</Th>
<Th p={1} textAlign="center">
Balance
</Th>
</Tr>
</Thead>
<Tbody>
@ -127,7 +173,25 @@ const NewDashboard = (props) => {
<Downshift
onSelect={(selectedItem) => {
const newState = { ...newDashboardForm };
newState.subscriptions[idx] = selectedItem;
newState.subscriptions[idx] = {
label: selectedItem.label,
address: selectedItem.address,
subscription_id: selectedItem.id,
abi: selectedItem.abi,
isMethods: false,
isEvents: false,
generic: {
transactions: {
in: false,
out: false,
},
value: {
in: false,
out: false,
balance: false,
},
},
};
setNewDashboardForm(newState);
}}
// isOpen={showSuggestions}
@ -382,7 +446,7 @@ const NewDashboard = (props) => {
// </AutoComplete>
)}
</Td>
<Td w="90px">
<Td p={1} textAlign="center">
{subscibedItem.abi && subscibedItem.address && (
<CheckCircleIcon color="green" />
)}
@ -404,24 +468,100 @@ const NewDashboard = (props) => {
)}
</Td>
<Td w="60px">
<Td p={1} textAlign="center">
<Checkbox
isDisabled={
!subscibedItem.address || !subscibedItem.abi
}
isDisabled={!subscibedItem.abi}
onChange={() => {
const newState = { ...newDashboardForm };
newState.subscriptions[idx] = {
...newState.subscriptions[idx],
isMethods: !newState.subscriptions[idx].isMethods,
};
setNewDashboardForm(newState);
}}
isChecked={subscibedItem.isMethods}
></Checkbox>
</Td>
<Td w="60px">
<Td p={1} textAlign="center">
<Checkbox
isDisabled={
!subscibedItem.address || !subscibedItem.abi
}
onChange={() => {
const newState = { ...newDashboardForm };
newState.subscriptions[idx] = {
...newState.subscriptions[idx],
isEvents: !newState.subscriptions[idx].isEvents,
};
setNewDashboardForm(newState);
}}
isChecked={subscibedItem.isEvents}
></Checkbox>
</Td>
<Td p={1} textAlign="center">
<Checkbox
isDisabled={!subscibedItem.address}
onChange={() => {
const newState = { ...newDashboardForm };
newState.subscriptions[idx].generic.transactions.in =
!newState.subscriptions[idx].generic.transactions
.in;
setNewDashboardForm(newState);
}}
isChecked={subscibedItem.generic.transactions.in}
></Checkbox>
</Td>
<Td p={1} textAlign="center">
<Checkbox
isDisabled={!subscibedItem.address}
onChange={() => {
const newState = { ...newDashboardForm };
newState.subscriptions[idx].generic.transactions.out =
!newState.subscriptions[idx].generic.transactions
.out;
setNewDashboardForm(newState);
}}
isChecked={subscibedItem.generic.transactions.out}
></Checkbox>
</Td>
<Td p={1} textAlign="center">
<Checkbox
isDisabled={!subscibedItem.address}
onChange={() => {
const newState = { ...newDashboardForm };
newState.subscriptions[idx].generic.value.in =
!newState.subscriptions[idx].generic.value.in;
setNewDashboardForm(newState);
}}
isChecked={subscibedItem.generic.value.in}
></Checkbox>
</Td>
<Td p={1} textAlign="center">
<Checkbox
isDisabled={!subscibedItem.address}
onChange={() => {
const newState = { ...newDashboardForm };
newState.subscriptions[idx].generic.value.out =
!newState.subscriptions[idx].generic.value.out;
setNewDashboardForm(newState);
}}
isChecked={subscibedItem.generic.value.out}
></Checkbox>
</Td>
<Td p={1} textAlign="center">
<Checkbox
isDisabled={!subscibedItem.address}
onChange={() => {
const newState = { ...newDashboardForm };
newState.subscriptions[idx].generic.balance =
!newState.subscriptions[idx].generic.balance;
setNewDashboardForm(newState);
}}
isChecked={subscibedItem.generic.balance}
></Checkbox>
</Td>
<Td>
<Td p={1} textAlign="center">
{idx > 0 && (
<CloseButton
onClick={() => {
@ -456,8 +596,21 @@ const NewDashboard = (props) => {
const newState = { ...newDashboardForm };
newState.subscriptions.push({
label: "",
id: null,
abi: false,
subscription_id: null,
isMethods: false,
isEvents: false,
generic: {
transactions: {
in: false,
out: false,
},
value: {
in: false,
out: false,
balance: false,
},
},
});
setNewDashboardForm(newState);
}}

2
frontend/src/components/Sidebar.js
Wyświetl plik

@ -21,9 +21,11 @@ import { MdSettings } from "react-icons/md";
import { HiAcademicCap } from "react-icons/hi";
import { WHITE_LOGO_W_TEXT_URL } from "../core/constants";
import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
import useDashboard from "../core/hooks/useDashboard";
const Sidebar = () => {
const ui = useContext(UIContext);
const { dashboardsListCache } = useDashboard();
return (
<ProSidebar
width="240px"

35
frontend/src/core/hooks/useDashboard.js 100644
Wyświetl plik

@ -0,0 +1,35 @@
import { useMutation, useQuery } from "react-query";
import { useToast } from ".";
import { queryCacheProps } from "./hookCommon";
import { DashboardService } from "../services";
import { useContext } from "react";
import UserContext from "../providers/UserProvider/context";
const useDashboard = () => {
const toast = useToast();
const { user } = useContext(UserContext);
const createDashboard = useMutation(DashboardService.createDashboard, {
onSuccess: () => {
toast("Created new dashboard", "success");
},
onError: (error) => {
toast(error.error, "error", "Fail");
},
});
const dashboardsListCache = useQuery(
["dashboards-list"],
DashboardService.getDashboardsList,
{
...queryCacheProps,
onError: (error) => {
toast(error, "error");
},
enabled: !!user,
}
);
return { createDashboard, dashboardsListCache };
};
export default useDashboard;

44
frontend/src/core/providers/OverlayProvider/index.js
Wyświetl plik

@ -28,6 +28,7 @@ import {
} from "@chakra-ui/react";
import UserContext from "../UserProvider/context";
import UIContext from "../UIProvider/context";
import useDashboard from "../../hooks/useDashboard";
const ForgotPassword = React.lazy(() =>
import("../../../components/ForgotPassword")
);
@ -43,6 +44,7 @@ const NewSubscription = React.lazy(() =>
const UploadABI = React.lazy(() => import("../../../components/UploadABI"));
const OverlayProvider = ({ children }) => {
const { createDashboard } = useDashboard();
const ui = useContext(UIContext);
const { user } = useContext(UserContext);
const [modal, toggleModal] = useState({
@ -227,15 +229,51 @@ const OverlayProvider = ({ children }) => {
<Button
variant="outline"
mr={3}
onClick={() => toggleAlert(() => toggleDrawer(DRAWER_TYPES.OFF))}
onClick={() =>
toggleAlert(() => {
toggleDrawer(DRAWER_TYPES.OFF);
window.sessionStorage.removeItem("new_dashboard");
})
}
>
Cancel
</Button>
<Button
colorScheme="blue"
isLoading={createDashboard.isLoading}
onClick={() => {
//TODO: @Peersky Implement logic part
console.log("submit clicked");
const dashboardState = JSON.parse(
sessionStorage.getItem("new_dashboard")
);
console.log("dashboardState:", dashboardState);
createDashboard.mutate({
name: dashboardState.name,
subscriptions: dashboardState.subscriptions.map(
(pickedSubscription) => {
const retval = {
subscription_id: pickedSubscription.subscription_id,
generic: [],
all_methods: !!pickedSubscription.isMethods,
all_events: !!pickedSubscription.isEvents,
};
pickedSubscription.generic.transactions.in &&
retval.generic.push({ name: "transactions_in" });
pickedSubscription.generic.transactions.out &&
retval.generic.push({ name: "transactions_out" });
pickedSubscription.generic.value.in &&
retval.generic.push({ name: "value_in" });
pickedSubscription.generic.value.out &&
retval.generic.push({ name: "value_out" });
pickedSubscription.generic.balance &&
retval.generic.push({ name: "balance" });
retval["methods"] = [];
retval["events"] = [];
return retval;
}
),
});
}}
>
Submit

18
frontend/src/core/services/dashboard.service.js 100644
Wyświetl plik

@ -0,0 +1,18 @@
import { http } from "../utils";
const API_URL = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL;
export const createDashboard = (data) => {
return http({
method: "POST",
url: `${API_URL}/dashboards`,
data,
});
};
export const getDashboardsList = () => {
return http({
method: "GET",
url: `${API_URL}/dashboards`,
});
};

2
frontend/src/core/services/index.js
Wyświetl plik

@ -10,6 +10,7 @@ import * as StatusService from "./status.service";
import * as SubscriptionsService from "./subscriptions.service";
import * as StreamService from "./stream.service";
import * as TxInfoService from "./txinfo.service";
import * as DashboardService from "./dashboard.service";
export {
AuthService,
JournalService,
@ -23,4 +24,5 @@ export {
SubscriptionsService,
StreamService,
TxInfoService,
DashboardService,
};