@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.10

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 (200) hide show
  1. package/base/_video-player.scss +65 -0
  2. package/base/utilities/_all.scss +6 -5
  3. package/base/utilities/_colors.scss +408 -0
  4. package/base/utilities/_customize-bulma.scss +23 -27
  5. package/base/utilities/_extended.scss +3 -2
  6. package/base/utilities/{_default.scss → _global.scss} +185 -331
  7. package/base/utilities/_layouts.scss +157 -0
  8. package/base/utilities/_mixin.scss +11 -11
  9. package/base/utilities/_spacing.scss +96 -0
  10. package/base/utilities/_typography.scss +56 -24
  11. package/base/utilities/dark-theme.scss +1 -1
  12. package/components/_ac-accordion.scss +117 -117
  13. package/components/_ac-alert-box.scss +205 -263
  14. package/components/_ac-calendar.scss +4 -4
  15. package/components/_ac-card.scss +0 -597
  16. package/components/_ac-code-highlight.scss +6 -6
  17. package/components/_ac-content-layout.scss +165 -165
  18. package/components/_ac-drag.scss +11 -11
  19. package/components/_ac-input.scss +477 -452
  20. package/components/_ac-modal.scss +212 -212
  21. package/components/_ac-multi-select.scss +780 -751
  22. package/components/_ac-options.scss +122 -123
  23. package/components/_ac-select-box.scss +5 -5
  24. package/components/_ac-table.scss +503 -502
  25. package/components/_ac-tabs.scss +39 -38
  26. package/components/_ac-tags.scss +116 -116
  27. package/components/_ac-terminal.scss +95 -51
  28. package/components/_add-card.scss +3 -3
  29. package/components/_all.scss +29 -26
  30. package/components/_app-drawer.scss +0 -134
  31. package/components/_breadcumb.scss +0 -71
  32. package/components/_buttons.scss +779 -779
  33. package/components/_card-body-wrapper.scss +5 -5
  34. package/components/_dashboard-header.scss +0 -115
  35. package/components/_direct-deploy.scss +8 -8
  36. package/components/_go-to-top.scss +1 -1
  37. package/components/_image-upload.scss +5 -5
  38. package/components/_left-sidebar-menu.scss +448 -579
  39. package/components/_monaco-editor.scss +1 -1
  40. package/components/_navbar.scss +786 -752
  41. package/components/_nested-list.scss +1 -1
  42. package/components/_overview-info.scss +7 -7
  43. package/components/_overview-page.scss +4 -4
  44. package/components/_pagination.scss +106 -124
  45. package/components/_payment-card.scss +21 -21
  46. package/components/_preloader.scss +1 -1
  47. package/components/_preview-modal.scss +18 -18
  48. package/components/_pricing-table.scss +10 -10
  49. package/components/_progress-bar.scss +12 -12
  50. package/components/_subscription-card.scss +14 -14
  51. package/components/_table-of-content.scss +4 -4
  52. package/components/_tfa.scss +9 -9
  53. package/components/_widget-menu.scss +247 -247
  54. package/components/_wizard.scss +557 -559
  55. package/components/ac-toaster/_ac-toasted.scss +7 -12
  56. package/components/bbum/_activities-header.scss +1 -1
  57. package/components/bbum/_card-team.scss +12 -12
  58. package/components/bbum/_information-center.scss +13 -13
  59. package/components/bbum/_left-sidebar.scss +8 -8
  60. package/components/bbum/_mobile-desktop.scss +7 -7
  61. package/components/bbum/_post.scss +5 -5
  62. package/components/bbum/_sign-up-notification.scss +10 -10
  63. package/components/bbum/_single-post-preview.scss +21 -21
  64. package/components/bbum/_user-profile.scss +10 -10
  65. package/components/ui-builder/_ui-builder.scss +15 -15
  66. package/components/ui-builder/_vue-open-api.scss +515 -2
  67. package/layouts/_code-preview.scss +11 -11
  68. package/main.scss +26 -10
  69. package/package.json +1 -1
  70. package/plugins/theme.js +11 -9
  71. package/plugins/vue-toaster.js +1 -1
  72. package/vue-components/plugins/time-convert.js +49 -0
  73. package/vue-components/text.vue +1 -0
  74. package/vue-components/types/cluster.ts +6 -0
  75. package/vue-components/types/importFlow.ts +16 -0
  76. package/vue-components/types/longRunningTasks.ts +20 -0
  77. package/vue-components/types/notification.ts +6 -0
  78. package/vue-components/types/previewYaml.ts +8 -0
  79. package/vue-components/types/table.ts +54 -0
  80. package/vue-components/types/theme.ts +10 -0
  81. package/vue-components/types/user.ts +22 -0
  82. package/vue-components/v2/card/Card.vue +1 -1
  83. package/vue-components/v2/card/OverviewCards.vue +17 -2
  84. package/vue-components/v2/editor/FilteredFileEditor.vue +2 -2
  85. package/vue-components/v2/editor/ResourceKeyValueEditor.vue +21 -21
  86. package/vue-components/v2/icons/Ellipsis.vue +2 -1
  87. package/vue-components/v2/modal/Modal.vue +0 -5
  88. package/vue-components/v2/navbar/Appdrawer.vue +37 -12
  89. package/vue-components/v2/navbar/Navbar.vue +3 -3
  90. package/vue-components/v2/navbar/NavbarItem.vue +3 -1
  91. package/vue-components/v2/navbar/NavbarItemContent.vue +1 -1
  92. package/vue-components/v2/navbar/User.vue +5 -22
  93. package/vue-components/v2/pagination/Pagination.vue +66 -0
  94. package/vue-components/v2/sidebar/SidebarItem.vue +10 -7
  95. package/vue-components/v3/accordion/Accordion.vue +151 -0
  96. package/vue-components/v3/alert/Alert.vue +238 -0
  97. package/vue-components/v3/alert/Toast.vue +79 -0
  98. package/vue-components/v3/banner/Banner.vue +10 -0
  99. package/vue-components/v3/breadcrumbs/Breadcrumb.vue +104 -0
  100. package/vue-components/v3/button/Button.vue +839 -58
  101. package/vue-components/v3/button/Buttons.vue +6 -0
  102. package/vue-components/v3/button/DownloadBtn.vue +31 -0
  103. package/vue-components/v3/cards/Card.vue +32 -0
  104. package/vue-components/v3/cards/CardContent.vue +7 -0
  105. package/vue-components/v3/cards/CardHeader.vue +14 -0
  106. package/vue-components/v3/cards/Cards.vue +7 -0
  107. package/vue-components/v3/cards/Cluster.vue +149 -0
  108. package/vue-components/v3/cards/Counter.vue +39 -0
  109. package/vue-components/v3/cards/FeatureCard.vue +71 -0
  110. package/vue-components/v3/cards/FeatureCards.vue +6 -0
  111. package/vue-components/v3/cards/InfoCard.vue +243 -0
  112. package/vue-components/v3/cards/Monitoring.vue +94 -0
  113. package/vue-components/v3/cards/OverviewCard.vue +24 -0
  114. package/vue-components/v3/cards/OverviewCards.vue +31 -0
  115. package/vue-components/v3/cards/Payment.vue +62 -0
  116. package/vue-components/v3/cards/Vendor.vue +85 -0
  117. package/vue-components/v3/content/ContentHeader.vue +39 -30
  118. package/vue-components/v3/content/ContentLayout.vue +20 -0
  119. package/vue-components/v3/content/ContentTable.vue +43 -62
  120. package/vue-components/v3/dropdown/DropdownDivider.vue +2 -0
  121. package/vue-components/v3/dropdown/DropdownItem.vue +2 -0
  122. package/vue-components/v3/dropdown/DropdownMenu.vue +85 -91
  123. package/vue-components/v3/editor/Editor.vue +100 -113
  124. package/vue-components/v3/editor/FilteredFileEditor.vue +317 -127
  125. package/vue-components/v3/editor/ResourceKeyValueEditor.vue +70 -94
  126. package/vue-components/v3/footer/FooterArea.vue +34 -0
  127. package/vue-components/v3/footer/FooterItem.vue +32 -0
  128. package/vue-components/v3/footer/FooterItems.vue +15 -0
  129. package/vue-components/v3/footer/Info.vue +23 -0
  130. package/vue-components/v3/footer/Status.vue +42 -0
  131. package/vue-components/v3/footer/Usage.vue +44 -0
  132. package/vue-components/v3/form/Form.vue +24 -33
  133. package/vue-components/v3/form/FormFooterControl.vue +7 -0
  134. package/vue-components/v3/form/FormFooterControls.vue +7 -0
  135. package/vue-components/v3/form-fields/AcSingleInput.vue +528 -0
  136. package/vue-components/v3/form-fields/Input.vue +19 -14
  137. package/vue-components/v3/header/Header.vue +119 -25
  138. package/vue-components/v3/header/HeaderItem.vue +18 -0
  139. package/vue-components/v3/header/HeaderItems.vue +4 -0
  140. package/vue-components/v3/icons/Ellipsis.vue +2 -0
  141. package/vue-components/v3/loaders/InfoCardLoader.vue +65 -0
  142. package/vue-components/v3/loaders/ResourceLoader.vue +4 -12
  143. package/vue-components/v3/loaders/SidebarLoader.vue +4 -12
  144. package/vue-components/v3/long-running-tasks/LongRunningTaskItem.vue +17 -15
  145. package/vue-components/v3/modal/Modal.vue +292 -96
  146. package/vue-components/v3/modals/DeleteConfirmationModal.vue +37 -50
  147. package/vue-components/v3/modals/JsonShowModal.vue +62 -68
  148. package/vue-components/v3/modals/LongRunningTasksModal.vue +145 -143
  149. package/vue-components/v3/navbar/Appdrawer.vue +196 -51
  150. package/vue-components/v3/navbar/Navbar.vue +298 -0
  151. package/vue-components/v3/navbar/NavbarItem.vue +81 -0
  152. package/vue-components/v3/navbar/NavbarItemContent.vue +284 -0
  153. package/vue-components/v3/navbar/Notification.vue +179 -0
  154. package/vue-components/v3/navbar/ThemeMode.vue +128 -112
  155. package/vue-components/v3/navbar/User.vue +383 -268
  156. package/vue-components/v3/notification/AlertBox.vue +41 -44
  157. package/vue-components/v3/notification/Notification.vue +49 -43
  158. package/vue-components/v3/notification/NotificationItem.vue +51 -19
  159. package/vue-components/v3/option-dots/Options.vue +188 -0
  160. package/vue-components/v3/pagination/Pagination.vue +203 -99
  161. package/vue-components/v3/preloader/Preloader.vue +23 -0
  162. package/vue-components/v3/searchbars/SearchBar.vue +59 -34
  163. package/vue-components/v3/sidebar/AccentColorPicker.vue +97 -0
  164. package/vue-components/v3/sidebar/ClusterSwitcher.vue +835 -81
  165. package/vue-components/v3/sidebar/Sidebar.vue +267 -0
  166. package/vue-components/v3/sidebar/SidebarBody.vue +7 -0
  167. package/vue-components/v3/sidebar/SidebarFooter.vue +80 -0
  168. package/vue-components/v3/sidebar/SidebarHeader.vue +124 -0
  169. package/vue-components/v3/sidebar/SidebarItem.vue +62 -0
  170. package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue +101 -104
  171. package/vue-components/v3/sidebar/SidebarMenuList.vue +9 -0
  172. package/vue-components/v3/sidebar/Steps.vue +152 -0
  173. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue +128 -0
  174. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue +29 -0
  175. package/vue-components/v3/sidebar/sidebar-tabs/TabsContent.vue +99 -0
  176. package/vue-components/v3/tab/TabItem.vue +10 -12
  177. package/vue-components/v3/tab/Tabs.vue +9 -0
  178. package/vue-components/v3/tab/TabsBody.vue +7 -0
  179. package/vue-components/v3/table/EmptyTableInfo.vue +8 -0
  180. package/vue-components/v3/table/FakeTableCell.vue +22 -31
  181. package/vue-components/v3/table/InfoTable.vue +89 -61
  182. package/vue-components/v3/table/MultiInfoTable.vue +72 -95
  183. package/vue-components/v3/table/Table.vue +589 -151
  184. package/vue-components/v3/table/TableCell.vue +20 -23
  185. package/vue-components/v3/table/TableContainer.vue +50 -28
  186. package/vue-components/v3/table/TableRow.vue +63 -85
  187. package/vue-components/v3/table/table-cell/ArrayCell.vue +67 -79
  188. package/vue-components/v3/table/table-cell/CellValue.vue +97 -103
  189. package/vue-components/v3/table/table-cell/GenericCell.vue +43 -42
  190. package/vue-components/v3/table/table-cell/ObjectCell.vue +67 -79
  191. package/vue-components/v3/table/table-cell/ValueWithModal.vue +22 -31
  192. package/vue-components/v3/tabs/EditorTabs.vue +18 -24
  193. package/vue-components/v3/tag/Tag.vue +15 -12
  194. package/vue-components/v3/tag/Tags.vue +7 -0
  195. package/vue-components/v3/terminal/LongRunningTaskTerminal.vue +26 -23
  196. package/base/utilities/_derived-variables.scss +0 -25
  197. package/base/utilities/_initial-variables.scss +0 -215
  198. package/components/_basic-card.scss +0 -128
  199. package/mixins/stickyContent.js +0 -141
  200. package/plugins/caching.ts +0 -243
