Render the Python/Flask Backend to Vue.js Frontend

Question

I'm bit new to the concepts of frontend to backend communications, thats why I wrote small backend program to fetch the data using boto3 module with python.

My backend program which works perfectly.

import boto3 
import logging
from botocore.exceptions import ClientError

logging.basicConfig(format='%(message)s')
logger = logging.getLogger('LUCIFER')
logger.setLevel(logging.INFO)

def main():
    try:
        client = boto3.client('iam')
        roles = client.list_roles(PathPrefix='/', MaxItems=1000)
        role_names = []
        for i in roles["Roles"]:
            if "sts:AssumeRoleWithSAML".lower() in str(i).lower():
                role_names.append(i["RoleName"])
                logger.info(role_names)
        return role_names
    
    except ClientError:
        logger.exception("Couldn't list roles for the account")
        raise

if __name__ == "__main__":
    main()

My flask program which also works perfectly fine.

from flask import Flask, jsonify
from main import main

app = Flask(__name__)

@app.route("/", methods = ['GET'])
def index():
    role_names = main()
    return jsonify(role_names)

if __name__ == "__main__":
    app.run(debug=True)

Now my next and final target is to render the returned data to frontend using Vue.js. My current Home.vue looks like below, which works fine with hardcoded values, see the commented lines.

How can I get the data returned from backend (which are the squad names) to be shown in the script section under <script> squad: [],

Any hints/help will be really appreciated.

  <div>
    <v-container fluid>
      <v-row align="center" class="mt-16">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="squad"
            label="Squad Name"
            v-model="selected_squad"
            outlined
          ></v-select>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="accounts"
            item-text="name"
            item-value="id"
            v-model="selected_aws_account"
            label="AWS Account"
            outlined
          ></v-select>
        </v-col>
      </v-row>
      <v-row>
        <v-col class="d-flex justify-center">
          <v-btn elevation="17" x-large @click="printResult">Submit</v-btn>
        </v-col>
      </v-row>
      <v-row v-if="showResult">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <h3>
            Please go to
            <a href="https://provider.com"
              >Okta Self-Service Portal</a
            >
            then go to the left side of the page to Manage Access button then to
            Self Service , Choose Application to be AWS
          </h3>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-text-field
        class
            :value="output"
            label="Role is :"
            outlined
            readonly
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      squad: [],
    };
    // squad: [
    //   "adex",
    //   "catalog",
    //   "cart-checkout-experience",
    //   "checkout-payments",
    //   "customer-care",
    //   "datascience",
    //   "datafridge",
    //   "devx",
    //   "discovery",
    //   "fraud",
    //   "fintech",
    //   "frontend",
    //   "grocery-fulfillment",
    //   "grocery-discovery",
    //   "grocery-basket",
    //   "growth",
    //   "incentive-management",
    //   "integration-platform",
    //   "life",
    //   "nfv",
    //   "ncr",
    //   "menu",
    //   "mobile-automation",
    //   "operations",
    //   "ops-platform",
    //   "order-platform",
    //   "partner-care",
    //   "pickup",
    //   "platform-backend",
    //   "pos",
    //   "pos-integration-platform",
    //   "post-order",
    //   "pricing",
    //   "ratings",
    //   "search-discovery",
    //   "shopping",
    //   "transmission",
    //   "user-location",
    //   "vendor-availability",
    //   "vendor-growth",
    //   "vendor-ops",
    //   "vendor-performance",
    //   "vendor-portal",
    //   "voip",
    //   "wallet",
    // ],
  //   aws_accounts: [
  //     "account1(123456789)",
  //     "account2(123456789)",
  //     "account3(123456789)",
  //     "account4(123456789)",
  //     "account5(123456789)",
  //     "account6(123456789)",
  //   ],
  //   result: "",
  //   selected_squad: "",
  //   selected_aws_account: "",
  //   selected_aws_role: "",
  //   output: "",
  //   accounts: [
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //   ],
  //   showResult: false,
  // }),
  },
  methods: {
    getSquads() {
      const path = 'http://localhost:5000';
      axios.get(path)
        .then((res) => {
          this.squad = res.data.squad;
        })
        .catch((error) => {
          console.error(error);
        });
    }
},
//     printResult() {
//       this.showResult = true;
//       this.output = `AWS ${this.selected_aws_account} - ${this.selected_squad}`;
//     },
//   },
//   components: {},
// };
created() {
    this.getSquads();
  }
}
</script>

Answer 1

Finally was able to make it work like below.

<template>
  <div>
    <v-container fluid>
      <v-row align="center" class="mt-16">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="squads"
            label="Squads Name"
            v-model="selected_squad"
            outlined
          ></v-select>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="accounts"
            item-text="name"
            item-value="id"
            v-model="selected_aws_account"
            label="AWS Accounts"
            outlined
          ></v-select>
        </v-col>
      </v-row>
      <v-row>
        <v-col class="d-flex justify-center">
          <v-btn elevation="17" x-large @click="printResult">Submit</v-btn>
        </v-col>
      </v-row>
      <v-row v-if="showResult">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <h4>
            Please browse to
            <a href="https://provider.com"
              >Okta Self Service Portal</a
            >
            then on the left pane of the page click on "Manage Access" and then click on "Self Service Access Request" and finally select "AWS" as the application. Good to fire the request!
          </h4>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-text-field
        class
            :value="output"
            label="Role is:"
            outlined
            readonly
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Home",
  data: () => ({
    squads: '',
    aws_accounts: [
      "account1(123456789)",
      "account2(123456789)",
      "account3(123456789)",
      "account4(123456789)",
      "account5(123456789)",
      "account6(123456789)",
    ],
    result: "",
    selected_squad: "",
    selected_aws_account: "",
    selected_aws_role: "",
    output: "",
    accounts: [
      { id: 123456789, name: "account1" },
      { id: 123456789, name: "account2" },
      { id: 123456789, name: "account3" },
      { id: 123456789, name: "account4" },
      { id: 123456789, name: "account5" },
      { id: 123456789, name: "account6" },
    ],
    showResult: false,
  }),
  methods: {
    getSquads() {
      const path = 'http://localhost:5000';
      axios.get(path)
        .then((res) => {
          this.squads = res.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    printResult() {
      this.showResult = true;
      this.output = `AWS ${this.selected_aws_account} - ${this.selected_squad}`;
    },
  },
  created() {
    this.getSquads();
  },
  components: {},
};
</script>