본문 바로가기
WIKI 기술 지식 베이스

플러그인을 Software Catalog에 통합

원문 보기 위키 갱신

레거시 문서

출처: 문서

본문

레거시 문서

이 섹션은 레거시 플러그인 문서의 일부예요. 이 페이지의 코드 예시와 지침은 이전 프론트엔드 시스템에 대한 것이지만, 여기 설명된 개념은 새 프론트엔드 시스템에도 적용돼요.

이 문서는 카드 추가와 더 깊은 통합, 두 가지 방법으로 플러그인을 Software Catalog에 통합하는 방법을 설명합니다. 카드는 엔티티 개요 페이지 오른쪽에 카드로 표시될 수 있고, 전체 플러그인은 엔티티 개요 페이지에 탭으로 추가될 수 있어요.

카드 추가

예시

PagerDuty 플러그인은 카드 기반 통합을 사용하는 플러그인의 예시예요. EntityPage에 추가된 카드는 이렇게 보일 수 있어요.

이 카드는 포함된 서비스에 대한 릴레이션 통합 정보를 표시해요. EntityCard와 비슷한 카드 일반 컴포넌트보다는, PagerDutyCard 같은 특정 카드 이름을 사용하세요.

카드 만들기

카드 컴포넌트를 엔티티 개요 페이지에 추가하려면:

  1. 백엔드 플러그인에서 사용할 API에 대한 인터페이스를 정의하세요. 예시:
export interface CartProviderApi {    getCart(): Promise<Cart>}
  1. 카드 컴포넌트를 만들고 위 API를 구현으로 사용하세요.
const CartCard = () => { const api = useApi(cartProviderApiRef); const [cart, setCart] = useState<Cart | null>(null); api.getCart().then(cart => setCart(cart)); return <CartView cart={cart} />;};
  1. 플러그인이 백엔드 시스템을 사용하지 않는다면(예: 별도의 백엔드) API 구현을 만드세요. 구현은 ApiFactory로 노출되어야 하므로 다른 플러그인이나 앱이 사용할 수 있어요. 자체 카드 앱에서 구현을 사용하기 위해 createApiFactory를 사용해 API를 만들 수 있어요.
export const cartProviderApiRef = createApiRef<CartProviderApi>({  id: 'plugin.cart.service',});export const cartApiFactory = createApiFactory({  api: cartProviderApiRef,  deps: {},  factory: () => new CartProvider(),});

카드 유형

표시할 카드는 세 가지 유형이 있어요.

  • Entity Overview Card - 엔티티 개요 탭에 표시.
  • Entity Summary Card - 엔티티 헤더 오른쪽에 표시.

Entity Overview Card

Entity Overview 카드는 context.children으로 전달된 컴포넌트가 렌더링되는 엔티티 개요 탭에 표시돼요. EntityLayout.Route 경로에 추가하세요.

<EntityLayout.Route path="/" title="Overview">  <Grid container spacing={3} alignItems="stretch">    ...    {isCartAvailable && (      <Grid item md={6} xs={12}>        <CartCard />      </Grid>    )}    ...  </Grid></EntityLayout.Route>

이 카드는 앱과 함께 로드되어야 해요. 이는 실제 패키지에서 카드를 import해 앱의 EntityPage에 추가하는 것을 의미해요.

Entity Summary Card

Entity Summary 카드는 엔티티 페이지 헤더 오른쪽에 표시돼요. 다음은 예시예요.

...

탭 추가

가장 깊은 통합 수준에서 플러그인은 백엔드 API와 통신하고 엔티티 개요 페이지에 탭으로 표시될 수 있어요. 두 가지 형태가 있어요.

  • Embedded Entity Tab: 탭은 엔티티 개요 페이지의 일부로 포함된다. 다른 API나 시스템을 인터페이스하기 위해 구성이 자주 필요하다.
  • Standalone Entity Tab: 이 탭은 구성 URL을 통해 다른 웹사이트나 플랫폼으로 이동한다.

Embedded Entity Tab 만들기

엔티티 탭을 만들려면:

  1. 백엔드 데이터 플러그인에 대한 API 인터페이스를 정의하세요.
  2. 플러그인의 확장을 생성하세요. createRoutableExtension을 사용하세요.
  3. 필요에 따라 API를 구성하세요(구성 시스템 참고).
  4. 확장을 앱의 plugin.ts에서 앱과 함께 로드되도록 해야 해요.
  5. 카드로 가는 깊은 링크를 만들려면 useRouteRef를 사용해 링크를 만들어요.
const entityPageExtension = plugin.provide(  createRoutableExtension({    name: 'EntityPageExtension',    component: () => import('./components').then(m => m.EntityPageExtension),    mountPoint: entityPageRouteRef,  }),);

Standalone Entity Tab 만들기

배치된(hosted) 플러그인(예: 별도로 호스팅되는 애플리케이션)이 있다면, 그것을 엔티티 개요 페이지의 탭으로 추가할 수 있어요. 기능은 별도의 도구로 처리되며, 구성은 app-config.yaml에서 직접 해야 해요. 탭에는 라우트가 필요하며 백엔드 플러그인으로 구성해야 해요.

탭 유형

표시할 탭에는 두 가지 유형이 있어요.

  • Embedded Entity Tab - 엔티티 개요 탭의 일부로 표시.
  • Standalone Entity Tab - 구성된 URL로 이동하거나 외부 API와 통신.

Embedded Entity Tab

Embedded Entity Tab은 다음 코드를 사용해 추가할 수 있어요.

//  plugins/catalog/src/components/EntityLayout/EntityLayout.tsx<EntityLayout.Route path="/cart" title="Cart">  <CartPage /></EntityLayout.Route>

Standalone Entity Tab

Standalone Entity Tab은 다음 코드를 사용해 추가할 수 있어요.

//  plugins/catalog/src/components/EntityLayout/EntityLayout.tsx<EntityLayout.Route path="/cart" title="Cart">  <CartPage url="https://cart.example.com/store" /></EntityLayout.Route>

더 알아보기 (Learn more)