@rancher/shell 0.1.0 → 0.1.1

package/pages/c/_cluster/settings/brand.vue

@@ -1,18 +1,20 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import ColorInput from '@shell/components/form/ColorInput';
+import TypeDescription from '@shell/components/TypeDescription';
 
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import FileSelector from '@shell/components/form/FileSelector';
 import SimpleBox from '@shell/components/SimpleBox';
 import Loading from '@shell/components/Loading';
 import AsyncButton from '@shell/components/AsyncButton';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { allHash } from '@shell/utils/promise';
 import { MANAGEMENT } from '@shell/config/types';
 import { getVendor, setVendor } from '@shell/config/private-label';
 import { SETTING, fetchOrCreateSetting } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { setFavIcon } from '@shell/utils/favicon';
 
 const Color = require('color');
 const parse = require('url-parse');
@@ -21,7 +23,7 @@ export default {
   layout: 'authenticated',
 
   components: {
-    LabeledInput, Checkbox, FileSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput
+    LabeledInput, Checkbox, FileSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput, TypeDescription
   },
 
   async fetch() {
@@ -33,6 +35,7 @@ export default {
       uiColorSetting:         fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
       uiLinkColorSetting:     fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
       uiCommunitySetting:     fetchOrCreateSetting(this.$store, SETTING.COMMUNITY_LINKS, 'true'),
+      uiFaviconSetting:       fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
     });
 
     Object.assign(this, hash);
@@ -50,6 +53,13 @@ export default {
         this.customizeLogo = true;
       } catch {}
     }
