Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: [M3-8985] - High performance volume indicator #11400

Merged
merged 8 commits into from
Dec 16, 2024
Merged

feat: [M3-8985] - High performance volume indicator #11400

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5b98ec2
feat: [M3-8985] - High performance volume indicator added.
dchyrva-akamai Dec 11, 2024
817a43a
Added changeset: High performance volume indicator added.
dchyrva-akamai Dec 11, 2024
bf72d0a
Added changeset: New `Block Storage Performance B1` linode capability
dchyrva-akamai Dec 12, 2024
4f7c53c
feat: [M3-8985] - Comments resolved.
dchyrva-akamai Dec 12, 2024
f80e9e9
improve prop optionality
bnussman Dec 13, 2024
cd87815
Use ui package components and keep tooltip styling consistent
mjac0bs Dec 13, 2024
5866a1b
Update changesets for Upcoming Features
mjac0bs Dec 13, 2024
46a680a
Small fix.
dchyrva-akamai Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/api-v4/.changeset/pr-11400-added-1733998451458.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/api-v4": Added
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
---

New `Block Storage Performance B1` linode capability ([#11400](https://github.com/linode/manager/pull/11400))
5 changes: 4 additions & 1 deletion packages/api-v4/src/linodes/types.ts
View file
Open in desktop
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,10 @@ export interface LinodeBackups {
last_successful: string | null;
}

export type LinodeCapabilities = 'Block Storage Encryption' | 'SMTP Enabled';
export type LinodeCapabilities =
| 'Block Storage Encryption'
| 'SMTP Enabled'
| 'Block Storage Performance B1';

export type Window =
| 'Scheduling'
Expand Down
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-11400-added-1733927873131.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Added
---

High performance volume indicator ([#11400](https://github.com/linode/manager/pull/11400))
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
33 changes: 33 additions & 0 deletions packages/manager/src/features/Linodes/HighPerformanceVolumeIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import BoltIcon from '@mui/icons-material/Bolt';
import { IconButton, Tooltip } from '@mui/material';
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
import React from 'react';

import type { LinodeCapabilities } from '@linode/api-v4';

interface Props {
linodeCapabilities?: LinodeCapabilities[];
}

function HighPerformanceVolumeIcon({ linodeCapabilities }: Props) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
function HighPerformanceVolumeIcon({ linodeCapabilities }: Props) {
export function HighPerformanceVolumeIcon({ linodeCapabilities }: Props) {

const isHighPerformanceVolume = !!linodeCapabilities?.includes(
'Block Storage Performance B1'
);

return (
isHighPerformanceVolume && (
<Tooltip arrow title="High Performance">
<IconButton
sx={{
border: '1px solid',
borderRadius: '50%',
padding: 0,
}}
>
<BoltIcon sx={{ fontSize: 12 }} />
</IconButton>
</Tooltip>
)
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return (
isHighPerformanceVolume && (
<Tooltip arrow title="High Performance">
<IconButton
sx={{
border: '1px solid',
borderRadius: '50%',
padding: 0,
}}
>
<BoltIcon sx={{ fontSize: 12 }} />
</IconButton>
</Tooltip>
)
);
if (!isHighPerformanceVolume) {
return null;
}
return (
<Tooltip arrow title="High Performance">
<IconButton
sx={{
border: '1px solid',
borderRadius: '50%',
padding: 0,
}}
>
<BoltIcon sx={{ fontSize: 12 }} />
</IconButton>
</Tooltip>
);

}

export default HighPerformanceVolumeIcon;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's remove this default export and export the function instead. We prefer named exports in our codebase. (docs)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bnussman-akamai Should also be resolved.

1 change: 1 addition & 0 deletions packages/manager/src/features/Linodes/LinodeEntityDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ export const LinodeEntityDetail = (props: Props) => {
ipv6={trimmedIPv6}
isLKELinode={Boolean(linode.lke_cluster_id)}
isVPCOnlyLinode={isVPCOnlyLinode}
linodeCapabilities={linode?.capabilities}
linodeId={linode.id}
linodeIsInDistributedRegion={linodeIsInDistributedRegion}
linodeLabel={linode.label}
Expand Down
20 changes: 16 additions & 4 deletions packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ import { usePreferences } from 'src/queries/profile/preferences';
import { useProfile } from 'src/queries/profile/profile';
import { pluralize } from 'src/utilities/pluralize';

import { encryptionStatusTestId } from '../Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable';
import { EncryptedStatus } from '../Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable';
import { encryptionStatusTestId } from '../Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable';
import HighPerformanceVolumeIcon from './HighPerformanceVolumeIcon';
import {
StyledBodyGrid,
StyledColumnLabelGrid,
Expand All @@ -41,6 +42,7 @@ import type {
EncryptionStatus,
Interface,
Linode,
LinodeCapabilities,
} from '@linode/api-v4/lib/linodes/types';
import type { Subnet } from '@linode/api-v4/lib/vpcs';
import type { TypographyProps } from '@linode/ui';
Expand All @@ -66,6 +68,7 @@ export interface BodyProps {
ipv6: Linode['ipv6'];
isLKELinode: boolean; // indicates whether linode belongs to an LKE cluster
isVPCOnlyLinode: boolean;
linodeCapabilities?: LinodeCapabilities[];
linodeId: number;
linodeIsInDistributedRegion: boolean;
linodeLabel: string;
Expand All @@ -85,6 +88,7 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
ipv6,
isLKELinode,
isVPCOnlyLinode,
linodeCapabilities,
linodeId,
linodeIsInDistributedRegion,
linodeLabel,
Expand Down Expand Up @@ -151,9 +155,17 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
<Typography>{gbRAM} GB RAM</Typography>
</Grid>
<Grid lg={6} sm={12} xs={6}>
<Typography>
{pluralize('Volume', 'Volumes', numVolumes)}
</Typography>
<Box
sx={{ alignItems: 'center', display: 'flex', gap: '0.25rem' }}
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
>
<Typography>
{pluralize('Volume', 'Volumes', numVolumes)}
</Typography>

<HighPerformanceVolumeIcon
linodeCapabilities={linodeCapabilities}
/>
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
</Box>
</Grid>
{isDiskEncryptionFeatureEnabled && encryptionStatus && (
<Grid>
Expand Down
1 change: 1 addition & 0 deletions packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ export const LinodeVolumes = () => {
}
isDetailsPageRow
key={volume.id}
linodeCapabilities={linode?.capabilities}
volume={volume}
/>
);
Expand Down
19 changes: 17 additions & 2 deletions packages/manager/src/features/Volumes/VolumeTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { useNotificationsQuery } from 'src/queries/account/notifications';
import { useInProgressEvents } from 'src/queries/events/events';
import { useRegionsQuery } from 'src/queries/regions/regions';

import HighPerformanceVolumeIcon from '../Linodes/HighPerformanceVolumeIcon';
import {
getDerivedVolumeStatusFromStatusAndEvent,
getEventProgress,
Expand All @@ -20,7 +21,7 @@ import {
import { VolumesActionMenu } from './VolumesActionMenu';

import type { ActionHandlers } from './VolumesActionMenu';
import type { Volume } from '@linode/api-v4';
import type { LinodeCapabilities, Volume } from '@linode/api-v4';

export const useStyles = makeStyles()({
volumePath: {
Expand All @@ -33,6 +34,7 @@ interface Props {
handlers: ActionHandlers;
isBlockStorageEncryptionFeatureEnabled?: boolean;
isDetailsPageRow?: boolean;
linodeCapabilities?: LinodeCapabilities[];
volume: Volume;
}

Expand All @@ -42,6 +44,7 @@ export const VolumeTableRow = React.memo((props: Props) => {
handlers,
isBlockStorageEncryptionFeatureEnabled,
isDetailsPageRow,
linodeCapabilities,
volume,
} = props;

Expand Down Expand Up @@ -115,7 +118,19 @@ export const VolumeTableRow = React.memo((props: Props) => {
wrap: 'nowrap',
}}
>
{volume.label}
<Box
sx={{
alignItems: 'center',
display: 'flex',
gap: '0.25rem',
}}
mjac0bs marked this conversation as resolved.
Show resolved Hide resolved
>
{volume.label}
<HighPerformanceVolumeIcon
linodeCapabilities={linodeCapabilities}
/>
bnussman-akamai marked this conversation as resolved.
Show resolved Hide resolved
</Box>

{isEligibleForUpgradeToNVMe && (
<Chip
clickable
Expand Down
Loading