Automic Workload Automation

 View Only
  • 1.  Color-coded AWI icons

    Posted Feb 19, 2023 05:55 AM
    Edited by Michael A. Lowry 2 days ago

    Using a custom AWI favorite icon

    If you are not satisfied with the built-in AWI icon or the solid-color icons associated with the session colors, it is possible to use your own icon instead.

    New AWI icon

    Here is my new AWI icon, redrawn by hand in Affinity Designer.

    Icon for the Automic Web Interface, redrawn by hand in Affinity Designer by Michael A. Lowry

    AWI icons with colored borders

    And here are the variants with colored borders — one for each of our staging environments.

    Orange
    #FA9607 
    Yellow
    #FFCC00
    Blue
    #2A97FF
    Green
    #00C400
    Red
    #FF0000

    A ZIP file containing all icons in PNG, ICO, and SVG formats is attached below. Open the SVG files in a drawing program to see how the designs are constructed, or to make your own customizations.

    Changing the default AWI favorite icon

    A big advantage of changing the default AWI favorite icon is the ability to visually distinguish different environments, e.g., in bookmarks or open browser tabs.

     In 2016 I shared some ideas about Web Interface customization, including an idea for using color-coded custom icons to replace the default icon file. I discovered that one can customize the AWI favorite icon by replacing the default icon file inside the webui-vaadin-framework-theme.jar file bundled inside the AWI WAR file. The icon files that must be replaced differ by version.

    AWI v24.3 and earlier

    awi.war/WEB-INF/bundle/webui-vaadin-framework-theme.jar/VAADIN/themes/oneui/:

    • favicon.ico

    If you're running AWI v24.3 in Kubernetes, see these instructions for customizing the AWI favicon in AAKE v24.3.

    AWI v24.4

    awi.war/WEB-INF/plugins/framework-bundles/webui-vaadin-framework-theme.jar:/themes/oneui/:

    • favicon.ico
    • favicon_default.svg
    • favicon_default_32.svg

    If you're running AWI v24.4 in Kubernetes, see these instructions for customizing the AWI favicon in AAKE v24.4.


    See also this post on how to associate a custom icon with each session color.



  • 2.  RE: Color-coded AWI icons

    Posted Feb 19, 2023 07:18 AM
    Edited by Michael A. Lowry Feb 19, 2023 07:43 AM

    We use the different colored icons to make it easy to quickly distinguish our staging environments:

    Orange Experimental 2
    Yellow Experimental 1
    Blue Development
    Green Testing
    Red Production

    As I have mentioned, we are in the process of migrating from one cloud provider to another, and will for at least a couple of years have AE systems running side-by-side in both clouds.

    As we prepare to migrate from one cloud provider to another, a new dilemma appears: how do we distinguish the AE systems of the same environment running in the two cloud providers from each other? For instance, how do we distinguish the Development system in the old cloud provider from the Development system in the new cloud provider? The logo can be customized and specified via the AUTOMIC_LOGO_FILENAME environment variable (or via logo.filename in colors.properties). But when we have many tabs open, how can we tell at a glance which tab belongs to which Development system?

    Recently one possible solution presented itself. The upper left corner of the AWI icon is essentially blank. This space can be used to insert the logo of the new cloud provider for AWI systems that are running there. This small change makes those AWI systems instantly recognizable. The logo is small, and when the whole favicon is displayed at the scale of 16x16 pixels, the logo inside the icon is mostly unrecognizable. However, if the favicons of the old systems remain as-is, without the additional small logo in the corner, then just the presence of the logo is enough to distinguish the new systems from the old.

    Just to give an idea of what it looks like, here are two Dev icons, side-by-side - one with a small star shape in the upper left hand corner.

    This is just one possibility. Another idea would be to change the colors of the spirograph inside. This would be even more easily distinguishable.



  • 3.  RE: Color-coded AWI icons

    Posted Mar 06, 2023 03:24 AM
    Edited by Michael A. Lowry Mar 09, 2023 07:37 AM

    I submitted a new idea: AWI: custom favicon

    If you like the idea, please vote for it.



    Background


    The AWI provides several options for theming, including the ability for administrators to assign a custom logo and colors to an AWI system.

    Proposal
    The AWI should also allow administrators to specify a custom favorite icon (favicon). The suggested new environment variables are listed in bold in the table below.

    Environment variable
    Example value
    AUTOMIC_MAINCOLOR #FA9607
    AUTOMIC_SESSION_COLORS #FA9607 - Orange
    AUTOMIC_WHITE_BACKGROUND false
    AUTOMIC_LOGO_FILENAME logo.svg
    AUTOMIC_LOGO_MIMETYPE image/svg+xml
    AUTOMIC_LOGO_BACKGROUND #1E1E1E
    AUTOMIC_LOGO_BASE64
    AUTOMIC_FAVICON_FILENAME favicon.svg
    AUTOMIC_FAVICON_MIMETYPE image/svg+xml
    AUTOMIC_FAVICON_BASE64

    Benefits


    This would make it possible for administrators to hard-code a different custom favicon for each AE system, in turn making it easier for users to distinguish bookmarks and open browser tabs.

    References

    Color-coded AWI icons
    Custom AWI logo in SVG format
    Configure AWI via environment variables



  • 4.  RE: Color-coded AWI icons

    Posted Mar 09, 2023 08:40 AM
    Edited by Michael A. Lowry Apr 13, 2023 12:52 PM

    Deleted



  • 5.  RE: Color-coded AWI icons

    Posted Apr 13, 2023 12:52 PM
    Edited by Michael A. Lowry Apr 13, 2023 12:53 PM
      |   view attached

    Here is an improved version of my AWI favorite icon, including the versions with colored borders.

    Improvements include:

    • The dark background is #1E1E1E instead of pure black.
    • The green border is a darker shade, #00C400.
    • The spirograph is constructed using a smaller number of shapes.
    • The shapes are more precisely positioned & oriented.

    A ZIP file containing all icons in PNG, ICO, and SVG formats is attached.

    Attachment(s)

    zip
    AWI Favicons.zip   698 KB 1 version


  • 6.  RE: Color-coded AWI icons

    Posted Apr 09, 2024 11:26 AM

    Thanks, I'll use those for my teams channel integrations




  • 7.  RE: Color-coded AWI icons

    Posted Apr 24, 2024 09:24 AM
    Edited by Michael A. Lowry Apr 24, 2024 12:05 PM

    We recently automated replacement of the favicon.ico file during AWI deployment. Below is the relevant snippet from the deployment pipeline. This bit of shell scripting replaces the default favicon.ico file with the color-coded icon specific to the target environment.

    The ENV_COLOR variable is set to one of the environment-specific colors (orage, yellow, blue, green, red) by a variable group associated with the deployment stage. The awi.zip file is just the awi.war file, renamed.

    # Replace favorite icon file based on environment.
    shopt -s extglob
    ENV_COLORS='@(orange|yellow|blue|green|red)'
    echo "Environment: ${RELEASE_ENVIRONMENTNAME}"
    echo "Env. color: $ENV_COLOR"
    case "$ENV_COLOR" in
    ${ENV_COLORS})
      echo "Replacing favicon.ico with ${ENV_COLOR}-bordered icon for ${RELEASE_ENVIRONMENTNAME} environment."
      cd ${SYSTEM_DEFAULTWORKINGDIRECTORY}/_AWI/build
      unzip awi.zip WEB-INF/bundle/webui-vaadin-framework-theme.jar
      mkdir -p VAADIN/themes/oneui
      cp ${SYSTEM_DEFAULTWORKINGDIRECTORY}/devops/icons/favicon_${ENV_COLOR}.ico VAADIN/themes/oneui/favicon.ico
      zip WEB-INF/bundle/webui-vaadin-framework-theme.jar VAADIN/themes/oneui/favicon.ico
      zip awi.zip WEB-INF/bundle/webui-vaadin-framework-theme.jar
      rm -rf WEB-INF VAADIN
      ;;
    *)
      echo "Environment color $ENV_COLOR is unknown. Skipping replacement of favicon.ico file."
      ;;
    esac

    Until the Automation Engine is updated to make customization of the favorite icon easier, the above approach works pretty well. Enjoy!



  • 8.  RE: Color-coded AWI icons

    Posted Nov 12, 2024 05:02 AM
    Edited by Michael A. Lowry Nov 12, 2024 05:37 AM

    We are in the process of migrating from AE on VMs to AAKE in Kubernetes clusters.

    With AAKE, the AWI is provided as one of several Docker images. The file webui-vaadin-framework-theme.jar is nested inside one of the layers of the awi image, in the directory /usr/awi/plugins/framework-bundles.

    Can anyone propose a way to replace the favicon.ico file dynamically, just before the AWI is started?



  • 9.  RE: Color-coded AWI icons

    Posted Mar 14, 2025 04:02 AM
    Edited by Michael A. Lowry 2 days ago

    Here's a Dockerfile for a modified AWI image with a custom favorite icon.

    # syntax=docker/dockerfile:1.10
    # Insert environment-specific color-coded AWI favorite icon into webui-vaadin-framework-theme.jar
    
    # Define build arguments with default values
    ARG REGISTRY="containerregistry.mycompany.com"
    ARG REPOSITORY="awi"
    ARG VERSION="24.3.0.3"
    
    # Stage 1: Define the source image explicitly, because variables are not supported in the --from option of COPY
    FROM ${REGISTRY}/${REPOSITORY}:${VERSION} as awi_image
    
    # Stage 2: Use a base image with the necessary tools
    FROM ubuntu:latest as builder
    
    # Install zip
    RUN apt-get update && apt-get install -y zip
    
    # Copy the JAR from the awi image
    COPY --from=awi_image /usr/awi/plugins/framework-bundles/webui-vaadin-framework-theme.jar /tmp/webui-vaadin-framework-theme.jar
    
    # Make the directory structure to mirror what's in the JAR.
    RUN mkdir -p /tmp/VAADIN/themes/oneui
    
    # Replace the ICO file inside the JAR contents in the builder stage
    COPY favicon.ico /tmp/VAADIN/themes/oneui/favicon.ico
    
    # Repack the JAR file in the builder stage
    RUN cd /tmp && zip webui-vaadin-framework-theme.jar VAADIN/themes/oneui/favicon.ico
    
    # Stage 3: Use the vendor image to run the app
    FROM awi_image
    
    # Copy the modified JAR file from the builder stage to the final image
    COPY --from=builder /tmp/webui-vaadin-framework-theme.jar /usr/awi/plugins/framework-bundles/webui-vaadin-framework-theme.jar
    
    # Start the AWI. These statements are based on the way Broadcom's own AWI image works.
    CMD ["cd", "/usr/awi"]
    ENTRYPOINT ["/bin/sh", "-c", "./entrypoint.sh"]

    Build arguments cannot be used in COPY statements, so you must provide your desired icon in file named exactly favicon.ico.

    This has been tested successfully with AWI v24.3. It should also work with v21.

    Note that file names and path names changed in AWI v 24.4. See the reply below for more information.



  • 10.  RE: Color-coded AWI icons

    Posted 3 days ago
    Edited by Michael A. Lowry 2 days ago

    By default, AWI v24.4 loads the icon at path /awi/@theme/favicon_default_32.svg. If a session color is specified by the user, the AWI loads an icon at the path awi/@theme/favicon_32_rgbhex.svg where rgbhex is the hexadecimal RGB color code, e.g., E6E6E6. The session color-specific SVG files are generated dynamically. The AWI appears to use the file favicon_32.svg as a template, replacing the magenta color #DE1E7E in this SVG file with the chosen session color. (I haven‘t tested this, but if my understanding is correct, it means that it‘s possible to create a custom icon that still responds dynamically to the user‘s selected session color.)

    Here's a Dockerfile for a modified AWI v24.4 image with a customized favorite icon.

    # syntax=docker/dockerfile:1.10
    # Insert environment-specific color-coded AWI favorite icon into webui-vaadin-framework-theme.jar
    
    # Define build arguments with default values
    ARG REGISTRY="containerregistry.mycompany.com"
    ARG AWI_REPOSITORY="awi"
    ARG VERSION="24.4.0.2"
    
    # Stage 1: Define the source image explicitly, because variables are not supported in the --from option of COPY
    FROM ${AWI_REGISTRY}/${AWI_REPOSITORY}:${AWI_VERSION} AS awi_image
    
    # Stage 2: Use a standard Ubuntu base image for performing modifications on the JAR file.
    FROM ubuntu:latest as builder
    
    # Install zip and unzip commands
    RUN apt-get update && apt-get install -y zip
    
    # Copy the JAR from the awi image
    COPY --from=awi_image /usr/awi/plugins/framework-bundles/webui-vaadin-framework-theme.jar /tmp/webui-vaadin-framework-theme.jar
    
    # Create a directory structure that mirrors what's in the JAR.
    RUN mkdir -p /tmp/themes/oneui
    
    # Replace the ICO and SVG files inside the JAR in the builder stage
    COPY favicon.ico /tmp/themes/oneui/favicon.ico
    COPY favicon_default_32.svg /tmp/themes/oneui/favicon_default_32.svg
    COPY favicon_32.svg /tmp/themes/oneui/favicon_32.svg
    
    # Repack the JAR file in the builder stage
    RUN cd /tmp && zip webui-vaadin-framework-theme.jar themes/oneui/favicon.ico themes/oneui/favicon_default_32.svg themes/oneui/favicon_32.svg
    
    # Stage 3: Use the vendor image to run the app
    FROM awi_image
    
    # Copy the modified JAR file from the builder stage to the final image
    COPY --from=builder /tmp/webui-vaadin-framework-theme.jar /usr/awi/plugins/framework-bundles/webui-vaadin-framework-theme.jar
    
    # Start the AWI. These statements are based on the way Broadcom's own AWI image works.
    CMD ["cd", "/usr/awi"]
    ENTRYPOINT ["/bin/sh", "-c", "./entrypoint.sh"]

    This has been tested successfully with AWI v24.4.0.2.

    Build arguments cannot be used in COPY statements, so you must provide your custom icon in three files named exactly favicon.ico, favicon_default_32.svg, and favicon_32.svg.

    In our environment, we automate this in the deployment pipeline. There’s a step in the pipeline that copies the icon files for the target environment from git, to the file names expected by the Dockerfile.