Merge pull request #29 from jsdelivr/system-tags

feat: show all probe tags

components/ReadOnlyAutoComplete.vue

@@ -0,0 +1,28 @@
+<template>
+ <AutoComplete
+ class="pointer-events-auto cursor-auto select-auto bg-transparent dark:bg-transparent"
+ chip-icon="hidden"
+ multiple
+ disabled
+ :pt="merge(pt, {
+ // Tabindex should be unset, otherwise Copying of the selected value is not working.
+ inputMultiple: {tabindex: ''},
+ })"
+ :pt-options="{ mergeProps: true }"
+ :typeahead="false"
+ />
+</template>
+
+<script setup lang="ts">
+ import merge from 'lodash/merge';
+
+ defineProps({
+ pt: {
+ type: Object as PropType<{
+ inputMultiple?: Record<string, unknown>,
+ [field: string]: unknown
+ }>,
+ default: () => ({}),
+ },
+ });
+</script>

nuxt.config.ts

@@ -29,6 +29,7 @@ export default defineNuxtConfig({
  '@nuxtjs/tailwindcss',
  '@primevue/nuxt-module',
  '@pinia/nuxt',
+ '@vueuse/nuxt',
  'nuxt-icons',
  ],
  css: [ 'primeicons/primeicons.css', '~/assets/css/base.css', '~/assets/css/global.css' ],

package.json

@@ -23,6 +23,8 @@
  "@pinia/nuxt": "^0.5.4",
  "@primevue/nuxt-module": "^4.0.7",
  "@primevue/themes": "^4.0.7",
+ "@vueuse/core": "^11.1.0",
+ "@vueuse/nuxt": "^11.1.0",
  "chart.js": "^4.4.4",
  "eslint-plugin-import": "^2.30.0",
  "lodash": "^4.17.21",

pages/probes.vue

@@ -57,14 +57,16 @@
  </Column>
  <Column body-class="!p-0 h-16">
  <template #header>
- Tags <i v-tooltip.top="'Public tags that can be used to target the probe in measurements.'" class="pi pi-info-circle"/>
+ <span ref="tagsHeaderContentRef">
+ Tags <i v-tooltip.top="'Public tags that can be used to target the probe in measurements.'" class="pi pi-info-circle"/>
+ </span>
  </template>
 
  <template #body="slotProps">
  <NuxtLink :to="`/probes/${slotProps.data.id}`" class="flex h-full items-center" @click="openProbeDetails(slotProps.data.id)">
- <div class="flex h-full flex-wrap items-center">
- <Tag v-for="tag in slotProps.data.tags.slice(0, 50)" :key="tag" class="my-0.5 mr-1 flex text-nowrap bg-surface-0 py-0.5 font-normal dark:bg-dark-800" severity="secondary" :value="`u-${tag.prefix}-${tag.value}`"/>
- <Tag v-if="slotProps.data.tags.length > 5" key="other" class="my-0.5 mr-1 flex text-nowrap bg-surface-0 py-0.5 font-normal dark:bg-dark-800" severity="secondary" :value="`+${slotProps.data.tags.length - 5}`"/>
+ <div v-for="{ id, allTags } in [getAllTags(slotProps.data)]" :key="id" class="flex h-full flex-wrap items-center">
+ <Tag v-for="tag in allTags.slice(0, numberOfTagsToShow)" :key="tag" class="my-0.5 mr-1 flex text-nowrap bg-surface-0 py-0.5 font-normal dark:bg-dark-800" severity="secondary" :value="tag"/>
+ <Tag v-if="allTags.length > numberOfTagsToShow" key="other" class="my-0.5 mr-1 flex text-nowrap bg-surface-0 py-0.5 font-normal dark:bg-dark-800" severity="secondary" :value="`+${allTags.length - numberOfTagsToShow}`"/>
  </div>
  </NuxtLink>
  </template>
@@ -235,8 +237,20 @@
  }
  });
 
- // PROBE DETAILS
+ const getAllTags = (probe: Probe) => {
+ const systemTags = probe.systemTags;
+ const userTags = probe.tags.map(({ prefix, value }) => `u-${prefix}-${value}`);
+ const allTags = userTags.concat(systemTags);
+ return { id: probe.id, allTags };
+ };
 
