design alignments

elastic · Oct 5, 2023 · bac1df2 · bac1df2
1 parent a25dfa4
commit bac1df2
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 57 deletions.
diff --git a/...ecurity_posture/public/pages/configurations/latest_findings/latest_findings_container.tsx b/...ecurity_posture/public/pages/configurations/latest_findings/latest_findings_container.tsx
@@ -43,7 +43,7 @@ const getDefaultQuery = ({
 });
 
 const defaultColumns: CloudSecurityDefaultColumn[] = [
-  { id: 'result.evaluation' },
+  { id: 'result.evaluation', width: 80 },
   { id: 'resource.id' },
   { id: 'resource.name' },
   { id: 'resource.sub_type' },
@@ -88,7 +88,7 @@ const flyoutComponent = (row: DataTableRecord, onCloseFlyout: () => void): JSX.E
   );
 };
 
-const columnsLocalStorageKey = 'cloudSecurityPostureLatestFindingsColumns';
+const columnsLocalStorageKey = 'cloudPosture:latestFindings:columns';
 
 const title = i18n.translate('xpack.csp.findings.latestFindings.tableRowTypeLabel', {
   defaultMessage: 'Findings',
@@ -162,7 +162,7 @@ export const LatestFindingsContainer = ({ dataView }: FindingsBaseProps) => {
               failed={failed}
             />
           )}
-          <EuiSpacer />
+          <EuiSpacer size="xs" />
           <CloudSecurityDataTable
             data-test-subj={TEST_SUBJECTS.LATEST_FINDINGS_TABLE}
             dataView={dataView}

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/layout/findings_layout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/layout/findings_layout.tsx
@@ -303,7 +303,7 @@ const FilterableCell: React.FC<{
 export const LimitedResultsBar = () => (
   <>
     <EuiSpacer size="xxl" />
-    <EuiBottomBar data-test-subj="test-bottom-bar">
+    <EuiBottomBar data-test-subj="test-bottom-bar" paddingSize="s">
       <EuiText textAlign="center">
         <FormattedMessage
           id="xpack.csp.findings..bottomBarLabel"

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts
@@ -19,6 +19,9 @@ export const useStyles = () => {
   `;
 
   const gridStyle = css`
+    & .euiDataGrid__content {
+      background: transparent;
+    }
     & .euiDataGridHeaderCell__icon {
       display: none;
     }

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities.tsx b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities.tsx
@@ -290,6 +290,14 @@ const VulnerabilitiesDataGrid = ({
     return <EmptyState onResetFilters={onResetFilters} />;
   }
 
+  const dataTableStyle = {
+    // Change the height of the grid to fit the page
+    // If there are filters, leave space for the filter bar
+    // Todo: Replace this component with EuiAutoSizer
+    height: `calc(100vh - ${urlQuery.filters.length > 0 ? 403 : 363}px)`,
+    minHeight: 400,
+  };
+
   return (
     <>
       <EuiProgress
@@ -299,61 +307,66 @@ const VulnerabilitiesDataGrid = ({
           opacity: isFetching ? 1 : 0,
         }}
       />
-      <EuiDataGrid
-        className={cx({ [styles.gridStyle]: true }, { [styles.highlightStyle]: showHighlight })}
-        aria-label={VULNERABILITIES}
-        columns={columns}
-        columnVisibility={{ visibleColumns, setVisibleColumns }}
-        schemaDetectors={[severitySchemaConfig]}
-        rowCount={limitedTotalItemCount}
-        toolbarVisibility={{
-          showColumnSelector: false,
-          showDisplaySelector: false,
-          showKeyboardShortcuts: false,
-          showFullScreenSelector: false,
-          additionalControls: {
-            left: {
-              append: (
-                <>
-                  <EuiButtonEmpty size="xs" color="text">
-                    {i18n.translate('xpack.csp.vulnerabilities.totalVulnerabilities', {
-                      defaultMessage:
-                        '{total, plural, one {# Vulnerability} other {# Vulnerabilities}}',
-                      values: { total: data?.total },
-                    })}
-                  </EuiButtonEmpty>
-                </>
+      <div style={dataTableStyle}>
+        <EuiDataGrid
+          className={cx({ [styles.gridStyle]: true }, { [styles.highlightStyle]: showHighlight })}
+          aria-label={VULNERABILITIES}
+          columns={columns}
+          columnVisibility={{ visibleColumns, setVisibleColumns }}
+          schemaDetectors={[severitySchemaConfig]}
+          rowCount={limitedTotalItemCount}
+          toolbarVisibility={{
+            showColumnSelector: false,
+            showDisplaySelector: false,
+            showKeyboardShortcuts: false,
+            showFullScreenSelector: false,
+            additionalControls: {
+              left: {
+                append: (
+                  <>
+                    <EuiButtonEmpty size="xs" color="text">
+                      {i18n.translate('xpack.csp.vulnerabilities.totalVulnerabilities', {
+                        defaultMessage:
+                          '{total, plural, one {# Vulnerability} other {# Vulnerabilities}}',
+                        values: { total: data?.total },
+                      })}
+                    </EuiButtonEmpty>
+                  </>
+                ),
+              },
+              right: (
+                <EuiFlexItem grow={false} className={styles.groupBySelector}>
+                  <FindingsGroupBySelector
+                    type="default"
+                    pathnameHandler={vulnerabilitiesPathnameHandler}
+                  />
+                </EuiFlexItem>
               ),
             },
-            right: (
-              <EuiFlexItem grow={false} className={styles.groupBySelector}>
-                <FindingsGroupBySelector
-                  type="default"
-                  pathnameHandler={vulnerabilitiesPathnameHandler}
-                />
-              </EuiFlexItem>
-            ),
-          },
-        }}
-        gridStyle={{
-          border: 'horizontal',
-          cellPadding: 'l',
-          stripes: false,
-          rowHover: 'none',
-          header: 'underline',
-        }}
-        renderCellValue={renderCellValue}
-        inMemory={{ level: 'enhancements' }}
-        sorting={{ columns: sort, onSort: onSortHandler }}
-        pagination={{
-          pageIndex,
-          pageSize,
-          pageSizeOptions: [10, 25, 100],
-          onChangeItemsPerPage,
-          onChangePage,
-        }}
-      />
-      {isLastLimitedPage && <LimitedResultsBar />}
+          }}
+          gridStyle={{
+            border: 'horizontal',
+            cellPadding: 'l',
+            stripes: false,
+            rowHover: 'none',
+            header: 'underline',
+          }}
+          renderCellValue={renderCellValue}
+          inMemory={{ level: 'enhancements' }}
+          sorting={{ columns: sort, onSort: onSortHandler }}
+          pagination={{
+            pageIndex,
+            pageSize,
+            pageSizeOptions: [10, 25, 100],
+            onChangeItemsPerPage,
+            onChangePage,
+          }}
+          virtualizationOptions={{
+            overscanRowCount: 20,
+          }}
+        />
+        {isLastLimitedPage && <LimitedResultsBar />}
+      </div>
       {showVulnerabilityFlyout && selectedVulnerability && (
         <VulnerabilityFindingFlyout
           flyoutIndex={selectedVulnerabilityIndex}