-
Notifications
You must be signed in to change notification settings - Fork 96
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(key-management-service): add kms termination
ref: MANAGER-13980 Signed-off-by: David Arsène <david.arsene.ext@ovhcloud.com>
- Loading branch information
Showing
15 changed files
with
322 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
import { defineConfig } from 'vite'; | ||
import { getBaseConfig } from '@ovh-ux/manager-vite-config'; | ||
|
||
export default defineConfig(getBaseConfig()); |
54 changes: 54 additions & 0 deletions
54
packages/manager/apps/key-management-service/src/api/hooks/useTerminateOKms.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { ApiError, ApiResponse } from '@ovh-ux/manager-core-api'; | ||
import { useMutation, useQueryClient } from '@tanstack/react-query'; | ||
import React from 'react'; | ||
import { terminateOKmsQueryKey, terminateOKms } from '../services/post'; | ||
import { getOkmsServiceId, getOkmsServiceIdQueryKey } from '../services/get'; | ||
import { getOkmsServicesResourceListQueryKey } from '../GET/apiv2/services'; | ||
|
||
export const useTerminateOKms = ({ | ||
kmsId, | ||
onSuccess, | ||
onError, | ||
}: { | ||
kmsId: string; | ||
onSuccess?: () => void; | ||
onError?: (result: ApiError) => void; | ||
}) => { | ||
const [isErrorVisible, setIsErrorVisible] = React.useState(false); | ||
const queryClient = useQueryClient(); | ||
|
||
const { | ||
mutate: terminateKms, | ||
isPending, | ||
error: terminateKmsError, | ||
} = useMutation({ | ||
mutationKey: terminateOKmsQueryKey(kmsId), | ||
mutationFn: async () => { | ||
const { data: servicesId } = await queryClient.fetchQuery< | ||
ApiResponse<number[]> | ||
>({ | ||
queryKey: getOkmsServiceIdQueryKey({ okms: kmsId }), | ||
queryFn: () => getOkmsServiceId({ okms: kmsId }), | ||
}); | ||
return terminateOKms({ serviceId: servicesId[0] }); | ||
}, | ||
onSuccess: () => { | ||
queryClient.invalidateQueries({ | ||
queryKey: getOkmsServicesResourceListQueryKey, | ||
}); | ||
onSuccess?.(); | ||
}, | ||
onError: (result: ApiError) => { | ||
setIsErrorVisible(true); | ||
onError?.(result); | ||
}, | ||
}); | ||
|
||
return { | ||
terminateKms, | ||
isPending, | ||
isErrorVisible: terminateKmsError && isErrorVisible, | ||
error: terminateKmsError, | ||
hideError: () => setIsErrorVisible(false), | ||
}; | ||
}; |
13 changes: 13 additions & 0 deletions
13
packages/manager/apps/key-management-service/src/api/services/post.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { apiClient } from '@ovh-ux/manager-core-api'; | ||
|
||
export type TerminateKmsParams = { | ||
serviceId: number; | ||
}; | ||
|
||
export const terminateOKmsQueryKey = (kms: string) => [`terminateKms-${kms}`]; | ||
|
||
/** | ||
* Terminiate a kms | ||
*/ | ||
export const terminateOKms = async ({ serviceId }: TerminateKmsParams) => | ||
apiClient.v6.post<{ message: string }>(`/services/${serviceId}/terminate`); |
2 changes: 1 addition & 1 deletion
2
packages/manager/apps/key-management-service/src/components/Breadcrumb/Breadcrumb.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { | ||
ActionMenu, | ||
ActionMenuItem, | ||
ActionMenuLayout, | ||
} from '@ovhcloud/manager-components'; | ||
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; | ||
import React, { useState } from 'react'; | ||
import { useTranslation } from 'react-i18next'; | ||
import { OKMS } from '@/interface'; | ||
import TerminateKms from '@/pages/listing/TerminateKms'; | ||
|
||
const menuLayout: ActionMenuLayout = { | ||
isCompact: true, | ||
hasVerticalEllipsis: true, | ||
}; | ||
|
||
const KmsActionMenu: React.FC<OKMS> = ({ id }) => { | ||
const { t } = useTranslation('key-management-service/listing'); | ||
const [isModalOpened, setIsModalOpened] = useState(false); | ||
|
||
const items: ActionMenuItem[] = [ | ||
{ | ||
id: 1, | ||
label: t('key_management_service_listing_terminate'), | ||
color: ODS_THEME_COLOR_INTENT.error, | ||
onClick: () => { | ||
setIsModalOpened(true); | ||
}, | ||
}, | ||
]; | ||
|
||
return ( | ||
<> | ||
<ActionMenu items={items} layout={menuLayout} /> | ||
{isModalOpened && <TerminateKms kmsId={id} />} | ||
</> | ||
); | ||
}; | ||
|
||
export default KmsActionMenu; |
113 changes: 113 additions & 0 deletions
113
...r/apps/key-management-service/src/components/modal/terminate/TerminateModal.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
import { ApiError } from '@ovh-ux/manager-core-api'; | ||
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; | ||
import { | ||
ODS_BUTTON_TYPE, | ||
ODS_BUTTON_VARIANT, | ||
ODS_INPUT_TYPE, | ||
ODS_MESSAGE_TYPE, | ||
ODS_SPINNER_SIZE, | ||
ODS_TEXT_LEVEL, | ||
ODS_TEXT_SIZE, | ||
OdsInputValueChangeEvent, | ||
} from '@ovhcloud/ods-components'; | ||
import { | ||
OsdsButton, | ||
OsdsInput, | ||
OsdsMessage, | ||
OsdsModal, | ||
OsdsSpinner, | ||
OsdsText, | ||
} from '@ovhcloud/ods-components/react'; | ||
import React, { useState } from 'react'; | ||
import { useTranslation } from 'react-i18next'; | ||
import { terminateValue } from './TerminateModal.constants'; | ||
|
||
export type TerminateModalProps = { | ||
headline: string; | ||
description?: string; | ||
terminateInputButton: string; | ||
closeModal: () => void; | ||
isLoading?: boolean; | ||
onConfirmTerminate: () => void; | ||
error?: ApiError; | ||
}; | ||
|
||
export const TerminateModal: React.FC<TerminateModalProps> = ({ | ||
headline, | ||
description, | ||
terminateInputButton, | ||
closeModal, | ||
isLoading, | ||
onConfirmTerminate, | ||
error, | ||
}) => { | ||
const { t } = useTranslation('key-management-service/terminate'); | ||
const [terminateInput, setTerminateInput] = useState(''); | ||
|
||
const close = () => { | ||
setTerminateInput(''); | ||
closeModal(); | ||
}; | ||
|
||
return ( | ||
<OsdsModal | ||
dismissible | ||
color={ODS_THEME_COLOR_INTENT.warning} | ||
headline={headline} | ||
onOdsModalClose={close} | ||
> | ||
{!!error && ( | ||
<OsdsMessage type={ODS_MESSAGE_TYPE.error}> | ||
<OsdsText | ||
level={ODS_TEXT_LEVEL.body} | ||
size={ODS_TEXT_SIZE._400} | ||
color={ODS_THEME_COLOR_INTENT.text} | ||
> | ||
{t('key_management_service_terminate_error', { | ||
error: error.response?.data?.message, | ||
})} | ||
</OsdsText> | ||
</OsdsMessage> | ||
)} | ||
<OsdsText | ||
color={ODS_THEME_COLOR_INTENT.text} | ||
level={ODS_TEXT_LEVEL.body} | ||
className="block mb-3" | ||
> | ||
{description} | ||
</OsdsText> | ||
<OsdsInput | ||
disabled={isLoading || undefined} | ||
type={ODS_INPUT_TYPE.text} | ||
value={terminateInput} | ||
onOdsValueChange={(e: OdsInputValueChangeEvent) => | ||
setTerminateInput(e.detail.value) | ||
} | ||
/> | ||
{isLoading && <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />} | ||
<OsdsButton | ||
disabled={isLoading || undefined} | ||
slot="actions" | ||
type={ODS_BUTTON_TYPE.button} | ||
variant={ODS_BUTTON_VARIANT.ghost} | ||
color={ODS_THEME_COLOR_INTENT.primary} | ||
onClick={close} | ||
> | ||
{t('key_management_service_terminate_cancel')} | ||
</OsdsButton> | ||
<OsdsButton | ||
disabled={isLoading || terminateInput !== terminateValue || undefined} | ||
slot="actions" | ||
type={ODS_BUTTON_TYPE.button} | ||
variant={ODS_BUTTON_VARIANT.flat} | ||
color={ODS_THEME_COLOR_INTENT.primary} | ||
onClick={() => { | ||
setTerminateInput(''); | ||
onConfirmTerminate(); | ||
}} | ||
> | ||
{terminateInputButton} | ||
</OsdsButton> | ||
</OsdsModal> | ||
); | ||
}; |
1 change: 1 addition & 0 deletions
1
...er/apps/key-management-service/src/components/modal/terminate/TerminateModal.constants.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export const terminateValue = 'TERMINATE'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/manager/apps/key-management-service/src/pages/listing/TerminateKms.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React from 'react'; | ||
import { useTranslation } from 'react-i18next'; | ||
import { useNavigate } from 'react-router-dom'; | ||
import { TerminateModal } from '@/components/modal/terminate/TerminateModal.component'; | ||
import { useTerminateOKms } from '@/api/hooks/useTerminateOKms'; | ||
|
||
export default function TerminateKms({ kmsId }: { kmsId: string }) { | ||
const { t } = useTranslation('key-management-service/terminate'); | ||
const navigate = useNavigate(); | ||
|
||
const closeModal = () => { | ||
navigate('..'); | ||
}; | ||
|
||
const { terminateKms, isErrorVisible, error } = useTerminateOKms({ | ||
kmsId, | ||
onSuccess: closeModal, | ||
}); | ||
|
||
return ( | ||
<TerminateModal | ||
headline={t('key_management_service_terminate_heading')} | ||
terminateInputButton={t('key_management_service_terminate_confirm')} | ||
description={t('key_management_service_terminate_description')} | ||
onConfirmTerminate={terminateKms} | ||
closeModal={closeModal} | ||
error={isErrorVisible ? error : null} | ||
/> | ||
); | ||
} |
Oops, something went wrong.