az gui

[levkropp]

Implement availability zones support in GUI

• Add ZONE column to VM instances table

• Add zone controls in bulk actions and filters

• Add zone selection to instance configuration

• Add Launch & Configure Next functionality

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.24%. Comparing base (1e46870) to head (489ccbf).
⚠️ Report is 46 commits behind head on availability-zones.

Additional details and impacted files

@@                  Coverage Diff                   @@
##           availability-zones    #3979      +/-   ##
======================================================
+ Coverage               89.10%   89.24%   +0.14%     
======================================================
  Files                     267      267              
  Lines                   15160    15177      +17     
======================================================
+ Hits                    13508    13545      +37     
+ Misses                   1652     1632      -20     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[vikorama]

Still haven't tested the package as I'm getting an error, but one change we definitely need to do is to remove Pseudo everywhere. This was the feedback from the Roadmap team-only.

[vikorama]

Thank you @levkropp, a few things to look into:

• The switchers should have a hover state - the cursor changes to hover. We have documentation for this component in web apps, maybe it'll help a bit to align Flutter.
• I have to click twice to switch a zone on and off. Steps to reproduce: 1. Expand the zone drop-down, 2. Point at a switcher and click, 3. Nothing happens, click again -> switcher reacts.
• Availability zones title and zone names should be 550 in weight (seems too bold at the moment).
• Zone names font should be 16 px. Line height 24px.
• The subtitles' (# of running instances) font should be the default font. Now it looks like it doesn't have proper letter spacing. It should be the same as the VM names in the all instances table, also 16px. Line height 24px.
• The outer padding on the drop-down is 24px.
• The title should be left aligned.
• Remove border radius on the zone outlines. In our visual guidelines the border radius on buttons and all outlines is 0.
• The padding on the sides of the button feels uneven by 4-5px.
• [probably skip for now] Button outline should be the high-contrast color (707070) - we should either fix it for all button, or not touch it for now and fix later, cuz other button states are not consistent with our design system either.

[vikorama]

I'm not sure if it is a part of this PR, but when one or more zones are disabled, we should indicate it to the user:

[levkropp]

TLDR: Here is what it looks like now, with the Figma design for reference. Please let me know what you think!

Unfortunately, we cannot set a font weight of 550 to the best of my knowledge. If we really want, we could create/add a new font where one of the font values w100 w200 etc corresponds to a version of the font at 550 weight

---

Hi @vikorama , regarding your latest comments:

The switchers should have a hover state - the cursor changes to hover. We have documentation for this component in web apps, maybe it'll help a bit to align Flutter.

I do not have access to the documentation Figma you have linked. I have requested access. Do you mean something like the following? This is called a SystemMouseCursors.click in Flutter

Availability zones title and zone names should be 550 in weight (seems too bold at the moment).

To the best of my knowledge, Flutter only supports specific font weights: w100, w200, w300, w400, w500, w600, w700, w800, w900. There is no w550. For a weight between w500 and w600, the closest valid options is FontWeight.w500 or FontWeight.w600. It's currently set to 600, but I can make it 500 if you prefer

I have to click twice to switch a zone on and off. Steps to reproduce: 1. Expand the zone drop-down, 2. Point at a switcher and click, 3. Nothing happens, click again -> switcher reacts.

I am unable to reproduce this on Kubuntu 24.04. The switcher changes after a short delay for me after one click. There is a chance that this is also related to the incomplete implementation of availability/unavailiabilty in the branch, otherwise this may be a MacOS specific bug.

Zone names font should be 16 px. Line height 24px.

The font size for zone names is set to 16px

Text(
  zoneName,
  style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w600,
    color: Colors.black,
  ),
),

https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html
There is a chance that this is being affected by a textScaleFactor. May I see a screenshot of what it looks like on your end?
I have added a height parameter of 1.5 to set the line height to 16 x 1.5 = 24 px
https://api.flutter.dev/flutter/painting/TextStyle/height.html

• The subtitles' (# of running instances) font should be the default font. Now it looks like it doesn't have proper letter spacing. It should be the same as the VM names in the all instances table, also 16px. Line height 24px.

The subtitle is using the default font. There have been no changes made to kerning (letter spacing). I have updated it to now also be 16px with a line height of 24px

• The outer padding on the drop-down is 24px.

👍

The padding on the sides of the button feels uneven by 4-5px.

👍
This was a result of the icons used. The padding has been made asymmetrical to account for this

• [probably skip for now] Button outline should be the high-contrast color (707070)

I agree that this should be in another PR

[vikorama]

@levkropp Thank you for looking into all this! The look and the cursor are great!

1. As I was making these visual comments, I realised I overdid it with the outlines. I simplified it and it looks lighter to me, without the unnecessary complexity:

If you agree, could you please make these minor adjustments? 🙏

Please see here for more details

2. Could you please confirm if my previous comment is included in this PR?