fix: change the look of the infra provider labels

Fixes: #822

Signed-off-by: Artem Chernyshev <[email protected]>

client/pkg/omni/resources/omni/labels.go

@@ -90,8 +90,12 @@ const (
 	// tsgen:LabelMachinePendingAccept
 	LabelMachinePendingAccept = SystemLabelPrefix + "accept-pending"
 
+	// InfraProviderLabelPrefix is the prefix of all labels which are managed by the infra providers.
+	// tsgen:InfraProviderLabelPrefix
+	InfraProviderLabelPrefix = SystemLabelPrefix + "infra-provider"
+
 	// InfraProviderLabelPrefixFormat is the prefix of all labels which are managed by the infra providers.
-	InfraProviderLabelPrefixFormat = SystemLabelPrefix + "infra-provider[%s]/"
+	InfraProviderLabelPrefixFormat = InfraProviderLabelPrefix + "/%s/"
 )
 
 const (

frontend/src/api/resources.ts

@@ -131,6 +131,7 @@ export const LabelMachineRequestSet = "omni.sidero.dev/machine-request-set";
 export const LabelNoManualAllocation = "omni.sidero.dev/no-manual-allocation";
 export const LabelIsManagedByStaticInfraProvider = "omni.sidero.dev/is-managed-by-static-infra-provider";
 export const LabelMachinePendingAccept = "omni.sidero.dev/accept-pending";
+export const InfraProviderLabelPrefix = "omni.sidero.dev/infra-provider";
 export const MachineStatusLabelConnected = "omni.sidero.dev/connected";
 export const MachineStatusLabelReadyToUse = "omni.sidero.dev/ready-to-use";
 export const MachineStatusLabelDisconnected = "omni.sidero.dev/disconnected";

frontend/src/methods/labels.ts

@@ -3,6 +3,8 @@
 // Use of this software is governed by the Business Source License
 // included in the LICENSE file.
 
+import { InfraProviderLabelPrefix, SystemLabelPrefix } from "@/api/resources";
+
 export const parseLabels = (...labels: string[]): Record<string, string> => {
     const labelsMap: Record<string, string> = {};
 
@@ -16,12 +18,13 @@ export const parseLabels = (...labels: string[]): Record<string, string> => {
 }
 
 export type Label = {
-  key: string;
-  id: string,
-  value: string;
-  color: string;
-  removable?: boolean;
-  description?: string,
+  key: string
+  id: string
+  value: string
+  color: string
+  removable?: boolean
+  description?: string
+  icon?: string
 }
 
 const labelColors = {
@@ -75,3 +78,36 @@ export const selectors = (labels: Label[]) => {
     return `${label.key}=${label.value}`;
   });
 }
+
+const labelDescriptions = {
+  "invalid-state": "The machine is expected to be unallocated, but still has the configuration of a cluster.\nIt might be required to wipe the machine bypassing Omni."
+};
+
+export const getLabelFromID = (key: string, value: string): Label => {
+  const isUser = key.indexOf(SystemLabelPrefix) !== 0;
+
+  let strippedKey = key.replace(new RegExp(`^${SystemLabelPrefix}`), "");
+  let icon: string | undefined;
+  let color = getLabelColor(strippedKey);
+  let description = labelDescriptions[strippedKey];
+
+  if (key.indexOf(InfraProviderLabelPrefix) === 0) {
+    const parts = strippedKey.split("/");
+    strippedKey = parts[parts.length - 1];
+
+    icon = "server-network";
+    color = "green";
+
+    description = `Defined by the infra provider "${parts[1]}""`
+  }
+
+  return {
+    key: key,
+    id: strippedKey,
+    value: value,
+    color: color,
+    removable: isUser,
+    description: description,
+    icon: icon,
+  };
+}

frontend/src/views/omni/ItemLabels/ItemLabel.vue

@@ -8,6 +8,7 @@ included in the LICENSE file.
   <component :is="label.description ? Tooltip : 'div'" :description="label.description" placement="bottom-start">
     <span class="flex items-center cursor-pointer transition-all" v-bind:class="`resource-label label-${label.color}`"
       @click.stop="() => $emit('filterLabel', label)">
+      <t-icon v-if="label.icon" :icon="label.icon as IconType" class="w-3.5 h-3.5 mr-1 -ml-1"/>
       <template v-if="label.value">
         {{ label.id }}:<span class="font-semibold">{{ label.value }}</span>
       </template>
@@ -22,7 +23,7 @@ included in the LICENSE file.
 
 <script setup lang="ts">
 import Tooltip from "@/components/common/Tooltip/Tooltip.vue";
-import TIcon from "@/components/common/Icon/TIcon.vue";
+import TIcon, { IconType } from "@/components/common/Icon/TIcon.vue";
 
 defineProps<{
   label: {
@@ -32,6 +33,7 @@ defineProps<{
     color: string,
     description?: string,
     removable?: boolean,
+    icon?: string,
   },
   removeLabel?: (key :string) => Promise<void>
 }>();

frontend/src/views/omni/ItemLabels/ItemLabels.vue

@@ -23,7 +23,7 @@ import TButton from "@/components/common/Button/TButton.vue";
 import TInput from "@/components/common/TInput/TInput.vue";
 import { showError } from "@/notification";
 import { SystemLabelPrefix } from "@/api/resources";
-import { Label, getLabelColor } from "@/methods/labels";
+import { Label, getLabelFromID } from "@/methods/labels";
 
 const props = defineProps<{
   resource: Resource
@@ -67,31 +67,19 @@ const getLabelOrder = (l: Label) => {
   return labelOrder[l.id] ?? 1000;
 }
 
-const labelDescriptions = {
-  "invalid-state": "The machine is expected to be unallocated, but still has the configuration of a cluster.\nIt might be required to wipe the machine bypassing Omni."
-};
-
 const labels = computed((): Array<Label> => {
   const labels = resource.value.metadata?.labels || {};
 
   let labelsArray: Array<Label> = [];
 
   for (const key in labels) {
-    const isUser = key.indexOf(SystemLabelPrefix) !== 0;
-    const strippedKey = key.replace(new RegExp(`^${SystemLabelPrefix}`), "");
+    const label = getLabelFromID(key, labels[key]);
 
-    if (labelOrder[strippedKey] === -1) {
+    if (getLabelOrder(label) === -1) {
       continue;
     }
 
-    labelsArray.push({
-      key: key,
-      id: strippedKey,
-      value: labels[key],
-      color: getLabelColor(strippedKey),
-      removable: isUser,
-      description: labelDescriptions[strippedKey],
-    })
+    labelsArray.push(label);
   }
 
   labelsArray.sort((a, b) => {

frontend/src/views/omni/ItemLabels/LabelsInput.vue

@@ -68,14 +68,13 @@ included in the LICENSE file.
 
 <script setup lang="ts">
 import { Runtime } from "@/api/common/omni.pb";
-import { SystemLabelPrefix } from "@/api/resources";
 
 import { ref, toRefs, watch } from "vue";
 import TInput from "@/components/common/TInput/TInput.vue";
 import { Resource, ResourceService } from "@/api/grpc";
 import { withAbortController, withRuntime } from "@/api/options";
 import ItemLabel from "../ItemLabels/ItemLabel.vue";
-import { getLabelColor } from "@/methods/labels";
+import { getLabelFromID as createLabel } from "@/methods/labels";
 
 type Label = {
   id: string
@@ -223,14 +222,11 @@ watch(filterValue, async (val: string, old: string) => {
 
   matchedLabelsCompletion.value = labelsCompletions.filter(matcher).map(
     item => {
-      const shortKey = item.key.replace(new RegExp(`^${SystemLabelPrefix}`), "");
+      const label = createLabel(item.key, item.value);
 
-      return {
-        id: item.value === "" ? `has label: ${shortKey}` : shortKey,
-        value: item.value,
-        key: item.key,
-        color: getLabelColor(shortKey)
-      }
+      label.id = item.value === "" ? `has label: ${label.id}` : label.id;
+
+      return label;
     }
   );
 });