Improve federation support (#102)

* Fix typos causing code to fail

* Apply same logic to fed:missing as to fed:backends

* Hide notice if missing backend is irrelevant

* Prevent FedMissingNotice in non-federation context

I returned `true` too eagerly :D When it's not a federation context, of course supportedBy is undefined, so affectedByMissing became true. The Notice didn't render anyway because of further checks in the component itself, but it was added to the DOM and that should be avoided too.

* Hide notice if `missing` is empty array

* Unify fed notice layouts and improve their texts (see #100, #101)

* Apply suggestions from code review (cleanup and style)

Co-authored-by: Matthias Mohr <[email protected]>

* Change texts of federation notices (see #100, #101, #102)

---------

Co-authored-by: Matthias Mohr <[email protected]>

Author: christophfriedrich

components/Collection.vue

@@ -22,7 +22,7 @@
 			<Description :description="stac.description"></Description>
 			<DeprecationNotice v-if="stac.deprecated" entity="collection" />
 			<FederationNotice v-if="supportedBy" :backends="supportedBy" :federation="federation" entity="collection" />
-			<FederationMissing v-if="stac['federation:missing']" :missing="stac['federation:missing']" :federation="federation" />
+			<FederationMissingNotice v-if="affectedByMissing" :missing="missing" :federation="federation" />
 		</section>
 
 		<section class="license">
@@ -178,8 +178,8 @@ export default {
 	},
 	computed: {
 		supportedBy() {
-			if (Utils.isObject(this.stac.summary) && Array.isArray(this.stac.summary['federation:backends'])) {
-				return this.stac.summary['federation:backends'];
+			if (Utils.isObject(this.stac.summaries) && Array.isArray(this.stac.summaries['federation:backends'])) {
+				return this.stac.summaries['federation:backends'];
 			}
 			else if (Array.isArray(this.stac['federation:backends'])) {
 				return this.stac['federation:backends'];
@@ -188,6 +188,24 @@ export default {
 				return undefined;
 			}
 		},
+		missing() {
+			if (Utils.isObject(this.stac.summaries) && Array.isArray(this.stac.summaries['federation:missing'])) {
+				return this.stac.summaries['federation:missing'];
+			}
+			else if (Array.isArray(this.stac['federation:missing'])) {
+				return this.stac['federation:missing'];
+			}
+			else {
+				return undefined;
+			}
+		},
+		affectedByMissing() {
+			if (this.missing && !Array.isArray(this.supportedBy)) {   // in case missing is set but supportedBy is unexpectedly not an array...
+				return true;   // default to display the notice (don't hold back information when we can't be sure)
+			} else {   // otherwise: check if any of the missing backends is actually in the list of backends that are relevant here
+				return Array.isArray(this.missing) && this.missing.some(backend => this.supportedBy.includes(backend));
+			}
+		},
 		showMap() {
 			return this.boundingBoxes.length > 0 && !this.worldwide;
 		},

components/Collections.vue

@@ -22,7 +22,7 @@
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template #content-start="scope">
 				<slot name="content-start" v-bind="scope"></slot>
-				<FederationMissingNotice v-if="missing" :missing="missing" :federation="federation" />
+				<FederationMissingNotice v-if="Array.isArray(missing) && missing.length > 0" :missing="missing" :federation="federation" />
 			</template>
 			<template #after-search-box="scope"><slot name="after-search-box" v-bind="scope"></slot></template>
 			<template #summary="scope"><slot name="summary" v-bind="scope" /></template>

components/FederationMissingNotice.vue

@@ -3,9 +3,18 @@
 		<AsyncButton v-if="retry" confirm class="retry" :fn="retry">Retry</AsyncButton>
 		<strong class="header">Incomplete</strong>
 		<p>
-			The following list is incomplete as at least one of the services in the federation is currently not available.
-			The data for the following services is missing: {{ services.join(', ') }}
+			This data is incomplete as the following service{{services.length > 1 ? 's' : ''}} in the federation {{services.length > 1 ? 'are' : 'is'}} currently unavailable:
 		</p>
+		<ul>
+			<li v-for="service in services">
+				<div class="fed-header">
+					<strong class="fed-title">{{ service }}</strong>
+					<ul class="badges small inline">
+						<li class="badge red">offline</li>
+					</ul>
+				</div>
+			</li>
+		</ul>
 	</section>
 </template>
 

components/FileFormats.vue

@@ -16,7 +16,7 @@
 			:collapsed="collapsed"
 			@detailsToggled="detailsToggled">
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
-			<template v-if="missing" #content-start><FederationMissingNotice :missing="missing" :federation="federation" /></template>
+			<template v-if="Array.isArray(missing) && missing.length > 0" #content-start><FederationMissingNotice :missing="missing" :federation="federation" /></template>
 			<template #summary="slot">
 				<slot name="summary" v-bind="slot">
 					<strong class="inline">{{ slot.item.name }}</strong>

components/Processes.vue

@@ -18,7 +18,7 @@
 			@detailsToggled="detailsToggled"
 			allowCopy>
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
-			<template #content-start v-if="missing"><FederationMissingNotice :missing="missing" :federation="federation" /></template>
+			<template #content-start v-if="Array.isArray(missing) && missing.length > 0"><FederationMissingNotice :missing="missing" :federation="federation" /></template>
 			<template #summary="scope"><slot name="summary" v-bind="scope" /></template>
 			<template #details="slot">
 				<Process :process="slot.item" :provideDownload="provideDownload" :processUrl="processUrl" :showGraph="showGraph" :federation="federation">

components/internal/FederationNotice.vue

@@ -1,7 +1,7 @@
 <template>
 	<section v-if="unsupported.length > 0" class="vue-component message-block federation federation-backends">
 		<strong class="header">Federation</strong>
-		<p>This {{ entity }} is only available through the following services in the federation:</p>
+		<p>This {{ entity }} is only available through the following service{{ services.length > 1 ? 's' : '' }} in the federation:</p>
 		<ul>
 			<li v-for="service in services" :key="service.url">
 				<div class="fed-header">