Skip to content

upgrade vue to v3 #528

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gruebel merged 2 commits into from
Jan 30, 2026
Merged

upgrade vue to v3 #528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
853ce34
upgrade vue to v3
gruebel Jan 30, 2026
a64f44d
revert sample data
gruebel Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/PULL_REQUEST_TEMPLATE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ multiple changes are involved, a bulleted list is often useful.)


- [ ] Additions and changes have unit tests
- [ ] pre-commit hooks and tests are passing
- [ ] The pull request has been appropriately labeled using the provided PR labels
- [ ] GitHub actions automation is passing (`make test`, `make lint`, `make security-test`, `make test-js`)
- [ ] If the UI contents or JavaScript files have been modified, generate a new example report:

```bash
# Generate the updated Javascript bundle
make build-js
just build-js

# Generate the example report
make generate-report
just generate-report
```

Binary file added cloudsplaining/output/dist/fonts/bootstrap-icons.woff
View file
Open in desktop
Binary file not shown.
Binary file added cloudsplaining/output/dist/fonts/bootstrap-icons.woff2
View file
Open in desktop
Binary file not shown.
64 changes: 62 additions & 2 deletions cloudsplaining/output/dist/index.html
View file
Open in desktop

Large diffs are not rendered by default.

94 changes: 44 additions & 50 deletions cloudsplaining/output/dist/js/index.js
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 4 additions & 18 deletions cloudsplaining/output/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,22 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Cloudsplaining report</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<!--Bootstrap theme-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
crossorigin="anonymous">

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.17.0/bootstrap-vue.min.css" crossorigin="anonymous"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.17.0/bootstrap-vue.min.js" crossorigin="anonymous"></script>

<!-- JQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="application/javascript">
var isLocalExample = true;
var account_id;
var account_name;
var report_generated_time;
var cloudsplaining_version;
var iam_data;
var guidance_content = "default";
var appendices_content = "default";
var show_guidance_nav = "True";
var show_appendices_nav = "True";
</script>
</head>
<body>

<div id="app"></div>
<!-- built files will be auto injected -->
</body>


<!-- Bootstrap-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
crossorigin="anonymous"></script>

