Untitled
unknown
plain_text
5 months ago
5.8 kB
2
Indexable
import React from 'react'; import { keepPreviousData } from '@tanstack/react-query'; import type { DefinitionListItem } from '@gravity-ui/components'; import { DefinitionList } from '@gravity-ui/components'; import { Label } from '@gravity-ui/uikit'; import type { Resource } from '@yandex-data-ui/cloud-schemas/build/models/cdn'; import Page from 'ui/components/Page/Page'; import { Section } from 'ui/components/Section/Section'; import { SetPageDataLoaded, useAppParams } from 'ui/hooks'; import { QueryDataLoader, useQueryData } from 'ui/services/data-source'; import { getStatusName } from 'ui/utils/common'; import { i18n } from 'ui/utils/i18n'; import { ActivateAction, ShieldingActionType, ShieldingActions, } from 'ui/units/cdn/components/ShieldingActions/ShieldingActions'; import { ShieldingPrice } from 'ui/units/cdn/components/ShieldingPrice/ShieldingPrice'; import { getShielding, listShieldingAvailableLocations } from 'ui/units/cdn/data-sources'; import { shieldingLocationStrValue } from 'ui/units/cdn/utils'; import { mergeStatuses } from '@gravity-ui/data-source'; const i18nK = i18n.bind(null, 'cdn'); interface ShieldingViewProps { resource: Resource; refetch: () => void; } export const ResourceShieldingView: React.FC<ShieldingViewProps> = ({ resource, refetch }) => { const params = useAppParams(); const { resourceId = '', folderId } = params; const { data: shielding, status, error, refetch: refetchShielding, } = useQueryData(getShielding, { resourceId }, { placeholderData: keepPreviousData }); const { data: shieldingLocations, status: shieldingLocationsStatus, error: shieldingLocationsError, } = useQueryData( listShieldingAvailableLocations, { folderId }, { placeholderData: keepPreviousData }, ); const resourceWithShielding = { ...resource, shielding, }; const additionalItems: DefinitionListItem[] = shielding ? [ { name: i18nK('label_shielding-status'), content: ( <Label theme="success"> {getStatusName(i18nK('value_shielding-status-ok'))} </Label> ), }, { name: i18nK('label_shielding-location'), content: shieldingLocationStrValue(shielding), }, ] : [ { name: i18nK('label_shielding-status'), content: ( <Label theme="unknown"> {getStatusName(i18nK('value_shielding-status-not-activated'))} </Label> ), }, ]; return ( <React.Fragment> <QueryDataLoader status={mergeStatuses([status, shieldingLocationsStatus])} error={error || shieldingLocationsError} > {shielding && shieldingLocations && ( <ShieldingActions resource={resourceWithShielding} shieldingLocations={shieldingLocations} onRefresh={refetchShielding} > {({ getSecondaryActions, getActionHandler }) => { const primaryActions = [ <ActivateAction key="activate" resource={resourceWithShielding} onUpdate={(checked) => { const actionType = checked ? ShieldingActionType.Activate : ShieldingActionType.Deactivate; const handle = getActionHandler( resourceWithShielding, actionType, ); handle?.(); }} />, ]; const secondaryActions = getSecondaryActions(resourceWithShielding); return ( <Page title={i18nK('label_shielding')} primaryActions={primaryActions} secondaryActions={secondaryActions} withSection withPadding > <Section title={i18nK('label_settings')}> <DefinitionList items={additionalItems} /> </Section> {shielding || shieldingLocations.length === 0 ? null : ( <ShieldingPrice resourceId={resourceId} locationId={shieldingLocations[0].locationId} /> )} </Page> ); }} </ShieldingActions> )} </QueryDataLoader> <SetPageDataLoaded /> </React.Fragment> ); };
Editor is loading...
Leave a Comment