lamassu-server/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js
2021-11-24 23:02:23 +00:00

122 lines
2.7 KiB
JavaScript

import { useQuery, useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag'
import * as R from 'ramda'
import React from 'react'
import parser from 'ua-parser-js'
import { IconButton } from 'src/components/buttons'
import TitleSection from 'src/components/layout/TitleSection'
import DataTable from 'src/components/tables/DataTable'
import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
import { formatDate } from 'src/utils/timezones'
const GET_SESSIONS = gql`
query sessions {
sessions {
sid
sess
expire
}
}
`
const DELETE_SESSION = gql`
mutation deleteSession($sid: String!) {
deleteSession(sid: $sid) {
sid
}
}
`
const GET_DATA = gql`
query getData {
config
}
`
const isLocalhost = ip => {
return ip === 'localhost' || ip === '::1' || ip === '127.0.0.1'
}
const SessionManagement = () => {
const { data: tknResponse, loading: sessionsLoading } = useQuery(GET_SESSIONS)
const [deleteSession] = useMutation(DELETE_SESSION, {
refetchQueries: () => ['sessions']
})
const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)
const timezone = R.path(['config', 'locale_timezone'], configResponse)
const loading = sessionsLoading && configLoading
const elements = [
{
header: 'Login',
width: 207,
textAlign: 'left',
size: 'sm',
view: s => s.sess.user.username
},
{
header: 'Last known use',
width: 305,
textAlign: 'center',
size: 'sm',
view: s => {
if (R.isNil(s.sess.ua)) return 'No Record'
const ua = parser(s.sess.ua)
return `${ua.browser.name} ${ua.browser.version} on ${ua.os.name} ${ua.os.version}`
}
},
{
header: 'Last known location',
width: 250,
textAlign: 'center',
size: 'sm',
view: s => {
return isLocalhost(s.sess.ipAddress) ? 'This device' : s.sess.ipAddress
}
},
{
header: 'Expiration date (UTC)',
width: 290,
textAlign: 'right',
size: 'sm',
view: s =>
`${formatDate(s.expire, timezone, 'yyyy-MM-dd')} ${formatDate(
s.expire,
timezone,
'HH:mm:ss'
)}`
},
{
header: '',
width: 80,
textAlign: 'center',
size: 'sm',
view: s => (
<IconButton
onClick={() => {
deleteSession({ variables: { sid: s.sid } })
}}>
<DeleteIcon />
</IconButton>
)
}
]
return (
!loading && (
<>
<TitleSection title="Session Management" />
<DataTable
elements={elements}
data={R.path(['sessions'])(tknResponse)}
/>
</>
)
)
}
export default SessionManagement