Adds support for rules screen in react-ui

[Harkishen-Singh]

Fixes: #6385
Fixes: #6302
Initial-version

Update-1:

[Harkishen-Singh]

@juliusv @boyskila please have a look.

[juliusv]

Thanks! This is a first round of comments. Currently the page doesn't load when alerting rules are defined, so let's fix these comments first before doing a second review.

[Harkishen-Singh]

@juliusv I have implemented the suggestions. Please have a look.

[boyskila]

@Harkishen-Singh Added some comments and ideas

[boyskila]

Can you align response handling with the pattern used in other pages i.e check how withStatusIndicator HOC is used

[boyskila]

Can you align response handling with the pattern used in other pages i.e check how withStatusIndicator HOC is used

Better to merge this one first #6629

[boyskila]

Can you align response handling with the pattern used in other pages i.e check how withStatusIndicator HOC is used

Better to merge this one first #6629

[boyskila]

@Harkishen-Singh On top of all the suggestions, I would say that there is inconsistency with the old UI in terms of font-size, font-family and text formatting. You can check CSS class rule_cell in the old UI - it will give you all you need to align both UI's.
Also, the back button is not working once you navigate to the graph page

Update: It turns out that the back button is not working once you navigate to the graph page via the expression link. This bug is already fixed with this PR #6659

[juliusv]

Thanks, I gave this one more thorough review, added more comments to be addressed. Seems there are also still quite a few comments by @boyskila that would be good to fix.

[juliusv]

#6629 is merged now, so it would be good to convert this to the same fetching pattern, as @boyskila said.

[juliusv]

I would prefer if we didn't use CSS/HTML spacing (margin-left: 3%, <br/>, etc.) in this field and instead kept it all preformatted like in the old UI and use existing normal whitespace for the formatting, so it's properly copyable YAML (at least for the most part).

In the old UI the styling was achieved via:

.rule_cell {
    white-space: pre-wrap;
    background-color: #F5F5F5;
    display: block;
    font-family: monospace;
}

[Harkishen-Singh]

@juliusv @boyskila I have implemented the suggestions. Please have a look. Thank you.

[boyskila]

Please remove rulse-head - it's not used anywhere

[boyskila]

This component should look like:

export const GraphExpressionLink: FC<{ expr: string; title: string; name: string  & PathPrefixProps}> = memo(({ name, title, expr, pathPrefix }) => {
  return (
    <div>
      {title}:
      <Link className="ml-4" to={createExpressionLink(expr, pathPrefix)}>
        {name}
      </Link>
    </div>
  );
});

name and expr may have different content, so we can't rely on expr to represent the name
Also, wrapping the Link and title in div will remove the need of <br/>. IMO it's better.
Comparing with the old UI titles here are wrapped in <strong>, maybe you should remove the extra tag

Another, more important thing is to pas the pathPrefix prop down to createExpressionLink. IMO the ../ in createExpressionLink should be passed from outside and the function just to return
${prefix}graph?g0.expr=${encodeURIComponent(expr)}&g0.tab=1&g0.stacked=0&g0.range_input=1h
The usage should looks like createExpressionLink(expr, pathPrefix + '/../')

Suggestion: GraphExpressionLink can be moved to component folder and can replace both expressions here

prometheus/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx

Lines 35 to 41 in d996ba2

	<div>
	name: <Link to={createExpressionLink(`ALERTS{alertname="${rule.name}"}`)}>{rule.name}</Link>
	</div>
	<div>
	expr: <Link to={createExpressionLink(rule.query)}>{rule.query}</Link>
	</div>
	<div>

as well

[boyskila]

<td> content can be reduced to

<td className="rule_cell">
      <GraphExpressionLink name={r.name} title={r.alerts ? 'alert' : 'record'} expr={`ALERTS{alertname="${r.name}"}`}/>
      <GraphExpressionLink title="expr" expr={r.query} name={r.query} />
         {r.alerts && (
              <>
                 labels:
                 {Object.entries(r.labels).map(([key, value]) => (
                     <div className="ml-4" key={key}>
                         {key}: {value}
                      </div>
                   ))}
                    annotations:
                    {Object.entries(r.annotations).map(([key, value]) => (
                        <div className="ml-4" key={key}>
                            {key}: {value}
                         </div>
                      ))}
                  </>
             )}
 </td>

Some of the divs are redundant and.
Alse, note that first GraphExpressionLink has as an expression ALERTS{alertname="${r.name}"}. Passing just r.name as expr is not enough and its not working

[boyskila]

Please pass as second argument the pathPrefix prop and remove ../ - this should be passed from outside as well

[juliusv]

Thanks! :) There are still a couple of new (and old, #6503 (comment)) outstanding comments, but I'll merge this for now, and then we can individually refactor/address the remaining few bits.