+    if (hash.uiFaviconSetting.value) {
+      try {
+        this.uiFavicon = hash.uiFaviconSetting.value;
+
+        this.customizeFavicon = true;
+      } catch {}
+    }
     if (hash.uiColorSetting.value) {
       this.uiColor = Color(hash.uiColorSetting.value).hex();
       this.customizeColor = true;
@@ -73,6 +83,10 @@ export default {
       uiLogoLight:        '',
       customizeLogo:      false,
 
+      uiFaviconSetting:   {},
+      uiFavicon:          '',
+      customizeFavicon:   false,
+
       uiColorSetting:     {},
       uiColor:            null,
       customizeColor:     false,
@@ -146,6 +160,12 @@ export default {
         this.uiLogoDarkSetting.value = '';
       }
 
+      if (this.customizeFavicon) {
+        this.uiFaviconSetting.value = this.uiFavicon;
+      } else {
+        this.uiFaviconSetting.value = '';
+      }
+
       if (this.customizeColor) {
         this.uiColorSetting.value = Color(this.uiColor).rgb().string();
       } else {
@@ -168,11 +188,14 @@ export default {
           this.uiLogoLightSetting.save(),
           this.uiColorSetting.save(),
           this.uiLinkColorSetting.save(),
-          this.uiCommunitySetting.save()
+          this.uiCommunitySetting.save(),
+          this.uiFaviconSetting.save()
         ]);
         if (this.uiPLSetting.value !== this.vendor) {
           setVendor(this.uiPLSetting.value);
         }
+
+        setFavIcon(this.$store);
         btnCB(true);
       } catch (err) {
         this.errors.push(err);
@@ -189,6 +212,7 @@ export default {
     <h1 class="mb-20">
       {{ t('branding.label') }}
     </h1>
+    <TypeDescription resource="branding" />
     <div>
       <div class="row mb-20">
         <div class="col span-6">
@@ -196,7 +220,7 @@ export default {
         </div>
       </div>
 
-      <h3 class="mt-40 mb-5 pb-5">
+      <h3 class="mt-20 mb-5 pb-5">
         {{ t('branding.uiIssues.label') }}
       </h3>
       <label class="text-label">
@@ -211,7 +235,7 @@ export default {
         </div>
       </div>
 
-      <h3 class="mt-40 mb-5 pb-5">
+      <h3 class="mt-20 mb-5 pb-5">
         {{ t('branding.logos.label') }}
       </h3>
       <label class="text-label">
@@ -259,6 +283,37 @@ export default {
         </div>
       </div>
 
+      <h3 class="mt-20 mb-5 pb-5">
+        {{ t('branding.favicon.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.favicon.tip', {}, true) }}
+      </label>
+
+      <div class="row mt-10 mb-20">
+        <Checkbox v-model="customizeFavicon" :label="t('branding.favicon.useCustom')" :mode="mode" />
+      </div>
+
+      <div v-if="customizeFavicon" class="row mb-20">
+        <div class="col logo-container span-12">
+          <div class="mb-10">
+            <FileSelector
+              :byte-limit="20000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.favicon.upload')"
+              :mode="mode"
+              @error="setError"
+              @selected="updateLogo($event, 'uiFavicon')"
+            />
+          </div>
+          <SimpleBox v-if="uiFavicon">
+            <label class="text-muted">{{ t('branding.favicon.preview') }}</label>
+            <img class="logo-preview" :src="uiFavicon" />
+          </SimpleBox>
+        </div>
+      </div>
+
       <h3 class="mt-40 mb-5 pb-0">
         {{ t('branding.color.label') }}
       </h3>

package/pages/c/_cluster/settings/performance.vue

@@ -0,0 +1,167 @@
+<script>
+import { Checkbox } from '@components/Form/Checkbox';
+import Loading from '@shell/components/Loading';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Banner } from '@components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+const DEFAULT_PERF_SETTING = {
+  incrementalLoading: {
+    enabled:   false,
+    threshold: 2500,
+  },
+  manualRefresh: {
+    enabled:   false,
+    threshold: 2500,
+  }
+};
+
+export default {
+  layout:     'authenticated',
+  components: {
+    Checkbox,
+    Loading,
+    AsyncButton,
+    Banner,
+    LabeledInput,
+  },
+  async fetch() {
+    try {
+      this.uiPerfSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_PERFORMANCE });
+    } catch (e) {
+      this.uiPerfSetting = await this.$store.dispatch('management/create', { type: MANAGEMENT.SETTING }, { root: true });
+      // Setting does not exist - create a new one
+      this.uiPerfSetting.value = JSON.stringify(DEFAULT_PERF_SETTING);
+      this.uiPerfSetting.metadata = { name: SETTING.UI_PERFORMANCE };
+    }
+
+    const sValue = this.uiPerfSetting?.value || JSON.stringify(DEFAULT_PERF_SETTING);
+
+    this.value = JSON.parse(sValue);
+  },
+  data() {
+    return {
+      uiPerfSetting: DEFAULT_PERF_SETTING,
+      bannerVal:     {},
+      value:         {},
+      errors:        [],
+    };
+  },
+  computed: {
+    mode() {
+      const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
+
+      return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
+    },
+  },
+  methods: {
+    async save(btnCB) {
+      this.uiPerfSetting.value = JSON.stringify(this.value);
+      this.errors = [];
+      try {
+        await this.uiPerfSetting.save();
+        btnCB(true);
+      } catch (err) {
+        this.errors.push(err);
+        btnCB(false);
+      }
+    },
+  }
+};
+</script>
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <h1 class="mb-20">
+      {{ t('performance.label') }}
+    </h1>
+    <div>
+      <label class="text-label">
+        {{ t(`performance.description`, {}, true) }}
+      </label>
+      <Banner color="error" label-key="performance.banner" />
+      <!-- Incremental Loading -->
+      <div class="ui-perf-setting">
+        <div class="mt-40">
+          <h2>{{ t('performance.incrementalLoad.label') }}</h2>
+          <p>{{ t('performance.incrementalLoad.description') }}</p>
+          <Checkbox
+            v-model="value.incrementalLoading.enabled"
+            :label="t('performance.incrementalLoad.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+          <div class="ml-20">
+            <p :class="{ 'text-muted': !value.incrementalLoading.enabled }">
+              {{ t('performance.incrementalLoad.setting') }}
+            </p>
+            <LabeledInput
+              v-model="value.incrementalLoading.threshold"
+              :label="t('performance.incrementalLoad.inputLabel')"
+              :disabled="!value.incrementalLoading.enabled"
+              class="input"
+              type="number"
+              min="0"
+            />
+          </div>
+        </div>
+        <!-- Enable manual refresh list views -->
+        <div class="mt-40">
+          <h2 v-t="'performance.manualRefresh.label'" />
+          <p>{{ t('performance.manualRefresh.description') }}</p>
+          <Checkbox
+            v-model="value.manualRefresh.enabled"
+            :label="t('performance.manualRefresh.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+          <div class="ml-20">
+            <p :class="{ 'text-muted': !value.manualRefresh.enabled }">
+              {{ t('performance.manualRefresh.setting') }}
+            </p>
+            <LabeledInput
+              v-model.number="value.manualRefresh.threshold"
+              :label="t('performance.manualRefresh.inputLabel')"
+              :disabled="!value.manualRefresh.enabled"
+              class="input"
+              type="number"
+              min="0"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <template v-for="err in errors">
+      <Banner :key="err" color="error" :label="err" />
+    </template>
+    <div v-if="mode === 'edit'">
+      <AsyncButton class="pull-right mt-20" mode="apply" @click="save" />
+    </div>
+  </div>
+</template>
+<style scoped lang='scss'>
+.overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--overlay-bg);
+  z-index: 1;
+}
+  .ui-perf-setting {
+    P {
+      line-height: 1.25;
+      margin-bottom: 10px;
+    }
+
+    .underline {
+      text-decoration: underline;
+    }
+  }
+  .input {
+    max-width: 25%;
+  }
+</style>