Custom Dashboards and graphical view problems in 2.7.10 and Custom Dashboards 3.0.1

ThomasEinasto

Hi,

Firstly, I would like to thank everyone in this forum for help and the development team of Mango Automation for working fast on user communication and solving problems rapidly.

I started playing with Custom Dashboards and noticed a few problems which I could not understand what is causing them.

The login page

I am using the public-dashboards/login.htm as a template for my custom made login page. When I try to log in through the template then everything works fine but on my custom made page "loginError" does nothing on Chrome but on Firefox it executes an error: "Failed to login: null".

Sometimes it lets me log in but this is happening in random sequence. It seems that Mango has trouble getting the data through to the system from the login page.

Maybe someone can help me understand why it is behaving like that. The page is located in /overrides/web/modules/dashboards/web/test/. Maybe I should change it ?

I'm gonna add the login "index.html" to this post also. index.html

Graphical views

When trying to make a new graphical view everything works fine until I save it. After that I can only see how the saved view looks like but I can't seem to change it. When clicked edit then the view is empty and the select box of the components is also empty. When clicked on iconify components then an alert pops up: " Cannot read property 'Saved Conent' of null.

When I stay on the page after the alerts for some time then the console writes an error:

ERROR 2016-04-21 11:23:53,852 (com.serotonin.m2m2.util.timeout.TimeoutTask.run:71) - Uncaught Task Exception org.eclipse.jetty.websocket.api.WebSocketException: RemoteEndpoint unavailable, current state [CLOSING], expecting [OPEN or CONNECTED] at org.eclipse.jetty.websocket.common.WebSocketSession.getRemote(WebSocketSession.java:252) at com.serotonin.m2m2.web.mvc.websocket.MangoPingPongTracker.scheduleTimeout(MangoPingPongTracker.java:55) at com.serotonin.m2m2.util.timeout.TimeoutTask.run(TimeoutTask.java:69) at com.serotonin.timer.TimerTask.runTask(TimerTask.java:148) at com.serotonin.timer.OrderedTimerTaskWorker.run(OrderedTimerTaskWorker.java:29) at com.serotonin.timer.OrderedThreadPoolExecutor$OrderedTask.run(OrderedThreadPoolExecutor.java:278) at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source) at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source) at java.lang.Thread.run(Unknown Source)

The view consists of one html code which is displaying a picture.

Some questions about ma-point-values

When setting time for the ma-point-values there are presets like: "LAST_6_HOURS". I would like to know how to statically insert LAST_6_HOURS. Because right now I have tried to solve it like this:

<md-input-container class="no-errors-spacer">
<ma-date-range-picker from="from" to="to" preset="LAST_6_HOURS" update-interval="{{updateInterval}} {{updateIntervalType}}" style="visibility:hidden;">
    </md-input-container>

<ma-point-values point="point1" values="point1Values" from="from" to="to" rollup="AVERAGE" rollup-interval="1 MINUTES">
</ma-point-values>

This is a robust way to solve it. As i understand the preset sets values to variables: from & to. But is there a better solution on setting the date-range. I would also like to point out that I am still learning AngularJS and custom dashboards so forgive me if I am using Dashboard module wrongly/incorrectly.

I would like to solve these pointed out problems and Thank You for your help.

Will Geller

Hi Thomas,

I am not too familiar with Graphic views but my be able to clue you in on the other two issues.

The code you attached is for the older method of logging in via a custom dashboard. This method uses the old JS API and may be deprecated. In the new mdAdmin dashboard there is a view with a custom login page. Check it out at /modules/dashboards/web/mdAdmin/#/login

I will talk to the team about making a guide on how to customize this login page but basically if you set this as the page for your custom login in your system settings you will get this nice looking custom login page.

The date picker question:
I think you misunderstand the update-interval attribute on <ma-date-range-picker> this doesn't set the time range period; it sets how often the 'to'/'from' time will update with the current time. So if you had a preset="LAST_1_DAYS" update-interval="5 seconds" it would give you the time range of the last 24 hour period, updating every 5 seconds to stay current.

It looks like you are wanting to specify a custom preset attribute with angular variables. I don't think this can be done currently, as there is only a set number of preset strings that <ma-data-range-picker> will recognize. I will list them here:

LAST_5_MINUTES
LAST_15_MINUTES
LAST_30_MINUTES
LAST_1_HOURS
LAST_3_HOURS
LAST_6_HOURS
LAST_12_HOURS
LAST_1_DAYS
LAST_1_WEEKS
LAST_2_WEEKS
LAST_1_MONTHS
LAST_3_MONTHS
LAST_6_MONTHS
LAST_1_YEARS
LAST_2_YEARS
DAY_SO_FAR
WEEK_SO_FAR
MONTH_SO_FAR
YEAR_SO_FAR
PREVIOUS_DAY
PREVIOUS_WEEK
PREVIOUS_MONTH
PREVIOUS_YEAR

The options starting with 'LAST...' will give you the a range up until the current time time, given that you specify an update-interval with how often you want it to refresh. Those ending with '...SO_FAR' would give you from the start of the day/week/month/year up till now. 'Previous...' will give you yesterday/last week/last month/last year (and update-interval won't do anything).

I will talk to the team about the potentially making <ma-data-range-picker> more flexible with excepting custom presets but currently it is not possible as you are trying to do.

Hope this helps.

phildunlap

Hi Thomas,

Pertaining to the Graphical Views issue, is there a stack trace in the command prompt / terminal when you open the page / iconify the components?

ThomasEinasto

Hi Will,

Thanks for you prompt reply. I may have explained the question wrongly. I understood the preset functions and am familiar with preset strings.

When using ma-date-range-picker then I have to use the select box and choose between the preset strings that ma-date-range-picker has. If i am not using md-input-container then the date-range-picker fails. Hence the style="visibility:hidden;".

When I tried using ng-bind preset="LAST_6_HOURS" then the ma-point-values does not work with the preset time value of last 6 hours. And thats why I have the question which I was having is how do I put statically to ma-point-values "LAST_6_HOURS".

Does the preset string update "from" and "to" values which I am using in ma-point-values? Because I cant see the syntax of time value in my ma-point-values.

Hi Phil,

No, there is no trace in the command prompt when using the iconify function.

Will Geller

Hi Thomas,

I think I understand now. Yes, <ma-point-values> consumes the to/from provided by <ma-date-range-picker> using the time range and set by the preset.

But I agree it is a hack and I am actually having issues on this exact problem on my project. There should be a way of of providing a time range preset directly to <ma-point-values> and not having to use the display none / visibility hidden on the <ma-data-range-picker>

I will bring it up with the team as a high priority issue / feature request.

phildunlap

This post is deleted!

phildunlap

Hi Thomas,

I looked into it, as per your description, and have determined this to be a bug specifically with the HTML component on the edit page. Can you confirm that you have a message in your browser's developer console "angular is not defined"?

I have opened a Github issue for this: https://github.com/infiniteautomation/ma-core-public/issues/713

Thanks for bringing it to our attention.