dashboard-shell-shell 1.0.111

package/edit/logging.banzaicloud.io.output/__tests__/logging.banzaicloud.io.output.test.ts

@@ -0,0 +1,279 @@
+import { mount } from '@vue/test-utils';
+import Banzai from '@shell/edit/logging.banzaicloud.io.output/index.vue';
+
+const outputSchema = {
+  id:    'logging.banzaicloud.io.output',
+  type:  'schema',
+  links: {
+    collection: 'https://localhost:8005/v1/logging.banzaicloud.io.outputs',
+    self:       'https://localhost:8005/v1/schemas/logging.banzaicloud.io.output'
+  },
+  pluralName:      'logging.banzaicloud.io.outputs',
+  resourceMethods: [
+    'GET',
+    'DELETE',
+    'PUT',
+    'PATCH'
+  ],
+  _resourceFields:        null,
+  requiresResourceFields: true,
+  collectionMethods:      [
+    'GET',
+    'POST'
+  ],
+  attributes: {
+    columns: [
+      {
+        name:  'Active',
+        field: '.status.active',
+        type:  'boolean'
+      },
+      {
+        name:  'Problems',
+        field: '.status.problemsCount',
+        type:  'integer'
+      }
+    ],
+    group:      'logging.banzaicloud.io',
+    kind:       'Output',
+    namespaced: true,
+    resource:   'outputs',
+    verbs:      [
+      'delete',
+      'deletecollection',
+      'get',
+      'list',
+      'patch',
+      'create',
+      'update',
+      'watch'
+    ],
+    version: 'v1beta1'
+  },
+  _id:                   'logging.banzaicloud.io.output',
+  _group:                'logging.banzaicloud.io',
+  store:                 'cluster',
+  _schemaDefinitionsIds: {
+    self:   'io.banzaicloud.logging.v1beta1.Output',
+    others: [
+      'io.banzaicloud.logging.v1beta1.Output.spec',
+      'io.banzaicloud.logging.v1beta1.Output.spec.awsElasticsearch.buffer'
+    ]
+  },
+  schemaDefinitions: {
+    'io.banzaicloud.logging.v1beta1.Output.spec.awsElasticsearch.buffer': {
+      resourceFields: {
+        chunk_full_threshold:           { type: 'string' },
+        chunk_limit_records:            { type: 'int' },
+        chunk_limit_size:               { type: 'string' },
+        compress:                       { type: 'string' },
+        delayed_commit_timeout:         { type: 'string' },
+        disable_chunk_backup:           { type: 'boolean' },
+        disabled:                       { type: 'boolean' },
+        flush_at_shutdown:              { type: 'boolean' },
+        flush_interval:                 { type: 'string' },
+        flush_mode:                     { type: 'string' },
+        flush_thread_burst_interval:    { type: 'string' },
+        flush_thread_count:             { type: 'int' },
+        flush_thread_interval:          { type: 'string' },
+        overflow_action:                { type: 'string' },
+        path:                           { type: 'string' },
+        queue_limit_length:             { type: 'int' },
+        queued_chunks_limit_size:       { type: 'int' },
+        retry_exponential_backoff_base: { type: 'string' },
+        retry_forever:                  { type: 'boolean' },
+        retry_max_interval:             { type: 'string' },
+        retry_max_times:                { type: 'int' },
+        retry_randomize:                { type: 'boolean' },
+        retry_secondary_threshold:      { type: 'string' },
+        retry_timeout:                  { type: 'string' },
+        retry_type:                     { type: 'string' },
+        retry_wait:                     { type: 'string' },
+        tags:                           { type: 'string' },
+        timekey:                        { type: 'string' },
+        timekey_use_utc:                { type: 'boolean' },
+        timekey_wait:                   { type: 'string' },
+        timekey_zone:                   { type: 'string' },
+        total_limit_size:               { type: 'string' },
+        type:                           { type: 'string' }
+      },
+      type:        'io.banzaicloud.logging.v1beta1.Output.spec.awsElasticsearch.buffer',
+      description: ''
+    }
+  },
+  fetchResourceFields: async() => jest.fn()
+};
+
+describe('view: logging.banzaicloud.io.output', () => {
+  it.each([
+    ['http://localhost:3100', []],
+    ['not a proper URL', ['logging.loki.urlInvalid']],
+  ])('should validate Loki URL on save', (url, expectation) => {
+    const wrapper = mount(Banzai, {
+      data:  () => ({ selectedProvider: 'loki' }),
+      props: {
+        value: {
+          save: jest.fn(),
+          spec: { loki: { url } }
+        }
+      },
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $store:      {
+            dispatch: jest.fn(),
+            getters:  {
+              currentStore:              () => 'current_store',
+              'management/schemaFor':    jest.fn(),
+              'current_store/all':       jest.fn(),
+              'current_store/schemaFor': jest.fn(),
+              'cluster/all':             jest.fn(),
+              'type-map/isSpoofed':      jest.fn(),
+              'i18n/t':                  jest.fn().mockImplementation((key: string) => key),
+              namespaces:                () => ({}),
+            }
+          },
+          $route: {
+            name:  'whatever',
+            query: { AS: '' }
+          },
+          $router: { replace: jest.fn() },
+        },
+      }
+    });
+    const fakeDone = jest.fn();
+
+    (wrapper.vm as any).saveSettings(fakeDone);
+
+    expect((wrapper.vm as any).errors).toStrictEqual(expectation);
+  });
+
+  it('should load the default YAML data for output buffer config (from schema) in a CREATE scenario', async() => {
+    const wrapper = mount(Banzai, {
+      data:  () => ({ selectedProvider: 'awsElasticsearch' }),
+      props: {
+        value: {
+          save: jest.fn(),
+          spec: {}
+        }
+      },
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $store:      {
+            dispatch(arg: any) {
+              if (arg === 'cluster/find') {
+                return outputSchema;
+              }
+
+              return jest.fn();
+            },
+            getters: {
+              currentStore:              () => 'current_store',
+              'management/schemaFor':    jest.fn(),
+              'current_store/all':       jest.fn(),
+              'current_store/schemaFor': jest.fn(),
+              'cluster/all':             () => [outputSchema],
+              'cluster/byId':            () => outputSchema,
+              'type-map/isSpoofed':      jest.fn(),
+              'i18n/t':                  jest.fn().mockImplementation((key: string) => key),
+              namespaces:                () => ({}),
+            }
+          },
+          $route: {
+            name:  'whatever',
+            query: { AS: '' }
+          },
+          $router: { replace: jest.fn() },
+        },
+      }
+    });
+
+    // call async fetch - needed for test assertion
+    await Banzai.fetch.call(wrapper.vm);
+
+    const yaml = `#chunk_limit_records: int
+#chunk_limit_size: string
+#compress: string
+#delayed_commit_timeout: string
+#disable_chunk_backup: boolean
+#disabled: boolean
+#flush_at_shutdown: boolean
+#flush_interval: string
+#flush_mode: string
+#flush_thread_burst_interval: string
+#flush_thread_count: int
+#flush_thread_interval: string
+#overflow_action: string
+#path: string
+#queue_limit_length: int
+#queued_chunks_limit_size: int
+#retry_exponential_backoff_base: string
+#retry_forever: boolean
+#retry_max_interval: string
+#retry_max_times: int
+#retry_randomize: boolean
+#retry_secondary_threshold: string
+#retry_timeout: string
+#retry_type: string
+#retry_wait: string
+#tags: string
+#timekey: string
+#timekey_use_utc: boolean
+#timekey_wait: string
+#timekey_zone: string
+#total_limit_size: string
+#type: string`;
+
+    expect(wrapper.vm.initialBufferYaml).toStrictEqual(yaml);
+    expect(wrapper.vm.bufferYaml).toStrictEqual(yaml);
+  });
+
+  it('should load current output buffer config in an EDIT scenario', async() => {
+    const wrapper = mount(Banzai, {
+      data:  () => ({ selectedProvider: 'awsElasticsearch' }),
+      props: {
+        value: {
+          save: jest.fn(),
+          spec: { awsElasticsearch: { buffer: '#chunk_limit_records: int' } }
+        }
+      },
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $store:      {
+            dispatch(arg: any) {
+              if (arg === 'cluster/find') {
+                return outputSchema;
+              }
+
+              return jest.fn();
+            },
+            getters: {
+              currentStore:              () => 'current_store',
+              'management/schemaFor':    jest.fn(),
+              'current_store/all':       jest.fn(),
+              'current_store/schemaFor': jest.fn(),
+              'cluster/all':             jest.fn(),
+              'cluster/byId':            () => outputSchema,
+              'type-map/isSpoofed':      jest.fn(),
+              'i18n/t':                  jest.fn().mockImplementation((key: string) => key),
+              namespaces:                () => ({}),
+            }
+          },
+          $route: {
+            name:  'whatever',
+            query: { AS: '' }
+          },
+          $router: { replace: jest.fn() },
+        },
+      }
+    });
+
+    // call async fetch - needed for test assertion
+    await Banzai.fetch.call(wrapper.vm);
+
+    expect(wrapper.vm.initialBufferYaml).toContain('#chunk_limit_records: int');
+    expect(wrapper.vm.bufferYaml).toContain('#chunk_limit_records: int');
+  });
+});