</html>
2 changes: 1 addition & 1 deletion cloudsplaining/output/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
>
<!-- <b-nav-item to="/task-table">Task Table Demo</b-nav-item> -->
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-navbar-nav class="ms-auto">
<b-nav-text
><strong>Account ID:</strong> {{ account_id }} |
<strong>Account Name:</strong>
Expand Down
25 changes: 24 additions & 1 deletion cloudsplaining/output/src/components/InlinePolicies.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<div v-bind:key="policyId" v-for="policyId in inlinePolicyIdsInUse">
<div v-bind:key="policyId" v-for="policyId in pagedInlinePolicyIdsInUse">
<div class="row">
<div class="col-md-5">
<div class="card">
Expand Down Expand Up @@ -63,6 +63,18 @@
iam_data: {
type: Object
},
perPage: {
type: Number,
default: 0
},
currentPage: {
type: Number,
default: 1
},
policyIds: {
type: Array,
default: null
},
},
computed: {
inlinePolicyIds() {
Expand All @@ -74,6 +86,17 @@
inlinePolicyIdsInUse() {
return inlinePoliciesUtil.getInlinePolicyIdsInUse(this.iam_data);
},
policyIdsToRender() {
return Array.isArray(this.policyIds) ? this.policyIds : this.inlinePolicyIdsInUse;
},
pagedInlinePolicyIdsInUse() {
const items = this.policyIdsToRender;
if (!this.perPage || this.perPage <= 0) {
return items;
}
const start = (this.currentPage - 1) * this.perPage;
return items.slice(start, start + this.perPage);
}
},
methods: {
inlinePolicyDocument(policyId) {
Expand Down
11 changes: 3 additions & 8 deletions cloudsplaining/output/src/components/LinkToFinding.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
<template>
<span v-b-hover="hoverCB" class="link2finding">
<span class="link2finding" @mouseenter="setHover(true)" @mouseleave="setHover(false)">
<slot></slot>
<span>
<router-link v-if="active" :to=deepLink>
<b-icon-link45deg aria-hidden="true"></b-icon-link45deg>
<i class="bi bi-link-45deg" aria-hidden="true"></i>
</router-link>
</span>
</span>
</template>

<script>
import { BIconLink45deg } from 'bootstrap-vue'

export default {
name: "LinkToFinding",
components: {
BIconLink45deg
},
props: {
findingId: {
type: String
Expand All @@ -34,7 +29,7 @@ export default {
},

methods: {
hoverCB(hovered) {
setHover(hovered) {
this.active = hovered
}
}
Expand Down
27 changes: 25 additions & 2 deletions cloudsplaining/output/src/components/ManagedPolicies.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<div v-bind:key="policyId" v-for="policyId in getManagedPolicyIdsInUse">
<div v-bind:key="policyId" v-for="policyId in pagedManagedPolicyIdsInUse">
<div class="row">
<div class="col-md-5">
<div class="card">
Expand Down Expand Up @@ -59,12 +59,35 @@
},
managedBy: {
type: String
},
perPage: {
type: Number,
default: 0
},
currentPage: {
type: Number,
default: 1
},
policyIds: {
type: Array,
default: null
}
},
computed: {
getManagedPolicyIdsInUse() {
managedPolicyIdsInUse() {
return managedPoliciesUtil.getManagedPolicyIdsInUse(this.iam_data, this.managedBy);
},
policyIdsToRender() {
return Array.isArray(this.policyIds) ? this.policyIds : this.managedPolicyIdsInUse;
},
pagedManagedPolicyIdsInUse() {
const items = this.policyIdsToRender;
if (!this.perPage || this.perPage <= 0) {
return items;
}
const start = (this.currentPage - 1) * this.perPage;
return items.slice(start, start + this.perPage);
}
},
methods: {
managedPolicyDocument(policyId) {
Expand Down
73 changes: 61 additions & 12 deletions cloudsplaining/output/src/components/PolicyTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
label-cols-sm="6"
label-cols-md="4"
label-cols-lg="3"
label-align-sm="right"
label-align-sm="end"
label-size="sm"
label-for="perPageSelect"
class="mb-0"
>
<b-form-select
v-model="perPage"
v-model="perPageModel"
id="perPageSelect"
size="sm"
:options="pageOptions"
Expand All @@ -27,12 +27,11 @@

</b-row>
<b-table
:items="policyNameMapping"
:items="safeItems"
:fields="fields"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:current-page="currentPage"
:per-page="perPage"
v-model:sort-by="sortByModel"
:current-page="currentPageModel"
:per-page="perPageModel"
responsive="sm"
:sticky-header=true
:no-border-collapse=true
Expand All @@ -49,6 +48,17 @@
{{ data.item.compute_role.join(", ") }}
</template>
</b-table>
<b-row class="mt-3">
<b-col>
<b-pagination
v-model="currentPageModel"
:per-page="perPageModel"
:total-rows="safeItems.length"
align="center"
size="sm"
/>
</b-col>
</b-row>
</b-container>
<br>
<hr>
Expand All @@ -61,13 +71,25 @@
name: "PolicyTable",
props: {
policyNameMapping: {
type: Array
type: Array,
default: () => []
},
perPage: {
type: Number,
default: 10
},
currentPage: {
type: Number,
default: 1
},
sortBy: {
type: Array,
default: () => [{ key: 'policy_name', order: 'asc' }]
}
},
emits: ['update:perPage', 'update:currentPage', 'update:sortBy'],
data() {
return {
sortBy: 'policy_name',
sortDesc: false,
fields: [
{key: 'policy_name', sortable: true},
{key: 'attached_to_principals', sortable: true},
Expand All @@ -81,11 +103,38 @@
{key: 'compute_role', sortable: true},
],
totalRows: 1,
currentPage: 1,
perPage: 10,
pageOptions: [5, 10, 15, 20, 50, 100],
}
},
computed: {
sortByModel: {
get() {
return this.sortBy;
},
set(value) {
this.$emit('update:sortBy', value);
}
},
perPageModel: {
get() {
return this.perPage;
},
set(value) {
this.$emit('update:perPage', value);
}
},
currentPageModel: {
get() {
return this.currentPage;
},
set(value) {
this.$emit('update:currentPage', value);
}
},
safeItems() {
return Array.isArray(this.policyNameMapping) ? this.policyNameMapping : [];
}
},
methods: {},

}
Expand Down
2 changes: 1 addition & 1 deletion cloudsplaining/output/src/components/Summary.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</b-col>
<b-col>
<b-table-simple small responsive>
<b-thead head-variant="dark">
<b-thead class="table-dark">
<b-tr>
<b-th>Risk</b-th>
<b-th>Instances</b-th>
Expand Down
Loading