|
| 1 | +import { |
| 2 | + DeploymentSelectQuery, |
| 3 | + DeploymentSelectQuery$data, |
| 4 | + DeploymentFilter, |
| 5 | +} from '../../__generated__/DeploymentSelectQuery.graphql'; |
| 6 | +import { DeploymentSelectValueQuery } from '../../__generated__/DeploymentSelectValueQuery.graphql'; |
| 7 | +import BAILink from '../BAILink'; |
| 8 | +import BAISelect from '../BAISelect'; |
| 9 | +import TotalFooter from '../TotalFooter'; |
| 10 | +import { useControllableValue } from 'ahooks'; |
| 11 | +import { GetRef, SelectProps, Skeleton, Tooltip } from 'antd'; |
| 12 | +import { BAIFlex, toLocalId } from 'backend.ai-ui'; |
| 13 | +import _ from 'lodash'; |
| 14 | +import { InfoIcon } from 'lucide-react'; |
| 15 | +import React, { useDeferredValue, useEffect, useRef, useState } from 'react'; |
| 16 | +import { useTranslation } from 'react-i18next'; |
| 17 | +import { graphql, useLazyLoadQuery } from 'react-relay'; |
| 18 | +import { useRelayCursorPaginatedQuery } from 'src/hooks/useRelayCursorPaginatedQuery'; |
| 19 | + |
| 20 | +export type Deployment = NonNullableNodeOnEdges< |
| 21 | + DeploymentSelectQuery$data['deployments'] |
| 22 | +>; |
| 23 | + |
| 24 | +export interface DeploymentSelectProps |
| 25 | + extends Omit<SelectProps, 'options' | 'labelInValue'> { |
| 26 | + fetchKey?: string; |
| 27 | + filter?: DeploymentFilter; |
| 28 | +} |
| 29 | + |
| 30 | +const DeploymentSelect: React.FC<DeploymentSelectProps> = ({ |
| 31 | + fetchKey, |
| 32 | + filter, |
| 33 | + loading, |
| 34 | + ...selectPropsWithoutLoading |
| 35 | +}) => { |
| 36 | + const { t } = useTranslation(); |
| 37 | + const [controllableValue, setControllableValue] = useControllableValue< |
| 38 | + string | undefined |
| 39 | + >(selectPropsWithoutLoading); |
| 40 | + const [controllableOpen, setControllableOpen] = useControllableValue<boolean>( |
| 41 | + selectPropsWithoutLoading, |
| 42 | + { |
| 43 | + valuePropName: 'open', |
| 44 | + trigger: 'onDropdownVisibleChange', |
| 45 | + }, |
| 46 | + ); |
| 47 | + const deferredOpen = useDeferredValue(controllableOpen); |
| 48 | + const [searchStr, setSearchStr] = useState<string>(); |
| 49 | + const deferredSearchStr = useDeferredValue(searchStr); |
| 50 | + |
| 51 | + const selectRef = useRef<GetRef<typeof BAISelect> | null>(null); |
| 52 | + |
| 53 | + // Query for selected deployment details |
| 54 | + const { deployment: selectedDeployment } = |
| 55 | + useLazyLoadQuery<DeploymentSelectValueQuery>( |
| 56 | + graphql` |
| 57 | + query DeploymentSelectValueQuery($id: ID!) { |
| 58 | + deployment(id: $id) { |
| 59 | + id |
| 60 | + metadata { |
| 61 | + name |
| 62 | + status |
| 63 | + createdAt |
| 64 | + } |
| 65 | + } |
| 66 | + } |
| 67 | + `, |
| 68 | + { |
| 69 | + id: controllableValue ?? '', |
| 70 | + }, |
| 71 | + { |
| 72 | + // to skip the query when controllableValue is empty |
| 73 | + fetchPolicy: controllableValue ? 'store-or-network' : 'store-only', |
| 74 | + }, |
| 75 | + ); |
| 76 | + |
| 77 | + // Paginated deployments query (cursor-based) |
| 78 | + const { |
| 79 | + paginationData, |
| 80 | + result: { deployments }, |
| 81 | + loadNext, |
| 82 | + isLoadingNext, |
| 83 | + } = useRelayCursorPaginatedQuery<DeploymentSelectQuery, Deployment>( |
| 84 | + graphql` |
| 85 | + query DeploymentSelectQuery( |
| 86 | + $first: Int |
| 87 | + $after: String |
| 88 | + $filter: DeploymentFilter |
| 89 | + $orderBy: [DeploymentOrderBy!] |
| 90 | + ) { |
| 91 | + deployments( |
| 92 | + first: $first |
| 93 | + after: $after |
| 94 | + filter: $filter |
| 95 | + orderBy: $orderBy |
| 96 | + ) { |
| 97 | + count |
| 98 | + pageInfo { |
| 99 | + hasNextPage |
| 100 | + endCursor |
| 101 | + } |
| 102 | + edges { |
| 103 | + node { |
| 104 | + id |
| 105 | + metadata { |
| 106 | + name |
| 107 | + status |
| 108 | + createdAt |
| 109 | + } |
| 110 | + } |
| 111 | + } |
| 112 | + } |
| 113 | + } |
| 114 | + `, |
| 115 | + { first: 10 }, |
| 116 | + { |
| 117 | + filter, |
| 118 | + ...(deferredSearchStr |
| 119 | + ? { |
| 120 | + filter: { |
| 121 | + ...filter, |
| 122 | + name: { iContains: `%${deferredSearchStr}%` }, |
| 123 | + }, |
| 124 | + } |
| 125 | + : {}), |
| 126 | + }, |
| 127 | + { |
| 128 | + fetchKey, |
| 129 | + fetchPolicy: deferredOpen ? 'network-only' : 'store-only', |
| 130 | + }, |
| 131 | + { |
| 132 | + // getTotal: (result) => result.deployments?.count, |
| 133 | + getItem: (result) => result.deployments?.edges?.map((e) => e.node), |
| 134 | + getPageInfo: (result) => { |
| 135 | + const pageInfo = result.deployments?.pageInfo; |
| 136 | + return { |
| 137 | + hasNextPage: pageInfo?.hasNextPage ?? false, |
| 138 | + endCursor: pageInfo?.endCursor ?? undefined, |
| 139 | + }; |
| 140 | + }, |
| 141 | + getId: (item: Deployment) => item?.id, |
| 142 | + }, |
| 143 | + ); |
| 144 | + |
| 145 | + const selectOptions = _.map(paginationData, (item: Deployment) => { |
| 146 | + return { |
| 147 | + label: item?.metadata?.name, |
| 148 | + value: item?.id, |
| 149 | + deployment: item, |
| 150 | + }; |
| 151 | + }); |
| 152 | + |
| 153 | + const [optimisticValueWithLabel, setOptimisticValueWithLabel] = useState( |
| 154 | + selectedDeployment |
| 155 | + ? { |
| 156 | + label: selectedDeployment?.metadata?.name || undefined, |
| 157 | + value: selectedDeployment?.id || undefined, |
| 158 | + } |
| 159 | + : controllableValue |
| 160 | + ? { |
| 161 | + label: controllableValue, |
| 162 | + value: controllableValue, |
| 163 | + } |
| 164 | + : controllableValue, |
| 165 | + ); |
| 166 | + |
| 167 | + const isValueMatched = searchStr === deferredSearchStr; |
| 168 | + useEffect(() => { |
| 169 | + if (isValueMatched) { |
| 170 | + selectRef.current?.scrollTo(0); |
| 171 | + } |
| 172 | + }, [isValueMatched]); |
| 173 | + |
| 174 | + return ( |
| 175 | + <BAISelect |
| 176 | + ref={selectRef} |
| 177 | + placeholder={t('deployment.SelectDeployment')} |
| 178 | + style={{ minWidth: 100 }} |
| 179 | + showSearch |
| 180 | + searchValue={searchStr} |
| 181 | + onSearch={(v) => { |
| 182 | + setSearchStr(v); |
| 183 | + }} |
| 184 | + labelRender={({ label }: { label: React.ReactNode }) => { |
| 185 | + return label ? ( |
| 186 | + <BAIFlex gap="xxs"> |
| 187 | + {label} |
| 188 | + <Tooltip title={t('general.NavigateToDetailPage')}> |
| 189 | + <BAILink |
| 190 | + to={`/deployment/${toLocalId(selectedDeployment?.id || '')}`} |
| 191 | + > |
| 192 | + <InfoIcon /> |
| 193 | + </BAILink> |
| 194 | + </Tooltip> |
| 195 | + </BAIFlex> |
| 196 | + ) : ( |
| 197 | + label |
| 198 | + ); |
| 199 | + }} |
| 200 | + autoClearSearchValue |
| 201 | + filterOption={false} |
| 202 | + loading={searchStr !== deferredSearchStr || loading} |
| 203 | + options={selectOptions} |
| 204 | + {...selectPropsWithoutLoading} |
| 205 | + // override value and onChange |
| 206 | + labelInValue // use labelInValue to display the selected option label |
| 207 | + value={optimisticValueWithLabel} |
| 208 | + onChange={(v, option) => { |
| 209 | + setOptimisticValueWithLabel(v); |
| 210 | + setControllableValue(v.value, option); |
| 211 | + selectPropsWithoutLoading.onChange?.(v.value || '', option); |
| 212 | + }} |
| 213 | + endReached={() => { |
| 214 | + loadNext(); |
| 215 | + }} |
| 216 | + open={controllableOpen} |
| 217 | + onDropdownVisibleChange={setControllableOpen} |
| 218 | + notFoundContent={ |
| 219 | + _.isUndefined(paginationData) ? ( |
| 220 | + <Skeleton.Input active size="small" block /> |
| 221 | + ) : undefined |
| 222 | + } |
| 223 | + footer={ |
| 224 | + _.isNumber(deployments?.count) && deployments.count > 0 ? ( |
| 225 | + <TotalFooter loading={isLoadingNext} total={deployments?.count} /> |
| 226 | + ) : undefined |
| 227 | + } |
| 228 | + /> |
| 229 | + ); |
| 230 | +}; |
| 231 | + |
| 232 | +export default DeploymentSelect; |
0 commit comments