partial: Funding and Logs pages
This commit is contained in:
Rafael Taranto
parent
8d7f507d6e
commit
c425195ade
9 changed files with 226 additions and 311 deletions
|
|
@ -1,6 +1,5 @@
|
|||
import { useQuery, gql } from '@apollo/client'
|
||||
import { formatCryptoAddress } from '@lamassu/coins/lightUtils'
|
||||
import { makeStyles } from '@mui/styles'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import classnames from 'classnames'
|
||||
import { format } from 'date-fns/fp'
|
||||
|
|
@ -23,12 +22,11 @@ import CopyToClipboard from 'src/components/CopyToClipboard.jsx'
|
|||
|
||||
import { primaryColor } from 'src/styling/variables'
|
||||
|
||||
import styles from './Funding.styles'
|
||||
import classes from './Funding.module.css'
|
||||
|
||||
const NODE_NOT_CONNECTED_ERR =
|
||||
"Couldn't establish connection with the node. Make sure it is installed and try again"
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
const sizes = {
|
||||
big: 165,
|
||||
time: 140,
|
||||
|
|
@ -79,7 +77,6 @@ const getPendingTotal = list => {
|
|||
const Funding = () => {
|
||||
const [selected, setSelected] = useState(null)
|
||||
const [viewHistory] = useState(false)
|
||||
const classes = useStyles()
|
||||
const fundingHistory = [
|
||||
{
|
||||
cryptoAmount: 2.0,
|
||||
|
|
@ -194,7 +191,7 @@ const Funding = () => {
|
|||
<Info1 inline noMargin>
|
||||
{`${selected.confirmedBalance} ${selected.cryptoCode}`}
|
||||
</Info1>
|
||||
<Info2 inline noMargin className={classes.leftSpacer}>
|
||||
<Info2 inline noMargin className="ml-2">
|
||||
{`(${signIfPositive(selected.pending)} ${
|
||||
selected.pending
|
||||
} pending)`}
|
||||
|
|
@ -207,7 +204,7 @@ const Funding = () => {
|
|||
selected.fiatCode
|
||||
}`}
|
||||
</Info3>
|
||||
<Label3 inline noMargin className={classes.leftSpacer}>
|
||||
<Label3 inline noMargin className="ml-2">
|
||||
{`(${signIfPositive(selected.fiatPending)} ${formatNumber(
|
||||
selected.fiatPending
|
||||
)} pending)`}
|
||||
|
|
|
|||
107
new-lamassu-admin/src/pages/Funding.module.css
Normal file
107
new-lamassu-admin/src/pages/Funding.module.css
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.firstSide {
|
||||
margin: 0 64px 0 48px;
|
||||
}
|
||||
|
||||
.secondSide {
|
||||
margin-top: -29px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--tomato);
|
||||
}
|
||||
|
||||
.coinTotal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.topSpacer {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.addressWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background-color: var(--zircon);
|
||||
}
|
||||
|
||||
.address {
|
||||
width: 375px;
|
||||
margin: 12px 24px;
|
||||
}
|
||||
|
||||
.itemWrapper {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-family: var(--museo);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.inactiveItem {
|
||||
color: var(--comet);
|
||||
}
|
||||
|
||||
.firstItem {
|
||||
font-weight: 700;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.total {
|
||||
margin-top: auto;
|
||||
text-align: right;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.totalPending {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.totalTitle {
|
||||
color: var(--comet);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-top: 8px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
.tableLabel {
|
||||
justify-content: end;
|
||||
margin-top: -38px;
|
||||
}
|
||||
|
||||
.pending {
|
||||
background-color: var(--zircon);
|
||||
}
|
||||
|
||||
.copyToClipboard {
|
||||
margin-left: auto;
|
||||
padding-top: 6px;
|
||||
padding-left: 15px;
|
||||
margin-right: -11px;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--bpmono);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
width: 375px;
|
||||
margin: 12px 24px;
|
||||
}
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
import typographyStyles from 'src/components/typography/styles'
|
||||
import {
|
||||
disabledColor2,
|
||||
spacer,
|
||||
subheaderColor,
|
||||
errorColor,
|
||||
placeholderColor,
|
||||
comet
|
||||
} from 'src/styling/variables'
|
||||
|
||||
const { label1, mono } = typographyStyles
|
||||
|
||||
export default {
|
||||
wrapper: {
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
height: '100%'
|
||||
},
|
||||
main: {
|
||||
display: 'flex',
|
||||
flex: 1
|
||||
},
|
||||
firstSide: {
|
||||
margin: `0 ${spacer * 8}px 0 ${spacer * 6}px`
|
||||
},
|
||||
secondSide: {
|
||||
marginTop: -29
|
||||
},
|
||||
error: {
|
||||
color: errorColor
|
||||
},
|
||||
coinTotal: {
|
||||
margin: `${spacer * 1.5}px 0`
|
||||
},
|
||||
leftSpacer: {
|
||||
marginLeft: spacer
|
||||
},
|
||||
topSpacer: {
|
||||
marginTop: spacer * 5
|
||||
},
|
||||
addressWrapper: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
backgroundColor: subheaderColor
|
||||
},
|
||||
address: {
|
||||
width: 375,
|
||||
margin: `${spacer * 1.5}px ${spacer * 3}px`
|
||||
},
|
||||
itemWrapper: {
|
||||
textAlign: 'end'
|
||||
},
|
||||
item: {
|
||||
extend: label1,
|
||||
margin: 2
|
||||
},
|
||||
inactiveItem: {
|
||||
color: comet
|
||||
},
|
||||
firstItem: {
|
||||
fontWeight: 700,
|
||||
margin: 2
|
||||
},
|
||||
total: {
|
||||
marginTop: 'auto',
|
||||
textAlign: 'right',
|
||||
marginRight: 24
|
||||
},
|
||||
totalPending: {
|
||||
marginTop: 2
|
||||
},
|
||||
totalTitle: {
|
||||
color: placeholderColor,
|
||||
marginBottom: 2
|
||||
},
|
||||
table: {
|
||||
marginTop: spacer,
|
||||
marginLeft: spacer * 6
|
||||
},
|
||||
tableLabel: {
|
||||
justifyContent: 'end',
|
||||
marginTop: -38
|
||||
},
|
||||
pending: {
|
||||
backgroundColor: disabledColor2
|
||||
},
|
||||
copyToClipboard: {
|
||||
marginLeft: 'auto',
|
||||
paddingTop: 6,
|
||||
paddingLeft: 15,
|
||||
marginRight: -11
|
||||
},
|
||||
mono: {
|
||||
extend: mono,
|
||||
width: 375,
|
||||
margin: `${spacer * 1.5}px ${spacer * 3}px`
|
||||
}
|
||||
}
|
||||
74
new-lamassu-admin/src/pages/Logs.module.css
Normal file
74
new-lamassu-admin/src/pages/Logs.module.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
.titleWrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tableWrapper {
|
||||
flex: 1;
|
||||
margin-left: 40px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
max-width: 78%;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.table {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.dateColumn {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.levelColumn {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.fillColumn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shareButton {
|
||||
margin: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.shareIcon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.titleAndButtonsContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.buttonsWrapper {
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.buttonsWrapper > * {
|
||||
margin: auto 6px;
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import { fontSize5 } from 'src/styling/variables'
|
||||
|
||||
export default {
|
||||
titleWrapper: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row'
|
||||
},
|
||||
wrapper: {
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
height: '100%'
|
||||
},
|
||||
tableWrapper: {
|
||||
flex: 1,
|
||||
marginLeft: 40,
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
width: '100%',
|
||||
maxWidth: '78%',
|
||||
maxHeight: '70vh'
|
||||
},
|
||||
table: {
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'block',
|
||||
'& th': {
|
||||
position: 'sticky',
|
||||
top: 0
|
||||
}
|
||||
},
|
||||
dateColumn: {
|
||||
minWidth: 160
|
||||
},
|
||||
levelColumn: {
|
||||
minWidth: 100
|
||||
},
|
||||
fillColumn: {
|
||||
width: '100%'
|
||||
},
|
||||
shareButton: {
|
||||
margin: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: fontSize5,
|
||||
padding: [[0, 12]]
|
||||
},
|
||||
shareIcon: {
|
||||
marginRight: 6
|
||||
},
|
||||
button: {
|
||||
margin: 8
|
||||
},
|
||||
titleAndButtonsContainer: {
|
||||
display: 'flex'
|
||||
},
|
||||
buttonsWrapper: {
|
||||
display: 'flex',
|
||||
marginLeft: 16,
|
||||
'& > *': {
|
||||
margin: 'auto 6px'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { useQuery, gql } from "@apollo/client";
|
||||
import { makeStyles } from '@mui/styles'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
|
||||
|
|
@ -17,9 +16,7 @@ import {
|
|||
} from 'src/components/table'
|
||||
import { formatDate } from 'src/utils/timezones'
|
||||
|
||||
import styles from './Logs.styles'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
import classes from './Logs.module.css'
|
||||
|
||||
const GET_MACHINES = gql`
|
||||
{
|
||||
|
|
@ -73,8 +70,6 @@ const GET_DATA = gql`
|
|||
`
|
||||
|
||||
const Logs = () => {
|
||||
const classes = useStyles()
|
||||
|
||||
const [selected, setSelected] = useState(null)
|
||||
const [saveMessage, setSaveMessage] = useState(null)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,90 +0,0 @@
|
|||
import typographyStyles from 'src/components/typography/styles'
|
||||
import baseStyles from 'src/pages/Logs.styles'
|
||||
import { offColor, white } from 'src/styling/variables'
|
||||
|
||||
const { label1, mono, p } = typographyStyles
|
||||
const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
|
||||
|
||||
const cpcStyles = {
|
||||
wrapper: {
|
||||
extend: mono,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: 32
|
||||
},
|
||||
address: {
|
||||
lineBreak: 'anywhere'
|
||||
},
|
||||
buttonWrapper: {
|
||||
'& button': {
|
||||
border: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
cursor: 'pointer'
|
||||
}
|
||||
},
|
||||
popoverContent: {
|
||||
extend: label1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
color: white,
|
||||
borderRadius: 4,
|
||||
padding: [[5, 9]]
|
||||
}
|
||||
}
|
||||
|
||||
const detailsRowStyles = {
|
||||
idCardDataCard: {
|
||||
extend: p,
|
||||
display: 'flex',
|
||||
padding: [[11, 8]],
|
||||
'& > div': {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'& > div': {
|
||||
width: 144,
|
||||
height: 37,
|
||||
marginBottom: 15,
|
||||
'&:last-child': {
|
||||
marginBottom: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const labelStyles = {
|
||||
label: {
|
||||
extend: label1,
|
||||
color: offColor,
|
||||
marginBottom: 4
|
||||
}
|
||||
}
|
||||
|
||||
const mainStyles = {
|
||||
titleWrapper,
|
||||
titleAndButtonsContainer,
|
||||
buttonsWrapper,
|
||||
headerLabels: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
'& div': {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
'& > div:first-child': {
|
||||
marginRight: 24
|
||||
},
|
||||
'& span': {
|
||||
extend: label1,
|
||||
marginLeft: 6
|
||||
}
|
||||
},
|
||||
overflowTd: {
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
}
|
||||
}
|
||||
|
||||
export { cpcStyles, detailsRowStyles, labelStyles, mainStyles }
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { useQuery, gql } from "@apollo/client";
|
||||
import { makeStyles } from '@mui/styles'
|
||||
import { useQuery, gql } from '@apollo/client'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState, useRef } from 'react'
|
||||
import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
|
||||
|
|
@ -16,47 +15,23 @@ import {
|
|||
TableBody,
|
||||
TableCell
|
||||
} from 'src/components/table'
|
||||
import typographyStyles from 'src/components/typography/styles'
|
||||
import { offColor } from 'src/styling/variables'
|
||||
import { startCase } from 'src/utils/string'
|
||||
import { formatDate } from 'src/utils/timezones'
|
||||
|
||||
import logsStyles from './Logs.styles'
|
||||
|
||||
const { p } = typographyStyles
|
||||
const { tableWrapper } = logsStyles
|
||||
|
||||
const localStyles = {
|
||||
serverTableWrapper: {
|
||||
extend: tableWrapper,
|
||||
maxWidth: '100%',
|
||||
marginLeft: 0
|
||||
},
|
||||
serverVersion: {
|
||||
extend: p,
|
||||
color: offColor,
|
||||
margin: 'auto 0 auto 0'
|
||||
},
|
||||
headerLine2: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 24
|
||||
},
|
||||
uptimeContainer: {
|
||||
margin: 'auto 0 auto 0'
|
||||
}
|
||||
}
|
||||
|
||||
const styles = R.merge(logsStyles, localStyles)
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
import logsClasses from './Logs.module.css'
|
||||
import classes from './ServerLogs.module.css'
|
||||
|
||||
const SHOW_ALL = { code: 'SHOW_ALL', display: 'Show all' }
|
||||
|
||||
const NUM_LOG_RESULTS = 500
|
||||
|
||||
const GET_CSV = gql`
|
||||
query ServerData($limit: Int, $from: DateTimeISO, $until: DateTimeISO, $timezone: String) {
|
||||
query ServerData(
|
||||
$limit: Int
|
||||
$from: DateTimeISO
|
||||
$until: DateTimeISO
|
||||
$timezone: String
|
||||
) {
|
||||
serverLogsCsv(
|
||||
limit: $limit
|
||||
from: $from
|
||||
|
|
@ -90,8 +65,6 @@ const GET_DATA = gql`
|
|||
`
|
||||
|
||||
const Logs = () => {
|
||||
const classes = useStyles()
|
||||
|
||||
const tableEl = useRef()
|
||||
|
||||
const [saveMessage, setSaveMessage] = useState(null)
|
||||
|
|
@ -135,11 +108,11 @@ const Logs = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className={classes.titleWrapper}>
|
||||
<div className={classes.titleAndButtonsContainer}>
|
||||
<div className={logsClasses.titleWrapper}>
|
||||
<div className={logsClasses.titleAndButtonsContainer}>
|
||||
<Title>Server</Title>
|
||||
{data && (
|
||||
<div className={classes.buttonsWrapper}>
|
||||
<div className={logsClasses.buttonsWrapper}>
|
||||
<LogsDowloaderPopover
|
||||
title="Download logs"
|
||||
name="server-logs"
|
||||
|
|
@ -174,14 +147,18 @@ const Logs = () => {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={logsClasses.wrapper}>
|
||||
<div ref={tableEl} className={classes.serverTableWrapper}>
|
||||
<Table className={classes.table}>
|
||||
<Table className={logsClasses.table}>
|
||||
<TableHead>
|
||||
<TableRow header>
|
||||
<TableHeader className={classes.dateColumn}>Date</TableHeader>
|
||||
<TableHeader className={classes.levelColumn}>Level</TableHeader>
|
||||
<TableHeader className={classes.fillColumn} />
|
||||
<TableHeader className={logsClasses.dateColumn}>
|
||||
Date
|
||||
</TableHeader>
|
||||
<TableHeader className={logsClasses.levelColumn}>
|
||||
Level
|
||||
</TableHeader>
|
||||
<TableHeader className={logsClasses.fillColumn} />
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
|
|||
20
new-lamassu-admin/src/pages/ServerLogs.module.css
Normal file
20
new-lamassu-admin/src/pages/ServerLogs.module.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.serverTableWrapper {
|
||||
composes: tableWrapper from './Logs.module.css';
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.serverVersion {
|
||||
color: var(--comet);
|
||||
margin: auto 0 auto 0;
|
||||
}
|
||||
|
||||
.headerLine2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.uptimeContainer {
|
||||
margin: auto 0 auto 0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue