2021-06-25 13:55:49 +00:00
import { io } from "socket.io-client" ;
import { useToast } from 'vue-toastification'
const toast = useToast ( )
let storage = localStorage ;
let socket ;
export default {
data ( ) {
return {
socket : {
token : null ,
firstConnect : true ,
connected : false ,
2021-06-29 08:06:20 +00:00
connectCount : 0 ,
2021-06-25 13:55:49 +00:00
} ,
allowLoginDialog : false , // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
loggedIn : false ,
monitorList : [
] ,
2021-06-27 08:10:55 +00:00
heartbeatList : {
} ,
2021-06-30 13:04:58 +00:00
importantHeartbeatList : {
} ,
avgPingList : {
}
2021-06-25 13:55:49 +00:00
}
} ,
created ( ) {
socket = io ( "http://localhost:3001" , {
transports : [ 'websocket' ]
} ) ;
socket . on ( 'monitorList' , ( data ) => {
this . monitorList = data ;
} ) ;
2021-06-27 08:10:55 +00:00
socket . on ( 'heartbeat' , ( data ) => {
if ( ! ( data . monitorID in this . heartbeatList ) ) {
this . heartbeatList [ data . monitorID ] = [ ] ;
}
this . heartbeatList [ data . monitorID ] . push ( data )
2021-06-30 13:04:58 +00:00
// Add to important list if it is important
// Also toast
if ( data . important ) {
if ( data . status === 0 ) {
toast . error ( ` [ ${ this . monitorList [ data . monitorID ] . name } ] [DOWN] ${ data . msg } ` , {
timeout : false ,
} ) ;
} else if ( data . status === 1 ) {
toast . success ( ` [ ${ this . monitorList [ data . monitorID ] . name } ] [Up] ${ data . msg } ` , {
timeout : 20000 ,
} ) ;
} else {
toast ( ` [ ${ this . monitorList [ data . monitorID ] . name } ] ${ data . msg } ` ) ;
}
if ( ! ( data . monitorID in this . importantHeartbeatList ) ) {
this . importantHeartbeatList [ data . monitorID ] = [ ] ;
}
this . importantHeartbeatList [ data . monitorID ] . unshift ( data )
}
2021-06-27 08:10:55 +00:00
} ) ;
2021-06-29 08:06:20 +00:00
socket . on ( 'heartbeatList' , ( monitorID , data ) => {
if ( ! ( monitorID in this . heartbeatList ) ) {
this . heartbeatList [ monitorID ] = data ;
} else {
this . heartbeatList [ monitorID ] = data . concat ( this . heartbeatList [ monitorID ] )
}
} ) ;
2021-06-30 13:04:58 +00:00
socket . on ( 'avgPing' , ( monitorID , data ) => {
this . avgPingList [ monitorID ] = data
} ) ;
socket . on ( 'importantHeartbeatList' , ( monitorID , data ) => {
if ( ! ( monitorID in this . importantHeartbeatList ) ) {
this . importantHeartbeatList [ monitorID ] = data ;
} else {
this . importantHeartbeatList [ monitorID ] = data . concat ( this . importantHeartbeatList [ monitorID ] )
}
} ) ;
2021-06-27 08:10:55 +00:00
2021-06-25 13:55:49 +00:00
socket . on ( 'disconnect' , ( ) => {
2021-06-29 08:06:20 +00:00
console . log ( "disconnect" )
2021-06-25 13:55:49 +00:00
this . socket . connected = false ;
} ) ;
socket . on ( 'connect' , ( ) => {
2021-06-29 08:06:20 +00:00
console . log ( "connect" )
this . socket . connectCount ++ ;
2021-06-25 13:55:49 +00:00
this . socket . connected = true ;
2021-06-29 08:06:20 +00:00
// Reset Heartbeat list if it is re-connect
if ( this . socket . connectCount >= 2 ) {
2021-06-30 13:04:58 +00:00
this . clearData ( )
2021-06-29 08:06:20 +00:00
}
2021-06-25 13:55:49 +00:00
if ( storage . token ) {
this . loginByToken ( storage . token )
} else {
this . allowLoginDialog = true ;
}
2021-06-29 08:06:20 +00:00
this . socket . firstConnect = false ;
2021-06-25 13:55:49 +00:00
} ) ;
} ,
methods : {
2021-06-27 08:10:55 +00:00
2021-06-25 13:55:49 +00:00
getSocket ( ) {
return socket ;
} ,
2021-06-27 08:10:55 +00:00
2021-06-25 13:55:49 +00:00
toastRes ( res ) {
if ( res . ok ) {
toast . success ( res . msg ) ;
} else {
toast . error ( res . msg ) ;
}
} ,
2021-06-27 08:10:55 +00:00
2021-06-25 13:55:49 +00:00
login ( username , password , callback ) {
socket . emit ( "login" , {
username ,
password ,
} , ( res ) => {
if ( res . ok ) {
storage . token = res . token ;
this . socket . token = res . token ;
this . loggedIn = true ;
// Trigger Chrome Save Password
history . pushState ( { } , '' )
}
callback ( res )
} )
} ,
2021-06-27 08:10:55 +00:00
2021-06-25 13:55:49 +00:00
loginByToken ( token ) {
socket . emit ( "loginByToken" , token , ( res ) => {
this . allowLoginDialog = true ;
if ( ! res . ok ) {
this . logout ( )
} else {
this . loggedIn = true ;
}
} )
} ,
2021-06-27 08:10:55 +00:00
2021-06-25 13:55:49 +00:00
logout ( ) {
storage . removeItem ( "token" ) ;
this . socket . token = null ;
2021-06-30 13:04:58 +00:00
this . loggedIn = false ;
2021-06-25 13:55:49 +00:00
2021-06-30 13:04:58 +00:00
this . clearData ( )
2021-06-25 13:55:49 +00:00
} ,
2021-06-27 08:10:55 +00:00
2021-06-25 13:55:49 +00:00
add ( monitor , callback ) {
socket . emit ( "add" , monitor , callback )
} ,
2021-06-27 08:10:55 +00:00
2021-06-25 13:55:49 +00:00
deleteMonitor ( monitorID , callback ) {
socket . emit ( "deleteMonitor" , monitorID , callback )
} ,
2021-06-30 13:04:58 +00:00
clearData ( ) {
console . log ( "reset heartbeat list" )
this . heartbeatList = { }
this . importantHeartbeatList = { }
} ,
2021-06-25 13:55:49 +00:00
} ,
computed : {
2021-06-27 08:10:55 +00:00
lastHeartbeatList ( ) {
let result = { }
for ( let monitorID in this . heartbeatList ) {
let index = this . heartbeatList [ monitorID ] . length - 1 ;
result [ monitorID ] = this . heartbeatList [ monitorID ] [ index ] ;
}
return result ;
} ,
statusList ( ) {
let result = { }
2021-06-25 13:55:49 +00:00
2021-06-27 08:10:55 +00:00
let unknown = {
text : "Unknown" ,
color : "secondary"
}
for ( let monitorID in this . lastHeartbeatList ) {
let lastHeartBeat = this . lastHeartbeatList [ monitorID ]
if ( ! lastHeartBeat ) {
result [ monitorID ] = unknown ;
} else if ( lastHeartBeat . status === 1 ) {
result [ monitorID ] = {
text : "Up" ,
color : "primary"
} ;
} else if ( lastHeartBeat . status === 0 ) {
result [ monitorID ] = {
text : "Down" ,
color : "danger"
} ;
} else {
result [ monitorID ] = unknown ;
}
}
return result ;
}
2021-06-25 13:55:49 +00:00
}
}