Clean up interfaces, better responsive design

fleetdm · Jul 3, 2024 · ca58f31 · ca58f31
1 parent 6e6bbdf
commit ca58f31
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 67 deletions.
diff --git a/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx b/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { DashboardOsqueryPlatform, OsqueryPlatform } from "interfaces/platform";
+import { DisplayPlatform, OsqueryPlatform } from "interfaces/platform";
 import { PLATFORM_DISPLAY_NAMES } from "utilities/constants";
 
 import TooltipWrapper from "components/TooltipWrapper";
@@ -24,7 +24,7 @@ const ERROR_NO_COMPATIBLE_TABLES = Error("no tables in query");
 
 const formatPlatformsForDisplay = (
   compatiblePlatforms: OsqueryPlatform[]
-): DashboardOsqueryPlatform[] => {
+): DisplayPlatform[] => {
   return compatiblePlatforms.map((str) => PLATFORM_DISPLAY_NAMES[str] || str);
 };
 

diff --git a/frontend/interfaces/platform.ts b/frontend/interfaces/platform.ts
@@ -1,14 +1,12 @@
-export type OsqueryPlatform =
-  | "darwin"
+export type DisplayPlatform =
   | "macOS"
-  | "windows"
   | "Windows"
-  | "linux"
   | "Linux"
-  | "chrome"
-  | "ChromeOS";
+  | "ChromeOS"
+  | "iOS"
+  | "iPadOS";
 
-export type DashboardOsqueryPlatform = OsqueryPlatform | "iOS" | "iPadOS";
+export type OsqueryPlatform = Exclude<DisplayPlatform, "iOS" | "iPadOS">;
 
 export type SupportedPlatform = "darwin" | "windows" | "linux" | "chrome";
 
@@ -31,7 +29,7 @@ export type SelectedPlatformString =
 export type DashboardPlatform = SelectedPlatform | "ios" | "ipados";
 
 // TODO: revisit this approach pending resolution of https://github.com/fleetdm/fleet/issues/3555.
