-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from surgioproject/dev
Artifact 流量信息
- Loading branch information
Showing
26 changed files
with
782 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
packages/gateway-frontend/src/components/ProviderCard/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import CardHeader from '@material-ui/core/CardHeader'; | ||
| import CardContent from '@material-ui/core/CardContent'; | ||
| import CardActions from '@material-ui/core/CardActions'; | ||
| import DnsIcon from '@material-ui/icons/Dns'; | ||
| import Chip from '@material-ui/core/Chip'; | ||
| import React from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import Card from '@material-ui/core/Card'; | ||
| import { useSnackbar } from 'notistack'; | ||
|
|
||
| import { Provider } from '../../libs/types'; | ||
| import { defaultFetcher } from '../../libs/utils'; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| ProviderCard: { | ||
| '& .MuiCardActions-root': { | ||
| flexWrap: 'wrap', | ||
| }, | ||
| }, | ||
| providerType: { | ||
| 'margin': theme.spacing(0, 0, 2), | ||
| }, | ||
| urlContainer: { | ||
| 'background-color': '#eee', | ||
| 'padding': theme.spacing(2, 3), | ||
| margin: theme.spacing(2, 0, 0), | ||
| '-webkit-overflow-scrolling': 'touch', | ||
| 'overflow-x': 'scroll', | ||
| 'font-family': [ | ||
| 'fira-code', | ||
| 'monospace', | ||
| ].join(','), | ||
| }, | ||
| actionButton: { | ||
| margin: theme.spacing(1), | ||
| textDecoration: 'none', | ||
| }, | ||
| })); | ||
|
|
||
| export interface ProviderCardProps { | ||
| provider: Provider; | ||
| } | ||
|
|
||
| function ProviderCard({ provider }: ProviderCardProps) { | ||
| const classes = useStyles(); | ||
| const { enqueueSnackbar } = useSnackbar(); | ||
|
|
||
| const checkSubscription = (providerName: string) => { | ||
| (async () => { | ||
| const data = await defaultFetcher<any>(`/api/providers/${providerName}/subscription`); | ||
|
|
||
| if (data) { | ||
| enqueueSnackbar( | ||
| `🤟 已用流量：${data.used} 剩余流量：${data.left} 有效期至：${data.expire}`, | ||
| { variant: 'success' }); | ||
| } else { | ||
| enqueueSnackbar('该 Provider 不支持查询', { variant: 'error' }); | ||
| } | ||
| })() | ||
| .catch(err => { | ||
| enqueueSnackbar('网络问题', { variant: 'error' }); | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <Card className={classes.ProviderCard}> | ||
| <CardHeader title={provider.name} /> | ||
|
|
||
| <CardContent> | ||
| <div className={classes.providerType}> | ||
| <Chip icon={<DnsIcon fontSize="small" />} | ||
| label={provider.type} /> | ||
| </div> | ||
|
|
||
| { | ||
| provider.url ? ( | ||
| <Typography className={classes.urlContainer} | ||
| component="pre" | ||
| paragraph> | ||
| { provider.url } | ||
| </Typography> | ||
| ) : null | ||
| } | ||
| </CardContent> | ||
|
|
||
| <CardActions disableSpacing> | ||
| { | ||
| provider.supportGetSubscriptionUserInfo ? ( | ||
| <Button className={classes.actionButton} | ||
| variant="contained" | ||
| color="primary" | ||
| onClick={() => checkSubscription(provider.name)} | ||
| >查询流量</Button> | ||
| ) : null | ||
| } | ||
| </CardActions> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| export default ProviderCard; |
115 changes: 115 additions & 0 deletions
115
packages/gateway-frontend/src/components/SubscriptionPanel/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import Skeleton from '@material-ui/lab/Skeleton'; | ||
| import CircularProgress from '@material-ui/core/CircularProgress'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import React from 'react'; | ||
| import useSWR from 'swr'; | ||
| import uniqWith from 'lodash-es/uniqWith'; | ||
|
|
||
| import { Provider } from '../../libs/types'; | ||
| import { defaultFetcher } from '../../libs/utils'; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| SubscriptionPanel: { | ||
| padding: theme.spacing(2), | ||
| }, | ||
| SubscriptionPanelItem: {}, | ||
| })); | ||
|
|
||
| export interface SubscriptionPanelItemProps { | ||
| provider: Provider; | ||
| } | ||
|
|
||
| function SubscriptionPanel() { | ||
| const classes = useStyles(); | ||
| const { data: providerList, error } = useSWR<ReadonlyArray<Provider>>( | ||
| '/api/providers', | ||
| defaultFetcher, | ||
| ); | ||
|
|
||
| if (error) { | ||
| return <div>Failed to load</div>; | ||
| } | ||
|
|
||
| if (!providerList) { | ||
| return <CircularProgress />; | ||
| } | ||
|
|
||
| const supportedProviderList = uniqWith( | ||
| providerList | ||
| .filter(provider => provider.supportGetSubscriptionUserInfo && provider.url), | ||
| (provider, other) => { | ||
| // return new URL(provider.url as string).host === new URL(other.url as string).host; | ||
| return provider.url === other.url; | ||
| } | ||
| ); | ||
|
|
||
| return ( | ||
| <Paper className={classes.SubscriptionPanel}> | ||
| <Typography gutterBottom variant="h5">订阅</Typography> | ||
|
|
||
| <Grid container spacing={3}> | ||
| { | ||
| supportedProviderList.map((provider: Provider) => { | ||
| return ( | ||
| <SubscriptionPanelItem provider={provider} | ||
| key={provider.name} /> | ||
| ); | ||
| }) | ||
| } | ||
| </Grid> | ||
|
|
||
| </Paper> | ||
| ); | ||
| } | ||
|
|
||
| function SubscriptionPanelItem({ provider }: SubscriptionPanelItemProps) { | ||
| const classes = useStyles(); | ||
| const { data, error } = useSWR<any>( | ||
| `/api/providers/${provider.name}/subscription`, | ||
| defaultFetcher, | ||
| ); | ||
|
|
||
| if (error) { | ||
| return <div>Failed to load</div>; | ||
| } | ||
|
|
||
| if (typeof data === 'undefined') { | ||
| return ( | ||
| <Grid item xs={12} sm={6} lg={4} key={provider.name}> | ||
| <Skeleton /> | ||
| <Skeleton /> | ||
| <Skeleton /> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| if (data === null) { | ||
| return (<></>); | ||
| } | ||
|
|
||
| return ( | ||
| <Grid item xs={12} sm={6} lg={4} key={provider.name}> | ||
| <div className={classes.SubscriptionPanelItem}> | ||
| <Typography gutterBottom variant="h6"> | ||
| { provider.name } | ||
| </Typography> | ||
| <div> | ||
| <Typography gutterBottom variant="body2"> | ||
| 已用流量：{data.used} | ||
| </Typography> | ||
| <Typography gutterBottom variant="body2"> | ||
| 剩余流量：{data.left} | ||
| </Typography> | ||
| <Typography gutterBottom variant="body2"> | ||
| 有效期至：{data.expire} | ||
| </Typography> | ||
| </div> | ||
| </div> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| export default SubscriptionPanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export interface Provider { | ||
| name: string; | ||
| type: string; | ||
| url?: string; | ||
| supportGetSubscriptionUserInfo: boolean; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.