Fact value primitive types (#1317)

* Display raw values for primitive types

* Add FactValue tests and detail stories

* Fix factories using transient params

* Fix props in CheckResultDetail test

assets/js/components/ExecutionResults/CheckResultDetail/CheckResultDetail.stories.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  addPassingExpectExpectation,
+  addPassingExpectSameExpectation,
+  emptyCheckResultFactory,
+  hostFactory,
+  checksExecutionCompletedFactory,
+  checkResultFactory,
+  addCriticalExpectExpectation,
+} from '@lib/test-utils/factories';
+
+import CheckResultDetail from './CheckResultDetail';
+
+const clusterHosts = hostFactory.buildList(2);
+const [{ id: target1 }, { id: target2 }] = clusterHosts;
+const targetType = 'host';
+
+let checkResult = emptyCheckResultFactory.build({
+  targets: [target1, target2],
+});
+
+const { check_id: checkID } = checkResult;
+
+checkResult = addPassingExpectExpectation(checkResult);
+checkResult = addPassingExpectExpectation(checkResult);
+checkResult = addCriticalExpectExpectation(checkResult);
+checkResult = addCriticalExpectExpectation(checkResult);
+checkResult = addCriticalExpectExpectation(checkResult);
+checkResult = addPassingExpectSameExpectation(checkResult, 'expectation_name');
+
+const executionData = checksExecutionCompletedFactory.build({
+  check_results: [checkResultFactory.build(), checkResult],
+});
+
+export default {
+  title: 'CheckResultDetail',
+  component: CheckResultDetail,
+  args: {
+    checkID,
+    targetID: target1,
+    targetType,
+    executionData,
+    expectations: [],
+  },
+};
+
+export function Default(args) {
+  return <CheckResultDetail {...args} />;
+}

assets/js/components/ExecutionResults/CheckResultDetail/CheckResultDetail.test.jsx

@@ -59,7 +59,7 @@ describe('CheckResultDetail Component', () => {
         targetID={target1}
         targetType={targetType}
         executionData={executionData}
-        clusterHosts={clusterHosts}
+        expectations={[]}
       />
     );
 

assets/js/components/ExecutionResults/CheckResultDetail/FactValue.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import ObjectTree from '@components/ObjectTree';
+
+function FactValue({ className, data }) {
+  return typeof data === 'object' ? (
+    <ObjectTree className={className} data={data} />
+  ) : (
+    <span className={className}>{data}</span>
+  );
+}
+
+export default FactValue;

assets/js/components/ExecutionResults/CheckResultDetail/FactValue.test.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+import '@testing-library/jest-dom';
+
+import { randomObjectFactory } from '@lib/test-utils/factories';
+
+import FactValue from './FactValue';
+
+describe('FactValue component', () => {
+  it('should render just a scalar value', () => {
+    const plainString = faker.hacker.noun();
+
+    render(<FactValue data={plainString} />);
+
+    expect(screen.getByText(plainString)).toBeVisible();
+  });
+
+  it('should render just an object tree', () => {
+    const data = randomObjectFactory.build();
+
+    render(<FactValue data={data} />);
+
+    expect(screen.getAllByLabelText('property tree')).toHaveLength(1);
+  });
+});

assets/js/components/ExecutionResults/CheckResultDetail/GatheredFacts.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import ListView from '@components/ListView';
-import ObjectTree from '@components/ObjectTree';
+
+import FactValue from './FactValue';
 
 const gatheredFactsToListView = (gatheredFacts) =>
   gatheredFacts.map(({ name, value, type, message }) => ({
@@ -11,7 +12,7 @@ const gatheredFactsToListView = (gatheredFacts) =>
       type ? (
         <span className="text-red-500">{message}</span>
       ) : (
-        <ObjectTree className="mt-3 text-sm" data={factValue} />
+        <FactValue className="text-sm" data={factValue} />
       ),
   }));
 
@@ -35,7 +36,7 @@ function GatheredFacts({ isTargetHost = true, gatheredFacts = [] }) {
 
       {!isTargetHost &&
         gatheredFacts.map(({ name, value }) => (
-          <ObjectTree key={name} className="mt-3 text-sm" data={value} />
+          <FactValue key={name} className="text-sm" data={value} />
         ))}
     </div>
   );

assets/js/lib/test-utils/factories/executions.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { faker } from '@faker-js/faker';
 import { Factory } from 'fishery';
-import { hostFactory, resultEnum } from '.';
+import { hostFactory, resultEnum, randomObjectFactory } from '.';
 
 export const checksExecutionStatusEnum = () =>
   faker.helpers.arrayElement(['running', 'completed']);
@@ -53,7 +53,7 @@ export const expectationResultFactory = Factory.define(
 export const executionFactFactory = Factory.define(({ sequence }) => ({
   check_id: faker.datatype.uuid(),
   name: `${faker.lorem.word()}_${sequence}`,
-  value: faker.datatype.number(),
+  value: randomObjectFactory.build({}, { transient: { depth: 5 } }),
 }));
 
 export const executionFactErrorFactory = Factory.define(() => ({

assets/js/lib/test-utils/factories/index.js

@@ -8,6 +8,35 @@ export * from './sapSystems';
 export * from './clusters';
 export * from './databases';
 
+export const randomObjectFactory = Factory.define(({ transientParams }) => {
+  const depth = transientParams.depth || 2;
+  const length = faker.datatype.number({ min: 3, max: 10 });
+
+  const lastElement =
+    depth === 1
+      ? { key: faker.hacker.noun(), value: faker.name.firstName() }
+      : {
+          key: faker.hacker.noun(),
+          value: randomObjectFactory.build(
+            {},
+            { transient: { depth: depth - 1 } }
+          ),
+        };
+
+  return Array.from({ length: length - 1 }, () => ({
+    key: faker.hacker.noun(),
+    value: faker.hacker.adjective(),
+  }))
+    .concat([lastElement])
+    .reduce(
+      (accumulator, { key, value }) => ({
+        ...accumulator,
+        [key]: value,
+      }),
+      {}
+    );
+});
+
 const healthEnum = () =>
   faker.helpers.arrayElement(['requested', 'running', 'not_running']);