11/11/17

DevOps Set Default Azure Subscription with Azure CLI

              , ,       No comments    
DevOps for Azure configuration and deployment is a key component of cloud operations management without having the need to use the Azure user interface. When there are multiple subscriptions to manage, we need to make sure that we first select the correct subscription from Azure. We can take a look at how this can be done using Azure CLI 2.0  (install from this site).


After opening the Bash command shell, follow these steps:

Login to Azure

We can login to our Azure account using the login command. This requires some browser interaction to enter a code for the two factor authentication.


az login

List Our Subscriptions

After a successful login, we can list all of our current subscription using the account command.


az account –list –all –output table

We can see the returning JSON with a list of accounts that are available in a nice table format.  Each reference has a name and isDefault property. Only one of them is our default subscription.

Set a Default Subscription

We can change our default subscription by running the account set command.


az account set  --subscription “my subscription name”

Validate Default Subscription

We should be able to list all the subscriptions again and verify that the default subscription is correct by filtering the results using GREP. (Note this work when using Bash)


az account –list –all –output table | grep “True”

The result should be only the subscription that is set to IsDefault = true.

At this point, we should be on the right subscription, and we can move forward with any additional configuration using Azure CLI.

Originally published by ozkary.com

11/4/17

Input Range Slider with Color Indicator

              , ,       No comments    

The HTML input type range lets us specify a numeric value which falls within a min and max value. For some use cases, we want to style the control in such a way that provides a visual feedback that is related to the selected value.  In our example, we can create a slider control that maps to three different system statuses:

Status
Control Value
Background Color
Down
1
Red
Idle
2
Gray
Running
3
Green



We want to be able to change the background color of the thumb control to match the slider value. In order to do this, we first need to create the base CSS classes to style the control. We are also creating some thumb classes with the corresponding background color.


    .slidecontainer {
        width: 100%;
    }

    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 30px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }
        .slider:hover {
            opacity: 1;
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: gray;
            cursor: pointer;
        }

    .thumb1::-webkit-slider-thumb {
        background: red;
    }

    .thumb2::-webkit-slider-thumb {
        background: gray;
    }

    .thumb3::-webkit-slider-thumb {
        background: green;
    }

Now that we have styled our control, we want to map the selected slider value to a CSS class that we defined. We can do this by using the range control oninput event which fires when the value changes.


    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");

    var thumb = {"1":"thumb1","2":"thumb2","3":"thumb3"};
    output.innerHTML = thumb[slider.value];

    slider.oninput = function() {
      output.innerHTML =thumb[this.value];
      slider.className = 'slider ' + thumb[this.value];
    }

In the code, we define a hash table with the possible slider values as keys. This enables us to quickly resolve the class name for the current value. When the value changes, we set the range controller class name to the slider base class plus the thumb class which provides the button background color.



With this article, we are able to show how easy it is to style the range input control to make it provide better visual feedback to the end users.

Originally published by ozkary.com