@@ -1,243 +0,0 @@
1
- import { AxiosRequestConfig, AxiosResponse } from "axios";
2
- import md5 from "crypto-js/md5";
3
- import stringify from "fast-json-stable-stringify";
4
-
5
- const resourceListApiRgx =
6
- /^\/clusters\/([^/]+)\/([^/]+)\/proxy\/([^/]+)\/([^/]+)(\/namespaces\/([^/?]+))?\/([^/?]+)(.*)$/;
7
- const usermenuUpdateApiRgx =
8
- /^\/clusters\/([^/]+)\/([^/]+)\/proxy\/meta\.k8s\.appscode\.com\/([^/]+)\/usermenus\/cluster$/;
9
-
10
- function getRequestInterceptor(config: AxiosRequestConfig) {
11
- // get call
12
- const { url, _recurringCall, params } = config;
13
- const matchListApi = url?.match(resourceListApiRgx);
14
- if (matchListApi) {
15
- // url matches list / render api call
16
- const [, user, cluster, group, version, , namespace, resource] =
17
- matchListApi;
18
-
19
- const suffix = `${user}.${cluster}.${group}.${version}.${resource}${
20
- namespace ? ".ns." + namespace : ""
21
- }${params ? ".q." + md5(stringify(params)).toString() : ""}`;
22
-
23
- if (_recurringCall) {
24
- // always send latest date time as ctag
25
- return new Date().getTime();
26
- } else {
27
- // read ctag from local storage if exists
28
- const storageKey = `ctag.${suffix}`;
29
- // read local storage ctag
30
- return localStorage.getItem(storageKey);
31
- }
32
- }
33
- }
34
-
35
- function getResponseInterceptor(resp: AxiosResponse) {
36
- // get call
37
- const { config, headers } = resp;
38
- const { url, _recurringCall, params } = config;
39
-
40
- // queryParams without ctag
41
- const queryParamsWithoutCtag = Object.keys(params).reduce((ob, key) => {
42
- if (key !== "ctag") return { ...ob, [key]: params[key] };
43
- else return { ...ob };
44
- }, {});
45
-
46
- const matchListApi = url?.match(resourceListApiRgx);
47
- if (matchListApi) {
48
- // url matches list / render api call
49
- // window.console.log(matchListApi)
50
- const [, user, cluster, group, version, , namespace, resource] =
51
- matchListApi;
52
-
53
- const suffix = `${user}.${cluster}.${group}.${version}.${resource}${
54
- namespace ? ".ns." + namespace : ""
55
- }${
56
- params ? ".q." + md5(stringify(queryParamsWithoutCtag)).toString() : ""
57
- }`;
58
-
59
- const storageKey = `etag.${suffix}`;
60
- // local storage etag
61
- const eTag = localStorage.getItem(storageKey);
62
- // etag in header
63
- const headerEtag = headers?.["etag"];
64
-
65
- // window.console.log({ eTag, headerEtag, _recurringCall, url });
66
-
67
- if (_recurringCall) {
68
- // for recurring api call
69
- if (headerEtag && headerEtag !== eTag) {
70
- // etag missmatch
71
- if (params.ctag) {
72
- // save request query parameter ctag into local storage
73
- localStorage.setItem(`ctag.${suffix}`, params.ctag);
74
- }
75
- // update store etag with latest header etag
76
- localStorage.setItem(`etag.${suffix}`, headerEtag);
77
-
78
- if (namespace) {
79
- // for namespaced list calls if etag missmatch happens
80
- // update the ctag storage for all namespaces
81
- // this will force the all namespaced list call to ignore disk cache
82
- localStorage.setItem(
83
- `etag.${user}.${cluster}.${group}.${version}.${resource}`,
84
- new Date().getTime().toString()
85
- );
86
- }
87
- }
88
- } else {
89
- // not recurring api call
90
- if (eTag !== headerEtag && headerEtag) {
91
- // if the etag missmatches, then the data has changed
92
- // update local etag
93
- localStorage.setItem(storageKey, headerEtag);
94
- }
95
- }
96
- }
97
- }
98
-
99
- function putResponseInterceptor(resp: AxiosResponse) {
100
- const { config } = resp;
101
- const { url } = config;
102
- const matchUsermenuUpdate = url?.match(usermenuUpdateApiRgx);
103
- if (matchUsermenuUpdate) {
104
- // user menu update api is called
105
- const [, user, cluster, version] = matchUsermenuUpdate;
106
-
107
- // calculate the local storage key
108
- const renderStorageKey = `ctag.${user}.${cluster}.meta.k8s.appscode.com.${version}.rendermenus.q.${md5(
109
- stringify({
110
- apiVersion: `meta.k8s.appscode.com/${version}`,
111
- kind: "RenderMenu",
112
- request: {
113
- menu: "cluster",
114
- mode: "Accordion",
115
- },
116
- })
117
- ).toString()}`;
118
- const availableMenuStorageKey = `ctag.${user}.${cluster}.meta.k8s.appscode.com.${version}.usermenus`;
119
-
120
- // set new ctag to that storage key
121
- // next time render menu is called, cached data won't be used
122
- localStorage.setItem(renderStorageKey, new Date().getTime().toString());
123
- // for all available menus api
124
- localStorage.setItem(
125
- availableMenuStorageKey,
126
- new Date().getTime().toString()
127
- );
128
- }
129
- }
130
-
131
- export function handleCacheFromYamls(
132
- yamls: Array<{
133
- apiVersion: string;
134
- kind: string;
135
- metadata: { name: string; namespace: string };
136
- }>,
137
- user: string,
138
- cluster: string,
139
- gkToGvrMap: Record<string, string>
140
- ) {
141
- return function () {
142
- yamls.forEach((yaml) => {
143
- const { apiVersion, kind, metadata } = yaml;
144
- const { namespace } = metadata || {};
145
- const apiVersionMatch = apiVersion.match(/^(([^/]+)\/)?([^/]+)$/);
146
- if (apiVersionMatch) {
147
- // separate the group and version
148
- const [, , group] = apiVersionMatch;
149
- const groupKind = `${group || "core"}/${kind}`;
150
- const gvr = (gkToGvrMap && gkToGvrMap[groupKind]) || "";
151
-
152
- const storageKeyPrefix = `ctag.${user}.${cluster}.${gvr.replaceAll(
153
- "/",
154
- "."
155
- )}`;
156
-
157
- // clear list cache for all namespaces
158
- localStorage.setItem(
159
- `${storageKeyPrefix}.q.${md5(
160
- stringify({ convertToTable: true })
161
- ).toString()}`,
162
- new Date().getTime().toString()
163
- );
164
- // clear list cache for specific namespace
165
- localStorage.setItem(
166
- `${storageKeyPrefix}.ns.${namespace || "default"}.q.${md5(
167
- stringify({ convertToTable: true })
168
- ).toString()}`,
169
- new Date().getTime().toString()
170
- );
171
-
172
- // clear for genericresources and resourcesummaries
173
- localStorage.setItem(
174
- `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.resourcesummaries.q.${md5(
175
- stringify({
176
- convertToTable: true,
177
- labelSelector: `k8s.io/group=${group}`,
178
- })
179
- ).toString()}`,
180
- new Date().getTime().toString()
181
- );
182
- localStorage.setItem(
183
- `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.resourcesummaries.q.${md5(
184
- stringify({
185
- convertToTable: true,
186
- labelSelector: `k8s.io/group-kind=${kind}.${group}`,
187
- })
188
- ).toString()}`,
189
- new Date().getTime().toString()
190
- );
191
- localStorage.setItem(
192
- `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.genericresources.q.${md5(
193
- stringify({
194
- convertToTable: true,
195
- labelSelector: `k8s.io/group=${group}`,
196
- })
197
- ).toString()}`,
198
- new Date().getTime().toString()
199
- );
200
- localStorage.setItem(
201
- `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.genericresources.q.${md5(
202
- stringify({
203
- convertToTable: true,
204
- labelSelector: `k8s.io/group-kind=${kind}.${group}`,
205
- })
206
- ).toString()}`,
207
- new Date().getTime().toString()
208
- );
209
- }
210
- });
211
- };
212
- }
213
-
214
- export async function requestInterceptor(config: AxiosRequestConfig) {
215
- // parse the request url
216
- const { method, params } = config;
217
-
218
- let ctag;
219
-
220
- if (method === "get") {
221
- ctag = getRequestInterceptor(config);
222
- }
223
-
224
- return {
225
- ...config,
226
- params: { ...params, ctag },
227
- };
228
- }
229
-
230
- export function responseInterceptor(resp: AxiosResponse) {
231
- const { config } = resp;
232
- // parse the request url
233
- const { method } = config;
234
-
235
- if (method === "get") {
236
- // get call
237
- getResponseInterceptor(resp);
238
- } else if (method === "put") {
239
- putResponseInterceptor(resp);
240
- }
241
-
242
- return resp;
243
- }