fleet/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx
jacobshandling 096d67dd5a
Linux disk encryption: frontend changes, backend missing private key errors, remove disk encryption endpoints dependence on MDM being enabled (#23714)
## Addresses #22702,  #23713, #23756, #23746, #23747, and #23876
_-Note that much of this code as is will render as expected only once
integrated with the backend or if manipulated manually for testing
purposes_

**Frontend**:
- Update banners on my device page, tests
- Build new logic for calling endpoint to trigger linux key escrow on
clicking `Create key`
- Add `CreateLinuxKeyModal` to inform user of next steps after clicking
`Create key`
- Update banners on host details page, tests
- Update the Controls > OS settings section with new logic related to
linux disk encryption
- Expect and include counts of Linux hosts in aggregate disk encryption
stats UI
- Add "Linux" column to the disk encryption table
- Show disk encryption related UI for supported Linux platforms
- TODO: confirm platform string matching functionality in manual e2e
testing
- Expand capabilities of `SectionHeader` component, apply to new UI
- Flash "missing private key" error, with clickable link, when trying to
update disk encryption enabled while no server private key is present.
- TODO: QA this once other endpoints on Controls > Disk encryption are
enabled even when MDM not turned on
- Update Disk encryption key modal copy


-Other TODO:
  - Confirm when integrated with API:
    - Aggregate disk encryption counts
    - Disk encryption table Linux column
    - Show disk encryption key action on host details page when expected
    - Opens Disk encryption key modal, displays key as expected
  
**Backend**:
- For "No team" and teams, error when trying to update disk encryption
enabled while no server private key is present.
- Remove requirement of mdm being enabled for use of various endpoints
related to Linux disk encryption
- Update tests


_________
**Host details and my device page banners**

![banners](https://github.com/user-attachments/assets/b76fbfbd-0969-40eb-b8b1-9fd0d4fd0f4f)

**Create key modal**
<img width="1799" alt="create-key-modal"
src="https://github.com/user-attachments/assets/81a55ccb-b6b9-4eb6-b2ff-a463c60724c0">

**Enabling disk encryption**

![turning-on-enforcement](https://github.com/user-attachments/assets/005010b9-2238-46f8-9579-f07823898a78)

**Disk encryption: Fleet free**
<img width="1912" alt="free"
src="https://github.com/user-attachments/assets/9f9cace3-8955-47c2-87d9-24ff9387ac1a">

**Custom settings: turn on MDM**
<img width="1912" alt="turn on mdm"
src="https://github.com/user-attachments/assets/4d3ad47b-4035-4d93-86f0-dc2691b38bb4">

**Device status indicators**

![host-status-indicators](https://github.com/user-attachments/assets/5fc72c1e-816b-45b3-a650-5c1fcc48f09e)

**Encryption key action and modal**

![de-key-action-and-modal](https://github.com/user-attachments/assets/632f7b2c-c07e-4e30-87ef-e6437ae42a78)



- [x] Changes file added for user-visible changes in `changes/`
- [x] Added/updated tests
- [x] Manual QA for all new/changed functionality
  - [ ] Full e2e testing to do when integrated with backend

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: Ian Littman <iansltx@gmail.com>
2024-11-20 11:58:47 -08:00

206 lines
5.2 KiB
TypeScript

import React from "react";
import { API_NO_TEAM_ID, ITeamConfig } from "interfaces/team";
import { IConfig } from "interfaces/config";
import { ApplePlatform } from "interfaces/platform";
import SectionHeader from "components/SectionHeader";
import Spinner from "components/Spinner";
import WindowsTargetForm from "../WindowsTargetForm";
import PlatformTabs from "../PlatformTabs";
import { OSUpdatesSupportedPlatform } from "../../OSUpdates";
const baseClass = "os-updates-target-section";
type GetDefaultFnParams = {
osType?: ApplePlatform;
currentTeamId: number;
appConfig: IConfig;
teamConfig?: ITeamConfig;
};
const getDefaultOSVersion = ({
osType,
currentTeamId,
appConfig,
teamConfig,
}: GetDefaultFnParams) => {
const mdmData =
currentTeamId === API_NO_TEAM_ID ? appConfig?.mdm : teamConfig?.mdm;
switch (osType) {
case "darwin":
return mdmData?.macos_updates.minimum_version ?? "";
case "ios":
return mdmData?.ios_updates.minimum_version ?? "";
case "ipados":
return mdmData?.ipados_updates.minimum_version ?? "";
default:
return "";
}
};
const getDefaultDeadline = ({
osType,
currentTeamId,
appConfig,
teamConfig,
}: GetDefaultFnParams) => {
const mdmData =
currentTeamId === API_NO_TEAM_ID ? appConfig?.mdm : teamConfig?.mdm;
switch (osType) {
case "darwin":
return mdmData?.macos_updates.deadline ?? "";
case "ios":
return mdmData?.ios_updates.deadline ?? "";
case "ipados":
return mdmData?.ipados_updates.deadline ?? "";
default:
return "";
}
};
const getDefaultWindowsDeadlineDays = ({
currentTeamId,
appConfig,
teamConfig,
}: GetDefaultFnParams) => {
return currentTeamId === API_NO_TEAM_ID
? appConfig.mdm.windows_updates.deadline_days?.toString() ?? ""
: teamConfig?.mdm?.windows_updates.deadline_days?.toString() ?? "";
};
const getDefaultWindowsGracePeriodDays = ({
currentTeamId,
appConfig,
teamConfig,
}: GetDefaultFnParams) => {
return currentTeamId === API_NO_TEAM_ID
? appConfig.mdm.windows_updates.grace_period_days?.toString() ?? ""
: teamConfig?.mdm?.windows_updates.grace_period_days?.toString() ?? "";
};
interface ITargetSectionProps {
appConfig: IConfig;
currentTeamId: number;
isFetching: boolean;
selectedPlatform: OSUpdatesSupportedPlatform;
teamConfig?: ITeamConfig;
onSelectPlatform: (platform: OSUpdatesSupportedPlatform) => void;
refetchAppConfig: () => void;
refetchTeamConfig: () => void;
}
const TargetSection = ({
appConfig,
currentTeamId,
isFetching,
selectedPlatform,
teamConfig,
onSelectPlatform,
refetchAppConfig,
refetchTeamConfig,
}: ITargetSectionProps) => {
if (isFetching) {
return <Spinner />;
}
const isAppleMdmEnabled = appConfig.mdm.enabled_and_configured;
const isWindowsMdmEnabled = appConfig.mdm.windows_enabled_and_configured;
const defaultMacOSVersion = getDefaultOSVersion({
osType: "darwin",
currentTeamId,
appConfig,
teamConfig,
});
const defaultMacOSDeadline = getDefaultDeadline({
osType: "darwin",
currentTeamId,
appConfig,
teamConfig,
});
const defaultIOSVersion = getDefaultOSVersion({
osType: "ios",
currentTeamId,
appConfig,
teamConfig,
});
const defaultIOSDeadline = getDefaultDeadline({
osType: "ios",
currentTeamId,
appConfig,
teamConfig,
});
const defaultIPadOSOSVersion = getDefaultOSVersion({
osType: "ipados",
currentTeamId,
appConfig,
teamConfig,
});
const defaultIPadOSDeadline = getDefaultDeadline({
osType: "ipados",
currentTeamId,
appConfig,
teamConfig,
});
const defaultWindowsDeadlineDays = getDefaultWindowsDeadlineDays({
currentTeamId,
appConfig,
teamConfig,
});
const defaultWindowsGracePeriodDays = getDefaultWindowsGracePeriodDays({
currentTeamId,
appConfig,
teamConfig,
});
const renderTargetForms = () => {
if (isAppleMdmEnabled) {
return (
<PlatformTabs
currentTeamId={currentTeamId}
defaultMacOSVersion={defaultMacOSVersion}
defaultMacOSDeadline={defaultMacOSDeadline}
defaultIOSVersion={defaultIOSVersion}
defaultIOSDeadline={defaultIOSDeadline}
defaultIPadOSVersion={defaultIPadOSOSVersion}
defaultIPadOSDeadline={defaultIPadOSDeadline}
defaultWindowsDeadlineDays={defaultWindowsDeadlineDays}
defaultWindowsGracePeriodDays={defaultWindowsGracePeriodDays}
selectedPlatform={selectedPlatform}
onSelectPlatform={onSelectPlatform}
refetchAppConfig={refetchAppConfig}
refetchTeamConfig={refetchTeamConfig}
isWindowsMdmEnabled={isWindowsMdmEnabled}
/>
);
}
return (
<WindowsTargetForm
currentTeamId={currentTeamId}
defaultDeadlineDays={defaultWindowsDeadlineDays}
defaultGracePeriodDays={defaultWindowsGracePeriodDays}
refetchAppConfig={refetchAppConfig}
refetchTeamConfig={refetchTeamConfig}
/>
);
};
return (
<div className={baseClass}>
<SectionHeader
title="Target"
wrapperCustomClass={`${baseClass}__header`}
/>
{renderTargetForms()}
</div>
);
};
export default TargetSection;