@appscode/design-system 1.0.43-alpha.74 → 1.0.43-alpha.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/vue-components/v2/sidebar/ClusterSwitcher.vue +173 -0
  3. package/vue-components/v3/sidebar/ClusterSwitcher.vue +173 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.0.43-alpha.74",
3
+ "version": "1.0.43-alpha.75",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/v2/sidebar/ClusterSwitcher.vue ADDED
@@ -0,0 +1,173 @@
1
+ <template>
2
+ <div class="is-cluster-logo" v-if="sidebarCollapsed">
3
+ <img
4
+ width="40"
5
+ :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
6
+ alt=""
7
+ />
8
+ </div>
9
+ <multiselect
10
+ v-else
11
+ v-model="selectedCluster"
12
+ placeholder="Selected Cluster"
13
+ label="name"
14
+ track-by="uid"
15
+ :options="options"
16
+ :allow-empty="false"
17
+ deselectLabel=""
18
+ selectLabel=""
19
+ selectedLabel=""
20
+ >
21
+ <template slot="singleLabel" slot-scope="props">
22
+ <div class="is-flex is-align-items-center">
23
+ <img
24
+ :src="getProviderIcon(props.option.provider)"
25
+ alt="No cluster selected"
26
+ /><span
27
+ ><span>{{ props.option.displayName }}</span></span
28
+ >
29
+ </div>
30
+ </template>
31
+ <template slot="option" slot-scope="props">
32
+ <div class="is-flex is-align-items-center">
33
+ <img
34
+ class="mr-15"
35
+ :src="getProviderIcon(props.option.provider)"
36
+ alt="No cluster selected"
37
+ />
38
+ <div>
39
+ <p>{{ props.option.displayName }}</p>
40
+ <p class="location">{{ props.option.location }}</p>
41
+ </div>
42
+ </div>
43
+ </template>
44
+ </multiselect>
45
+ </template>
46
+
47
+ <script>
48
+ import { mapGetters } from "vuex";
49
+ export default {
50
+ props: {
51
+ sidebarCollapsed: {
52
+ type: Boolean,
53
+ default: false,
54
+ },
55
+ mouseHover: {
56
+ type: Boolean,
57
+ default: false,
58
+ },
59
+ username: {
60
+ type: String,
61
+ default: "",
62
+ },
63
+ imagePath: {
64
+ type: Object,
65
+ default: () => ({}),
66
+ },
67
+ value: {
68
+ type: Object,
69
+ default: () => ({}),
70
+ },
71
+ },
72
+
73
+ components: {
74
+ Multiselect: () => import("vue-multiselect"),
75
+ },
76
+
77
+ data() {
78
+ return {
79
+ selectedCluster: null,
80
+ clusters: [],
81
+ options: [],
82
+ };
83
+ },
84
+
85
+ computed: {
86
+ selectClusterOptions() {
87
+ return this.clusters
88
+ .filter(
89
+ (cluster) =>
90
+ cluster.status.phase === "Connected" ||
91
+ cluster.status.phase === "PrivateConnected"
92
+ )
93
+ .map((cluster) => {
94
+ return {
95
+ name: cluster.spec.name,
96
+ displayName: cluster.spec.displayName,
97
+ provider: cluster.spec.provider,
98
+ uid: cluster.spec.uid,
99
+ location: cluster.spec.location,
100
+ };
101
+ });
102
+ },
103
+ },
104
+
105
+ methods: {
106
+ async checkStatus(clusterName) {
107
+ try {
108
+ await this.$axios.get(
109
+ `/clusters/${this.username}/${clusterName}/status`
110
+ );
111
+ return true;
112
+ } catch (err) {
113
+ return false;
114
+ }
115
+ },
116
+ async getClusters() {
117
+ if (this.username) {
118
+ const url = `/clusters/${this.username}`;
119
+
120
+ try {
121
+ const resp = await this.$axios.get(url);
122
+ this.clusters = (resp.data && resp.data.items) || [];
123
+
124
+ // preselect the cluster
125
+ const selectedCluster = this.clusters.find(
126
+ (cluster) => cluster.spec.name === this.$route.params.cluster
127
+ );
128
+ this.selectedCluster = {
129
+ name: selectedCluster.spec.name,
130
+ displayName: selectedCluster.spec.displayName,
131
+ provider: selectedCluster.spec.provider,
132
+ uid: selectedCluster.spec.uid,
133
+ location: selectedCluster.spec.location,
134
+ };
135
+ } catch (e) {
136
+ console.log(e);
137
+ }
138
+ }
139
+ },
140
+
141
+ getProviderIcon(provider) {
142
+ return this.imagePath[provider] || this.imagePath["default"];
143
+ },
144
+ },
145
+
146
+ created() {
147
+ this.getClusters();
148
+ },
149
+
150
+ watch: {
151
+ value: {
152
+ deep: true,
153
+ immediate: true,
154
+ handler(n) {
155
+ this.selectedCluster = n;
156
+ },
157
+ },
158
+ selectClusterOptions: {
159
+ deep: true,
160
+ immediate: true,
161
+ async handler(list) {
162
+ this.options = [];
163
+ if (list) {
164
+ list.forEach(async (item) => {
165
+ const resp = await this.checkStatus(item.name);
166
+ if (resp) this.options.push(item);
167
+ });
168
+ }
169
+ },
170
+ },
171
+ },
172
+ };
173
+ </script>
package/vue-components/v3/sidebar/ClusterSwitcher.vue ADDED
@@ -0,0 +1,173 @@
1
+ <template>
2
+ <div class="is-cluster-logo" v-if="sidebarCollapsed">
3
+ <img
4
+ width="40"
5
+ :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
6
+ alt=""
7
+ />
8
+ </div>
9
+ <multiselect
10
+ v-else
11
+ v-model="selectedCluster"
12
+ placeholder="Selected Cluster"
13
+ label="name"
14
+ track-by="uid"
15
+ :options="options"
16
+ :allow-empty="false"
17
+ deselectLabel=""
18
+ selectLabel=""
19
+ selectedLabel=""
20
+ >
21
+ <template slot="singleLabel" slot-scope="props">
22
+ <div class="is-flex is-align-items-center">
23
+ <img
24
+ :src="getProviderIcon(props.option.provider)"
25
+ alt="No cluster selected"
26
+ /><span
27
+ ><span>{{ props.option.displayName }}</span></span
28
+ >
29
+ </div>
30
+ </template>
31
+ <template slot="option" slot-scope="props">
32
+ <div class="is-flex is-align-items-center">
33
+ <img
34
+ class="mr-15"
35
+ :src="getProviderIcon(props.option.provider)"
36
+ alt="No cluster selected"
37
+ />
38
+ <div>
39
+ <p>{{ props.option.displayName }}</p>
40
+ <p class="location">{{ props.option.location }}</p>
41
+ </div>
42
+ </div>
43
+ </template>
44
+ </multiselect>
45
+ </template>
46
+
47
+ <script>
48
+ import { defineComponent, defineAsyncComponent } from "vue";
49
+ export default defineComponent({
50
+ props: {
51
+ sidebarCollapsed: {
52
+ type: Boolean,
53
+ default: false,
54
+ },
55
+ mouseHover: {
56
+ type: Boolean,
57
+ default: false,
58
+ },
59
+ username: {
60
+ type: String,
61
+ default: "",
62
+ },
63
+ imagePath: {
64
+ type: Object,
65
+ default: () => ({}),
66
+ },
67
+ value: {
68
+ type: Object,
69
+ default: () => ({}),
70
+ },
71
+ },
72
+
73
+ components: {
74
+ Multiselect: () => import("vue-multiselect"),
75
+ },
76
+
77
+ data() {
78
+ return {
79
+ selectedCluster: null,
80
+ clusters: [],
81
+ options: [],
82
+ };
83
+ },
84
+
85
+ computed: {
86
+ selectClusterOptions() {
87
+ return this.clusters
88
+ .filter(
89
+ (cluster) =>
90
+ cluster.status.phase === "Connected" ||
91
+ cluster.status.phase === "PrivateConnected"
92
+ )
93
+ .map((cluster) => {
94
+ return {
95
+ name: cluster.spec.name,
96
+ displayName: cluster.spec.displayName,
97
+ provider: cluster.spec.provider,
98
+ uid: cluster.spec.uid,
99
+ location: cluster.spec.location,
100
+ };
101
+ });
102
+ },
103
+ },
104
+
105
+ methods: {
106
+ async checkStatus(clusterName) {
107
+ try {
108
+ await this.$axios.get(
109
+ `/clusters/${this.username}/${clusterName}/status`
110
+ );
111
+ return true;
112
+ } catch (err) {
113
+ return false;
114
+ }
115
+ },
116
+ async getClusters() {
117
+ if (this.username) {
118
+ const url = `/clusters/${this.username}`;
119
+
120
+ try {
121
+ const resp = await this.$axios.get(url);
122
+ this.clusters = (resp.data && resp.data.items) || [];
123
+
124
+ // preselect the cluster
125
+ const selectedCluster = this.clusters.find(
126
+ (cluster) => cluster.spec.name === this.$route.params.cluster
127
+ );
128
+ this.selectedCluster = {
129
+ name: selectedCluster.spec.name,
130
+ displayName: selectedCluster.spec.displayName,
131
+ provider: selectedCluster.spec.provider,
132
+ uid: selectedCluster.spec.uid,
133
+ location: selectedCluster.spec.location,
134
+ };
135
+ } catch (e) {
136
+ console.log(e);
137
+ }
138
+ }
139
+ },
140
+
141
+ getProviderIcon(provider) {
142
+ return this.imagePath[provider] || this.imagePath["default"];
143
+ },
144
+ },
145
+
146
+ created() {
147
+ this.getClusters();
148
+ },
149
+
150
+ watch: {
151
+ value: {
152
+ deep: true,
153
+ immediate: true,
154
+ handler(n) {
155
+ this.selectedCluster = n;
156
+ },
157
+ },
158
+ selectClusterOptions: {
159
+ deep: true,
160
+ immediate: true,
161
+ async handler(list) {
162
+ this.options = [];
163
+ if (list) {
164
+ list.forEach(async (item) => {
165
+ const resp = await this.checkStatus(item.name);
166
+ if (resp) this.options.push(item);
167
+ });
168
+ }
169
+ },
170
+ },
171
+ },
172
+ });
173
+ </script>