Make output more compact and efficient

[majurgens]

Compare this imoin screenshot:

vs the old plugin:

If you assume that filtering options become available shortly, then the older output is still slightly more compact. For example,

1) I don't think that including the host check results, just because there are services on that host included, adds value. Removing that would save more space. Perhaps some people want it. Perhaps make that an option.

2) I'm not sure that we need to have different font sizes to make headings more visible if the data was columnar. like the older version. That would save space as well as making it quicker to read.

3) I suspect that most nagios users are used to the main alarm colours and hence the space currently used to show that status could be saved by just simply making the alarm colour as the text background colour (like the old plugin). I'm not 100% sure if we need the status field (like the old one) at all.

4) Adding the duration timestamp would also be pretty useful (like the old one)

Compare this imoin status icon:

vs the old plugin:

5) now, i don't know if this is possible with the new Firefox changes, but, while the Imoin status icon is more compact than the old one, the old one manages to convey more information before the user has to interact with it. If possible, can we please show the numbers of different alarm types in the status icon.

[majurgens]

For "help wanted" - what language are you coding in?

[ErikWegner]

The part that produces the panel content is written in plain JavaScript (see html/panel.js). The main code is written in TypeScript.

If the panel should allow switching to different kinds of display templates, using a templating engine would be nice.

For the panel icon:

• There is currently only one action button per addon allowed.
• The text on the icon can display up to three characters. Can you think of a better usage for that limited space?

What help is appreciated?

• Collect some stats, how much changing the list is wanted by the users.
• Include a templating engine (e.g. EmberJS) to render the ui.
• Prepare the different templates.
• Add an option to select between different templates and switch within the panel to the appropriate one.
• Use more data from nagios/icinga for the panel content (e.g. duration).

[majurgens]

Ok, I've done a bit of coding in javascript. Typescript does not look much of a leap.

For the panel icon: I think those limitations severely restrict what I was suggesting in that area.

Help: I could probably do some of that but I would need help on getting the development environment setup, checking out, committing (push, pull) etc (I have hardly done any thing with Github).

[ErikWegner]

Please contact me at https://ewus.de/en/contact and we will start with a direkt mail exchange.

[ErikWegner]

For the most easy start, you can directly edit the script and style inside this codepen:

https://codepen.io/erikwegner/pen/RywqjR

[ErikWegner]

To work on a design, check out the vue-branch and run panel-dev.

[drook]

I think the current layout also needs improvements:

• First of all, the number of lines can be easily diminished, if the server name would be printed inline with the service name: this currently adds one more extra line to each service block; in the case when hosts have one non-green service each, this makes the output twice longer, thus hardly readable. But what with the host states ? This brings us to the second point.
• Second, the host state is redundant when it's green. I really think that if the hosts state is green, no need to display it on the tab - after all, this is "errors/warnings" tab ! And when it's not green, it should be printed explicitely, this will also diminish the output length. Also, the "CRITICAL/WARNING" labels looks cool, but they really harden the reading of the status information. Nice if they would make the whole line just colored in the yellow/red.
• Third, the "errors/warnings" tab misses such critial information, such as the state duration

So, concluding, I think the output in the "errors/warnings" tab should be like this, grouped within the instance name (because currenlty it's hard to distinguish the instances):

instance name hostname | servicename | duration | extended output

• Finally, currently the host states for me show lots of special symbols with erroneous formatting. From what I see, these are the special symbols from the source HTML:

PING OK - Packet loss = 0%, RTA = 0.26 ms

I think this should be fixed too. May be this is merely the issue with "nagios HTML pаrsing" method, but still.

And thanks a lot for doing such a cool work.

[drook]

Actually changing only one CSS property makes the output far more easy-readable (inline displaying):

.hostcheckinfo,
.service .info {
    color: #888;
    padding-left: 1ex;
    display: inline;
}

[ErikWegner]

Option added to beta version

[ErikWegner]

A very simple approach to use jsx as templates: https://codepen.io/erikwegner/project/full/ZqNNOw/ Feel free to fork the project and suggest a layout, have a look at hostrow.jsx and servicerow.jsx.

[ErikWegner]

No layout sugested, closing now