Merge pull request #1976 from vincent99/master

Bugs
rancher · Dec 3, 2020 · 7fc094b · 7fc094b
2 parents 5ac6534 + c03c339
commit 7fc094b
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 46 deletions.
diff --git a/components/form/ArrayListGrouped.vue b/components/form/ArrayListGrouped.vue
@@ -6,13 +6,17 @@ export default { components: { ArrayList, InfoBox } };
 </script>
 <template>
   <ArrayList class="array-list-grouped" v-bind="$attrs" @input="$emit('input', $event)">
+    <!-- Pass down templates provided by the caller -->
+    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
     <template v-slot:columns="scope">
       <InfoBox class="pt-40">
         <slot v-bind="scope"></slot>
       </InfoBox>
     </template>
     <template v-slot:remove-button="scope">
-      <button class="btn role-link close" @click="scope.remove">
+      <button type="button" class="btn role-link close" @click="scope.remove">
         <i class="icon icon-2x icon-x" />
       </button>
     </template>

diff --git a/components/form/KeyValue.vue b/components/form/KeyValue.vue
@@ -2,7 +2,7 @@
 import debounce from 'lodash/debounce';
 import { typeOf } from '@/utils/sort';
 import { removeAt } from '@/utils/array';
-import { asciiLike, escapeHtml } from '@/utils/string';
+import { asciiLike } from '@/utils/string';
 import { base64Encode, base64Decode } from '@/utils/crypto';
 import { downloadFile } from '@/utils/download';
 import TextAreaAutoGrow from '@/components/form/TextAreaAutoGrow';
@@ -180,7 +180,7 @@ export default {
       const rows = (this.value || []).slice() ;
 
       rows.map((row) => {
-        row._display = this.displayProps(row[this.valueName]);
+        row.binary = !asciiLike(row[this.valueName]);
       });
 
       return { rows };
@@ -198,7 +198,7 @@ export default {
       rows.push({
         key,
         value,
-        _display: this.displayProps(value)
+        binary: !asciiLike(value),
       });
     });
 
@@ -228,7 +228,7 @@ export default {
       this.rows.push({
         [this.keyName]:   key,
         [this.valueName]: value,
-        _display:         this.displayProps(value)
+        binary:           !asciiLike(value),
       });
       this.queueUpdate();
       this.$nextTick(() => {
@@ -313,28 +313,6 @@ export default {
       }
     },
 
-    displayProps(value) {
-      const binary = typeof value === 'string' && !asciiLike(value);
-      const withBreaks = escapeHtml(value || '').replace(/(\r\n|\r|\n)/g, '<br/>\n');
-      const byteSize = (withBreaks.length || 0) * 2; // Blobs don't exist in node/ssr
-      let parsed;
-
-      if ( value && ( value.startsWith('{') || value.startsWith('[') ) ) {
-        try {
-          parsed = JSON.parse(value);
-          parsed = JSON.stringify(parsed, null, 2);
-        } catch {
-        }
-      }
-
-      return {
-        binary,
-        withBreaks,
-        parsed,
-        byteSize
-      };
-    },
-
     onPaste(index, event, pastedValue) {
       const text = event.clipboardData.getData('text/plain');
       const lines = text.split('\n');
@@ -354,7 +332,7 @@ export default {
       const keyValues = splits.map(split => ({
         [this.keyName]:   (split[0] || '').trim(),
         [this.valueName]: (split[1] || '').trim(),
-        _display:         this.displayProps(split[1])
+        binary:           !asciiLike(split[1])
       }));
 
       this.rows.splice(index, 1, ...keyValues);
@@ -418,8 +396,11 @@ export default {
             :valueName="valueName"
             :queueUpdate="queueUpdate"
           >
+            <div v-if="row.binary">
+              {{ t('detailText.binary', {n: row.value.length || 0}, true) }}
+            </div>
             <TextAreaAutoGrow
-              v-if="valueMultiline"
+              v-else-if="valueMultiline"
               v-model="row[valueName]"
               :class="{'conceal': valueConcealed}"
               :mode="mode"

diff --git a/components/form/SecretSelector.vue b/components/form/SecretSelector.vue
@@ -150,12 +150,12 @@ export default {
       }
 
       &:first-child {
-          border-radius: calc(var(--border-radius) * 2) 0 0  calc(var(--border-radius) * 2);
+          border-radius: var(--border-radius) 0 0 var(--border-radius);
           margin-right: 0;
       }
 
       &:last-child {
-          border-radius: 0 calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) 0;
+          border-radius: 0 var(--border-radius) var(--border-radius) 0;
           border-left: none;
           float: right;
       }

diff --git a/edit/logging-flow/Match.vue b/edit/logging-flow/Match.vue
@@ -43,7 +43,7 @@ export default {
   <div>
     <KeyValue
       v-model="value.labels"
-      :title="value.select ? 'Select Pods' : 'Exclude Pods'"
+      :title="value.select ? 'Include Pods' : 'Exclude Pods'"
       :mode="mode"
       :initial-empty-row="true"
       :read-allowed="false"

diff --git a/edit/logging-flow/index.vue b/edit/logging-flow/index.vue
@@ -300,8 +300,7 @@ export default {
 
     <Tabbed :side-tabs="true" @changed="tabChanged($event)">
       <Tab name="match" :label="t('logging.flow.matches.label')" :weight="3">
-        <Banner color="info" class="mt-0" label="Configure which container logs will be pulled from" />
-        <ArrayListGrouped v-model="matches" :add-label="t('ingress.rules.addRule')" :default-add-value="{}">
+        <ArrayListGrouped v-model="matches">
           <template #default="props">
             <Match
               class="rule mb-20"
@@ -313,20 +312,18 @@ export default {
               @input="e=>updateMatch(e,props.row.i)"
             />
           </template>
+          <template #add>
+            <button class="btn role-tertiary add" type="button" @click="addMatch(true)">
+              {{ t('logging.flow.matches.addSelect') }}
+            </button>
+            <button class="btn role-tertiary add" type="button" @click="addMatch(false)">
+              {{ t('logging.flow.matches.addExclude') }}
+            </button>
+          </template>
         </ArrayListGrouped>
-        <button class="btn role-tertiary add" type="button" @click="addMatch(true)">
-          <i class="icon icon-plus" />
-          {{ t('logging.flow.matches.addSelect') }}
-        </button>
-        <button class="btn role-tertiary add" type="button" @click="addMatch(false)">
-          <i class="icon icon-plus" />
-          {{ t('logging.flow.matches.addExclude') }}
-        </button>
       </Tab>
 
       <Tab name="filters" :label="t('logging.flow.filters.label')" :weight="2">
-        <Banner color="info" class="mt-0" label="Filter or modify the data before it is sent to the output" />
-
         <YamlEditor
           ref="yaml"
           v-model="filtersYaml"
@@ -338,7 +335,6 @@ export default {
       </Tab>
 
       <Tab name="outputs" :label="t('logging.flow.outputs.label')" :weight="1">
-        <Banner color="info" class="mt-0" label="Choose one or more outputs to send the matching logs to" />
         <LabeledSelect
           v-model="globalOutputRefs"
           :label="t('logging.flow.clusterOutputs.label')"

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -340,7 +340,6 @@ export default {
 
       .type-banner {
         grid-area: type-banner;
-        grid-column: span 4;
       }
 
       .state-banner {