Fleet UI: Clarify Host software/self-service status and version columns (#29008)

frontend/pages/hosts/details/cards/Software/DeviceSoftwareTableConfig.tsx

@@ -15,7 +15,6 @@ import VulnerabilitiesCell from "pages/SoftwarePage/components/tables/Vulnerabil
 import VersionCell from "pages/SoftwarePage/components/tables/VersionCell";
 import { getVulnerabilities } from "pages/SoftwarePage/SoftwareTitles/SoftwareTable/SoftwareTitlesTableConfig";
 import SoftwareNameCell from "components/TableContainer/DataTable/SoftwareNameCell";
-import ViewAllHostsLink from "components/ViewAllHostsLink";
 
 type ISoftwareTableConfig = Column<IHostSoftware>;
 type ITableHeaderProps = IHeaderProps<IHostSoftware>;
@@ -55,7 +54,8 @@ export const generateSoftwareTableHeaders = (): ISoftwareTableConfig[] => {
       sortType: "caseInsensitive",
     },
     {
-      Header: "Version",
+      Header: "Installed version",
+      id: "version",
       disableSortBy: true,
       // we use function as accessor because we have two columns that
       // need to access the same data. This is not supported with a string

frontend/pages/hosts/details/cards/Software/HostSoftwareTableConfig.tsx

@@ -25,6 +25,7 @@ import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCel
 import TextCell from "components/TableContainer/DataTable/TextCell";
 import SoftwareNameCell from "components/TableContainer/DataTable/SoftwareNameCell";
 import ActionsDropdown from "components/ActionsDropdown";
+import TooltipWrapper from "components/TooltipWrapper";
 
 import VulnerabilitiesCell from "pages/SoftwarePage/components/tables/VulnerabilitiesCell";
 import VersionCell from "pages/SoftwarePage/components/tables/VersionCell";
@@ -201,7 +202,23 @@ export const generateSoftwareTableHeaders = ({
       },
     },
     {
-      Header: "Install status",
+      Header: () => (
+        <HeaderCell
+          value={
+            <TooltipWrapper
+              tipContent={
+                <>
+                  The status of the last time <br />
+                  Fleet attempted an install <br />
+                  or uninstall.
+                </>
+              }
+            >
+              Install status
+            </TooltipWrapper>
+          }
+        />
+      ),
       disableSortBy: true,
       accessor: "status",
       Cell: ({ row: { original } }: IInstalledStatusCellProps) => {
@@ -209,7 +226,24 @@ export const generateSoftwareTableHeaders = ({
       },
     },
     {
-      Header: "Version",
+      Header: () => (
+        <HeaderCell
+          value={
+            <TooltipWrapper
+              tipContent={
+                <>
+                  The current verified version
+                  <br />
+                  installed on host.
+                </>
+              }
+            >
+              Installed version
+            </TooltipWrapper>
+          }
+        />
+      ),
+      id: "version",
       disableSortBy: true,
       // we use function as accessor because we have two columns that
       // need to access the same data. This is not supported with a string

frontend/pages/hosts/details/cards/Software/SelfService/SelfServiceTableConfig.tsx

@@ -34,11 +34,8 @@ import { IStatusDisplayConfig } from "../InstallStatusCell/InstallStatusCell";
 type ISoftwareTableConfig = Column<IHostSoftware>;
 type ITableHeaderProps = IHeaderProps<IHostSoftware>;
 type ITableStringCellProps = IStringCellProps<IHostSoftware>;
-type IInstalledVersionsCellProps = CellProps<
-  IHostSoftware,
-  IHostSoftware["installed_versions"]
->;
-type IVulnerabilitiesCellProps = IInstalledVersionsCellProps;
+type IStatusCellProps = CellProps<IHostSoftware, IHostSoftware["status"]>;
+type IActionCellProps = CellProps<IHostSoftware, IHostSoftware["status"]>;
 
 const baseClass = "self-service-table";
 
@@ -393,14 +390,14 @@ export const generateSoftwareTableHeaders = ({
     {
       Header: (cellProps: ITableHeaderProps) => (
         <HeaderCell
-          value="Status"
+          value="Install status"
           isSortedDesc={cellProps.column.isSortedDesc}
         />
       ),
       disableSortBy: false,
       disableGlobalFilter: true,
-      accessor: "source",
-      Cell: (cellProps: ITableStringCellProps) => (
+      accessor: "status",
+      Cell: (cellProps: IStatusCellProps) => (
         <InstallerStatus
           status={cellProps.row.original.status}
           last_install={
@@ -416,7 +413,7 @@ export const generateSoftwareTableHeaders = ({
       Header: "Actions",
       accessor: (originalRow) => originalRow.status,
       disableSortBy: true,
-      Cell: (cellProps: IVulnerabilitiesCellProps) => {
+      Cell: (cellProps: IActionCellProps) => {
         return (
           <InstallerStatusAction
             deviceToken={deviceToken}