Reload page on tab change

21

@psDevUK - Fair play. I have tested this out this morning and it is great. Two windows (Chrome and Edge) open to the sale dashboard clicking around the home page on one of them, the other times out as expected due to inactivity.

This does not work with a iisreset in the background though as that pulls the trousers down on the UdElement. I have however added some code to allow me to push the modal to all users before doing a iisreset which lets them know the portal is going down so when they come back they can see there has been a timeout.

$Ca> che:Timeout = $False

New-UDTimeOut -Id ā€œTIMEOUTā€ -Minutes 1 # Change to x in prod
New-UDColumn -Id ā€œCheckerā€ -Size 12 -Endpoint {
$Timeout2 = (Get-UDElement -Id ā€˜TIMEOUTā€™).Attributes.isTimedOut
if ($Timeout2 -eq ā€œTrueā€) {
$URL = ā€œhttps://URLā€
Invoke-UDRedirect -Url $URL
}
} -AutoRefresh -RefreshInterval 5
New-UDElement -Tag ā€˜divā€™ -Id ā€œElementForceTimeoutā€ -Endpoint {
if ($Cache:Timeout -eq $True)
{
$URL = ā€œhttps://URLā€
Invoke-UDRedirect -Url $URL
}
}

Testing it outā€¦

New-UDButton -Text ā€œUpdateā€ -OnClick {
$Cache:Timeout = $True
Sync-UdElement -Id ā€œElementForceTimeoutā€ -Broadcast
}

Rather than using a Modal for this that the users can just click off I have done a redirect to a timeout page that has New-UDHtml -Markup ā€˜Homeā€™ that will allow a redirect after a iisreset. (i could have bundled this into the code block but some pages would only need the sync not timeout)

I cannot thank you enough @psDevUK

1 Like
22

Amazing! Downloading this right now :slight_smile:

I like the modal display, wondering if I could do a inactive notification/modal - Inactivity Detected you will be logged out in 60 secondsā€¦ then time the 60 seconds and have a Logout action if the session is not made active again.

Once again hats off to you with your component skills :partying_face:. I opened VSCode the other day to look into the wizard componentā€¦I didnā€™t get past downloading the npm LOL.

1 Like
23

@psDevUK

Do any of the other props work? Like getRemainingTime and getLastActiveTime?

I also noticed with your sample, once the 1 min is hit and the Modal is triggered it will go into a 5-second refresh loop, so the Modal opens and closes every 5 seconds. Wondering if we could instead use how much time is left until timeout. And wondering if this could go into a $Session scheduled endpoint so we donā€™t have to have this on every pageā€¦

So much to think about now :slight_smile:

24

Thanks @mylabonline I guess I could look at implementing other attributes into the state of the componentā€¦I only attempted building this last night, so like took a good few goes to nail the build, then thought need to do some sort of script to prove it works, was pretty late by then so chucked what I could think of onto a github repository. I did test this and got expected results, so was happy this workedā€¦but yeah I did notice the loops, but figured in a real environment the timeout wouldnā€™t be a minute, or least not in my environmentā€¦but as I put on github readme, this gives you the end-user/developer a way to create your own solution as @neo has done with the broadcast and re-directing to a timed-out page. This component was designed to set a timeout and dynamically change if the page has become idleā€¦be great to get some other ideas solutions from other people, maybe could include a fancy function, and re-publish the module so a built in solution is in placeā€¦Cannot see why it couldnā€™t be held in a session variable.

25

Real happy you got a working solution from what I managed to cobble together last night, thanks for sharing your solution with the forum, I can certainly see myself implementing this for when I need to stop and start the site in IIS :grinning: I know this is not as elegant as what I was hoping for or what is probably in UDv3 but it works, and is now all pure powershell without any 3rd party tools or plug-ins required :sunglasses:

26

Thanks for making this possible.

1 thing I noticed this morning - I added your 5second refresh modal you have as your example, just to test. I left it open all night to it keep cycling the modal every 5 seconds. 9 hours later I have not been kicked out of my UDā€¦

Interestingā€¦

1 Like
27

Hi @mylabonline I assume normally you would of been kicked outā€¦? This component is only for detecting when the page has been idle for the amount of minutes you declare in the parameterā€¦so it will not automatically time-out UD when the component has timed out. I need to implement this where I work as I have had it where someone leaves the page idle so long some components stop working correctly. So I will put on my thinking cap for a better demo and post the solution I come up with, but this may not tick the box for everyoneā€¦ I mean I havenā€™t tried this yet, but thinking if you added two of these timer components to the page, you could set when to timeout at 24 minutes, and the other for 25 minutes, you could then call a modal on the first timeout warning them they will be redirected in one minute if no action takenā€¦then on the second time-out re-direct either to login page or a custom timed-out page with a button to log back inā€¦ :thinking:

28

Ya normally It would kick me out/disconnect after the timeout period, this now keeps the connection alive.

I know there could be some different implementations of thisā€¦ There are definitely things I can do with this component. I just tried redirecting back to the login page, but since I use OpenId it would redirect back to the Microsoft login page, but for some reason, if you stay in that Microsoft login page for too long the login times out, and when you are redirected back to UD the page cannot be displayed.

I use the Access Token from Microsoft/OpenId to connect to other Azure/CSP APIs, but this token sometimes expires before UD session expires, so I have this in a catch

Invoke-UDLogout -Url ($Request.Headers["Origin"].ToString())