package/edit/logging.banzaicloud.io.output/index.vue

@@ -0,0 +1,386 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import Loading from '@shell/components/Loading';
+import { LOGGING, SCHEMA } from '@shell/config/types';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import Labels from '@shell/components/form/Labels';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { Banner } from '@components/Banner';
+import { PROVIDERS } from '@shell/models/logging.banzaicloud.io.output';
+import { _VIEW } from '@shell/config/query-params';
+import { clone, set } from '@shell/utils/object';
+import isEqual from 'lodash/isEqual';
+import isEmpty from 'lodash/isEmpty';
+import jsyaml from 'js-yaml';
+import { createYaml } from '@shell/utils/create-yaml';
+import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
+
+export default {
+  components: {
+    Banner, CruResource, Labels, LabeledSelect, NameNsDescription, Tab, Tabbed, YamlEditor, Loading
+  }, //
+
+  mixins: [CreateEditView],
+
+  async fetch() {
+    const schemas = this.$store.getters['cluster/all'](SCHEMA);
+    const resourceSchema = this.$store.getters['cluster/byId'](SCHEMA, LOGGING.OUTPUT);
+    const schemaDefinition = await resourceSchema.fetchResourceFields();
+
+    let bufferYaml = '';
+
+    if ( !isEmpty(this.value.spec[this.selectedProvider]?.buffer) ) {
+      bufferYaml = jsyaml.dump(this.value.spec[this.selectedProvider].buffer);
+    } else if (schemaDefinition) {
+      bufferYaml = createYaml(
+        schemas,
+        `io.banzaicloud.logging.v1beta1.Output.spec.${ this.selectedProvider }.buffer`,
+        {},
+        true,
+        1,
+        '',
+        LOGGING.OUTPUT
+      );
+
+      // createYaml doesn't support passing reference types (array, map) as the first type. As such
+      // I'm manipulating the output since I'm not sure it's something we want to actually support
+      // seeing as it's really createResourceYaml and this here is a gray area between spoofed types
+      // and just a field within a spec.
+      bufferYaml = bufferYaml.substring(bufferYaml.indexOf('\n') + 1).replace(/# {2}/g, '#');
+    }
+
+    if (bufferYaml.length) {
+      this.bufferYaml = bufferYaml;
+      this.initialBufferYaml = bufferYaml;
+    }
+  },
+
+  data() {
+    if (this.isCreate) {
+      this.value.metadata.namespace = 'default';
+    }
+
+    set(this.value, 'spec', this.value.spec || {});
+
+    const providers = PROVIDERS.map((provider) => ({
+      ...provider,
+      value: provider.name,
+      label: this.t(provider.labelKey)
+    }));
+
+    if (this.mode !== _VIEW) {
+      providers.forEach((provider) => {
+        this.value.spec[provider.name] = this.value.spec[provider.name] || clone(provider.default);
+      });
+    }
+
+    const selectedProviders = providers.filter((provider) => {
+      const specProvider = this.value.spec[provider.name];
+      const correctedSpecProvider = provider.name === 'forward' ? specProvider?.servers?.[0] || {} : specProvider;
+
+      return !isEmpty(correctedSpecProvider) && !isEqual(correctedSpecProvider, provider.default);
+    });
+
+    const hasMultipleProvidersSelected = selectedProviders?.length > 1;
+
+    const selectedProvider = selectedProviders?.[0]?.value || providers[0].value;
+
+    return {
+      bufferYaml: '',
+      providers,
+      selectedProvider,
+      hasMultipleProvidersSelected,
+      LOGGING
+    };
+  },
+
+  computed: {
+    EDITOR_MODES() {
+      return EDITOR_MODES;
+    },
+    enabledProviders() {
+      return this.providers.filter((p) => p.enabled);
+    },
+    isNamespaced() {
+      return this.value.type !== LOGGING?.CLUSTER_OUTPUT;
+    },
+    cruMode() {
+      if (this.hasMultipleProvidersSelected || !this.value.allProvidersSupported) {
+        return _VIEW;
+      }
+
+      return this.mode;
+    }
+  },
+
+  methods: {
+    getComponent(name) {
+      return require(`./providers/${ name }`).default;
+    },
+    launch(provider) {
+      this.$refs.tabbed.select(provider.name);
+    },
+    saveSettings(done) {
+      const t = this.$store.getters['i18n/t'];
+
+      if (this.selectedProvider === 'loki') {
+        const urlCheck = ['https://', 'http://'].some((checkValue) => this.value.spec['loki'].url.toLowerCase().startsWith(checkValue));
+        const isLokiHttps = this.value.spec['loki'].url ? urlCheck : undefined;
+
+        if (!isLokiHttps) {
+          this.errors = [t('logging.loki.urlInvalid')];
+
+          return done(false);
+        }
+      }
+
+      this.errors = [];
+
+      this.value.spec = { [this.selectedProvider]: this.value.spec[this.selectedProvider] };
+
+      const bufferJson = jsyaml.load(this.bufferYaml);
+
+      if (!isEmpty(bufferJson)) {
+        this.value.spec[this.selectedProvider].buffer = bufferJson;
+      } else {
+        delete this.value.spec[this.selectedProvider]['buffer'];
+      }
+      this.save(done);
+    },
+    tabChanged({ tab }) {
+      if ( tab.name === 'buffer' ) {
+        this.$nextTick(() => {
+          if ( this.$refs.yaml ) {
+            this.$refs.yaml.refresh();
+            this.$refs.yaml.focus();
+          }
+        });
+      }
+    },
+    onYamlEditorReady(cm) {
+      cm.getMode().fold = 'yamlcomments';
+      cm.execCommand('foldAll');
+      cm.execCommand('unfold');
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div
+    v-else
+    class="output"
+  >
+    <CruResource
+      :done-route="doneRoute"
+      :mode="cruMode"
+      :resource="value"
+      :subtypes="[]"
+      :validation-passed="true"
+      :errors="errors"
+      :can-yaml="true"
+      @error="e=>errors = e"
+      @finish="saveSettings"
+      @cancel="done"
+    >
+      <NameNsDescription
+        v-if="!isView"
+        :value="value"
+        :mode="mode"
+        label="generic.name"
+        :register-before-hook="registerBeforeHook"
+        :namespaced="isNamespaced"
+      />
+      <Banner
+        v-if="hasMultipleProvidersSelected"
+        color="info"
+      >
+        {{ t('logging.output.tips.singleProvider') }}
+      </Banner>
+      <Banner
+        v-else-if="!value.allProvidersSupported"
+        color="info"
+      >
+        {{ t('logging.output.tips.multipleProviders') }}
+      </Banner>
+      <Tabbed
+        v-else
+        ref="tabbed"
+        :side-tabs="true"
+        @changed="tabChanged($event)"
+      >
+        <Tab
+          name="Output"
+          label="Output"
+          :weight="2"
+        >
+          <div class="row">
+            <div class="col span-6">
+              <LabeledSelect
+                v-model:value="selectedProvider"
+                label="Output"
+                :options="providers"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div class="spacer" />
+          <component
+            :is="getComponent(selectedProvider)"
+            :value="value.spec[selectedProvider]"
+            :namespace="value.namespace"
+            :mode="mode"
+          />
+        </Tab>
+        <Tab
+          name="buffer"
+          :label="t('logging.output.buffer.label')"
+          :weight="1"
+        >
+          <YamlEditor
+            ref="yaml"
+            v-model:value="bufferYaml"
+            :scrolling="false"
+            :initial-yaml-values="initialBufferYaml"
+            :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
+            @onReady="onYamlEditorReady"
+          />
+        </Tab>
+        <Tab
+          v-if="!isView"
+          name="labels-and-annotations"
+          label-key="generic.labelsAndAnnotations"
+          :weight="0"
+        >
+          <Labels
+            default-container-class="labels-and-annotations-container"
+            :value="value"
+            :mode="mode"
+            :display-side-by-side="false"
+          />
+        </Tab>
+      </Tabbed>
+    </CruResource>
+  </div>
+</template>
+
+<style lang="scss">
+  $chart: 110px;
+  $side: 15px;
+  $margin: 10px;
+  $logo: 60px;
+
+.output {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  .side-tabs {
+    flex: 1;
+  }
+  .provider {
+    h1 {
+      display: inline-block;
+    }
+  }
+
+  .box-container {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin: 0 -1*$margin;
+
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-4')) {
+      .toggle-gradient-box {
+        width: 100%;
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-7')) {
+      .toggle-gradient-box {
+        width: calc(50% - 2 * #{$margin});
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-9')) {
+      .toggle-gradient-box {
+        width: calc(33.33333% - 2 * #{$margin});
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-12')) {
+      .toggle-gradient-box {
+        width: calc(25% - 2 * #{$margin});
+      }
+    }
+
+    .toggle-gradient-box {
+      margin: $margin;
+      padding: $margin;
+      position: relative;
+      border-radius: calc( 1.5 * var(--border-radius));
+
+      &:hover {
+        box-shadow: 0 0 30px var(--shadow);
+        transition: box-shadow 0.1s ease-in-out;
+        cursor: pointer;
+      }
+
+      .side-label {
+        transform: rotate(180deg);
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        min-width: calc(1.5 * var(--border-radius));
+        width: $side;
+        border-top-right-radius: calc( 1.5 * var(--border-radius));
+        border-bottom-right-radius: calc( 1.5 * var(--border-radius));
+
+        label {
+          text-align: center;
+          writing-mode: tb;
+          height: 100%;
+          padding: 0 2px;
+          display: block;
+          white-space: no-wrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .logo {
+        text-align: center;
+        width: $logo;
+        height: $logo;
+        border-radius: calc(2 * var(--border-radius));
+        overflow: hidden;
+        background-color: white;
+        display: inline-block;
+        vertical-align: middle;
+
+        img {
+          width: $logo - 4px;
+          height: $logo - 4px;
+          object-fit: contain;
+          position: relative;
+          top: 2px;
+        }
+      }
+
+      &:hover {
+        background-position: right center;
+      }
+
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 0;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+</style>

package/edit/logging.banzaicloud.io.output/providers/__tests__/loki.test.ts

@@ -0,0 +1,13 @@
+import { shallowMount } from '@vue/test-utils';
+import Loki from '@shell/edit/logging.banzaicloud.io.output/providers/loki.vue';
+
+describe('component: Loki', () => {
+  it('should display URL placeholder', () => {
+    const wrapper = shallowMount(Loki, { props: { mode: 'edit', namespace: 'whatever' } });
+    const url = 'https://127.0.0.1:8000';
+
+    const placeholder = wrapper.find('[data-testid="loki-url"]').attributes('placeholder');
+
+    expect(placeholder).toBe(url);
+  });
+});