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

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 (186) hide show
  1. package/base/utilities/_all.scss +1 -1
  2. package/base/utilities/_default.scss +41 -41
  3. package/base/utilities/_derived-variables.scss +8 -9
  4. package/base/utilities/_extended.scss +1 -1
  5. package/base/utilities/_initial-variables.scss +52 -50
  6. package/base/utilities/_mixin.scss +11 -11
  7. package/base/utilities/_typography.scss +22 -22
  8. package/base/utilities/dark-theme.scss +1 -1
  9. package/components/_ac-accordion.scss +6 -6
  10. package/components/_ac-alert-box.scss +27 -28
  11. package/components/_ac-calendar.scss +4 -4
  12. package/components/_ac-card.scss +55 -55
  13. package/components/_ac-code-highlight.scss +6 -6
  14. package/components/_ac-content-layout.scss +165 -165
  15. package/components/_ac-drag.scss +11 -11
  16. package/components/_ac-input.scss +85 -85
  17. package/components/_ac-modal.scss +8 -8
  18. package/components/_ac-multi-select.scss +751 -751
  19. package/components/_ac-options.scss +12 -13
  20. package/components/_ac-select-box.scss +5 -5
  21. package/components/_ac-table.scss +55 -55
  22. package/components/_ac-tabs.scss +36 -36
  23. package/components/_ac-tags.scss +22 -22
  24. package/components/_ac-terminal.scss +253 -253
  25. package/components/_add-card.scss +3 -3
  26. package/components/_app-drawer.scss +4 -4
  27. package/components/_basic-card.scss +108 -118
  28. package/components/_breadcumb.scss +5 -5
  29. package/components/_buttons.scss +64 -64
  30. package/components/_card-body-wrapper.scss +5 -5
  31. package/components/_dashboard-header.scss +29 -29
  32. package/components/_direct-deploy.scss +8 -8
  33. package/components/_go-to-top.scss +1 -1
  34. package/components/_image-upload.scss +3 -3
  35. package/components/_left-sidebar-menu.scss +374 -376
  36. package/components/_monaco-editor.scss +1 -1
  37. package/components/_navbar.scss +65 -65
  38. package/components/_nested-list.scss +1 -1
  39. package/components/_overview-info.scss +7 -7
  40. package/components/_overview-page.scss +4 -4
  41. package/components/_pagination.scss +110 -110
  42. package/components/_payment-card.scss +20 -20
  43. package/components/_preloader.scss +1 -1
  44. package/components/_preview-modal.scss +18 -18
  45. package/components/_pricing-table.scss +10 -10
  46. package/components/_progress-bar.scss +12 -12
  47. package/components/_subscription-card.scss +14 -14
  48. package/components/_table-of-content.scss +4 -4
  49. package/components/_tfa.scss +9 -9
  50. package/components/_widget-menu.scss +17 -17
  51. package/components/_wizard.scss +82 -82
  52. package/components/ac-toaster/_ac-toasted.scss +1 -1
  53. package/components/bbum/_activities-header.scss +1 -1
  54. package/components/bbum/_card-team.scss +12 -12
  55. package/components/bbum/_information-center.scss +13 -13
  56. package/components/bbum/_left-sidebar.scss +8 -8
  57. package/components/bbum/_mobile-desktop.scss +7 -7
  58. package/components/bbum/_post.scss +5 -5
  59. package/components/bbum/_sign-up-notification.scss +10 -10
  60. package/components/bbum/_single-post-preview.scss +21 -21
  61. package/components/bbum/_user-profile.scss +10 -10
  62. package/components/ui-builder/_ui-builder.scss +15 -15
  63. package/components/ui-builder/_vue-open-api.scss +2 -2
  64. package/layouts/_code-preview.scss +11 -11
  65. package/package.json +1 -1
  66. package/vue-components/plugins/time-convert.js +49 -0
  67. package/vue-components/text.vue +1 -0
  68. package/vue-components/types/cluster.ts +6 -0
  69. package/vue-components/types/longRunningTasks.ts +20 -0
  70. package/vue-components/types/notification.ts +6 -0
  71. package/vue-components/types/previewYaml.ts +8 -0
  72. package/vue-components/types/table.ts +54 -0
  73. package/vue-components/types/theme.ts +10 -0
  74. package/vue-components/types/user.ts +22 -0
  75. package/vue-components/v2/card/OverviewCards.vue +17 -2
  76. package/vue-components/v2/editor/ResourceKeyValueEditor.vue +21 -21
  77. package/vue-components/v2/icons/Ellipsis.vue +2 -1
  78. package/vue-components/v2/modal/Modal.vue +0 -5
  79. package/vue-components/v2/navbar/Appdrawer.vue +37 -12
  80. package/vue-components/v2/navbar/Navbar.vue +3 -3
  81. package/vue-components/v2/navbar/NavbarItem.vue +3 -1
  82. package/vue-components/v2/navbar/NavbarItemContent.vue +1 -1
  83. package/vue-components/v2/navbar/User.vue +5 -22
  84. package/vue-components/v2/pagination/Pagination.vue +65 -0
  85. package/vue-components/v2/sidebar/SidebarItem.vue +10 -7
  86. package/vue-components/v3/accordion/Accordion.vue +151 -0
  87. package/vue-components/v3/alert/Alert.vue +238 -0
  88. package/vue-components/v3/alert/Toast.vue +79 -0
  89. package/vue-components/v3/banner/Banner.vue +10 -0
  90. package/vue-components/v3/breadcrumbs/Breadcrumb.vue +104 -0
  91. package/vue-components/v3/button/Button.vue +831 -58
  92. package/vue-components/v3/button/Buttons.vue +6 -0
  93. package/vue-components/v3/button/DownloadBtn.vue +31 -0
  94. package/vue-components/v3/cards/Card.vue +32 -0
  95. package/vue-components/v3/cards/CardContent.vue +7 -0
  96. package/vue-components/v3/cards/CardHeader.vue +14 -0
  97. package/vue-components/v3/cards/Cards.vue +7 -0
  98. package/vue-components/v3/cards/Cluster.vue +150 -0
  99. package/vue-components/v3/cards/Counter.vue +27 -0
  100. package/vue-components/v3/cards/FeatureCard.vue +40 -0
  101. package/vue-components/v3/cards/FeatureCards.vue +6 -0
  102. package/vue-components/v3/cards/InfoCard.vue +248 -0
  103. package/vue-components/v3/cards/Monitoring.vue +94 -0
  104. package/vue-components/v3/cards/OverviewCard.vue +24 -0
  105. package/vue-components/v3/cards/OverviewCards.vue +31 -0
  106. package/vue-components/v3/cards/Payment.vue +62 -0
  107. package/vue-components/v3/cards/Vendor.vue +23 -0
  108. package/vue-components/v3/content/ContentHeader.vue +39 -30
  109. package/vue-components/v3/content/ContentLayout.vue +20 -0
  110. package/vue-components/v3/content/ContentTable.vue +37 -61
  111. package/vue-components/v3/dropdown/DropdownDivider.vue +2 -0
  112. package/vue-components/v3/dropdown/DropdownItem.vue +2 -0
  113. package/vue-components/v3/dropdown/DropdownMenu.vue +85 -91
  114. package/vue-components/v3/editor/Editor.vue +100 -113
  115. package/vue-components/v3/editor/FilteredFileEditor.vue +124 -127
  116. package/vue-components/v3/editor/ResourceKeyValueEditor.vue +70 -94
  117. package/vue-components/v3/footer/FooterArea.vue +34 -0
  118. package/vue-components/v3/footer/FooterItem.vue +29 -0
  119. package/vue-components/v3/footer/FooterItems.vue +15 -0
  120. package/vue-components/v3/footer/Info.vue +23 -0
  121. package/vue-components/v3/footer/Status.vue +42 -0
  122. package/vue-components/v3/footer/Usage.vue +44 -0
  123. package/vue-components/v3/form/Form.vue +24 -33
  124. package/vue-components/v3/form/FormFooterControl.vue +7 -0
  125. package/vue-components/v3/form/FormFooterControls.vue +7 -0
  126. package/vue-components/v3/form-fields/AcSingleInput.vue +520 -0
  127. package/vue-components/v3/form-fields/Input.vue +19 -14
  128. package/vue-components/v3/header/Header.vue +117 -24
  129. package/vue-components/v3/header/HeaderItem.vue +18 -0
  130. package/vue-components/v3/header/HeaderItems.vue +4 -0
  131. package/vue-components/v3/icons/Ellipsis.vue +2 -0
  132. package/vue-components/v3/loaders/ResourceLoader.vue +4 -12
  133. package/vue-components/v3/loaders/SidebarLoader.vue +4 -12
  134. package/vue-components/v3/long-running-tasks/LongRunningTaskItem.vue +17 -15
  135. package/vue-components/v3/modal/Modal.vue +292 -96
  136. package/vue-components/v3/modals/DeleteConfirmationModal.vue +37 -50
  137. package/vue-components/v3/modals/JsonShowModal.vue +62 -68
  138. package/vue-components/v3/modals/LongRunningTasksModal.vue +145 -143
  139. package/vue-components/v3/navbar/Appdrawer.vue +196 -51
  140. package/vue-components/v3/navbar/Navbar.vue +296 -0
  141. package/vue-components/v3/navbar/NavbarItem.vue +81 -0
  142. package/vue-components/v3/navbar/NavbarItemContent.vue +284 -0
  143. package/vue-components/v3/navbar/Notification.vue +179 -0
  144. package/vue-components/v3/navbar/ThemeMode.vue +128 -112
  145. package/vue-components/v3/navbar/User.vue +383 -268
  146. package/vue-components/v3/notification/AlertBox.vue +39 -42
  147. package/vue-components/v3/notification/Notification.vue +49 -43
  148. package/vue-components/v3/notification/NotificationItem.vue +51 -19
  149. package/vue-components/v3/option-dots/Options.vue +188 -0
  150. package/vue-components/v3/pagination/Pagination.vue +203 -99
  151. package/vue-components/v3/preloader/Preloader.vue +23 -0
  152. package/vue-components/v3/searchbars/SearchBar.vue +51 -34
  153. package/vue-components/v3/sidebar/AccentColorPicker.vue +97 -0
  154. package/vue-components/v3/sidebar/ClusterSwitcher.vue +834 -81
  155. package/vue-components/v3/sidebar/Sidebar.vue +271 -0
  156. package/vue-components/v3/sidebar/SidebarBody.vue +7 -0
  157. package/vue-components/v3/sidebar/SidebarFooter.vue +80 -0
  158. package/vue-components/v3/sidebar/SidebarHeader.vue +124 -0
  159. package/vue-components/v3/sidebar/SidebarItem.vue +62 -0
  160. package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue +101 -104
  161. package/vue-components/v3/sidebar/SidebarMenuList.vue +9 -0
  162. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue +128 -0
  163. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue +29 -0
  164. package/vue-components/v3/sidebar/sidebar-tabs/TabsContent.vue +99 -0
  165. package/vue-components/v3/tab/TabItem.vue +10 -12
  166. package/vue-components/v3/tab/Tabs.vue +9 -0
  167. package/vue-components/v3/tab/TabsBody.vue +7 -0
  168. package/vue-components/v3/table/EmptyTableInfo.vue +8 -0
  169. package/vue-components/v3/table/FakeTableCell.vue +22 -31
  170. package/vue-components/v3/table/InfoTable.vue +85 -59
  171. package/vue-components/v3/table/MultiInfoTable.vue +72 -95
  172. package/vue-components/v3/table/Table.vue +582 -151
  173. package/vue-components/v3/table/TableCell.vue +20 -23
  174. package/vue-components/v3/table/TableContainer.vue +50 -28
  175. package/vue-components/v3/table/TableRow.vue +63 -85
  176. package/vue-components/v3/table/table-cell/ArrayCell.vue +67 -79
  177. package/vue-components/v3/table/table-cell/CellValue.vue +97 -103
  178. package/vue-components/v3/table/table-cell/GenericCell.vue +43 -42
  179. package/vue-components/v3/table/table-cell/ObjectCell.vue +67 -79
  180. package/vue-components/v3/table/table-cell/ValueWithModal.vue +22 -31
  181. package/vue-components/v3/tabs/EditorTabs.vue +18 -24
  182. package/vue-components/v3/tag/Tag.vue +15 -12
  183. package/vue-components/v3/tag/Tags.vue +7 -0
  184. package/vue-components/v3/terminal/LongRunningTaskTerminal.vue +26 -23
  185. package/mixins/stickyContent.js +0 -141
  186. 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
- }