How can I modify my Vue component to trigger immediate VM power-on with an 8-hour auto shutdown?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I've deployed an Azure Function App that was originally set up for scheduling when Azure VMs power on. The new requirement is to change this behavior so that the VM turns on immediately and then automatically powers off after 8 hours. I've updated the Python backend accordingly, but I'm having trouble adjusting the Vue front-end. Specifically, I'm unsure whether to simply change the button label from "Schedule" to "Turn On" in the Set Schedule.vue file, or if additional modifications are needed to match the backend logic.

Below is the current Vue component code:

VUE
<template>
  <div v-if="vmData">
    <h1 class="title">{{ vmData.name }}</h1>

    <hr />

    <progress
      v-if="formDisabled"
      class="progress is-small is-primary"
      max="100"
    >
      15%
    </progress>

    <div class="columns is-mobile">
      <div class="column">
        <label class="label">Start Time</label>
        <div class="field has-addons has-addons-right">
          <div class="control is-expanded">
            <input
              v-model="vmData.startTime"
              class="input"
              type="time"
              :disabled="vmData.stopTime == null || formDisabled"
            />
          </div>
          <p v-if="vmData.startTime" class="control">
            <button
              @click="clearStartTime()"
              class="button is-primary"
              :disabled="formDisabled"
            >
              Clear
            </button>
          </p>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label class="label">Stop Time</label>
          <div class="control">
            <input
              v-model="vmData.stopTime"
              class="input"
              type="time"
              :disabled="formDisabled"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="field">
      <label class="label">Days of Week</label>
      <div class="columns has-text-centered is-mobile">
        <div class="column">
          <input
            type="checkbox"
            v-model="vmData.daysOfWeek.Mon"
            :disabled="formDisabled"
          />
          Mon
        </div>
        <div class="column">
          <input
            type="checkbox"
            v-model="vmData.daysOfWeek.Tue"
            :disabled="formDisabled"
          />
          Tue
        </div>
        <div class="column">
          <input
            type="checkbox"
            v-model="vmData.daysOfWeek.Wed"
            :disabled="formDisabled"
          />
          Wed
        </div>
        <div class="column">
          <input
            type="checkbox"
            v-model="vmData.daysOfWeek.Thu"
            :disabled="formDisabled"
          />
          Thu
        </div>
        <div class="column">
          <input
            type="checkbox"
            v-model="vmData.daysOfWeek.Fri"
            :disabled="formDisabled"
          />
          Fri
        </div>
        <div class="column">
          <input
            type="checkbox"
            v-model="vmData.daysOfWeek.Sat"
            :disabled="formDisabled"
          />
          Sat
        </div>
        <div class="column">
          <input
            type="checkbox"
            v-model="vmData.daysOfWeek.Sun"
            :disabled="formDisabled"
          />
          Sun
        </div>
      </div>
    </div>

    <div v-if="formErrors.length > 0" class="notification is-warning is-light">
      <p v-for="error in formErrors" :key="error">{{ error }}</p>
    </div>

    <div class="field is-grouped is-grouped-right">
      <div class="control">
        <button
          v-if="emptySchedule == false"
          @click="removeSchedule()"
          class="button is-primary"
          :disabled="formDisabled"
        >
          <i class="fa-solid fa-xmark"></i>&nbsp;Remove Schedule
        </button>
      </div>
      <div class="control">
        <button
          @click="updateSchedule()"
          class="button is-link is-right"
          :disabled="formDisabled || formErrors.length > 0"
        >
          <i class="fa-regular fa-clock"></i>&nbsp;Apply
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { timeToDate } from "../helper.js";

