Fix files management flyout crashing (#237588)

## Summary

This PR fixes flyout on files management page (click `Statistics` on
`/app/management/kibana/filesManagement`) crashing. It has been crashing
since 9.1. I'm not exactly sure what the actual reason for crashing is.
This fix changes the `xScaleType` from `Time` to `Ordinal`. The value
displayed on x axis is `key`, which in this context is file extension,
so it doesn't make a sense to use `Time` here.

Closes: #235534
(cherry picked from commit 72c5997)

Author: kowalczyk-krzysztof

src/platform/plugins/private/files_management/public/app.tsx

@@ -87,7 +87,11 @@ export const App: FunctionComponent = () => {
         }}
         withoutPageTemplateWrapper
         additionalRightSideActions={[
-          <EuiButtonEmpty onClick={() => setShowDiagnosticsFlyout(true)}>
+          <EuiButtonEmpty
+            onClick={() => setShowDiagnosticsFlyout(true)}
+            aria-label={i18nTexts.diagnosticsFlyoutTitle}
+            data-test-subj="filesManagementOpenDiagnosticsFlyoutButton"
+          >
             {i18nTexts.diagnosticsFlyoutTitle}
           </EuiButtonEmpty>,
         ]}

src/platform/plugins/private/files_management/public/components/diagnostics_flyout.tsx

@@ -44,7 +44,13 @@ export const DiagnosticsFlyout: FunctionComponent<Props> = ({ onClose }) => {
   const titleId = useGeneratedHtmlId({ prefix: 'diagnosticsFlyoutTitle' });
 
   return (
-    <EuiFlyout ownFocus onClose={onClose} size="s" aria-labelledby={titleId}>
+    <EuiFlyout
+      ownFocus
+      onClose={onClose}
+      size="s"
+      aria-labelledby={titleId}
+      data-test-subj="diagnosticsFlyout"
+    >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m">
           <h2 id={titleId}>{i18nTexts.diagnosticsFlyoutTitle}</h2>
@@ -106,9 +112,8 @@ export const DiagnosticsFlyout: FunctionComponent<Props> = ({ onClose }) => {
                   id="Status"
                   xAccessor={'key'}
                   yAccessors={['count']}
-                  xScaleType={ScaleType.Time}
+                  xScaleType={ScaleType.Ordinal}
                   yScaleType={ScaleType.Linear}
-                  timeZone="local"
                 />
               </Chart>
             </EuiPanel>
@@ -129,9 +134,8 @@ export const DiagnosticsFlyout: FunctionComponent<Props> = ({ onClose }) => {
                   id="Extension"
                   xAccessor={'key'}
                   yAccessors={['count']}
-                  xScaleType={ScaleType.Time}
+                  xScaleType={ScaleType.Ordinal}
                   yScaleType={ScaleType.Linear}
-                  timeZone="local"
                 />
               </Chart>
             </EuiPanel>

test/functional/apps/management/_files.ts

@@ -13,12 +13,23 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'filesManagement']);
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
+  const supertest = getService('supertest');
+  const fileRoute = '/api/files/files/defaultImage';
 
   describe('Files management', () => {
+    let createdFileIds: string[] = [];
+
     before(async () => {
       await PageObjects.filesManagement.navigateTo();
     });
 
+    after(async () => {
+      for (const fileId of createdFileIds) {
+        await supertest.delete(`${fileRoute}/${fileId}`).set('kbn-xsrf', 'xxx');
+      }
+      createdFileIds = [];
+    });
+
     it(`should render an empty prompt`, async () => {
       await testSubjects.existOrFail('filesManagementApp');
 
@@ -27,5 +38,23 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         return pageText.includes('No files found');
       });
     });
+
+    it('should display charts in diagnostics flyout if any files exist', async () => {
+      const createFileResponse = await supertest.post(fileRoute).set('kbn-xsrf', 'xxx').send({
+        name: 'test',
+        mimeType: 'image/png',
+      });
+
+      const createdFileId = createFileResponse.body.file.id;
+      createdFileIds.push(createdFileId);
+
+      await testSubjects.click('filesManagementOpenDiagnosticsFlyoutButton');
+      await testSubjects.existOrFail('diagnosticsFlyout');
+
+      await retry.waitFor('Display charts', async () => {
+        const flyoutText = await (await testSubjects.find('diagnosticsFlyout')).getVisibleText();
+        return flyoutText.includes('Count by extension') && flyoutText.includes('Count by status');
+      });
+    });
   });
 }