function Invoke-UDLogout {
    param ($Url)
    Invoke-UDJavaScript -JavaScript 'var Http = new XMLHttpRequest();
    var url = "/signout";
    Http.open("GET", url);
    Http.send()'
    Start-Sleep 1
    Invoke-UDRedirect -Url $Url
}

which works really well - Thinking out I can use this with your component.

I hope you and everyone are staying sane and safe.

2 Likes
29

I have performed a number of tests this weekend with regard to load balancing portals and UdTimeout and I have noticed the refresh does not work when the client has a dashboard session open, then goes into standby. After the client is powered back on the dashboard becomes stale and UdRefresh is not performed. I guess this is more to do with the UdElement than UdRefreshā€¦

30

Hi @neo went into work today, but as always seem to get bogged down with support callsā€¦so I have not yet had a chance to implement this yetā€¦Iā€™m not running as many users, or Azure, but running in IIS on a windows 10 workstationā€¦I will happily share my code once I implement this component :grinning: I am thinking I will have 2 timersā€¦one will show the modal, if timed-out, to warn less than a minute before logging out, then the next time-out re-direct to the login page. Will post an update once I done it.

31

Ive just gotten a chance to add this to my dashboard running on IIS and Im also seeing that the dashboard no longer timesout or takes alot longer to time out than the previous 25 minutes

before adding it once the 25 minute timeout was reached if i clicked a button or select a dropdown either nothing would happen, id get a continuous button loading animation or id get the ā€œcannot send data if not in connected stateā€ error. i would then have to refresh the site to get the dashboard working again

now after 25 minutes and even a couple of hours everything still works as expected

seems to be a very nice side effect to this component :smiley:

so far when ive checked the dashboard the next day after leaving it running overnight at some point it times out and the modal i configured it for is displayed which i have set up to reload the page once a button is pressed so that works very well too

but i am pleasantly surprised that it also prevents the dashboard from timing out

just wondering how its able to do it and are there any negative performance effects on the server (not seeing any on the dashboard so far)

thanks for another great component

1 Like
32

Thanks @Srichman0128 for the kind wordsā€¦They say a magician never reveals their tricksā€¦well I did in this courseā€¦

Where I show you how to build custom components. The magic behind this component and how it does what it does is located here:- react-idle-timer - npm

33

@psDevUK

Any idea why it is not working in my multi-page dashboard behind IIS?

Do i need to put the Start-UDTimeout custom function (code below) anywhere special in the code? Or do i need to use the Cache or Session Scope? I cannot get it to runā€¦ (Still using v2.9)

The two functions that i am using are:

function Start-UDTimeout
{
    [CmdletBinding()]
    param (
        [Parameter()]
        [int]
        $Interval = 9
    )
}

$Timeout = "False"
$null = New-UDTimeOut -Id "UD_Timeout" -Minutes $Interval
New-UDRow -Columns {
    New-UDColumn -Id "Timeout_Checker" -Size 12 -Endpoint {
        $Timeout = (Get-UDElement -Id 'UD_Timeout').Attributes.isTimedOut
        if ($Timeout -eq "True" -or $Timeout -eq $true)
        {
            Show-UDModal -Content {
                New-UDHeading -Size 5 -Text "Your session has expired, please log in again."
                New-UDButton -Text "Login Page" -OnClick { Invoke-UDLogout -Url ([string]$Request.Headers["Origin"]) }
            }
        }
    } -AutoRefresh -RefreshInterval 5
}

function Invoke-UDLogout
{
    param ($Url)
    Invoke-UDJavaScript -JavaScript 'var Http = new XMLHttpRequest();
    var url = "/signout";
    Http.open("GET", url);
    Http.send()'
    Start-Sleep 1
    Invoke-UDRedirect -Url $Url
}

Credits and thanks to @mylabonline

Thanks,
RenƩ

34

Hello @Mordecai and thanks for giving this custom component a go. Thankfully I try to document these components as I build them so if not done so already, please visit GitHub - psDevUK/UD-TimeOut: UniversalDashboard component based upon https://github.com/supremetechnopriest/react-idle-timer where you will see a demo dashboard page incorporating this custom component. I cannot recommend enough to upgrade to Powershell Universal as @adam and @AlonGvili have done a grand job on this. The reason why I am suggesting upgrading is that I believe there is a configuration file you can configure to increase/decrease the timeout.
I hope the information in the link provided will be enough to solve your issue.

35

Thanks @psDevUK :slight_smile:
i already read your documentation and i have used this as base for my functions.
But i cannot get it to work with a dashboard with multiple UDPages at the moment.
Where do you put the New-UDTimeout -Id ... -Minutes ... command in a dashboard with multiple sites? One one specific site?

We are definitely upgrading to Universal but the migration of our dashboards (they are extremely large dashboards), is taking quite a long time as we need to customize all pages, all endpoints and huge amount of components individually. (Our largest dashboard has over 140 pages). And that costs a lot of time.

Thanks :slight_smile:

36

Wow thats a lot of dashboard pagesā€¦to be honest I built this component, tested it, and it worked, so was happy job done, I am not using this particular components on any of my work dashbaords. However other custom components that I built do seem to work across multiple pages, as long as I import the module in the main DASHBOARD.PS1 file, you should then be able to call New-UDTimeOut on any page. I mean if you give it an -ID name can you see it in the browser dev tools? Just re-looking at your script, why donā€™t you just use New-UDTimeOut -Id "UD_TimeOut" -Minutes 9 without holding the component in a variable $null I just personally do not see the need, and that could possibly be causing the issueā€¦