+ // Calculate the number of tags to show, based on the expected average tag width <= 200px.
+ const tagsHeaderContentRef = ref(null);
+ const tagsHeaderRef = useParentElement(tagsHeaderContentRef);
+ const { width: tagsColumnWidth } = useElementSize(tagsHeaderRef);
+ const numberOfTagsToShow = computed(() => Math.max(Math.floor(tagsColumnWidth.value / 100), 1));
+
+ // PROBE DETAILS
  onMounted(async () => {
  const probeId = route.params.id as string;
 

pages/probes/[id].vue

@@ -52,14 +52,9 @@
  <label for="alternative-ips" class="mt-4 inline-block text-xs">Alternative IPs</label>
  <div class="relative mt-1">
  <i class="pi pi-lock absolute right-3 top-[13px] text-bluegray-500"/>
- <AutoComplete
+ <ReadOnlyAutoComplete
  id="alternative-ips"
  v-model="probe.altIps"
- class="pointer-events-auto cursor-auto select-auto bg-transparent dark:bg-transparent"
- chip-icon="hidden"
- multiple
- disabled
- :typeahead="false"
  />
  </div>
  <p class="mt-2 text-xs text-bluegray-400">
@@ -82,7 +77,24 @@
  City where the probe is located. If the auto-detected value is wrong, you can adjust it here.
  </p>
 
- <label for="tags" class="mt-4 inline-block text-xs">Tags</label>
+ <label for="systemTags" class="mt-4 inline-block text-xs">System tags</label>
+ <div class="relative mt-1">
+ <i class="pi pi-lock absolute right-3 top-[13px] text-bluegray-500"/>
+ <ReadOnlyAutoComplete
+ id="systemTags"
+ v-model="probe.systemTags"
+ :pt="{
+ inputMultiple: {class: 'pb-1 pr-10 min-h-10'},
+ inputChip: 'hidden',
+ chipItem: 'mt-1'
+ }"
+ />
+ </div>
+ <p class="mt-2 text-xs text-bluegray-400">
+ Public tags that can be used to target the probe in measurements.
+ </p>
+
+ <label for="tags" class="mt-4 inline-block text-xs">User tags</label>
  <div v-if="isEditingTags" class="mt-1">
  <div>
  <div class="flex text-xs">
@@ -123,35 +135,29 @@
  />
  </div>
  <div v-else class="relative mt-1">
- <AutoComplete
+ <ReadOnlyAutoComplete
  id="tags"
  v-model="tagStrings"
- class="pointer-events-auto cursor-auto select-auto bg-transparent dark:bg-transparent "
- chip-icon="hidden"
- multiple
- disabled
  :pt="{
- inputMultiple: 'pb-1 pr-28 min-h-10',
+ inputMultiple: {class: 'pb-1 pr-24 min-h-10'},
  inputChip: 'hidden',
  chipItem: 'mt-1'
  }"
- :pt-options="{ mergeProps: true }"
- :typeahead="false"
  />
  <Button
- label="Edit tags"
+ label="Edit"
  icon="pi pi-pencil"
  icon-pos="right"
  class="!absolute right-1.5 top-1.5 bg-transparent hover:bg-transparent"
  severity="contrast"
  text
- aria-label="Edit tags"
+ aria-label="Edit"
  size="small"
  @click="editTags"
  />
  </div>
  <p class="mt-2 text-xs text-bluegray-400">
- Public tags that can be used to target the probe in measurements.
+ Public user-defined tags that can be used to target the probe in measurements.
  Each tag must be prefixed by your GitHub username or organization.
  E.g., for a user with username <code class="font-bold">jimaek</code>
  and tag <code class="font-bold">home-1</code> the final tag would be <code class="whitespace-nowrap font-bold">u-jimaek-home-1</code>.

pages/settings.vue

@@ -59,20 +59,14 @@
  <InputText id="email" v-model="email" class="mt-2 w-full"/>
  <label for="organizations" class="mt-6 block font-bold">Organizations</label>
  <div class="relative mt-2">
- <AutoComplete
+ <ReadOnlyAutoComplete
  id="tags"
  v-model="user.github_organizations"
- class="pointer-events-auto cursor-auto select-auto bg-transparent dark:bg-transparent"
- chip-icon="hidden"
- multiple
- disabled
  :pt="{
- inputMultiple: 'pb-1 pr-48 min-h-10',
+ inputMultiple: { class: 'pb-1 pr-48 min-h-10' },
  inputChip: 'hidden',
  chipItem: 'mt-1'
  }"
- :pt-options="{ mergeProps: true }"
- :typeahead="false"
  />
  <Button
  severity="contrast"

presets/aura/autocomplete/index.js

@@ -5,8 +5,8 @@ export default {
 
  // Flex
  {
- 'flex': props.fluid,
- 'inline-flex': !props.fluid,
+ flex: props.fluid,
+ // 'inline-flex': !props.fluid,
  },
 
  // Size

types.ts

@@ -67,6 +67,7 @@ declare global {
  value: string;
  prefix: string;
  }[],
+ systemTags: string[],
  userId: string;
  uuid: string;
  version: string;