✨ Add counts and styling for incident / issues (konveyor#145)

<img width="890" alt="Screenshot 2024-12-09 at 4 43 25 PM" src="https://github.com/user-attachments/assets/9446645e-0eaf-43b0-8419-241ba0e0f563"> Signed-off-by: Ian Bolton <[email protected]>
rszwajko · Dec 10, 2024 · b781ac7 · b781ac7
1 parent 379220e
commit b781ac7
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 8 deletions.
diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
@@ -1,7 +1,7 @@
 // App.tsx
 import React, { useState, useEffect } from "react";
 import { viewType } from "./utils/vscode";
-import AnalysisPage from "./components/AnalysisPage";
+import AnalysisPage from "./components/AnalysisPage/AnalysisPage";
 import ResolutionPage from "./components/ResolutionsPage";
 
 const App: React.FC = () => {

diff --git a/webview-ui/src/components/AnalysisPage.tsx → .../components/AnalysisPage/AnalysisPage.tsx b/webview-ui/src/components/AnalysisPage.tsx → .../components/AnalysisPage/AnalysisPage.tsx
@@ -1,3 +1,4 @@
+import "./styles.css";
 import React, { useState, useMemo } from "react";
 import {
   Button,
@@ -19,15 +20,24 @@ import {
   PageSection,
   Stack,
   StackItem,
+  Flex,
+  FlexItem,
 } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
-import ProgressIndicator from "./ProgressIndicator";
-import ViolationIncidentsList from "./ViolationIncidentsList";
+import ProgressIndicator from "../ProgressIndicator";
+import ViolationIncidentsList from "../ViolationIncidentsList";
 import { Incident } from "@editor-extensions/shared";
-import { useExtensionState } from "../hooks/useExtensionState";
-import { cancelSolution, getSolution, openFile, startServer, runAnalysis } from "../hooks/actions";
-import { ServerStatusToggle } from "./ServerStatusToggle/ServerStatusToggle";
+import { useExtensionState } from "../../hooks/useExtensionState";
+import {
+  cancelSolution,
+  getSolution,
+  openFile,
+  startServer,
+  runAnalysis,
+} from "../../hooks/actions";
+import { ServerStatusToggle } from "../ServerStatusToggle/ServerStatusToggle";
+import { ViolationsCount } from "../ViolationsCount/ViolationsCount";
 
 const AnalysisPage: React.FC = () => {
   const [state, dispatch] = useExtensionState();
@@ -105,7 +115,11 @@ const AnalysisPage: React.FC = () => {
           <StackItem>
             <Card>
               <CardHeader>
-                <CardTitle>Analysis Actions</CardTitle>
+                <Flex>
+                  <FlexItem>
+                    <CardTitle>Analysis Actions</CardTitle>
+                  </FlexItem>
+                </Flex>
               </CardHeader>
               <CardBody>
                 <Stack hasGutter>
@@ -134,7 +148,21 @@ const AnalysisPage: React.FC = () => {
           <StackItem>
             <Card>
               <CardHeader>
-                <CardTitle>Analysis Results</CardTitle>
+                <Flex className="header-layout">
+                  <FlexItem>
+                    <CardTitle>Analysis Results</CardTitle>
+                    <ViolationsCount
+                      violationsCount={violations.length}
+                      incidentsCount={violations.reduce(
+                        (prev, curr) => curr.incidents.length + prev,
+                        0,
+                      )}
+                    />
+                  </FlexItem>
+                  <>
+                    <FlexItem></FlexItem>
+                  </>
+                </Flex>
               </CardHeader>
               <CardBody>
                 {isAnalyzing && <ProgressIndicator progress={50} />}

diff --git a/webview-ui/src/components/AnalysisPage/styles.css b/webview-ui/src/components/AnalysisPage/styles.css
@@ -0,0 +1,14 @@
+.header-layout {
+  align-items: center;
+  gap: 16px;
+  min-height: 36px;
+  padding: 4px 0;
+}
+
+.vertical-divider {
+  width: 1px;
+  height: 24px;
+  background-color: #d2d2d2;
+  margin: 0 8px;
+  align-self: center;
+}
diff --git a/webview-ui/src/components/ViolationsCount/ViolationsCount.tsx b/webview-ui/src/components/ViolationsCount/ViolationsCount.tsx
@@ -0,0 +1,35 @@
+import "./styles.css";
+import React from "react";
+import { Content } from "@patternfly/react-core";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+
+interface ViolationsCountProps {
+  violationsCount: number;
+  incidentsCount: number;
+}
+
+export const ViolationsCount: React.FC<ViolationsCountProps> = ({
+  violationsCount,
+  incidentsCount,
+}) => {
+  const getStatusText = (count: number) => {
+    if (count === 0) {
+      return "(No incidents found)";
+    } else if (count === 1) {
+      return "(1 incident found)";
+    } else {
+      return `(${count} incidents found)`;
+    }
+  };
+
+  return (
+    <div className="violations-count">
+      <Content component={"h4"} className="violations-title">
+        Total Issues: {violationsCount}
+      </Content>
+      <Content component={"small"} className={`${spacing.mlSm} violations-subtitle`}>
+        {getStatusText(incidentsCount)}
+      </Content>
+    </div>
+  );
+};
diff --git a/webview-ui/src/components/ViolationsCount/styles.css b/webview-ui/src/components/ViolationsCount/styles.css
@@ -0,0 +1,31 @@
+.violations-count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.violations-title {
+  color: #d2d2d2 !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+  margin: 0 !important;
+  display: flex;
+  align-items: center !important;
+  font-weight: 400 !important;
+}
+
+.violations-subtitle {
+  font-style: italic;
+  color: #d2d2d2;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.violations-compact {
+  color: #d2d2d2 !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+  margin: 0 !important;
+  display: flex;
+  align-items: center !important;
+}