7.5.2. 동적 플러그인 API
useActivePerspective
현재 활성화된 화면과 활성 화면을 설정하기 위한 콜백을 제공하는 후크입니다. 현재 활성 화면 및 setter 콜백을 포함하는 튜플을 반환합니다.
예제
const Component: React.FC = (props) => {
const [activePerspective, setActivePerspective] = useActivePerspective();
return <select
value={activePerspective}
onChange={(e) => setActivePerspective(e.target.value)}
>
{
// ...perspective options
}
</select>
}
GreenCheckCircleIcon
녹색 체크 표시 원 아이콘을 표시하기 위한 구성 요소입니다.
예제
<GreenCheckCircleIcon title="Healthy" />
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 구성 요소의 추가 클래스 이름입니다. |
|
| (선택 사항) 아이콘 제목 |
|
|
(선택 사항) 아이콘 크기: ( |
RedExclamationCircleIcon
빨간색 느낌표 원 아이콘을 표시하는 구성 요소입니다.
예제
<RedExclamationCircleIcon title="Failed" />
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 구성 요소의 추가 클래스 이름입니다. |
|
| (선택 사항) 아이콘 제목 |
|
|
(선택 사항) 아이콘 크기: ( |
YellowExclamationTriangleIcon
노란색 구분 기호 아이콘을 표시하는 구성 요소입니다.
예제
<YellowExclamationTriangleIcon title="Warning" />
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 구성 요소의 추가 클래스 이름입니다. |
|
| (선택 사항) 아이콘 제목 |
|
|
(선택 사항) 아이콘 크기: ( |
BlueInfoCircleIcon
파란색 정보 원 아이콘을 표시하는 구성 요소입니다.
예제
<BlueInfoCircleIcon title="Info" />
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 구성 요소의 추가 클래스 이름입니다. |
|
| (선택 사항) 아이콘 제목 |
|
| (선택 사항) 아이콘 크기: ('sm', 'md', 'lg', 'xl') |
ErrorStatus
오류 상태 팝업을 표시하는 구성 요소입니다.
예제
<ErrorStatus title={errorMsg} />
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 상태 텍스트 |
|
| (선택 사항) true인 경우 아이콘만 표시합니다. |
|
| (선택 사항) true인 경우 툴팁이 표시되지 않습니다. |
|
| (선택 사항) 구성 요소의 추가 클래스 이름입니다. |
|
| (선택 사항) 팝업의 제목 |
InfoStatus
정보 상태 팝업을 표시하는 구성 요소입니다.
예제
<InfoStatus title={infoMsg} />
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 상태 텍스트 |
|
| (선택 사항) true인 경우 아이콘만 표시합니다. |
|
| (선택 사항) true인 경우 툴팁이 표시되지 않습니다. |
|
| (선택 사항) 구성 요소의 추가 클래스 이름입니다. |
|
| (선택 사항) 팝업의 제목 |
ProgressStatus
진행 상태 팝업을 표시하는 구성 요소입니다.
예제
<ProgressStatus title={progressMsg} />
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 상태 텍스트 |
|
| (선택 사항) true인 경우 아이콘만 표시합니다. |
|
| (선택 사항) true인 경우 툴팁이 표시되지 않습니다. |
|
| (선택 사항) 구성 요소의 추가 클래스 이름입니다. |
|
| (선택 사항) 팝업의 제목 |
successStatus
성공 상태 팝업을 표시하는 구성 요소입니다.
예제
<SuccessStatus title={successMsg} />
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 상태 텍스트 |
|
| (선택 사항) true인 경우 아이콘만 표시합니다. |
|
| (선택 사항) true인 경우 툴팁이 표시되지 않습니다. |
|
| (선택 사항) 구성 요소의 추가 클래스 이름입니다. |
|
| (선택 사항) 팝업의 제목 |
checkAccess
지정된 리소스에 대한 사용자 액세스에 대한 정보를 제공합니다. 리소스 액세스 정보를 사용하여 오브젝트를 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 액세스 검토를 위한 리소스 속성 |
|
| 명의 도용 세부 정보 |
useAccessReview
지정된 리소스에 대한 사용자 액세스 정보를 제공하는 후크입니다. isAllowed 및 loading 값을 사용하여 배열을 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 액세스 검토를 위한 리소스 속성 |
|
| 명의 도용 세부 정보 |
useResolvedExtensions
확인된 CodeRef 속성과 함께 콘솔 확장을 사용하기 위한 React 후크입니다. 이 후크는 useExtensions 후크로 동일한 인수를 수락하고 조정된 확장 인스턴스 목록을 반환하여 각 확장 기능 속성 내의 모든 코드 참조를 해결합니다.
처음에 후크는 빈 배열을 반환합니다. 해결이 완료되면 후크가 적용된 확장 목록을 반환하여 React 구성 요소가 다시 렌더링됩니다. 일치하는 확장 목록이 변경되면 확인이 다시 시작됩니다. 해결이 완료될 때까지 후크는 이전 결과를 계속 반환합니다.
후크의 결과 요소는 재렌더링을 통해 참조로 안정적으로 유지됩니다. 해결된 코드 참조가 포함된 조정된 확장 인스턴스 목록, 해결이 완료되었는지 여부를 나타내는 부울 플래그, 해결 중에 감지된 오류 목록이 포함된 튜플을 반환합니다.
예제
const [navItemExtensions, navItemsResolved] = useResolvedExtensions<NavItem>(isNavItem);
// process adapted extensions and render your component
| 매개변수 이름 | 설명 |
|---|---|
|
| 각각 동적 플러그인 확장을 인수로 수락하고 확장이 원하는 유형 제약 조건을 충족하는지 여부를 나타내는 부울 플래그를 반환하는 콜백 목록입니다. |
HorizontalNav
페이지에 대한 탐색 모음을 생성하는 구성 요소입니다. 라우팅은 구성 요소의 일부로 처리됩니다. console.tab/horizontalNav 를 사용하여 모든 수평 탐색에 콘텐츠를 추가할 수 있습니다.
예제
const HomePage: React.FC = (props) => {
const page = {
href: '/home',
name: 'Home',
component: () => <>Home</>
}
return <HorizontalNav match={props.match} pages={[page]} />
}
| 매개변수 이름 | 설명 |
|---|---|
|
| K8sResourceCommon 유형의 오브젝트인 이 Navigation과 연결된 리소스 |
|
| 페이지 오브젝트의 배열 |
|
| React Router에서 제공하는 일치 오브젝트 |
VirtualizedTable
가상화된 테이블을 만드는 구성 요소입니다.
예제
const MachineList: React.FC<MachineListProps> = (props) => {
return (
<VirtualizedTable<MachineKind>
{...props}
aria-label='Machines'
columns={getMachineColumns}
Row={getMachineTableRow}
/>
);
}
| 매개변수 이름 | 설명 |
|---|---|
|
| 데이터 표 |
|
| 데이터가 로드되었음을 나타내는 플래그 |
|
| 데이터 로드에 문제가 있는 경우 오류 개체 |
|
| 열 설정 |
|
| 행 설정 |
|
| 필터가 없는 원본 데이터 |
|
| (선택 사항) 데이터 빈 메시지 구성 요소가 없음 |
|
| (선택 사항) 빈 메시지 구성 요소 |
|
| (선택 사항) 스크롤을 처리하는 기능 |
|
| (선택 사항) 표의 라벨 |
|
| (선택 사항) aria 레이블 |
|
| 응답성을 위해 그리드를 분할하는 방법의 크기 조정 |
|
| (선택 사항) 표 선택 처리를 위한 기능 |
|
| (선택 사항) 행과 관련된 데이터 |
TableData
테이블 행 내에 테이블 데이터를 표시하는 구성 요소입니다.
예제
const PodRow: React.FC<RowProps<K8sResourceCommon>> = ({ obj, activeColumnIDs }) => {
return (
<>
<TableData id={columns[0].id} activeColumnIDs={activeColumnIDs}>
<ResourceLink kind="Pod" name={obj.metadata.name} namespace={obj.metadata.namespace} />
</TableData>
<TableData id={columns[1].id} activeColumnIDs={activeColumnIDs}>
<ResourceLink kind="Namespace" name={obj.metadata.namespace} />
</TableData>
</>
);
};
| 매개변수 이름 | 설명 |
|---|---|
|
| 테이블의 고유 ID |
|
| 활성 열 |
|
| (선택 사항) 스타일링의 옵션 클래스 이름입니다. |
useActiveColumns
사용자가 선택한 활성 TableColumns 목록을 제공하는 후크입니다.
예제
// See implementation for more details on TableColumn type
const [activeColumns, userSettingsLoaded] = useActiveColumns({
columns,
showNamespaceOverride: false,
columnManagementID,
});
return userSettingsAreLoaded ? <VirtualizedTable columns={activeColumns} {...otherProps} /> : null
| 매개변수 이름 | 설명 |
|---|---|
|
| 키-값 맵으로 전달되는 방법 |
|
| 사용 가능한 모든 TableColumns 배열 |
|
| (선택 사항) true인 경우 열 관리 선택에 관계없이 네임스페이스 열이 포함됩니다. |
|
| (선택 사항) 사용자 설정에 열 관리 선택을 유지하고 검색하는 데 사용되는 고유 ID입니다. 일반적으로 리소스의 GVK(그룹/버전/종류) 문자열입니다. |
현재 사용자가 선택한 활성 열( options.columns의 하위 집합)과 사용자 설정이 로드되었는지 여부를 나타내는 부울 플래그가 포함됩니다.
ListPageHeader
페이지 헤더를 생성하는 구성 요소입니다.
예제
const exampleList: React.FC = () => {
return (
<>
<ListPageHeader title="Example List Page"/>
</>
);
};
| 매개변수 이름 | 설명 |
|---|---|
|
| 제목 |
|
| (선택 사항) 반응 노드로서의 도움말 섹션 |
|
| (선택 사항) 반응 노드로 배지 아이콘 |
ListPageCreate
이 리소스의 YAML 생성에 대한 링크를 자동으로 생성하는 특정 리소스 종류에 대한 생성 버튼을 추가하는 구성 요소입니다.
예제
const exampleList: React.FC<MyProps> = () => {
return (
<>
<ListPageHeader title="Example Pod List Page"/>
<ListPageCreate groupVersionKind="Pod">Create Pod</ListPageCreate>
</ListPageHeader>
</>
);
};
| 매개변수 이름 | 설명 |
|---|---|
|
| 표시할 리소스 그룹/버전/종류 |
ListPageCreateLink
제대로된 링크를 만들기 위한 구성 요소입니다.
예제
const exampleList: React.FC<MyProps> = () => {
return (
<>
<ListPageHeader title="Example Pod List Page"/>
<ListPageCreateLink to={'/link/to/my/page'}>Create Item</ListPageCreateLink>
</ListPageHeader>
</>
);
};
| 매개변수 이름 | 설명 |
|---|---|
|
| 링크가 연결되어야 하는 문자열 위치 |
|
| (선택 사항) 액세스 확인에 사용되는 네임스페이스 및 종류가 있는 오브젝트 |
|
| (선택 사항) 구성 요소에 대한 하위 항목 |
ListPageCreateButton
버튼을 생성하는 구성 요소입니다.
예제
const exampleList: React.FC<MyProps> = () => {
return (
<>
<ListPageHeader title="Example Pod List Page"/>
<ListPageCreateButton createAccessReview={access}>Create Pod</ListPageCreateButton>
</ListPageHeader>
</>
);
};
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 액세스 확인에 사용되는 네임스페이스 및 종류가 있는 오브젝트 |
|
| (선택 사항) Patternfly 버튼 props |
ListPageCreateDropdown
권한 확인으로 래핑된 드롭다운을 생성하기 위한 구성 요소입니다.
예제
const exampleList: React.FC<MyProps> = () => {
const items = {
SAVE: 'Save',
DELETE: 'Delete',
}
return (
<>
<ListPageHeader title="Example Pod List Page"/>
<ListPageCreateDropdown createAccessReview={access} items={items}>Actions</ListPageCreateDropdown>
</ListPageHeader>
</>
);
};
| 매개변수 이름 | 설명 |
|---|---|
|
| 키:ReactNode 쌍의 드롭다운 구성 요소에 표시할 항목 |
|
| 드롭다운 항목을 클릭하기 위한 콜백 함수 |
|
| (선택 사항) 액세스 확인에 사용되는 네임스페이스 및 종류가 있는 오브젝트 |
|
| (선택 사항) 드롭다운 토글의 하위 항목 |
ListPageFilter
목록 페이지에 대한 필터를 생성하는 구성 요소입니다.
예제
// See implementation for more details on RowFilter and FilterValue types
const [staticData, filteredData, onFilterChange] = useListPageFilter(
data,
rowFilters,
staticFilters,
);
// ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
return (
<>
<ListPageHeader .../>
<ListPagBody>
<ListPageFilter data={staticData} onFilterChange={onFilterChange} />
<List data={filteredData} />
</ListPageBody>
</>
)
| 매개변수 이름 | 설명 |
|---|---|
|
| 데이터 지점의 배열 |
|
| 데이터가 로드되었음을 나타냅니다. |
|
| 필터가 업데이트될 때의 콜백 함수 |
|
| (선택 사항) 사용 가능한 필터 옵션을 정의하는 RowFilter 요소의 배열 |
|
| (선택 사항) 이름 필터의 자리 표시자 |
|
| (선택 사항) 라벨 필터의 자리 표시자 |
|
| (선택 사항) 이름 필터와 레이블 필터 대신 이름 필터만 표시합니다. |
|
| (선택 사항) 이름 필터와 레이블 필터를 모두 숨깁니다. |
|
| (선택 사항) 열 레이아웃 오브젝트 |
|
| (선택 사항) 열 관리를 숨기는 플래그 |
useListPageFilter
ListPageFilter 구성 요소의 필터 상태를 관리하는 후크입니다. 모든 정적 필터, 모든 정적 및 행 필터로 필터링된 데이터, rowFilter를 업데이트하는 콜백이 포함된 튜플을 반환합니다.
예제
// See implementation for more details on RowFilter and FilterValue types
const [staticData, filteredData, onFilterChange] = useListPageFilter(
data,
rowFilters,
staticFilters,
);
// ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
return (
<>
<ListPageHeader .../>
<ListPagBody>
<ListPageFilter data={staticData} onFilterChange={onFilterChange} />
<List data={filteredData} />
</ListPageBody>
</>
)
| 매개변수 이름 | 설명 |
|---|---|
|
| 데이터 지점의 배열 |
|
| (선택 사항) 사용 가능한 필터 옵션을 정의하는 RowFilter 요소의 배열 |
|
| (선택 사항) 데이터에 정적으로 적용되는 FilterValue 요소의 배열 |
ResourceLink
아이콘 배지와 함께 특정 리소스 유형에 대한 링크를 생성하는 구성 요소입니다.
예제
<ResourceLink
kind="Pod"
name="testPod"
title={metadata.uid}
/>
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 리소스 종류(예: Pod, 배포, 네임스페이스) |
|
| (선택 사항) 그룹, 버전 및 종류가 있는 오브젝트 |
|
| (선택 사항) 구성 요소에 대한 클래스 스타일 |
|
| (선택 사항) 구성 요소의 표시 이름, 설정된 경우 리소스 이름을 덮어씁니다. |
|
| (선택 사항) 어린이와 함께 아이콘 배지 및 이름을 인라인으로 생성하는 플래그 |
|
| (선택 사항) Link 오브젝트를 생성하는 플래그 - 기본값은 true입니다. |
|
| (선택 사항) 리소스 이름 |
|
| (선택 사항) kind 리소스가 연결할 특정 네임스페이스 |
|
| (선택 사항) 아이콘 배지를 숨기는 플래그 |
|
| (선택 사항) 링크 오브젝트의 제목(표시되지 않음) |
|
| (선택 사항) 테스트를 위한 식별자 |
|
| (선택 사항) 구성 요소를 클릭할 때의 콜백 함수 |
|
| (선택 사항) 너무 긴 경우 링크를 자르기 위한 플래그 |
ResourceIcon
특정 리소스 유형에 대한 아이콘 배지를 생성하는 구성 요소입니다.
예제
<ResourceIcon kind="Pod"/>
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 리소스 종류(예: Pod, 배포, 네임스페이스) |
|
| (선택 사항) 그룹, 버전 및 종류가 있는 오브젝트 |
|
| (선택 사항) 구성 요소에 대한 클래스 스타일 |
useK8sModel
redux에서 제공된 K8sGroupVersionKind의 k8s 모델을 검색하는 후크입니다. 첫 번째 항목이 k8s 모델인 배열을 반환하고 두 번째 항목이 inFlight 상태로 반환합니다.
예제
const Component: React.FC = () => {
const [model, inFlight] = useK8sModel({ group: 'app'; version: 'v1'; kind: 'Deployment' });
return ...
}
| 매개변수 이름 | 설명 |
|---|---|
|
| k8s 리소스 K8sGroupVersionKind 그룹, k8sGroupVersionKind 대신 더 이상 사용되지 않는 그룹, 버전, 즉 GVK(그룹/버전/종류) K8sResourceKindReference에 대한 참조를 전달할 수 있습니다. |
useK8sModels
redux에서 모든 현재 k8s 모델을 검색하는 후크입니다. 첫 번째 항목이 k8s 모델 목록과 두 번째 항목이 있는 배열을 inFlight 상태로 반환합니다.
예제
const Component: React.FC = () => {
const [models, inFlight] = UseK8sModels();
return ...
}
useK8sWatchResource
로드 및 오류 상태와 함께 k8s 리소스를 검색하는 후크 첫 번째 항목이 리소스이고, 두 번째 항목이 로드된 상태이고, 세 번째 항목이 오류 상태인 배열을 반환합니다.
예제
const Component: React.FC = () => {
const watchRes = {
...
}
const [data, loaded, error] = useK8sWatchResource(watchRes)
return ...
}
| 매개변수 이름 | 설명 |
|---|---|
|
| 리소스를 확인하는 데 필요한 옵션. |
useK8sWatchResources
로드 및 오류의 각 상태와 함께 k8s 리소스를 검색하는 후크 initResources에 제공된 대로 키가 있고 값이 로드 및 오류의 세 가지 속성 데이터를 가지는 맵을 반환합니다.
예제
const Component: React.FC = () => {
const watchResources = {
'deployment': {...},
'pod': {...}
...
}
const {deployment, pod} = useK8sWatchResources(watchResources)
return ...
}
| 매개변수 이름 | 설명 |
|---|---|
|
| 리소스를 키-값 쌍으로 모니터링해야 하며, 키는 리소스 고유의 고유한 것이고 가치는 각 리소스를 모니터링하는 데 필요한 옵션입니다. |
consoleFetch
콘솔 특정 헤더를 추가하고 재시도 및 타임아웃을 허용하는 fetch 에 대한 사용자 정의 래퍼를 사용하여 응답 상태 코드의 유효성을 검사하고 필요한 경우 적절한 오류를 발생시키거나 사용자를 로그아웃합니다. 응답에 해결되는 작업을 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 가져올 URL |
|
| 가져오기를 위해 전달할 옵션 |
|
| 시간 초과(밀리초) |
consoleFetchJSON
콘솔 특정 헤더를 추가하고 재시도 및 타임아웃을 허용하는 fetch 관련 사용자 정의 래퍼입니다. 또한 응답 상태 코드의 유효성을 검사하고 적절한 오류가 발생하거나 필요한 경우 사용자를 기록합니다. 응답을 JSON 오브젝트로 반환합니다. 내부적으로 consoleFetch 를 사용합니다. 응답에서 JSON 오브젝트로 확인되는 작업을 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 가져올 URL |
|
| 사용할 HTTP 메서드입니다. 기본값은 GET입니다. |
|
| 가져오기를 위해 전달할 옵션 |
|
| 시간 초과(밀리초) |
|
| 요청할 클러스터의 이름입니다. 기본값은 사용자가 선택한 활성 클러스터입니다. |
consoleFetchText
콘솔 특정 헤더를 추가하고 재시도 및 타임아웃을 허용하는 fetch 관련 사용자 정의 래퍼입니다. 또한 응답 상태 코드의 유효성을 검사하고 적절한 오류가 발생하거나 필요한 경우 사용자를 기록합니다. 응답을 텍스트로 반환합니다. 내부적으로 consoleFetch 를 사용합니다. 응답에 텍스트로 해결되는 작업을 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 가져올 URL |
|
| 가져오기를 위해 전달할 옵션 |
|
| 시간 초과(밀리초) |
|
| 요청할 클러스터의 이름입니다. 기본값은 사용자가 선택한 활성 클러스터입니다. |
getConsoleRequestHeaders
현재 redux 상태를 사용하여 API 요청에 대해 가장 및 다중 클러스터 관련 헤더를 생성하는 함수입니다. redux 상태를 기준으로 적절한 가장 및 클러스터 요청 헤더가 포함된 개체를 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 제공된 targetCluster를 사용하여 현재 활성 클러스터 덮어쓰기 |
k8sGetResource
제공된 옵션에 따라 클러스터에서 리소스를 가져옵니다. 이름이 제공되면 하나의 리소스를 반환하고 다른 리소스는 모델과 일치하는 모든 리소스를 반환합니다. 이 명령은 이름이 모델에 일치하는 모든 리소스를 반환하는 경우 리소스가 포함된 JSON 오브젝트로 응답을 확인하는 것을 반환합니다. 실패하는 경우 HTTP 오류 응답을 사용하여 스키마가 거부됩니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 맵에서 키-값 쌍으로 전달되는 경우 |
|
| k8s 모델 |
|
| 리소스 이름이 제공되지 않으면 모델과 일치하는 모든 리소스를 찾습니다. |
|
| 조사할 네임스페이스는 클러스터 범위 리소스에 지정되어서는 안 됩니다. |
|
| 제공되는 경우 하위 경로로 첨부 |
|
| URL에 포함될 쿼리 매개변수입니다. |
|
| 사용할 fetch init 오브젝트입니다. 여기에는 요청 헤더, 메서드, 리디렉션 등이 있을 수 있습니다. 자세한 내용은 Interface RequestInit 에서 참조하십시오. |
k8sCreateResource
제공된 옵션에 따라 클러스터에 리소스를 생성합니다. 생성된 리소스의 응답으로 확인되는 커밋을 반환합니다. 실패의 경우 HTTP 오류 응답을 사용하여 거부됩니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 맵에서 키-값 쌍으로 전달되는 경우 |
|
| k8s 모델 |
|
| 생성할 리소스의 페이로드 |
|
| 제공되는 경우 하위 경로로 첨부 |
|
| URL에 포함될 쿼리 매개변수입니다. |
k8sUpdateResource
providedoptions를 기반으로 클러스터의 전체 리소스를 업데이트합니다. 클라이언트가 기존 리소스를 완전히 교체해야 하는 경우 k8sUpdate를 사용할 수 있습니다. 또는 k8sPatch를 사용하여 부분 업데이트를 수행할 수 있습니다. 업데이트된 리소스의 응답으로 확인되는 커밋을 반환합니다. 실패의 경우 HTTP 오류 응답을 사용하여 거부됩니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 맵에서 키-값 쌍으로 전달되는 경우 |
|
| k8s 모델 |
|
| 업데이트할 k8s 리소스의 페이로드 |
|
| 조사할 네임스페이스는 클러스터 범위 리소스에 지정하지 않아야 합니다. |
|
| 업데이트할 리소스 이름입니다. |
|
| 제공되는 경우 하위 경로로 첨부 |
|
| URL에 포함될 쿼리 매개변수입니다. |
k8sPatchResource
제공된 옵션에 따라 클러스터의 모든 리소스를 패치합니다. 클라이언트가 부분 업데이트를 수행해야 하는 경우 k8sPatch를 사용할 수 있습니다. 또는 k8sUpdate를 사용하여 기존 리소스를 완전히 교체할 수 있습니다. 자세한 내용은 데이터 추적기 를 참조하십시오. 패치된 리소스의 응답으로 확인되는 커밋을 반환합니다. 실패의 경우 HTTP 오류 응답을 사용하여 거부됩니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 맵에서 키-값 쌍으로 전달됩니다. |
|
| k8s 모델 |
|
| 패치할 리소스입니다. |
|
| 작업, 경로 및 값을 사용하여 기존 리소스에 패치할 데이터만 적용합니다. |
|
| 제공되는 경우 하위 경로로 추가합니다. |
|
| URL에 포함될 쿼리 매개변수입니다. |
k8sDeleteResource
제공된 모델을 기반으로 클러스터에서 리소스를 삭제합니다. 가비지 컬렉션 작업은 Foreground|Background가 제공된 모델에서 propagationPolicy 속성을 사용하거나 json으로 전달할 수 있습니다. 상태 유형의 응답으로 확인되는 작업을 반환합니다. 실패의 경우 HTTP 오류 응답을 사용하여 거부됩니다.
예제
kind: 'DeleteOptions', apiVersion: 'v1', propagationPolicy
| 매개변수 이름 | 설명 |
|---|---|
|
| 맵에서 키-값 쌍으로 전달되는 항목입니다. |
|
| k8s 모델 |
|
| 삭제할 리소스입니다. |
|
| 제공되는 경우 하위 경로로 첨부 |
|
| URL에 포함될 쿼리 매개변수입니다. |
|
| 사용할 fetch init 오브젝트입니다. 여기에는 요청 헤더, 메서드, 리디렉션 등이 있을 수 있습니다. 자세한 내용은 Interface RequestInit 에서 참조하십시오. |
|
| 제공된 경우 리소스의 가비지 컬렉션을 명시적으로 제어하면 모델의 "propagationPolicy"가 기본값으로 설정됩니다. |
k8sListResource
제공된 옵션에 따라 리소스를 클러스터의 배열로 나열합니다. 응답에 해결되는 작업을 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 맵에서 키-값 쌍으로 전달되는 경우 |
|
| k8s 모델 |
|
| 쿼리 매개변수는 URL에 포함될 수 있으며 레이블 선택기의 키 "labelSelector"도 함께 전달할 수 있습니다. |
|
| 사용할 fetch init 오브젝트입니다. 여기에는 요청 헤더, 메서드, 리디렉션 등이 있을 수 있습니다. 자세한 내용은 Interface RequestInit 에서 참조하십시오. |
k8sListResourceItems
k8sListResource와 동일한 인터페이스이지만 하위 항목을 반환합니다. 모델의 apiVersion, 즉 group/version 을 반환합니다.
getAPIVersionForModel
k8s 모델에 apiVersion을 제공합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| k8s 모델 |
getGroupVersionKindForResource
리소스에 대한 그룹, 버전 및 종류를 제공합니다. 제공된 리소스에 대한 그룹, 버전, 종류를 반환합니다. 리소스에 API 그룹이 없으면 그룹 "core"가 반환됩니다. 리소스에 잘못된 apiVersion이 있으면 오류가 발생합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| k8s 리소스 |
getGroupVersionKindForModel
k8s 모델의 그룹, 버전 및 종류를 제공합니다. 제공된 모델의 그룹, 버전, 종류를 반환합니다. 모델에 apiGroup이 없는 경우 그룹 "core"가 반환됩니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| k8s 모델 |
StatusPopupSection
팝업 창에 상태를 표시하는 구성 요소입니다. console.dashboards/overview/health/resource 확장을 빌드하는 데 유용한 구성 요소입니다.
예제
<StatusPopupSection
firstColumn={
<>
<span>{title}</span>
<span className="text-secondary">
My Example Item
</span>
</>
}
secondColumn='Status'
>
| 매개변수 이름 | 설명 |
|---|---|
|
| 팝업의 첫 번째 열 값 |
|
| (선택 사항) 팝업의 두 번째 열에 대한 값 |
|
| (선택 사항) 팝업에 대한 하위 항목 |
StatusPopupItem
상태 팝업에 사용되는 상태 요소; StatusPopupSection 에서 사용됩니다.
예제
<StatusPopupSection
firstColumn='Example'
secondColumn='Status'
>
<StatusPopupItem icon={healthStateMapping[MCGMetrics.state]?.icon}>
Complete
</StatusPopupItem>
<StatusPopupItem icon={healthStateMapping[RGWMetrics.state]?.icon}>
Pending
</StatusPopupItem>
</StatusPopupSection>
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 표시할 텍스트 값 |
|
| (선택 사항) 표시할 아이콘 |
|
| 하위 요소 |
개요
대시보드에 대한 래퍼 구성 요소를 생성합니다.
예제
<Overview>
<OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
</Overview>
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) div의 스타일 클래스 |
|
| (선택 사항) 대시보드의 요소 |
OverviewGrid
대시보드의 카드 요소의 Grid를 만들고 Overview 내에서 사용됩니다.
예제
<Overview>
<OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
</Overview>
| 매개변수 이름 | 설명 |
|---|---|
|
| Grid 카드 |
|
| (선택 사항) Grid 왼쪽의 카드 |
|
| (선택 사항) Grid 오른쪽의 카드 |
InventoryItem
인벤토리 카드 항목을 생성합니다.
예제
return (
<InventoryItem>
<InventoryItemTitle>{title}</InventoryItemTitle>
<InventoryItemBody error={loadError}>
{loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
</InventoryItemBody>
</InventoryItem>
)
| 매개변수 이름 | 설명 |
|---|---|
|
| 항목 내부를 렌더링하는 요소 |
InventoryItemTitle
InventoryItem 내에서 사용되는 인벤토리 카드 항목에 대한 제목을 생성합니다.
예제
return (
<InventoryItem>
<InventoryItemTitle>{title}</InventoryItemTitle>
<InventoryItemBody error={loadError}>
{loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
</InventoryItemBody>
</InventoryItem>
)
| 매개변수 이름 | 설명 |
|---|---|
|
| 제목 내에서 렌더링할 요소 |
InventoryItemBody
인벤토리 카드의 본문을 생성합니다. InventoryCard 내에서 사용되며 InventoryTitle 과 함께 사용할 수 있습니다.
예제
return (
<InventoryItem>
<InventoryItemTitle>{title}</InventoryItemTitle>
<InventoryItemBody error={loadError}>
{loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
</InventoryItemBody>
</InventoryItem>
)
| 매개변수 이름 | 설명 |
|---|---|
|
| 인벤토리 카드 또는 제목 내에서 렌더링되는 요소 |
|
| div의 요소 |
InventoryItemStatus
InventoryItemBody에서 사용되는 선택적 링크 주소를 사용하여 인벤토리 카드의 개수 및 아이콘을 생성합니다.
예제
return (
<InventoryItem>
<InventoryItemTitle>{title}</InventoryItemTitle>
<InventoryItemBody error={loadError}>
{loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
</InventoryItemBody>
</InventoryItem>
)
| 매개변수 이름 | 설명 |
|---|---|
|
| 디스플레이 수 |
|
| 디스플레이 아이콘 |
|
| (선택 사항) 링크 주소 |
InventoryItemLoading
인벤토리 카드가 로드될 때; InventoryItem 및 관련 구성 요소와 함께 사용됩니다.
예제
if (loadError) {
title = <Link to={workerNodesLink}>{t('Worker Nodes')}</Link>;
} else if (!loaded) {
title = <><InventoryItemLoading /><Link to={workerNodesLink}>{t('Worker Nodes')}</Link></>;
}
return (
<InventoryItem>
<InventoryItemTitle>{title}</InventoryItemTitle>
</InventoryItem>
)
useFlag
FlexVolumeAGS redux 상태에서 지정된 기능 플래그를 반환하는 후크입니다. 요청된 기능 플래그 또는 정의되지 않은 부울 값을 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 반환할 기능 플래그 |
CodeEditor
마우스로 도움말 및 완료가 포함된 기본 지연 로드 코드 편집기입니다.
예제
<React.Suspense fallback={<LoadingBox />}>
<CodeEditor
value={code}
language="yaml"
/>
</React.Suspense>
| 매개변수 이름 | 설명 |
|---|---|
|
| 렌더링할 yaml 코드를 나타내는 문자열입니다. |
|
| 편집기의 언어를 나타내는 문자열입니다. |
|
| Monaco 편집기 옵션입니다. 자세한 내용은 Interface IStandAloneEditorConstructionOptions 를 참조하십시오. |
|
| 유효한 CSS 별점 값의 최소 편집기 높이입니다. |
|
| 편집기 상단에 바로 가기를 표시하는 부울입니다. |
|
| 편집기 상단에 있는 툴바 링크 섹션에서 렌더링된 ReactNode 배열입니다. |
|
| 콜백은 코드 변경 이벤트입니다. |
|
| CTRL / CMD + S 명령이 트리거될 때 호출되는 콜백입니다. |
|
|
|
ResourceYAMLEditor
커서 도움말 및 완료를 사용하여 Kubernetes 리소스에 대한 지연 로드 YAML 편집기입니다. 구성 요소에서는 YAMLEditor를 사용하고 리소스 업데이트 처리, 경고, 저장, 취소 및 다시 로드, 액세스 가능 등과 같은 기능을 더 많이 사용합니다. onSave 콜백이 제공되지 않는 한 리소스 업데이트가 자동으로 처리됩니다. React.Suspense 구성 요소에서 래핑해야 합니다.
예제
<React.Suspense fallback={<LoadingBox />}>
<ResourceYAMLEditor
initialResource={resource}
header="Create resource"
onSave={(content) => updateResource(content)}
/>
</React.Suspense>
| 매개변수 이름 | 설명 |
|---|---|
|
| 편집기에서 표시할 리소스를 나타내는 YAML/Object입니다. 이 prop은 초기 렌더링 중에만 사용됩니다. |
|
| YAML 편집기 상단에 헤더 추가 |
|
| 저장 버튼의 콜백입니다. 이를 전달하면 편집기에서 리소스에서 수행된 기본 업데이트가 재정의됩니다. |
ResourceEventStream
특정 리소스와 관련된 이벤트를 표시하는 구성 요소입니다.
예제
const [resource, loaded, loadError] = useK8sWatchResource(clusterResource);
return <ResourceEventStream resource={resource} />
| 매개변수 이름 | 설명 |
|---|---|
|
| 관련 이벤트가 표시되어야 하는 오브젝트입니다. |
usePrometheusPoll
단일 쿼리를 위해 Prometheus에 대한 폴링을 설정합니다. 쿼리 응답을 포함하는 튜플, 응답이 완료되었는지 여부를 나타내는 부울 플래그, 요청 또는 요청 후 처리 중에 발생한 모든 오류를 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| PrometheusEndpoint 중 하나(레이블, 쿼리, 범위, 규칙, 대상) |
|
| (선택 사항) Prometheus 쿼리 문자열 비어 있거나 정의되지 않은 경우 폴링이 시작되지 않습니다. |
|
| (선택 사항) 폴링 지연 간격 (ms) |
|
| (선택 사항) QUERY_RANGE enpoint의 경우 쿼리 범위 끝 |
|
| (선택 사항) QUERY_RANGE 엔드포인트 |
|
| (선택 사항) QUERY_RANGE 엔드포인트 |
|
| (선택 사항) 추가할 검색 매개 변수 |
|
| (선택 사항) 추가할 검색 매개 변수 |
Timestamp
타임스탬프를 렌더링하는 구성 요소입니다. 타임스탬프는 Timestamp 구성 요소의 제공 인스턴스 간에 동기화됩니다. 제공된 타임스탬프는 사용자 로케일에 따라 포맷됩니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 렌더링할 타임 스탬프입니다. 형식은 ISO 8601(Kubernetes에서 사용), epoch 타임스탬프 또는 날짜 인스턴스여야 합니다. |
|
| 구성 요소의 간단한 버전을 생략하고 아이콘 및 툴팁을 렌더링합니다. |
|
| 접미사를 저장하는 날짜를 포맷합니다. |
|
| 구성 요소에 대한 추가 클래스 이름입니다. |
useModal
Modals를 시작하기 위한 후크입니다.
예제
const context: AppPage: React.FC = () => {<br/> const [launchModal] = useModal();<br/> const onClick = () => launchModal(ModalComponent);<br/> return (<br/> <Button onClick={onClick}>Launch a Modal</Button><br/> )<br/>}<br/>`
ActionServiceProvider
console.action/provider 확장 유형에 대한 다른 플러그인에서 기여를 받을 수 있는 구성 요소입니다.
예제
const context: ActionContext = { 'a-context-id': { dataFromDynamicPlugin } };
...
<ActionServiceProvider context={context}>
{({ actions, options, loaded }) =>
loaded && (
<ActionMenu actions={actions} options={options} variant={ActionMenuVariant.DROPDOWN} />
)
}
</ActionServiceProvider>
| 매개변수 이름 | 설명 |
|---|---|
|
| contextId 및 선택적 플러그인 데이터가 있는 오브젝트 |
NamespaceECDHE
왼쪽 위치에 네임스페이스 드롭다운 메뉴를 사용하여 수평 툴바를 렌더링하는 구성 요소입니다. 추가 구성 요소는 하위 항목으로 전달될 수 있으며 네임스페이스 드롭다운의 오른쪽으로 렌더링됩니다. 이 구성 요소는 페이지 상단에서 사용하도록 설계되었습니다. k8s 리소스가 있는 페이지의 경우와 같이 사용자가 활성 네임스페이스를 변경할 수 있어야 하는 페이지에서 사용해야 합니다.
예제
const logNamespaceChange = (namespace) => console.log(`New namespace: ${namespace}`);
...
<NamespaceBar onNamespaceChange={logNamespaceChange}>
<NamespaceBarApplicationSelector />
</NamespaceBar>
<Page>
...
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) 네임스페이스 옵션을 선택할 때 실행되는 함수입니다. 새 네임스페이스를 유일한 인수로 문자열 형식으로 허용합니다. 활성 네임스페이스는 옵션이 선택될 때 자동으로 업데이트되지만 이 기능을 통해 추가 논리를 적용할 수 있습니다. 네임스페이스가 변경되면 URL의 namespace 매개변수가 이전 네임스페이스에서 새로 선택된 네임스페이스로 변경됩니다. |
|
| (선택 사항) true로 설정된 경우 네임스페이스 드롭다운을 비활성화하는 부울 플래그입니다. 이 옵션은 네임스페이스 드롭다운에만 적용되며 하위 구성 요소에는 영향을 미치지 않습니다. |
|
| (선택 사항) 도구 모음 내부에서 네임스페이스 드롭다운 오른쪽에 렌더링할 추가 요소를 추가합니다. |
ErrorBoundaryFallbackPage
"Oh no!를 표시하려면 전체 페이지 ErrorBoundaryFallbackPage 구성 요소를 만듭니다. 스택 추적 및 기타 유용한 디버깅 정보와 함께 메시지가 잘못되었습니다. 이는 구성 요소와 함께 Inconjunction에 사용됩니다.
예제
//in ErrorBoundary component
return (
if (this.state.hasError) {
return <ErrorBoundaryFallbackPage errorMessage={errorString} componentStack={componentStackString}
stack={stackTraceString} title={errorString}/>;
}
return this.props.children;
)
| 매개변수 이름 | 설명 |
|---|---|
|
| 오류 메시지에 대한 텍스트 설명 |
|
| 예외의 구성 요소 추적 |
|
| 예외 스택 추적 |
|
| 오류 경계 페이지의 헤더로 렌더링할 제목 |
QueryBrowser
그래프와 상호 작용하기 위한 컨트롤과 함께 Prometheus PromQL 쿼리의 결과 그래프를 렌더링하는 구성 요소입니다.
예제
<QueryBrowser
defaultTimespan={15 * 60 * 1000}
namespace={namespace}
pollInterval={30 * 1000}
queries={[
'process_resident_memory_bytes{job="console"}',
'sum(irate(container_network_receive_bytes_total[6h:5m])) by (pod)',
]}
/>
| 매개변수 이름 | 설명 |
|---|---|
|
| (선택 사항) PromQL 쿼리를 처리하는 API 끝점의 기본 URL입니다. 제공되는 경우 기본 API 대신 데이터를 가져오는 데 사용됩니다. |
|
| (선택 사항) 각 데이터 시리즈에 대해 표시된 기본 데이터 샘플 수입니다. 데이터 시리즈가 많은 경우 QueryBrowser는 여기에 지정된 것보다 낮은 수의 데이터 샘플을 자동으로 선택할 수 있습니다. |
|
| (선택 사항) 그래프의 기본 시간(밀리초)입니다. 기본값은 1,800,000(30분)입니다. |
|
| (선택 사항) 이러한 정확한 레이블 / 값 쌍으로 데이터 시리즈를 비활성화(표시하지 않음)합니다. |
|
| (선택 사항) 그래프 확대 컨트롤을 비활성화하는 플래그입니다. |
|
| (선택 사항) 필요한 경우 반환된 데이터 시리즈를 이러한 라벨 / 값 쌍과 일치하는 것으로 필터링합니다. |
|
| (선택 사항) 데이터를 현재 시간으로 표시하는 대신 표시된 시간 범위의 종료 시간을 설정합니다. |
|
| (선택 사항) 단일 데이터 시리즈의 제목으로 사용할 문자열을 반환합니다. |
|
| (선택 사항) 다른 페이지에 대한 링크를 렌더링하는 구성 요소(예: 이 쿼리에 대한 자세한 정보 가져오기) |
|
| (선택 사항) 그래프 시간 간격을 변경하기 위한 그래프 컨트롤을 숨기는 플래그 등입니다. |
|
| (선택 사항) 선 그래프 대신 누적 그래프를 표시하는 플래그입니다. showStackedControl이 설정된 경우에도 사용자가 행 그래프로 전환할 수 있습니다. |
|
| (선택 사항) 제공되는 경우 이 네임스페이스에 대해서만 데이터가 반환됩니다(이 네임스페이스 레이블이 있는 시리즈만). |
|
| (선택 사항) 그래프를 확대할 때 호출되는 콜백입니다. |
|
| (선택 사항) 설정하는 경우 최신 데이터(밀리초)를 표시하도록 그래프가 업데이트되는 빈도를 결정합니다. |
|
| 그래프에 결과를 실행하고 표시하는 PromQL 쿼리의 배열입니다. |
|
| (선택 사항) 그래프 아래에 범례를 표시할 수 있는 플래그입니다. |
|
| 누적 그래프 모드와 선 그래프 모드 간 전환을 위한 그래프 컨트롤을 표시할 수 있는 플래그입니다. |
|
| (선택 사항) 그래프에서 밀리초 단위로 처리해야 하는 시간 간격입니다. |
|
| (선택 사항) Y축 및 툴팁에 표시할 단위입니다. |
useAnnotationsModal
Kubernetes 리소스 주석 편집을 위한 모달을 시작하는 콜백을 제공하는 후크입니다.
예제
const PodAnnotationsButton = ({ pod }) => {
const { t } = useTranslation();
const launchAnnotationsModal = useAnnotationsModal<PodKind>(pod);
return <button onClick={launchAnnotationsModal}>{t('Edit Pod Annotations')}</button>
}
| 매개변수 이름 | 설명 |
|---|---|
|
| K8sResourceCommon 유형의 오브젝트에 대한 주석을 편집할 리소스입니다. |
반환
리소스의 주석 편집을 위한 모달을 시작하는 함수입니다.
useDeleteModal
리소스 삭제를 위한 모달을 시작하는 콜백을 제공하는 후크입니다.
예제
const DeletePodButton = ({ pod }) => {
const { t } = useTranslation();
const launchDeleteModal = useDeleteModal<PodKind>(pod);
return <button onClick={launchDeleteModal}>{t('Delete Pod')}</button>
}
| 매개변수 이름 | 설명 |
|---|---|
|
| 삭제할 리소스입니다. |
|
| (선택 사항) 리소스를 삭제한 후 리디렉션할 위치입니다. |
|
| (선택 사항) 모달에 표시할 메시지입니다. |
|
| (선택 사항) 삭제 버튼에 표시할 텍스트입니다. |
|
| (선택 사항) 동일한 종류의 모든 리소스를 삭제하는 함수입니다. |
반환
리소스 삭제를 위한 모달을 시작하는 함수입니다.
useLabelsModel
Kubernetes 리소스 레이블 편집을 위한 모달을 시작하는 콜백을 제공하는 후크입니다.
예제
const PodLabelsButton = ({ pod }) => {
const { t } = useTranslation();
const launchLabelsModal = useLabelsModal<PodKind>(pod);
return <button onClick={launchLabelsModal}>{t('Edit Pod Labels')}</button>
}
| 매개변수 이름 | 설명 |
|---|---|
|
| K8sResourceCommon 유형의 오브젝트인 레이블을 편집할 리소스입니다. |
반환
리소스의 레이블 편집을 위한 모달을 시작하는 함수입니다.
useActiveNamespace
활성 네임스페이스를 설정하기 위한 현재 활성 네임스페이스 및 콜백을 제공하는 후크입니다.
예제
const Component: React.FC = (props) => {
const [activeNamespace, setActiveNamespace] = useActiveNamespace();
return <select
value={activeNamespace}
onChange={(e) => setActiveNamespace(e.target.value)}
>
{
// ...namespace options
}
</select>
}
반환
현재 활성 네임스페이스 및 설정자 콜백을 포함하는 튜플입니다.
PerspectiveContext
더 이상 사용되지 않음: 제공된 usePerspectiveContext 를 대신 사용합니다. 화면 컨텍스트를 생성합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 활성 화면 및 설정자가 있는 오브젝트 |
useAccessReviewAllowed
더 이상 사용되지 않음: 대신 @console/dynamic-plugin-sdk 에서 useAccessReview 를 사용합니다. 지정된 리소스에 대한 사용자 액세스 권한을 허용하는 후크입니다. isAllowed 부울 값을 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 액세스 검토를 위한 리소스 속성 |
|
| 명의 도용 세부 정보 |
useSafetyFirst
더 이상 사용되지 않음: 이 후크는 콘솔 기능과 관련이 없습니다. 지정된 구성 요소를 마운트 해제할 수 있는 경우 React 상태의 안전한 비동기식 설정을 보장하는 후크입니다. 상태 값과 집합 함수의 쌍을 포함하는 배열을 반환합니다.
| 매개변수 이름 | 설명 |
|---|---|
|
| 초기 상태 값 |
YAMLEditor
더 이상 사용되지 않음: 마우스 가리키기 및 완료가 포함된 기본 지연 로드된 YAML 편집기입니다.
예제
<React.Suspense fallback={<LoadingBox />}>
<YAMLEditor
value={code}
/>
</React.Suspense>
| 매개변수 이름 | 설명 |
|---|---|
|
| 렌더링할 yaml 코드를 나타내는 문자열입니다. |
|
| Monaco 편집기 옵션입니다. |
|
| 유효한 CSS 별점 값의 최소 편집기 높이입니다. |
|
| 편집기 상단에 바로 가기를 표시하는 부울입니다. |
|
| 편집기 상단에 있는 툴바 링크 섹션에서 렌더링된 ReactNode 배열입니다. |
|
| 콜백은 코드 변경 이벤트입니다. |
|
| CTRL / CMD + S 명령이 트리거될 때 호출되는 콜백입니다. |
|
|
|