Add configurable hints for machine image vendors

[grolu]

What this PR does / why we need it:
Some vendors require additional hints, e.g. to inform the user that an enterprise license is required for usage.
With this PR it is possible to define those hints via the dashboard configuration.

Example:

apiVersion: v1
kind: ConfigMap
data:
  config.yaml: |
    ---
    frontend:
      vendorHints:
        - matchNames:
            - suse-chost
            - suse-jeos
          message: Enterprise license required
          severity: warning

Which issue(s) this PR fixes:
Fixes #

Special notes for your reviewer:

Release note:

It is now possible to add configurable hints for machine image vendors

[petersutter]

/lgtm

[holgerkoser]

May be it makes to change it to {{ quote .hintMessage }}

[grolu]

yes, I already did this and added the support for markdown on the UI side as well

[holgerkoser]

Shouldn't we create a class for this classification, version, hint, ... stuff?

[grolu]

Yes, would be a good idea. But not as part of this PR

changes made

[holgerkoser]

I think something like this would be better

 <template v-slot:message="{ message }">
   <multi-message :message="message"/>
 </template>

[holgerkoser]

CodeSandbox example:
https://codesandbox.io/s/focused-cdn-qn1wl?file=/src/components/MultiMessage.vue

<template>
  <div class="wrapper">
    <template v-for="({ type, hint }, index) in hints">
      <div v-if="type === 'html'" v-html="hint" :key="index" />
      <div v-else v-text="hint" :key="index" />
    </template>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
    },
  },
  computed: {
    hints() {
      try {
        const obj = JSON.parse(this.message);
        return Array.isArray(obj) ? obj : [obj];
      } catch (err) {
        return [
          {
            type: "text",
            hint: this.message,
          },
        ];
      }
    },
  },
};
</script>

[grolu]

done

[holgerkoser]

We should avoid hand-craftet html

[grolu]

changed as suggested

[holgerkoser]

hints.push({ 
  type: 'html', 
  hint: transformHtml(this.machineImage.vendorHint.hintMessage) 
})

or

hints.push({ 
  type: 'text', 
  hint: `Image version expires on: ${this.machineImage.expirationDateString}. Image update will be enforced after that date.`
})

and

return JSON.stringify(hints)

[grolu]

done

[holgerkoser]

The vendorHint only depends on the vendor name and should not be determined outside of the iteratee.

        const vendorName = vendorNameFromImageName(machineImage.name)
        const vendorHint = findVendorHint(state.cfg.vendorHints, vendorName)

        return map(versions, ({ version, expirationDate, cri, classification }) => {
          return decorateClassificationObject({
            key: name + '/' + version,
            name,
            version,
            cri,
            classification,
            expirationDate,
            vendorName,
            icon: vendorName,
            vendorHint
          })
        })

[grolu]

done

[holgerkoser]

The property is already called vendorHints. It would not repeat vendor and hint in child properties. Type from my point of view should be named severity. But this is only my personal opinion.

Suggested change

	{{- range .Values.frontendConfig.vendorHints }}
	- vendorNames:
	{{- range .vendorNames }}
	- {{ . }}
	{{- end }}
	hintMessage: {{ quote .hintMessage }}
	{{- if .hintType }}
	hintType: {{ .hintType }}
	{{- end }}
	{{- end }}
	{{- range .Values.frontendConfig.vendorHints }}
	- matchNames: {{ toJson .matchNames }}
	message: {{ quote .message }}
	{{- if .severity }}
	severity: {{ .severity }}
	{{- end }}
	{{- end }}

[grolu]

changed as suggested

[holgerkoser]

/lgtm