Configuration tab

connect_ext_ppr/static/deployment-details.css

@@ -17,6 +17,92 @@
   color: #212121;
 }
 
+/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cChip.vue?vue&type=style&index=0&id=cf32a144&lang=stylus& ***!
+  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.c-chip {
+  --c-chip-color: 66, 66, 66;
+  --c-chip-text-color: var(--c-chip-color);
+  --c-chip-icon-color: var(--c-chip-color);
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  box-sizing: border-box;
+  height: 24px;
+  padding-right: 4px;
+  padding-left: 8px;
+  border-radius: 12px;
+  vertical-align: middle;
+}
+.c-chip__text {
+  overflow: hidden;
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: normal;
+  color: rgb(var(--c-chip-text-color));
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-left: 4px;
+  margin-right: 8px;
+}
+.c-chip__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.c-chip__icon.c-icon,
+.c-chip__icon.v-icon {
+  color: rgb(var(--c-chip-icon-color));
+}
+.c-chip__close-icon {
+  margin: 0;
+  color: rgb(var(--c-chip-text-color)) !important;
+  width: 14px;
+  height: 14px;
+}
+.c-chip__close-icon:hover {
+  background-color: rgba(var(--c-chip-icon-color),0.15);
+  border-radius: 50%;
+}
+.c-chip_small {
+  height: 16px;
+  padding-left: 4px;
+  padding-right: 4px;
+  border-radius: 8px;
+}
+.c-chip_small .c-chip__text {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 12px;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.c-chip_small .c-chip__icon {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+.c-chip_small .c-chip__close-icon {
+  width: 10px;
+  height: 10px;
+}
+.c-chip_solid {
+  background-color: rgb(var(--c-chip-color));
+  --c-chip-text-color: 255, 255, 255;
+  --c-chip-icon-color: 255, 255, 255;
+}
+.c-chip_outline {
+  border: 1px solid rgb(var(--c-chip-color));
+}
+.c-chip_pale {
+  background-color: rgba(var(--c-chip-color),0.1);
+}
+.c-chip_non-rounded {
+  border-radius: 2px;
+}
+
 /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus& ***!
   \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

connect_ext_ppr/static/index.html

@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Index</title>
-<script defer src="vendors.0b82e61f94dfa88a3bd2.js"></script><script defer src="index.acad834064fd73a90d98.js"></script><link href="index.5c5477c3e81eb95e1456.css" rel="stylesheet"></head>
+<script defer src="vendors.0d63f7f73c8d9537ddb1.js"></script><script defer src="index.4902e9c6731130d1bc1b.js"></script><link href="index.5c5477c3e81eb95e1456.css" rel="stylesheet"></head>
 
 <body>
     <div id="app"></div>

connect_ext_ppr/static/settings.4553496e587cf62b3d76.js → connect_ext_ppr/static/settings.b368aeae859f31f80ef1.js

@@ -66,7 +66,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue_
   \*************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getChart: () => (/* binding */ getChart),\n/* harmony export */   getDeployment: () => (/* binding */ getDeployment),\n/* harmony export */   getDeployments: () => (/* binding */ getDeployments),\n/* harmony export */   getMarketplaces: () => (/* binding */ getMarketplaces),\n/* harmony export */   getSettings: () => (/* binding */ getSettings),\n/* harmony export */   processCheckboxes: () => (/* binding */ processCheckboxes),\n/* harmony export */   processMarketplaces: () => (/* binding */ processMarketplaces),\n/* harmony export */   processSelectedMarketplaces: () => (/* binding */ processSelectedMarketplaces),\n/* harmony export */   updateSettings: () => (/* binding */ updateSettings)\n/* harmony export */ });\n\n/*\nCopyright (c) 2023, Ingram Micro\nAll rights reserved.\n*/\n// API calls to the backend\nconst getSettings = () => fetch('/api/settings').then((response) => response.json());\n\nconst getChart = () => fetch('/api/chart').then((response) => response.json());\n\nconst getMarketplaces = () => fetch('/api/marketplaces').then((response) => response.json());\n\nconst getDeployments = () => fetch('/api/deployments').then((response) => response.json());\n\nconst getDeployment = (id) => fetch(`/api/deployments/${id}`).then((response) => response.json());\n\nconst updateSettings = (settings) => fetch('/api/settings', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify(settings),\n}).then((response) => response.json());\n\n// data processing\nconst processMarketplaces = (\n  allMarketplaces,\n  selectedMarketplaces,\n) => allMarketplaces.map((marketplace) => {\n  const checked = !!selectedMarketplaces.find(\n    (selectedMarketplace) => selectedMarketplace.id === marketplace.id,\n  );\n\n  return { ...marketplace, checked };\n});\n\nconst processSelectedMarketplaces = (\n  allMarketplaces,\n  checkboxes,\n) => checkboxes.map((checkbox) => allMarketplaces.find(\n  (marketplace) => marketplace.id === checkbox.value,\n));\n\nconst processCheckboxes = (\n  checkboxes,\n) => Array.from(checkboxes).filter(checkbox => checkbox.checked);\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getChart: () => (/* binding */ getChart),\n/* harmony export */   getDeployment: () => (/* binding */ getDeployment),\n/* harmony export */   getDeploymentConfigurations: () => (/* binding */ getDeploymentConfigurations),\n/* harmony export */   getDeployments: () => (/* binding */ getDeployments),\n/* harmony export */   getMarketplaces: () => (/* binding */ getMarketplaces),\n/* harmony export */   getSettings: () => (/* binding */ getSettings),\n/* harmony export */   processCheckboxes: () => (/* binding */ processCheckboxes),\n/* harmony export */   processMarketplaces: () => (/* binding */ processMarketplaces),\n/* harmony export */   processSelectedMarketplaces: () => (/* binding */ processSelectedMarketplaces),\n/* harmony export */   updateSettings: () => (/* binding */ updateSettings)\n/* harmony export */ });\n\n/*\nCopyright (c) 2023, Ingram Micro\nAll rights reserved.\n*/\n// API calls to the backend\nconst getSettings = () => fetch('/api/settings').then((response) => response.json());\n\nconst getChart = () => fetch('/api/chart').then((response) => response.json());\n\nconst getMarketplaces = () => fetch('/api/marketplaces').then((response) => response.json());\n\nconst getDeployments = () => fetch('/api/deployments').then((response) => response.json());\n\nconst getDeployment = (id) => fetch(`/api/deployments/${id}`).then((response) => response.json());\n\nconst getDeploymentConfigurations = (id) => fetch(`/api/deployments/${id}/configurations`).then((response) => response.json());\n\nconst updateSettings = (settings) => fetch('/api/settings', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify(settings),\n}).then((response) => response.json());\n\n// data processing\nconst processMarketplaces = (\n  allMarketplaces,\n  selectedMarketplaces,\n) => allMarketplaces.map((marketplace) => {\n  const checked = !!selectedMarketplaces.find(\n    (selectedMarketplace) => selectedMarketplace.id === marketplace.id,\n  );\n\n  return { ...marketplace, checked };\n});\n\nconst processSelectedMarketplaces = (\n  allMarketplaces,\n  checkboxes,\n) => checkboxes.map((checkbox) => allMarketplaces.find(\n  (marketplace) => marketplace.id === checkbox.value,\n));\n\nconst processCheckboxes = (\n  checkboxes,\n) => Array.from(checkboxes).filter(checkbox => checkbox.checked);\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/utils.js?");
 
 /***/ })
 

