Extend main page with more info (#82)

- Updates how to collect the data with a newer and easier method
- Updates the general wording

README.md

@@ -11,15 +11,18 @@ Watson is a JVM thread dump and CPU usage analyzer.
 
 It combines the best features of other popular Java TDAs and optionally hides a lot of noise, like idle Tomcat threads waiting for work.
 
+### Screenshots
+
+[Open markdown file with screenshots](screenshots.md)
+
 ## Gathering thread dumps
 
 To fully leverage Watson, you should capture Java thread dump **and** top outputs.
 
-The easiest way to do this is to use [Atlassian Support scripts](https://bitbucket.org/atlassianlabs/atlassian-support/src/master/).
+The easiest way to do this is to [generate a support zip](https://confluence.atlassian.com/support/create-a-support-zip-790796819.html) and
+load files from the `jfr-bundle/atst_in_product_diagnostic_<timestamp>/threaddumps` directory.
 
-## Screenshots
-
-[Open markdown file with screenshots](screenshots.md)
+You can also manually collect the data (also for non-Atlassian applications) by using [Atlassian Support scripts](https://bitbucket.org/atlassianlabs/atlassian-support/src/master/).
 
 ## Development
 

src/components/FullPageDropzone/DropzoneGuide.tsx

@@ -2,8 +2,14 @@ import React from 'react';
 import OutboundLink from './OutboundLink';
 
 export default class DropzoneGuide extends React.PureComponent {
+  private static SUPPORT_ZIP_GUIDE_LINK = 'https://confluence.atlassian.com/support/create-a-support-zip-790796819.html';
+
   private static GATHER_DATA_LINK = 'https://bitbucket.org/atlassianlabs/atlassian-support/src/master/';
 
+  private static SOURCE_CODE_LINK = 'https://github.com/drauf/watson';
+
+  private static SCREENSHOTS_LINK = 'https://github.com/drauf/watson/blob/main/screenshots.md';
+
   private static SLACK_CONNECT_DOCS_LINK = 'https://slack.com/help/articles/1500001422062-Use-Slack-Connect-to-start-a-DM-with-someone-at-another-company#send-an-invitation';
 
   private static stopPropagation = (event: React.MouseEvent) => {
@@ -14,32 +20,77 @@ export default class DropzoneGuide extends React.PureComponent {
   public render(): JSX.Element {
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-      <div id="dropzone-guide" role="complementary" onClick={DropzoneGuide.stopPropagation}>
+      <div
+        id="dropzone-guide"
+        role="complementary"
+        onClick={DropzoneGuide.stopPropagation}
+      >
+        <h5>
+          Watson is your go-to tool for analyzing JVM thread dumps and CPU
+          usage.
+          <br />
+          It filters out the idle threads and presents you with the most
+          relevant information.
+        </h5>
+
         <h5>
-          Watson works fully inside your browser. No files will leave your machine.
+          Watson operates completely within your browser, ensuring your files
+          stay right where they belong - on your machine.
         </h5>
 
+        <hr />
+
         <p>
-          For full functionality, gather thread dumps and
-          {' '}
-          <i>top</i>
-          {' '}
-          outputs, e.g. with the
+          To get the most out of Watson, capture Java thread dumps and top
+          outputs. Two ways to do this:
+          <ul>
+            <li>
+              <OutboundLink to={DropzoneGuide.SUPPORT_ZIP_GUIDE_LINK}>
+                Generate a support zip
+              </OutboundLink>
+              {' '}
+              and load thread dumps from the jfr-bundle directory,
+            </li>
+            <li>
+              or manually collect the data, even for non-Atlassian applications,
+              using the
+              {' '}
+              <OutboundLink to={DropzoneGuide.GATHER_DATA_LINK}>
+                Atlassian Support scripts
+              </OutboundLink>
+              .
+            </li>
+          </ul>
+        </p>
+
+        <hr />
+
+        <p>
+          To learn more or contribute, visit our
           {' '}
-          <OutboundLink to={DropzoneGuide.GATHER_DATA_LINK}>
-            Atlassian Support scripts
+          <OutboundLink to={DropzoneGuide.SOURCE_CODE_LINK}>
+            GitHub repo
           </OutboundLink>
           .
+          {' '}
+          <strong>
+            See screenshots of Watson
+            {' '}
+            <OutboundLink to={DropzoneGuide.SCREENSHOTS_LINK}>
+              here
+            </OutboundLink>
+          </strong>
+          .
         </p>
 
         <p>
-          Best-effort support -
+          For any assistance,
           {' '}
           <OutboundLink to={DropzoneGuide.SLACK_CONNECT_DOCS_LINK}>
             DM me on Slack
           </OutboundLink>
           {' '}
-          at drauf at atlassian.com
+          or send me an email at drauf at atlassian.com.
         </p>
       </div>
     );

src/components/FullPageDropzone/FullPageDropzone.tsx

@@ -46,30 +46,21 @@ export default class FullPageDropzone extends React.PureComponent<unknown, State
     }
 
     return (
-      <>
-        <div className="announcement">
-          <span className="ellipsis">
-            Watson is a JVM thread dump and CPU usage analyzer.
-            It combines the best features of other Java TDAs and optionally hides a lot of noise, like idle threads.
-          </span>
-        </div>
-
-        <Dropzone multiple onDrop={this.onDrop}>
-          {({ getRootProps, getInputProps, isDragActive }) => (
-            /* eslint-disable react/jsx-props-no-spreading */
-            <div id="dropzone" {...getRootProps()}>
-              <input {...getInputProps()} />
-              {
-                isDragActive
-                  ? <h4>Drop files here...</h4>
-                  : <h4>Drop a catalog here, or click to select files to load.</h4>
-              }
-              <DropzoneGuide />
-            </div>
-            /* eslint-enable react/jsx-props-no-spreading */
-          )}
-        </Dropzone>
-      </>
+      <Dropzone multiple onDrop={this.onDrop}>
+        {({ getRootProps, getInputProps, isDragActive }) => (
+          /* eslint-disable react/jsx-props-no-spreading */
+          <div id="dropzone" {...getRootProps()}>
+            <input {...getInputProps()} />
+            {
+              isDragActive
+                ? <h4>Drop files here...</h4>
+                : <h4>Drop a catalog here, or click to select files to load.</h4>
+            }
+            <DropzoneGuide />
+          </div>
+          /* eslint-enable react/jsx-props-no-spreading */
+        )}
+      </Dropzone>
     );
   }
 }

src/components/Summary/LabelFormatter.tsx

@@ -1,4 +1,4 @@
-import MemoryUnit from "../../types/MemoryUnit";
+import MemoryUnit from '../../types/MemoryUnit';
 
 const round = (value: number): string => value.toFixed(2);
 

src/components/Summary/MemoryUsageChart.tsx

@@ -29,7 +29,7 @@ export default class MemoryUsageChart extends React.PureComponent<Props> {
       );
     }
 
-    const memoryUnit = memoryUsages[0].memoryUnit;
+    const { memoryUnit } = memoryUsages[0];
     const freeMemoryAvg = memoryUsages.reduce((a, b) => a + b.memoryFree, 0) / memoryUsages.length;
     const usedMemoryAvg = memoryUsages.reduce((a, b) => a + b.memoryUsed, 0) / memoryUsages.length;
 

src/types/MemoryUnit.tsx

@@ -1,6 +1,6 @@
 enum MemoryUnit {
   MiB = 'MiB',
-  KiB = 'KiB'
+  KiB = 'KiB',
 }
 
 export default MemoryUnit;

src/types/MemoryUsage.tsx

@@ -1,4 +1,4 @@
-import MemoryUnit from "./MemoryUnit";
+import MemoryUnit from './MemoryUnit';
 
 export default class MemoryUsage {
   public readonly memoryTotal: number;