EccClientElixirCloudRegistryServices Component

2.0.0-alpha.51

<ecc-client-elixir-cloud-registry-services/>

EccClientElixirCloudRegistryServices

Overview

The ecc-client-elixir-cloud-registry-services component lists the services of a Cloud Registry and shows a "Verified" badge for the verified ones. It is the services list of the GA4GH Service Registry package (search, filters, pages, row actions) with a service verification component in each row.

It loads all verifications with one request (GET /verifications, Cloud Registry 0.4.0 and later), not one per row. A verification only counts while the service still has the verified URL and API type (see Verifications). Rows show the badge once the verifications are loaded; if loading fails, the list shows no badges and fires ecc-service-verification-failed.

Usage

services.tsx

import React, { useMemo } from 'react';
import { EccClientElixirCloudRegistryServices } from '@elixir-cloud/cloud-registry/react/services';
import { RestCloudRegistryProvider } from '@elixir-cloud/cloud-registry/providers';
 
export default function Services({ me }) {
  // created once: a new provider makes the list load again
  const provider = useMemo(
    () => new RestCloudRegistryProvider('https://cloud-registry.example.com/ga4gh/registry/v1'),
    []
  );
 
  return (
    <EccClientElixirCloudRegistryServices
      provider={provider}
      admin={me.admin}
      onEccServiceSelected={(event) => console.log(event.detail.serviceId)}
    />
  );
}

Properties

Property	Type	Default	Description
`baseUrl`	`string`	`""`	Base URL of the Cloud Registry API, if no `provider` is set
`provider`	`CloudRegistryProvider`	`undefined`	Data provider (see Providers); takes precedence over `baseUrl`
`admin`	`boolean`	`false`	Whether to offer "Verify" and "Remove verification" in each row
`filter`	`boolean`	`true`	Whether to show the type, organization and environment filters
`search`	`boolean`	`true`	Whether to show the search field
`pageSize`	`number`	`10`	Services per page (attribute `page-size`); 0 or less shows all services on one page, an empty attribute 10
`rowActions`	`(service: ExternalService) => unknown`	`undefined`	Renders the actions of each row after the badge; without it, each row has a "View Details" button

`provider` and `baseUrl`

Replacing the provider (or changing baseUrl) renders a new list, which loads the services and the verifications again. In React, create the provider only when its inputs change, e.g. with useMemo. Custom providers implement the optional getVerifications() of CloudRegistryProvider; without it, the list shows no badges and fires ecc-service-verification-failed.

`admin`

Apps take the value from admin of the registry's GET /me. Admins see "Not verified" and "Verify" for unverified services and "Remove verification" for verified ones. The list follows their changes without loading the verifications again, also for rows that are no longer shown by then (e.g. on another page). After a failed verify or remove, it loads the verifications again, as the registry may have applied the change. The registry checks permissions itself.

`filter`, `search` and `pageSize`

As in the services list of the GA4GH Service Registry package, which this component passes them to.

`rowActions`

As in the services list: a function that renders the actions of a row from its service, e.g. Edit and Delete buttons. They follow the badge. Set a new function when what it renders changes.

The actions-<id> slots of the services list aren't available through this component; use rowActions instead.

Events

Event Name	React Event Name	Detail Type	Description
`ecc-services-changed`	`onEccServicesChanged`	`{ services: ExternalService[] }`	Fired when the services are loaded
`ecc-service-selected`	`onEccServiceSelected`	`{ serviceId: string }`	Fired when a service, its row or its "View Details" button is clicked
`ecc-service-verification-changed`	`onEccServiceVerificationChanged`	`{ serviceId: string, verification: Verification \| null }`	Fired when an admin verified a service or removed its verification
`ecc-service-verification-failed`	`onEccServiceVerificationFailed`	`{ serviceId: string, action: "load" \| "verify" \| "remove", error: string, status?: number, ... }`	Fired when loading the verifications, or verifying a service or removing its verification, fails

`ecc-service-verification-failed`

When loading the verifications of the list fails, serviceId is empty and action is load; status is the HTTP status if there is one, and cause the error that the provider threw. Failures of a row's verify or remove carry the row's service ID, as described for the service verification component.