Checks results grouped by category

assets/js/components/ExecutionResults/CheckResultOutline.jsx

@@ -75,7 +75,7 @@ function CheckResultOutline({
   );
 
   return (
-    <div className="p-5">
+    <div className="p-5 bg-gray-50">
       <div className="table w-full bg-white rounded shadow">
         <div className="table-header-group bg-gray-50 border-b border-gray">
           <div className="table-row">

assets/js/components/ExecutionResults/ExecutionResults.jsx

@@ -1,19 +1,19 @@
 import React, { useState } from 'react';
-import Table from '@components/Table';
-
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import Modal from '@components/Modal';
-
 import { getHostID } from '@state/selectors/cluster';
-import PremiumPill from '@components/PremiumPill';
+import Accordion from '@components/Accordion';
 import HealthIcon from '@components/Health';
-
+import Modal from '@components/Modal';
+import PremiumPill from '@components/PremiumPill';
+import Table from '@components/Table';
 import {
+  getCatalogCategoryList,
   getCheckResults,
   getCheckDescription,
   getCheckRemediation,
   getCheckExpectations,
+  getCheckGroup,
   isPremium,
 } from './checksUtils';
 
@@ -29,7 +29,7 @@ const resultsTableConfig = {
       title: 'Id',
       key: 'checkID',
       fontSize: 'text-base',
-      className: 'bg-gray-50 border-b',
+      className: 'bg-gray-50 border-b w-1/6 h-auto',
       render: (checkID, { onClick, premium }) => (
         <div className="flex whitespace-nowrap text-jungle-green-500 justify-between">
           <span
@@ -50,7 +50,7 @@ const resultsTableConfig = {
       title: 'Description',
       key: 'description',
       fontSize: 'text-base',
-      className: 'bg-gray-50 border-b',
+      className: 'bg-gray-50 border-b h-auto',
       render: (description) => (
         <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
           {description}
@@ -61,7 +61,7 @@ const resultsTableConfig = {
       title: 'Result',
       key: 'result',
       fontSize: 'text-base',
-      className: 'bg-gray-50 border-b',
+      className: 'bg-gray-50 border-b w-1/6 h-auto',
       render: (_, { result }) => <HealthIcon health={result} />,
     },
   ],
@@ -116,7 +116,9 @@ function ExecutionResults({
     }
   };
 
-  const tableData = getCheckResults(executionData)
+  const checksResults = getCheckResults(executionData);
+  const catalogCategoryList = getCatalogCategoryList(catalog, checksResults);
+  const tableData = checksResults
     .filter((check) => {
       if (predicates.length === 0) {
         return true;
@@ -135,6 +137,7 @@ function ExecutionResults({
         checkID,
         result,
         clusterName,
+        category: getCheckGroup(catalog, checkID),
         executionState: executionData?.status,
         description: getCheckDescription(catalog, checkID),
         expectations: getCheckExpectations(catalog, checkID),
@@ -147,6 +150,11 @@ function ExecutionResults({
         },
       })
     );
+  const filterAndSortData = (data, item) =>
+    data
+      .filter((obj) => obj.category === item)
+      .sort((a, b) => a.description.localeCompare(b.description));
+
   return (
     <ExecutionContainer
       catalogLoading={catalogLoading}
@@ -174,7 +182,20 @@ function ExecutionResults({
         onContentRefresh={onContentRefresh}
         onStartExecution={onStartExecution}
       >
-        <Table config={resultsTableConfig} data={tableData} />
+        {catalogCategoryList.map((item) => (
+          <Accordion
+            defaultOpen
+            className="check-group mb-4"
+            header={item}
+            key={item}
+          >
+            <Table
+              config={resultsTableConfig}
+              data={filterAndSortData(tableData, item)}
+              withPadding={false}
+            />
+          </Accordion>
+        ))}
       </ResultsContainer>
       <Modal
         open={modalOpen}
@@ -192,5 +213,4 @@ function ExecutionResults({
     </ExecutionContainer>
   );
 }
-
 export default ExecutionResults;

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

@@ -5,7 +5,33 @@ import { hostFactory, clusterFactory } from '@lib/test-utils/factories';
 import ExecutionResults from '.';
 
 const executionID = '9fbcaec6-e65e-4adc-9cac-fc542c66717b';
-const agentID = '22248a4c-216f-45d8-90ff-904d27900efc';
+const agentID = [
+  '8a2a4977-357d-4b76-b3c0-9b6a0e334d9d',
+  'e1b2fc0e-8eae-42bb-81a7-6ddc8d13e05b',
+  '3f9675e9-2c59-4f0e-a1e8-7ebd4df3d90c',
+  'b1dc32a5-9466-4e2d-bd4f-9a462c153c36',
+];
+const checkID = ['DC5429', 'FB0E0D', '68626E', '15F7A8'];
+const checkNames = [
+  'SBD_PACEMAKER',
+  'corosync running 2 ring configuration',
+  'SBD msgwait timeout',
+  'Check Corosync token_retransmits_before_loss_const during runtime',
+];
+const checkResults = ['passing', 'warning', 'critical', 'unknown'];
+const checkIsPremium = [true, false];
+const checkGroup = ['Corosync', 'SBD'];
+const checkDescription = [
+  'Corosync `token` timeout is set to expected value\n',
+  'Corosync is running with consensus timeout set to the recommended value',
+  'SBD msgwait timeout value is at least two times the watchdog timeout',
+  'Corosync is running with `token_retransmits_before_loss_const` set to the recommended value',
+];
+const checkRemediation = [
+  'Additional remediation instructions',
+  'Abstract the value of the Corosync `token` timeout is not set as recommended',
+];
+
 const groupID = '02acea9d-9658-4902-9806-0eef2bfbbf5d';
 const cloudProvider = 'azure';
 
@@ -16,7 +42,7 @@ const { name: clusterName, type: clusterScenario } = clusterFactory.build({
 
 const clusterHosts = [
   hostFactory.build({
-    id: agentID,
+    id: agentID[0],
     hostname: 'carbonarahost01',
     cluster_id: groupID,
   }),
@@ -41,25 +67,90 @@ const completedExecution = {
       {
         agents_check_results: [
           {
-            agent_id: agentID,
+            agent_id: agentID[0],
             expectation_evaluations: [
               {
-                name: 'expectation_example',
+                name: checkNames[0],
                 return_value: 123,
                 type: 'expect',
               },
             ],
             facts: [
-              { check_id: '156F64', name: 'lol_this_is_a_fact', value: 123 },
+              { check_id: checkID[0], name: 'lol_this_is_a_fact', value: 123 },
+            ],
+            values: [],
+          },
+        ],
+        check_id: checkID[0],
+        expectation_results: [
+          { name: checkNames[0], result: true, type: 'expect' },
+        ],
+        result: checkResults[0],
+      },
+
+      {
+        agents_check_results: [
+          {
+            agent_id: agentID[1],
+            expectation_evaluations: [
+              {
+                name: checkNames[1],
+                return_value: 456,
+                type: 'expect',
+              },
+            ],
+            facts: [{ check_id: checkID[1], name: 'new_fact', value: 456 }],
+            values: [],
+          },
+        ],
+        check_id: checkID[1],
+        expectation_results: [
+          { name: checkNames[1], result: true, type: 'expect' },
+        ],
+        result: checkResults[1],
+      },
+
+      {
+        agents_check_results: [
+          {
+            agent_id: agentID[2],
+            expectation_evaluations: [
+              {
+                name: checkNames[2],
+                return_value: 456,
+                type: 'expect',
+              },
             ],
+            facts: [{ check_id: checkID[2], name: 'new_fact', value: 456 }],
             values: [],
           },
         ],
-        check_id: '156F64',
+        check_id: checkID[2],
         expectation_results: [
-          { name: 'expectation_example', result: true, type: 'expect' },
+          { name: checkNames[2], result: true, type: 'expect' },
         ],
-        result: 'passing',
+        result: checkResults[2],
+      },
+      {
+        agents_check_results: [
+          {
+            agent_id: agentID[3],
+            expectation_evaluations: [
+              {
+                name: checkNames[3],
+                return_value: 456,
+                type: 'expect',
+              },
+            ],
+            facts: [{ check_id: checkID[3], name: 'new_fact', value: 456 }],
+            values: [],
+          },
+        ],
+        check_id: checkID[3],
+        expectation_results: [
+          { name: checkNames[3], result: true, type: 'expect' },
+        ],
+        result: checkResults[3],
       },
     ],
     completed_at: '2022-11-09T17:02:20.629366Z',
@@ -76,7 +167,7 @@ const catalogData = {
   data: {
     items: [
       {
-        description: 'Corosync `token` timeout is set to expected value\n',
+        description: checkDescription[0],
         expectations: [
           {
             expression:
@@ -92,12 +183,11 @@ const catalogData = {
             name: 'corosync_token_timeout',
           },
         ],
-        group: 'Corosync',
-        id: '156F64',
-        name: 'Corosync configuration file',
-        remediation:
-          '## Abstract\nThe value of the Corosync `token` timeout is not set as recommended.\n## Remediation\n...\n',
-        severity: 'critical',
+        group: checkGroup[0],
+        premium: checkIsPremium[1],
+        id: checkID[0],
+        name: checkNames[0],
+        remediation: checkRemediation[1],
         values: [
           {
             conditions: [
@@ -112,6 +202,109 @@ const catalogData = {
           },
         ],
       },
+      {
+        id: checkID[1],
+        description: checkDescription[1],
+        expectations: [
+          {
+            expression: 'additional_expression',
+            name: 'additional_expectation',
+            type: 'expect',
+          },
+        ],
+        facts: [
+          {
+            argument: 'additional_argument',
+            gatherer: 'additional_gatherer',
+            name: 'additional_fact',
+          },
+        ],
+        group: checkGroup[0],
+        premium: checkIsPremium[0],
+        name: checkNames[1],
+        remediation: checkRemediation[0],
+        values: [
+          {
+            conditions: [
+              {
+                expression: 'additional_condition_expression',
+                value: 'additional_condition_value',
+              },
+            ],
+            default: 'additional_default_value',
+            name: 'additional_value',
+          },
+        ],
+      },
+      {
+        id: checkID[2],
+        description: checkDescription[2],
+        expectations: [
+          {
+            expression: 'additional_expression',
+            name: 'additional_expectation',
+            type: 'expect',
+          },
+        ],
+        facts: [
+          {
+            argument: 'additional_argument',
+            gatherer: 'additional_gatherer',
+            name: 'additional_fact',
+          },
+        ],
+        group: checkGroup[1],
+        premium: checkIsPremium[0],
+        name: checkNames[2],
+        remediation: checkRemediation[0],
+        values: [
+          {
+            conditions: [
+              {
+                expression: 'additional_condition_expression',
+                value: 'additional_condition_value',
+              },
+            ],
+            default: 'additional_default_value',
+            name: 'additional_value',
+          },
+        ],
+      },
+      {
+        id: checkID[3],
+        description: checkDescription[3],
+        expectations: [
+          {
+            expression: 'additional_expression',
+            name: 'additional_expectation',
+            type: 'expect',
+          },
+        ],
+        facts: [
+          {
+            argument: 'additional_argument',
+            gatherer: 'additional_gatherer',
+            name: 'additional_fact',
+          },
+        ],
+        group: checkGroup[0],
+        premium: checkIsPremium[1],
+        name: checkNames[3],
+        remediation: checkRemediation[0],
+
+        values: [
+          {
+            conditions: [
+              {
+                expression: 'additional_condition_expression',
+                value: 'additional_condition_value',
+              },
+            ],
+            default: 'additional_default_value',
+            name: 'additional_value',
+          },
+        ],
+      },
     ],
   },
 };