flanksource / flanksource-ui Goto Github PK

e.g. Group a set of checks together with a collapse,expand option:

icon: If all checks are the same then use that other a new "mixed" icon
description: label value
uptime: sum of all checks
latency: average
status: index-based - all checks[0] must be green to for the grouped check to be green, if there is a mix, use a split red/green status

if status.timestamp > now - interval
if status.timestamp < lastRuntime

An alternate & more hidden settings panel for less frequently used setting options. Is shown when a cogwheel button on the top right of the sidebar is clicked.

Better visualization of test results

Test results include the following data points:

• Total number of [tests]
• Passing [tests]
• Failed [tests]
• Duration

The component should include 2 different variations :

1. Single text line in height for use in tables
2. Small Square with 1 or more rows/columns

• viewer
• operator(can trigger and silence checks)
• admin (can edit check defitions)

For this issue ignore how the authentication actually occurs - read the role from the URL parameters

The other tabs should also add the suffix if tab by != namespace

Default to 1d, with 6h, 12h, 3d, 7d, 2w, 1m, 3m options

https://charts.ant.design/demos/scatter

Use color for status, and size for duration

• Description should always be full width
• Message Column should wrap up to 3 lines, before ellipsing with a popup

i.e. https://i.stack.imgur.com/wdKC1.png

It is hard to discover that the toggle are try-states - Cycling between states is also no very friendly i.e. It should act more like a buttongroup (but look like a toggle)

Create a new JUnit Component that renders JUnit tests based on this JSON structure: https://gist.githubusercontent.com/moshloop/2d73dc157b20ca3dadd85f4122837607/raw/6eb357498d6a1d091852a0a9a7d4b544fd37e6d9/junit.json

Tests are rendered into a grid with Summary and Duration, and a group/tree like structure for classes and suites.
e.g.

Clicking on an individual test will then have a popup showing stdout/stderr/error etc..

A way to reference a specific canary via url or similar would be useful, especially on platforms with a high canary count

When screen layout forces the selection element to the top of the screen rather than the side (eg with two windows vertically split on desktop, or on a mobile device) the selection element occupies all the vertical real estate. It's not immediately obvious that the canary details are hidden below the fold, and a lot of space is wasted

The mixed health indicator is broken - it should be green outer and red inner

i.e. search across name and descriptions for anything containing

A sliding scale with a min and max setting for the duration

See:

And the data:

https://gist.github.com/moshloop/dd584c0e2f803a3b05f5d2318479d703

The option adds a new "filter" for pivoting, You can pivot by:

• Name (The rows are then only for description)
• Namespace (rows are name/description)
• Runner
• Label

And then cell value selection :

• Up/Down (default)
• Latency
• Uptime

Which will then replace the 3 Status, Latency and Uptime columns and replace it with a column per pivot value (e.g. 1 column per namespace)

When having a large name/description for the check the namespace tag when viewing across all seems to be truncated:
See below:

In such cases the description can be truncated but we should still preserve the namespace tag in the row

Move all examples into storybook

{
      "min": 12.24002577730245,
      "max": 36.12949014997364,
      "current": 24.20414852942763,
    }

And a similar Vue component:

https://github.com/flanksource/karina-ui/blob/master/src/components/UsageBar.vue

e.g. in Group By it should have to entries for labels "type" and "envName", when selecting envName, it will show 3 rows 1 each for dev_0, dev_1 and test

If there are multiple checks with the same name on the All tab, the check is sorted correctly, but the sub-items should be sorted by the namespace thereafter so that they don't move around

When adding the severity label in the check it doesn't pick up it's severity if all small casing is used.
See:

It still shows up in the label filter but I think it should also be visible in the check modal

e.g. now-1h and now+2h

1. If 2 checks have the same description, but different namespaces add namespace badge in between icon and description.

1. Add hover effect like Horizontal Panel
2. Float Canary status to the right, with a fixed width
3. Truncate with ellipses Description before it reaches status
4. Message should go below

| Description___________________| * * * *|
Message

Similar to the grafana range picker