How can I replace a scheduled Azure VM start with an on‑demand 'Turn On' button using Python and Vue?

I'm trying to modify our Azure Function App so that instead of adding a schedule to start/stop our Azure VMs, a single on‑demand button in our Vue front end immediately turns on a VM and schedules it to shut off automatically after 8 hours. Currently, the backend Python code generates cron expressions based on user-provided start/stop times and days of the week, and the Vue component displays a scheduling form when you click on "Add a Schedule".

The goal is to replace that form with a simple "Turn on" button. When clicked, the button should:
• Start the VM immediately using the Azure Python SDK (e.g., ComputeManagementClient’s begin_start method), and
• Update the VM’s tags so that the background timer (running every 5 minutes) will automatically turn the VM off after 8 hours.

Below is the existing Python code that sets the schedule:

PYTHONCopied
from azure.identity import DefaultAzureCredential
from azure.mgmt.compute import ComputeManagementClient
import json
import logging
import utilities

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

        stopSchedule = generateCronSchedule(vmData, "stopTime")
        tags[utilities.STOPSCHEDULETAG] = stopSchedule

        if vmData["startTime"]:
            startSchedule = generateCronSchedule(vmData, "startTime")
            tags[utilities.STARTSCHEDULETAG] = startSchedule
        else:
            tags.pop(utilities.STARTSCHEDULETAG, None)

    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")

And here is the code for the start/stop functionality:

PYTHONCopied
import azure.functions as func
from azure.mgmt.compute import ComputeManagementClient
from azure.identity import DefaultAzureCredential
from croniter import croniter
import datetime
import logging
import pytz
import utilities

startstop_bp = func.Blueprint()

@startstop_bp.function_name(name="StartStop")
@startstop_bp.schedule(
    schedule="*/5 * * * *", arg_name="timer", run_on_startup=False, use_monitor=False
)
def start_stop_vms(timer):

    # Get the set timezone
    current_timezone = utilities.get_setting("Timezone")
    if not current_timezone:
        # Default to UTC if the user hasn't set a timezone
        current_timezone = "UTC"
    
    current_time = datetime.datetime.now(pytz.timezone(current_timezone))
    logging.info(f"Evaluating start/stop at {current_time}")

    for subscription in utilities.get_subscriptions():

        logging.info(f"Processing subscription: {subscription['id']}")

        compute_client = ComputeManagementClient(
            credential=DefaultAzureCredential(exclude_environment_credential=True), subscription_id=subscription["id"]
        )

        events = []

        for vm in compute_client.virtual_machines.list_all():
            logging.info(vm.id)

            if vm.tags and utilities.STOPSCHEDULETAG in vm.tags:
                stop_schedule = croniter(vm.tags[utilities.STOPSCHEDULETAG]).expanded
                # Start and stop tag pair behaviour
                if utilities.STARTSCHEDULETAG in vm.tags:
                    start_schedule = croniter(
                        vm.tags[utilities.STARTSCHEDULETAG]
                    ).expanded
                    # Are we in an on-day?
                    if (
                        current_time.weekday() + 1 in start_schedule[4]
                        or start_schedule[4][0] == "*"
                    ):
                        logging.info(f"[{vm.name}]: has on schedule today")
                        # Are we after the start time?
                        # [[0], [9], ['*'], ['*'], ['*']]
                        start_time = datetime.time(
                            start_schedule[1][0], start_schedule[0][0], 0
                        )
                        stop_time = datetime.time(
                            stop_schedule[1][0], stop_schedule[0][0], 0
                        )
                        logging.info(f"[{vm.name}]: start time {start_time}")
                        logging.info(f"[{vm.name}]: stop time  {stop_time}")
                        # Get the current VM state
                        vm_state = utilities.extract_vm_state(vm, compute_client)
                        logging.info(f"[{vm.name}]: {vm_state}")
                        # Check what the target state of the vm should be, current vm states running/deallocating/deallocated
                        if (
                            current_time.time() > start_time
                            and current_time.time() < stop_time
                        ):
                            logging.info(f"[{vm.name}]: VM should be running")
                            if vm_state != "running":
                                utilities.log_vm_event(vm, "starting")
                                events.append(utilities.set_vm_state('started', vm, compute_client))
                                logging.info(
                                    f"[{vm.name}]: starting..."
                                )
                        else:
                            logging.info(f"[{vm.name}]: VM should be stopped")
                            if vm_state == "running":
                                utilities.log_vm_event(vm, "stopping")
                                events.append(utilities.set_vm_state('stopped', vm, compute_client))
                                logging.info(
                                    f"[{vm.name}]: stopping..."
                                )
                    else:
                        logging.info(f"[{vm.name}]: is not scheduled to be on today")
                # Stop tag only behaviour
                else:
                    stop_schedule = croniter(
                        vm.tags[utilities.STOPSCHEDULETAG]
                    ).expanded
                    # Are we in an on-day?
                    if (
                        current_time.weekday() + 1 in stop_schedule[4]
                        or stop_schedule[4][0] == "*"
                    ):
                        stop_time = datetime.time(
                            stop_schedule[1][0], stop_schedule[0][0], 0
                        )
                        if current_time.time() > stop_time:
                            vm_state = utilities.extract_vm_state(vm, compute_client)
                            if vm_state == "running":
                                events.append(utilities.set_vm_state('stopped', vm, compute_client))
                                logging.warning(
                                    f"[{vm.name}]: stopping..."
                                )
                    else:
                        logging.warning(
                            f"[{vm.name}]: is not scheduled to be stopped today"
                        )
        
        # Wait for all events to complete
        for event in events:
            event.wait()

The current Vue component for scheduling (triggered by clicking "Add a Schedule") is shown below:

VUECopied
<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>

And here is the overall Vue.App code:

VUECopied
<template>
  <section class="hero is-small is-link">
    <div class="hero-body">
      <p class="title"><i class="fa-solid fa-clock"></i> Az. Start Stop</p>
    </div>
    <div class="hero-foot">
      <nav class="tabs is-right">
        <ul>
          <li>
            <a @click="settingsView = true">
              <span class="icon is-small"><i class="fa-solid fa-gear" aria-hidden="true"></i></span>
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </section>
  <!-- Settings View -->
  <div v-if="settingsView" class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-content">
      <div class="box">
        <UpdateSettings @applied="settingsView = false; this.$router.go()"></UpdateSettings>
      </div>
      <button @click="settingsView = false" class="modal-close is-large" aria-label="close"></button>
    </div>
  </div>
  <!-- -->
  <section class="section">
    <UserMessage></UserMessage>
    <router-view />
  </section>
  <!-- -->
  <SignUp v-if="showSignUps"></SignUp>
</template>

<script>
import UpdateSettings from './components/UpdateSettings.vue'
import UserMessage from './components/UserMessage.vue'
import SignUp from './components/SignUp.vue'

export default {
  components: {
    UpdateSettings,
    UserMessage,
    SignUp
  },
  methods: {
    signUp: function () {
      this.signUpDisabled = true
      let headers = new Headers({
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      });
      fetch(`/api/signup`, {
        method: "POST",
        headers: headers,
        body: JSON.stringify({ email: this.userEmail }),
      }).then(() => {
        this.signedUp = true
      });
    },
  },
  data() {
    return {
      userEmail: null,
      signUpDisabled: false,
      signedUp: false,
      settingsView: false,
      showSignUps: false
    };
  },
};
</script>

The desired outcome is to replace the current scheduling UI with an on‑demand approach. How can I best adapt the Python backend and the Vue front end to achieve this functionality, ensuring the VM starts immediately and automatically stops after 8 hours?