export default {
  props: ["vm"],
  emits: ["applied"],
  watch: {
    vm: function (newVal) {
      this.vmData = newVal;
    },
    vmData: {
      handler: function (newVal) {
        let errors = [];
        if (newVal.stopTime == null) {
          errors.push("Schedule requires a stop time");
        } else {
          // Check if at least one day is defined
          let dayCount = 0;
          Object.keys(newVal.daysOfWeek).forEach(function (value) {
            if (newVal.daysOfWeek[value]) {
              dayCount += 1;
            }
          });
          if (dayCount == 0) {
            errors.push("Schedule requires at least 1 day set");
          }
          // Check if start date is before end date
          if (newVal.startTime && newVal.stopTime) {
            if (timeToDate(newVal.startTime) >= timeToDate(newVal.stopTime)) {
              errors.push("Start time should be before stop time");
            } else if (timeToDate(newVal.stopTime) - timeToDate(newVal.startTime) < 1800000) {
              errors.push("Schedule should be at least 30 minutes long")
            }
          }
        }
        this.formErrors = errors;
      },
      deep: true,
    },
  },
  mounted() {
    // Make a deep copy of this
    this.vmData = JSON.parse(JSON.stringify(this.vm));
    // Work out if it's an empty schedule
    if (!this.vm.stopTime) {
      this.emptySchedule = true;
    } else {
      this.emptySchedule = false;
    }
  },
  methods: {
    clearStartTime: function () {
      this.vmData.startTime = null;
    },
    removeSchedule: function () {
      this.formDisabled = true;

      let headers = new Headers({
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      });

      fetch(`/api/schedule`, {
        method: "DELETE",
        headers: headers,
        body: JSON.stringify(this.vmData),
      }).then(() => {
        this.formDisabled = false;
        this.$emit("applied");
      });
    },
    updateSchedule: function () {
      this.formDisabled = true;

      let headers = new Headers({
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      });

      fetch(`/api/schedule`, {
        method: "POST",
        headers: headers,
        body: JSON.stringify(this.vmData),
      }).then(() => {
        this.formDisabled = false;
        this.$emit("applied");
      });
    },
  },
  data() {
    return {
      formDisabled: false,
      vmData: null,
      formErrors: [],
      emptySchedule: null,
    };
  },
};
</script>

I've also updated the backend function in Python for the setSchedule endpoint:

PYTHON
import azure.functions as func
from azure.identity import DefaultAzureCredential
from azure.mgmt.compute import ComputeManagementClient
import json
import logging
import utilities
from datetime import datetime, timedelta

schedule_bp = func.Blueprint()

def generateCronSchedule(vmData, timeString):
    # Create stop time chunk
    stopScheduleMinHour = (
        f"{vmData[timeString].split(':')[1]} {vmData[timeString].split(':')[0]}"
    )
    # Create days chunk
    daysString = ""
    for i in range(1, 8):
        if vmData["daysOfWeek"][utilities.daysMapping[i]]:
            daysString += f"{i},"
    daysString = daysString.rstrip(daysString[-1])

    stopSchedule = f"{stopScheduleMinHour} * * {daysString}"
    return stopSchedule

@schedule_bp.function_name(name="SetSchedule")
@schedule_bp.route(route="api/schedule", auth_level=func.AuthLevel.ANONYMOUS)
def set_schedule(req: func.HttpRequest) -> func.HttpResponse:
    vmData = json.loads(req.get_body())
    # Extract subscription id and resource group from vm id
    subscriptionId = vmData["id"].split("/")[2]
    resourceGroup = vmData["id"].split("/")[4]
    vmName = vmData["id"].split("/")[8]

    compute_client = ComputeManagementClient(
        credential=DefaultAzureCredential(exclude_environment_credential=True), subscription_id=subscriptionId
    )

    vmInstance = compute_client.virtual_machines.get(
        resource_group_name=resourceGroup, vm_name=vmName
    )

    # Check the method type to see if we're adding or deleting a schedule
    if req.method == "DELETE":
        logging.info("REMOVING SCHEDULE")
        # Calculate updated tags
        tags = {}
        if vmInstance.tags:
            tags = vmInstance.tags
        tags.pop(utilities.STARTSCHEDULETAG, None)
        tags.pop(utilities.STOPSCHEDULETAG, None)
    else:
        tags = {}
        if vmInstance.tags:
            tags = vmInstance.tags

        # Turn on the VM for an 8 hour period
        start_time = datetime.utcnow()
        stop_time = start_time + timedelta(hours=8)

        startSchedule = f"{start_time.minute} {start_time.hour} * * *"
        stopSchedule = f"{stop_time.minute} {stop_time.hour} * * *"

        tags[utilities.STARTSCHEDULETAG] = startSchedule
        tags[utilities.STOPSCHEDULETAG] = stopSchedule

    add_tags_event = compute_client.virtual_machines.begin_create_or_update(
        resource_group_name=resourceGroup,
        vm_name=vmName,
        parameters={"location": vmInstance.location, "tags": tags},
        polling_interval=1,
    )

    add_tags_event.wait()

    return func.HttpResponse("OK")

I've tried updating the code but can't figure out the best approach to sync the Vue UI with the new backend logic. Any guidance or suggestions would be appreciated.

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is one approach to solving the problem:

Instead of having a form that lets users pick a start/stop time and days of the week, you can simplify the component to just a “Turn On” button. Since the backend will always power on the VM immediately and then auto power off after eight hours, the additional schedule inputs aren’t needed.
In your Vue component you can remove (or hide) the input fields for start/stop time and days-of-week and change the button label from “Apply” (or “Schedule”) to “Turn On”. This button can then call a method (like turnOnVM) that sends just the minimal payload (e.g. the VM id) to the backend.
The update (or new) method calls the same API endpoint that now powers on the VM for eight hours. There’s no need to pass a start/stop time because the backend is doing the time calculations.

Below is an example of how you might simplify your component:

VUE
<template>
  <div v-if="vmData">
    <h1 class="title">{{ vmData.name }}</h1>
    <hr />

    <!-- Optional: Show a progress bar while disabling the button -->
    <progress
      v-if="formDisabled"
      class="progress is-small is-primary"
      max="100"
    >
      15%
    </progress>

    <!-- Remove schedule fields and show only the button -->
    <div class="field">
      <div class="control">
        <button
          @click="turnOnVM"
          class="button is-link"
          :disabled="formDisabled"
        >
          <i class="fa-regular fa-clock"></i>&nbsp;Turn On
        </button>
      </div>
    </div>

    <!-- Optionally, display any error messages -->
    <div v-if="formErrors.length > 0" class="notification is-warning is-light">
      <p v-for="error in formErrors" :key="error">{{ error }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["vm"],
  emits: ["applied"],
  data() {
    return {
      formDisabled: false,
      vmData: JSON.parse(JSON.stringify(this.vm)),
      formErrors: []
    };
  },
  methods: {
    turnOnVM() {
      this.formDisabled = true;
      // For on-demand power-on, we no longer need schedule inputs.
      // If your backend only requires the vm id (or minimal data), adjust the payload accordingly.
      const payload = {
        id: this.vmData.id
      };

      let headers = new Headers({
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json"
      });

      fetch(`/api/schedule`, {
        method: "POST",
        headers: headers,
        body: JSON.stringify(payload)
      }).then(() => {
        this.formDisabled = false;
        this.$emit("applied");
      }).catch(err => {
        this.formDisabled = false;
        this.formErrors.push("Failed to turn on the VM.");
        console.error(err);
      });
    }
  }
};
</script>

Explanation

Remove Unnecessary Inputs:
Since your backend now calculates the start (UTC now) and stop times (8 hours later), you do not need to let the user choose times or days.
Change the Button Label:
The button now reads “Turn On” with an icon (matching your styling), and it calls the new method turnOnVM.
Payload Adjustments:
You might only have to send the VM id (or whatever minimal data your backend now requires). This keeps your frontend in sync with the backend.
Error Handling:
Add some basic error handling in case the fetch call fails.

This refactoring ensures that the UI matches the new backend behavior—triggering an immediate power on with an automatic power off 8 hours later.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by AstroWayfarer061 • 1 month ago

Below is the Front end code of Vue Application of App.vue

VUE
<script setup>
import { ref } from 'vue';

const vmId = ref('/subscriptions/xxxx/resourceGroups/myResourceGroup/providers/Microsoft.Compute/virtualMachines/myVM');
const isLoading = ref(false);
const message = ref('');

const turnOnVM = async () => {
  isLoading.value = true;
  message.value = '';
  // Use https://<function-app-name>.azurewebsites.net/api/<function-name>
  try {
    const response = await fetch('http://localhost:7071/api/api/schedule', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ id: vmId.value }),
    });

    if (response.ok) {
      const data = await response.text();
      message.value = data;
    } else {
      throw new Error('Failed to turn on VM');
    }
  } catch (error) {
    message.value = `Error: ${error.message}`;
  } finally {
    isLoading.value = false;
  }
};
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <h1>Azure VM Control</h1>
      <button @click="turnOnVM" :disabled="isLoading">
        {{ isLoading ? 'Turning On...' : 'Turn On VM' }}
      </button>
      <p v-if="message">{{ message }}</p>
    </div>
  </header>

  <main>
    <!-- Your main content here -->
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
  }

  button {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
  }

  p {
    margin-top: 1rem;
    color: green;
  }
}
</style>

Make sure to add cors in azure function app in local.settings.json. use Managed Identity Authentication from this MSDOC

JSON
{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
    "FUNCTIONS_WORKER_RUNTIME": "python"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  }
}

Output:
enter image description here

enter image description here

No comments yet.

Discussion

No comments yet.

How can I modify my Vue component to trigger immediate VM power-on with an 8-hour auto shutdown?

2 Answers

Explanation

Discussion

Similar Posts

How Can I Dynamically Adjust Token Reservation and Handle Extensive Outputs in GPT-4o?