@appscode/design-system 1.0.43-alpha.77 → 1.0.43-alpha.80

package/components/_left-sidebar-menu.scss

@@ -376,7 +376,10 @@
 
   .multiselect {
     height: 50px;
-    width: 234px;
+
+    // commented out to set full width select box when right content is not present
+    // width: 234px;
+    
     left: 0px;
     top: -5px;
 

package/components/ui-builder/_vue-open-api.scss

@@ -27,6 +27,13 @@
 }
 
 .vue-openapi-form {
+  margin-left: -20px;
+  .is-warning {
+    font-size: 12px;
+    color: #ea3d2f;
+    padding-left: 10px;
+  }
+
   .ac-nested-elements {
     &:first-child {
       margin-left: 0;
@@ -67,13 +74,6 @@
   }
 }
 
-.vue-openapi-form .is-warning {
-  font-size: 12px;
-  color: #ea3d2f;
-  font-family: Roboto, sans-serif;
-  padding-left: 10px;
-}
-
 .v-tooltip-open {
   background-color: $ac-white;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.77",
+  "version": "1.0.43-alpha.80",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v2/sidebar/ClusterSwitcher.vue

@@ -3,7 +3,8 @@
     <img
       width="40"
       :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
-      alt=""
+      onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+      alt="provider-icon"
     />
   </div>
   <multiselect
@@ -11,8 +12,8 @@
     v-model="selectedCluster"
     placeholder="Selected Cluster"
     label="name"
-    track-by="uid"
-    :options="options"
+    track-by="name"
+    :options="clusterOptions"
     :allow-empty="false"
     deselectLabel=""
     selectLabel=""
@@ -22,6 +23,7 @@
       <div class="is-flex is-align-items-center">
         <img
           :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
           alt="No cluster selected"
         /><span
           ><span>{{ props.option.displayName }}</span></span
@@ -33,6 +35,7 @@
         <img
           class="mr-15"
           :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
           alt="No cluster selected"
         />
         <div>
@@ -45,7 +48,6 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
 export default {
   props: {
     sidebarCollapsed: {
@@ -56,18 +58,14 @@ export default {
       type: Boolean,
       default: false,
     },
-    username: {
-      type: String,
-      default: "",
-    },
-    imagePath: {
-      type: Object,
-      default: () => ({}),
+    clusterOptions: {
+      type: Array,
+      default: [],
     },
     value: {
-      type: Object,
-      default: () => ({}),
-    },
+      type: String,
+      default: "",
+    }
   },
 
   components: {
@@ -77,93 +75,48 @@ export default {
   data() {
     return {
       selectedCluster: null,
-      clusters: [],
-      options: [],
+      selectedClusterName: "",
     };
   },
 
-  computed: {
-    selectClusterOptions() {
-      return this.clusters
-        .filter(
-          (cluster) =>
-            cluster.status.phase === "Connected" ||
-            cluster.status.phase === "PrivateConnected"
-        )
-        .map((cluster) => {
-          return {
-            name: cluster.spec.name,
-            displayName: cluster.spec.displayName,
-            provider: cluster.spec.provider,
-            uid: cluster.spec.uid,
-            location: cluster.spec.location,
-          };
-        });
-    },
-  },
-
   methods: {
-    async checkStatus(clusterName) {
-      try {
-        await this.$axios.get(
-          `/clusters/${this.username}/${clusterName}/status`
-        );
-        return true;
-      } catch (err) {
-        return false;
-      }
-    },
-    async getClusters() {
-      if (this.username) {
-        const url = `/clusters/${this.username}`;
-
-        try {
-          const resp = await this.$axios.get(url);
-          this.clusters = (resp.data && resp.data.items) || [];
-
-          // preselect the cluster
-          const selectedCluster = this.clusters.find(
-            (cluster) => cluster.spec.name === this.$route.params.cluster
-          );
-          this.selectedCluster = {
-            name: selectedCluster.spec.name,
-            displayName: selectedCluster.spec.displayName,
-            provider: selectedCluster.spec.provider,
-            uid: selectedCluster.spec.uid,
-            location: selectedCluster.spec.location,
-          };
-        } catch (e) {
-          console.log(e);
-        }
-      }
-    },
-
     getProviderIcon(provider) {
-      return this.imagePath[provider] || this.imagePath["default"];
+      return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
     },
   },
 
-  created() {
-    this.getClusters();
-  },
-
   watch: {
     value: {
-      deep: true,
       immediate: true,
       handler(n) {
-        this.selectedCluster = n;
+        this.selectedClusterName = n;
       },
     },
-    selectClusterOptions: {
+    selectedCluster: {
+      deep: true,
+      handler(n) {
+        this.selectedClusterName = n.name;
+      },
+    },
+    selectedClusterName(n) {
+      if (n !== this.selectedCluster.name) {
+        this.clusterOptions.forEach((item) => {
+          if (this.selectedClusterName === item.name) {
+            this.selectedCluster = item;
+          }
+        });
+      }
+      this.$emit("input", n);
+    },
+    clusterOptions: {
       deep: true,
       immediate: true,
       async handler(list) {
-        this.options = [];
         if (list) {
           list.forEach(async (item) => {
-            const resp = await this.checkStatus(item.name);
-            if (resp) this.options.push(item);
+            if(item.name === this.selectedClusterName) {
+              this.selectedCluster = item;
+            }
           });
         }
       },

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+  <div v-if="sidebarCollapsed" class="is-cluster-logo">
     <img
       width="40"
       :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
-      alt=""
+      onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+      alt="provider-icon"
     />
   </div>
   <multiselect
@@ -11,28 +12,30 @@
     v-model="selectedCluster"
     placeholder="Selected Cluster"
     label="name"
-    track-by="uid"
-    :options="options"
+    track-by="name"
+    :options="clusterOptions"
     :allow-empty="false"
-    deselectLabel=""
-    selectLabel=""
-    selectedLabel=""
+    deselect-label=""
+    select-label=""
+    selected-label=""
   >
-    <template slot="singleLabel" slot-scope="props">
+    <template #singleLabel="props">
       <div class="is-flex is-align-items-center">
         <img
           :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
           alt="No cluster selected"
         /><span
           ><span>{{ props.option.displayName }}</span></span
         >
       </div>
     </template>
-    <template slot="option" slot-scope="props">
+    <template #option="props">
       <div class="is-flex is-align-items-center">
         <img
           class="mr-15"
           :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
           alt="No cluster selected"
         />
         <div>
@@ -45,129 +48,86 @@
 </template>
 
 <script>
-import { defineComponent, defineAsyncComponent } from "vue";
-export default defineComponent({
-  props: {
-    sidebarCollapsed: {
-      type: Boolean,
-      default: false,
+  import { defineComponent, defineAsyncComponent } from 'vue'
+  export default defineComponent({
+    components: {
+      Multiselect: defineAsyncComponent(() =>
+        import('vue-multiselect').then((module) => module.default)
+      ),
     },
-    mouseHover: {
-      type: Boolean,
-      default: false,
-    },
-    username: {
-      type: String,
-      default: "",
-    },
-    imagePath: {
-      type: Object,
-      default: () => ({}),
-    },
-    value: {
-      type: Object,
-      default: () => ({}),
+    props: {
+      sidebarCollapsed: {
+        type: Boolean,
+        default: false,
+      },
+      mouseHover: {
+        type: Boolean,
+        default: false,
+      },
+      clusterOptions: {
+        type: Array,
+        default: () => [],
+      },
+      modelValue: {
+        type: String,
+        default: '',
+      },
     },
-  },
-
-  components: {
-    Multiselect: () => import("vue-multiselect"),
-  },
 
-  data() {
-    return {
-      selectedCluster: null,
-      clusters: [],
-      options: [],
-    };
-  },
+    emits: ['update:modelValue'],
 
-  computed: {
-    selectClusterOptions() {
-      return this.clusters
-        .filter(
-          (cluster) =>
-            cluster.status.phase === "Connected" ||
-            cluster.status.phase === "PrivateConnected"
-        )
-        .map((cluster) => {
-          return {
-            name: cluster.spec.name,
-            displayName: cluster.spec.displayName,
-            provider: cluster.spec.provider,
-            uid: cluster.spec.uid,
-            location: cluster.spec.location,
-          };
-        });
-    },
-  },
-
-  methods: {
-    async checkStatus(clusterName) {
-      try {
-        await this.$axios.get(
-          `/clusters/${this.username}/${clusterName}/status`
-        );
-        return true;
-      } catch (err) {
-        return false;
+    data() {
+      return {
+        selectedCluster: null,
+        selectedClusterName: null,
       }
     },
-    async getClusters() {
-      if (this.username) {
-        const url = `/clusters/${this.username}`;
-
-        try {
-          const resp = await this.$axios.get(url);
-          this.clusters = (resp.data && resp.data.items) || [];
 
-          // preselect the cluster
-          const selectedCluster = this.clusters.find(
-            (cluster) => cluster.spec.name === this.$route.params.cluster
-          );
-          this.selectedCluster = {
-            name: selectedCluster.spec.name,
-            displayName: selectedCluster.spec.displayName,
-            provider: selectedCluster.spec.provider,
-            uid: selectedCluster.spec.uid,
-            location: selectedCluster.spec.location,
-          };
-        } catch (e) {
-          console.log(e);
+    watch: {
+      modelValue: {
+        immediate: true,
+        handler(n) {
+          this.selectedClusterName = n
+        },
+      },
+      selectedCluster: {
+        deep: true,
+        handler(n) {
+          if (this.selectedClusterName !== n.name) {
+            this.selectedClusterName = n.name
+          }
+        },
+      },
+      selectedClusterName(n) {
+        if (n !== this.selectedCluster.name) {
+          this.clusterOptions.forEach((item) => {
+            if (this.selectedClusterName === item.name) {
+              this.selectedCluster = item
+            }
+          })
         }
-      }
-    },
-
-    getProviderIcon(provider) {
-      return this.imagePath[provider] || this.imagePath["default"];
-    },
-  },
-
-  created() {
-    this.getClusters();
-  },
 
-  watch: {
-    value: {
-      deep: true,
-      immediate: true,
-      handler(n) {
-        this.selectedCluster = n;
+        this.$emit('update:modelValue', n)
+      },
+      clusterOptions: {
+        deep: true,
+        immediate: true,
+        async handler(list) {
+          if (list) {
+            list.forEach((item) => {
+              if (this.selectedClusterName === item.name) {
+                this.selectedCluster = item
+              }
+            })
+          }
+        },
       },
     },
-    selectClusterOptions: {
-      deep: true,
-      immediate: true,
-      async handler(list) {
-        this.options = [];
-        if (list) {
-          list.forEach(async (item) => {
-            const resp = await this.checkStatus(item.name);
-            if (resp) this.options.push(item);
-          });
-        }
+
+    methods: {
+      getProviderIcon(provider) {
+        return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`
       },
     },
-  },
-});
-</script>
+  })
+</script>