connect_ext_ppr/static/settings.html

@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Settings</title>
-<script defer src="vendors.0b82e61f94dfa88a3bd2.js"></script><script defer src="settings.4553496e587cf62b3d76.js"></script><link href="settings.228c534170f31239141d.css" rel="stylesheet"></head>
+<script defer src="vendors.0d63f7f73c8d9537ddb1.js"></script><script defer src="settings.b368aeae859f31f80ef1.js"></script><link href="settings.228c534170f31239141d.css" rel="stylesheet"></head>
 
 <body>
     <div id="loader"></div>

package.json

@@ -20,6 +20,7 @@
     "@cloudblueconnect/material-svg": "^1.0.32",
     "color-convert": "^2.0.1",
     "css-minimizer-webpack-plugin": "^4.2.2",
+    "filesize": "^10.0.7",
     "moment-timezone": "^0.5.43",
     "portal-vue": "^2.1.7",
     "ramda": "^0.29.0",

ui/src/components/ActionsMenu.vue

@@ -0,0 +1,83 @@
+<template lang="pug">
+c-menu(
+  :disabled="disabled",
+  :locator="locator",
+  :small="small",
+)
+  template(#trigger="")
+    c-button.ma-0(
+      :icon="icon",
+      :label="btnText",
+      :small="small",
+      :disabled="disabled",
+      :mode="btnMode",
+    )
+
+  .list
+    slot
+</template>
+
+
+<script>
+import {
+  googleArrowDropDownBaseline,
+  googleMoreVertBaseline,
+} from '@cloudblueconnect/material-svg/baseline';
+
+import {
+  T,
+  always,
+  cond,
+  prop,
+  propEq,
+} from 'ramda';
+
+
+import cButton, {
+  cButtonModesDict,
+} from '~components/cButton.vue';
+
+import cMenu from '~components/cMenu.vue';
+
+
+import {
+  pathAlt,
+} from '~utils';
+
+
+export default {
+  components: {
+    cButton,
+    cMenu,
+  },
+
+  props: {
+    outline: Boolean,
+    disabled: Boolean,
+    small: Boolean,
+    btnIcon: Object,
+    btnText: {
+      type: String,
+      default: '',
+    },
+
+    locator: {
+      type: String,
+      default: 'actions_menu',
+    },
+  },
+
+  data: () => ({
+    cButtonModesDict,
+  }),
+
+  computed: {
+    btnMode: pathAlt(['outline'], cButtonModesDict.outlined, cButtonModesDict.flat),
+    icon: cond([
+      [prop('btnIcon'), prop('btnIcon')],
+      [propEq(cButtonModesDict.flat, 'btnMode'), always(googleMoreVertBaseline)],
+      [T, always(googleArrowDropDownBaseline)],
+    ]),
+  },
+};
+</script>