[Cloud Posture] Dashboard Redesign - data counter cards

[JordanSh]

Summary

Resolves #143865
Resolves #143857

Added new counter components based on the dashboard redesign, full feature list can be found in the mentioned tasks

• resources counter navigates to the findings by resource table
• failing findings counter navigates to the findings table filtered by failed findings

Screen.Recording.2022-11-03.at.20.31.56.mov

• numbers above 1,000,000 are formatted using compact abbreviation
• if there are 0 failed findings, the counter will not be red

• using the cardinality aggregation to get the number of unique resource ids

const uniqueResourcesCountQuery = {
  resources_evaluated: {
    cardinality: {
      field: 'resource.id',
    },
  },
};

[elasticmachine]

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security Posture)

[ari-aviran]

1. Using hard-coded locale is problematic. I suggest still using FormattedNumber and only passing the notation prop if the number is large enough.
2. You changed logic for existing usages of CompactFormattedNumber - please make sure this is fine.

[JordanSh]

oh yeah i forgot to remove the locales argument.

<FormattedNumber> does not work, thats why we didn't use it in the findings either.
the findings page use @elastic/numeral instead, but its API is limited and didn't match the formats used in the designs or our previous formatting. i would argue it should be switched to use this component as well instead.

I'll remove the locales parameter, when its undefined the host's locale will be used. ty for the catch

[ari-aviran]

There is no need for a container counter object - I suggest omitting the top level counter prop and simply accept here the "internal" props (i.e. onClick, id, title, etc)

[ari-aviran]

Consider just writing this in the declarative JSX instead of creating a variable and then using it:

<EuiFlexItem key={DASHBOARD_COUNTER_CARDS.CLUSTERS_EVALUATED}>
  <CspCounterCard
    counter={{
      id: DASHBOARD_COUNTER_CARDS.CLUSTERS_EVALUATED,
      title: <CompactFormattedNumber number={complianceData.clusters.length} />,
      description: i18n.translate(
        'xpack.csp.dashboard.summarySection.counterCard.clustersEvaluatedDescription',
        { defaultMessage: 'Clusters Evaluated' }
      ),
    }}
  />
</EuiFlexItem>
/* Rest of the cards */

I prefer it this way since you immediately "see" the layout when you look at the JSX, instead of jumping back and forth between counters definition and the JSX

[JordanSh]

I guess its subjective, I prefer to have the JSX as clean as possible. "seeing" the layout is very important to me as well, I find it easier when things are clean and compact, I'm looking at it as a "list of counter cards" and keep the properties mess outside

[ari-aviran]

Hiding the title with CSS is hacky, I suggest instead to utilize the EuiCard title and children props properly and completely dump EuiStat:

export const CspCounterCard = ({ counter }: { counter: CspCounterCardProps }) => {
  const { euiTheme } = useEuiTheme();

  return (
    <EuiCard
      title={
        <EuiTitle size="xxxs">
          <h6>{counter.description}</h6>
        </EuiTitle>
      }
      hasBorder
      onClick={counter.onClick}
      paddingSize="m"
      layout="horizontal"
      css={css`
        position: relative;

        :hover .euiIcon {
          color: ${euiTheme.colors.primary};
          transition: ${euiTheme.animation.normal};
        }
      `}
      data-test-subj={counter.id}
    >
      <EuiText color={counter.titleColor}>
        <EuiTitle size="xs">
          <h3>{counter.title}</h3>
        </EuiTitle>
      </EuiText>
      {counter.onClick && (
        <EuiIcon
          type="link"
          css={css`
            position: absolute;
            top: ${euiTheme.size.m};
            right: ${euiTheme.size.m};
          `}
        />
      )}
    </EuiCard>
  );
};

In addition, I suggest flipping title and description so that title will be the actual title of the card.

[JordanSh]

great change, thanks!

[ari-aviran]

You don't need this core override

[ari-aviran]

Remove

[ari-aviran]

You don't need to reset the mocks, you are not mocking anything in the tests here

[ari-aviran]

I'd expect tests here to verify the rest of the functionality of the section (risks table, score chart, etc.) If you consider this out of scope please open a task

[JordanSh]

yeah i'll add those tests here on every new component task, its already listed in the tasks

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: b277484

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
cloudSecurityPosture	127	128	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
cloudSecurityPosture	128.0KB	129.9KB	+1.9KB

Unknown metric groups

ESLint disabled in files

id	before	after	diff
osquery	1	2	+1

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	19	21	+2
fleet	58	64	+6
osquery	108	113	+5
securitySolution	440	446	+6
total			+19

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	20	22	+2
fleet	66	72	+6
osquery	109	115	+6
securitySolution	517	523	+6
total			+20

History

• 💚 Build #85943 succeeded 602cf74
• 💚 Build #85896 succeeded 99177fa
• 💔 Build #85263 failed 80787e7

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @JordanSh

[ari-aviran]

Consider de-structuring props in the arguments: ({ title, onClick, id, description, descriptionColor })

[ari-aviran]

This is the default and can be omitted as we don't really care about the layout since we don't use an icon, we only care about the text alignment