Skip to content

Commit

Permalink
Merge pull request #99 from arnaugiralt/feat/LITE-LITE-28305-add-requ…
Browse files Browse the repository at this point in the history
…ests-tab-in-deployment-details

LITE-28305: Add requests tab in DeploymentDetails
  • Loading branch information
arnaugiralt authored Sep 7, 2023
2 parents 2a2128c + 97add7d commit c67a6e5
Show file tree
Hide file tree
Showing 10 changed files with 306 additions and 15 deletions.

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions connect_ext_ppr/static/deployment-details.css
Original file line number Diff line number Diff line change
Expand Up @@ -471,6 +471,20 @@
margin-right: 12px;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** 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/DeploymentRequestsTab.vue?vue&type=style&index=0&id=eef306ca&lang=stylus& ***!
\******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.request-tasks-tab__status {
display: flex;
align-items: center;
}
.request-tasks-tab__dot {
margin: 0 8px;
}
.request-tasks-tab__manual {
margin-left: 8px;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** 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& ***!
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
Expand Down

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion connect_ext_ppr/static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Index</title>
<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="index.87eae4483d347d643754.js"></script><link href="index.7f54bf0dcbb9dc626487.css" rel="stylesheet"></head>
<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="index.5fdf03c1a578e43267e6.js"></script><link href="index.7f54bf0dcbb9dc626487.css" rel="stylesheet"></head>

<body>
<div id="app"></div>
Expand Down
25 changes: 19 additions & 6 deletions ui/src/components/CreateDeploymentRequestDialog/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ c-dialog(
template(#ppr="")
ppr-tab(
v-model="form.ppr",
:deployment-id="deployment?.id",
:deployment-id="localDeployment?.id",
@error="setError",
)

template(#marketplaces="")
marketplaces-tab(
v-model="form.marketplaces",
:deployment-id="deployment?.id",
:deployment-id="localDeployment?.id",
@error="setError",
)

Expand Down Expand Up @@ -100,14 +100,18 @@ export default {
props: {
value: Boolean,
deployment: {
type: Object,
default: () => null,
},
},
data: () => ({
localValue: false,
currentTab: null,
form: defaultForm(),
createdRequest: null,
deployment: null,
localDeployment: null,
errorText: '',
}),
Expand Down Expand Up @@ -225,7 +229,7 @@ export default {
async createDeploymentRequest() {
this.createdRequest = await createDeploymentRequest({
marketplaces: this.form.marketplaces,
deployment: { id: this.deployment.id },
deployment: { id: this.localDeployment.id },
ppr: { id: this.form.ppr.id },
manually: this.form.options.manual,
delegate_l2: this.form.options.delegate,
Expand All @@ -235,7 +239,9 @@ export default {
},
async fetchDeployment() {
[this.deployment] = await getDeployments({
if (this.deployment) return;
[this.localDeployment] = await getDeployments({
hubId: this.form.hub.id,
productId: this.form.product.id,
});
Expand All @@ -257,9 +263,16 @@ export default {
},
watch: {
localValue(v) {
async localValue(v) {
if (!v) {
this.form = defaultForm();
} else if (this.deployment) {
this.localDeployment = this.deployment;
this.form.hub = this.deployment.hub;
this.form.product = this.deployment.product;
await this.$nextTick();
this.$refs.dialog.activeTab = 'ppr';
}
},
},
Expand Down
186 changes: 186 additions & 0 deletions ui/src/components/DeploymentRequestsTab.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<template lang="pug">
.request-tasks-tab
c-data-table(
v-model="requests",
:headers="headers",
:prepare-row="prepareRow",
:show-loader="loading",
hide-all-pagination-sections,
fix-layout,
show-manage-panel,
)
template(#buttons="")
c-button.ppr-table__upload-btn(
:icon="icons.googleAddBaseline",
color="accent",
mode="solid",
label="Create Request",
small,
@click="openUploadPPRDialog",
)

template(#items="{ row, visibleHeaders }")
tr.table__row.hoverable(:id="row.id")
template(v-for="header in visibleHeaders")
//- ID column
td.nowrap-cell(
v-if="header.value === 'id'",
:key="header.value",
)
router-link(
:to="{ name: 'RequestDetails', params: { id: row.id } }"
) {{ row.id }}
c-chip.request-tasks-tab__manual(
v-if="row.manual",
text="Manual",
type="pale",
small,
)

//- Event column
td.nowrap-cell(
v-if="header.value === 'ppr'",
:key="header.value",
)
span Version {{ row.ppr }}

//- Processed column
td.nowrap-cell(
v-if="header.value === 'created'",
:key="header.value",
)
span(v-if="row.created") {{ row.created | utcToLocal }}
span.assistive-text(v-else)

//- Status column
td.nowrap-cell(
v-if="header.value === 'status'",
:key="header.value",
)
.request-tasks-tab__status
c-status(:status="row.status")
//template(v-if="row.status === 'failed'")
// span.request-tasks-tab__dot •
// a(@click="openErrorDetails(row)") Details
create-deployment-request-dialog(
v-model="isCreateRequestDialogOpen",
:deployment="deployment",
@request-created="loadRequests",
)

</template>

<script>
import {
googleAddBaseline,
} from '@cloudblueconnect/material-svg';
import cButton from '~components/cButton.vue';
import cChip from '~components/cChip.vue';
import cDataTable from '~components/cDataTable.vue';
import cStatus from '~components/cStatus.vue';
import CreateDeploymentRequestDialog from '~components/CreateDeploymentRequestDialog/index.vue';
import {
getDeploymentRequests,
} from '@/utils';
export default {
components: {
cButton,
cChip,
cDataTable,
cStatus,
CreateDeploymentRequestDialog,
},
props: {
deployment: {
type: Object,
required: true,
},
},
data: () => ({
loading: true,
requests: [],
icons: { googleAddBaseline },
isCreateRequestDialogOpen: false,
headers: [
{
text: 'Request',
value: 'id',
},
{
text: 'PPR',
value: 'ppr',
width: 105,
},
{
text: 'Created',
value: 'created',
width: 137,
},
{
text: 'Status',
value: 'status',
width: 140,
},
],
}),
computed: {
deploymentId: vm => vm.deployment.id,
},
methods: {
prepareRow(item) {
return {
id: item.id,
status: item.status,
created: item.events.created?.at,
ppr: item.ppr.version,
manual: item.manually,
};
},
openUploadPPRDialog() {
this.isCreateRequestDialogOpen = true;
},
async loadRequests() {
this.loading = true;
this.requests = await getDeploymentRequests(this.deploymentId);
this.loading = false;
},
},
created() {
this.loadRequests();
},
};
</script>

<style lang="stylus">
.request-tasks-tab {
&__status {
display: flex;
align-items: center;
}
&__dot {
margin: 0 8px;
}
&__manual {
margin-left: 8px;
}
}
</style>
6 changes: 6 additions & 0 deletions ui/src/pages/DeploymentDetails.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,9 @@ c-view.deployment-details(
:account-id="deployment.account_id",
)

template(#requests="")
deployment-requests-tab(:deployment="deployment")

</template>

<script>
Expand All @@ -98,6 +101,7 @@ import Pic from '~components/Pic.vue';
import PprTab from '~components/PprTab.vue';
import DeploymentConfigurationTab from '~components/DeploymentConfigurationTab.vue';
import DeploymentRequestsTab from '~components/DeploymentRequestsTab.vue';
import {
getDeployment,
Expand All @@ -111,6 +115,7 @@ export default {
cTabs,
cView,
DeploymentConfigurationTab,
DeploymentRequestsTab,
DetailItem,
GridItem,
Pic,
Expand All @@ -134,6 +139,7 @@ export default {
{ label: 'Marketplaces', value: 'marketplaces' },
{ label: 'PPR', value: 'ppr' },
{ label: 'Configuration', value: 'configuration' },
{ label: 'Requests', value: 'requests' },
],
},
Expand Down
2 changes: 1 addition & 1 deletion ui/src/routes/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default [
},
{
name: 'DeploymentDetails',
path: '/deployments/:id/:tab(marketplaces|ppr|configuration)?',
path: '/deployments/:id/:tab(marketplaces|ppr|configuration|requests)?',
component: () => import(/* webpackChunkName: "deployment-details" */ '@/pages/DeploymentDetails.vue'),
},
{
Expand Down
2 changes: 2 additions & 0 deletions ui/src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export const deleteDeploymentConfiguration = (deploymentId, configurationId) =>

export const getDeploymentsRequests = () => rest.get('/api/deployments/requests');

export const getDeploymentRequests = (deploymentId) => rest.get(`/api/deployments/${deploymentId}/requests`);

export const getDeploymentsRequest = (id) => rest.get(`/api/deployments/requests/${id}`);

export const uploadPPR = (deploymentId, {
Expand Down

0 comments on commit c67a6e5

Please sign in to comment.