-export const MACADMINS_EXTENSION_TABLES: Record<string, OsqueryPlatform[]> = {
+export const MACADMINS_EXTENSION_TABLES: Record<string, SupportedPlatform[]> = {
   file_lines: ["darwin", "linux", "windows"],
   filevault_users: ["darwin"],
   google_chrome_profiles: ["darwin", "linux", "windows"],

diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx b/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx
@@ -137,7 +137,7 @@ const HostsSummary = ({
 
   const renderIosCount = (teamId?: number) => {
     const iosLabelId = builtInLabels?.find(
-      (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.ios // TODO: change to ios
+      (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.ios
     )?.id;
 
     if (isLoadingHostsSummary || iosLabelId === undefined) {
@@ -160,7 +160,7 @@ const HostsSummary = ({
 
   const renderIpadosCount = (teamId?: number) => {
     const ipadosLabelId = builtInLabels?.find(
-      (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.ipados // TODO: change to ipados
+      (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.ipados
     )?.id;
 
     if (isLoadingHostsSummary || ipadosLabelId === undefined) {
@@ -198,16 +198,12 @@ const HostsSummary = ({
       default:
         return (
           <>
-            <div className={`${baseClass}__row`}>
-              {renderMacCount(teamId)}
-              {renderWindowsCount(teamId)}
-              {renderLinuxCount(teamId)}
-            </div>
-            <div className={`${baseClass}__row`}>
-              {renderChromeCount(teamId)}
-              {renderIosCount(teamId)}
-              {renderIpadosCount(teamId)}
-            </div>
+            {renderMacCount(teamId)}
+            {renderWindowsCount(teamId)}
+            {renderLinuxCount(teamId)}
+            {renderChromeCount(teamId)}
+            {renderIosCount(teamId)}
+            {renderIpadosCount(teamId)}
           </>
         );
     }

diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss
@@ -1,5 +1,4 @@
 .summary-tile {
-  width: 100%;
   display: flex;
   justify-content: space-around;
 

diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/_styles.scss b/frontend/pages/DashboardPage/cards/HostsSummary/_styles.scss
@@ -2,37 +2,19 @@
   margin-top: $pad-large;
   width: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: space-around;
+  flex-wrap: wrap;
   font-size: $x-small;
   gap: $pad-medium;
 
-  &__row {
-    display: flex;
-    justify-content: space-around;
+  .summary-tile {
+    flex: 1 1 30%;
   }
 
-  // Create a single row
   @media (min-width: $break-md) {
-    flex-direction: row;
-    gap: initial;
-
-    &__row {
-      flex: 1 100%;
-    }
-  }
-
-  &__tile {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &:first-of-type {
-      justify-content: flex-end;
-    }
-    &:last-of-type {
-      justify-content: flex-start;
+    .summary-tile {
+      flex: initial;
     }
   }
 

diff --git a/frontend/pages/DashboardPage/helpers.ts b/frontend/pages/DashboardPage/helpers.ts
diff --git a/frontend/utilities/constants.tsx b/frontend/utilities/constants.tsx
@@ -1,5 +1,5 @@
 import URL_PREFIX from "router/url_prefix";
-import { DashboardOsqueryPlatform } from "interfaces/platform";
+import { DisplayPlatform } from "interfaces/platform";
 import paths from "router/paths";
 import { ISchedulableQuery } from "interfaces/schedulable_query";
 import React from "react";
@@ -212,10 +212,7 @@ export const isPlatformLabelNameFromAPI = (
   return PLATFORM_LABEL_NAMES_FROM_API.includes(s as PlatformLabelNameFromAPI);
 };
 
-export const PLATFORM_DISPLAY_NAMES: Record<
-  string,
-  DashboardOsqueryPlatform
-> = {
+export const PLATFORM_DISPLAY_NAMES: Record<string, DisplayPlatform> = {
   darwin: "macOS",
   macOS: "macOS",
   windows: "Windows",
@@ -285,19 +282,30 @@ export const hasPlatformTypeIcon = (
   return !!PLATFORM_TYPE_ICONS[s as keyof typeof PLATFORM_TYPE_ICONS];
 };
 
+type PlatformLabelOptions =
+  | "All"
+  | "Windows"
+  | "Linux"
+  | "macOS"
+  | "ChromeOS"
+  | "iOS"
+  | "iPadOS";
+type PlatformValueOptions =
+  | "all"
+  | "windows"
+  | "linux"
+  | "darwin"
+  | "chrome"
+  | "ios"
+  | "ipados"
+  | "";
 interface IPlatformDropdownOptions {
-  label: "All" | "Windows" | "Linux" | "macOS" | "ChromeOS" | "iOS" | "iPadOS";
-  value:
-    | "all"
-    | "windows"
-    | "linux"
-    | "darwin"
-    | "chrome"
-    | "ios"
-    | "ipados"
-    | "";
-  path?: string;
+  label: PlatformLabelOptions;
+  value: PlatformValueOptions;
+  path: string;
 }
+
+/** Select platform on dashboard */
 export const PLATFORM_DROPDOWN_OPTIONS: IPlatformDropdownOptions[] = [
   { label: "All", value: "all", path: paths.DASHBOARD },
   { label: "macOS", value: "darwin", path: paths.DASHBOARD_MAC },
@@ -308,17 +316,21 @@ export const PLATFORM_DROPDOWN_OPTIONS: IPlatformDropdownOptions[] = [
   { label: "iPadOS", value: "ipados", path: paths.DASHBOARD_IPADOS },
 ];
 
-// Scheduling queries do not support ChromeOS, iOS, or iPadOS
-export const SCHEDULE_PLATFORM_DROPDOWN_OPTIONS: IPlatformDropdownOptions[] = [
+/** Scheduled queries do not support ChromeOS, iOS, or iPadOS */
+interface ISchedulePlatformDropdownOptions {
+  label: Exclude<PlatformLabelOptions, "ChromeOS" | "iOS" | "iPadOS">;
+  value: Exclude<PlatformValueOptions, "chrome" | "ios" | "ipados">;
+}
+
+export const SCHEDULE_PLATFORM_DROPDOWN_OPTIONS: ISchedulePlatformDropdownOptions[] = [
   { label: "All", value: "" }, // API empty string runs on all platforms
   { label: "macOS", value: "darwin" },
   { label: "Windows", value: "windows" },
   { label: "Linux", value: "linux" },
 ];
 
-// Builtin label names returned from API
+/** Selected platform on dashboard mapped to built in label name */
 export const PLATFORM_NAME_TO_LABEL_NAME = {
-  all: "",
   darwin: "macOS",
   windows: "MS Windows",
   linux: "All Linux",