Universal Dashboard v3 Progress

Here’s some really nerdy stuff that I’m excited about. I’ve been working on porting all the Materialize components over to Material UI. It’s going really well. It’s much easier to use React components than force in the Materialize stuff.

Great work by @AlonGvili for getting this started like a year ago!

Here are some awesome things I’ve learned that are making this development way faster and may help you with your development of controls.

Sandbox Dashboard

I created a “sandbox” dashboard that has all the components in all of their states on it. This means I can easily pop open a page and tweak a control without having to re-write that particular state for that control.

Here’s the sandbox dashboard. It has examples of all the controls.

Next, I setup a sandbox.ps1 script that starts a webpack-dev-server. Webpack Dev Server allows you to make changes to your JSX file and it automatically recompiles the JSX files and reloads the page for you. This makes tweaking controls SUPER fast.

https://recordit.co/CGNSboXNSB

The magic is in the sandbox.ps1, package.json and webpack.config.js files.

Speedy Testing

I’ve changed how we are doing testing to use the sandbox dashboard. This means, instead of each test creating its own state, we now just open the correct page and run the tests against the sandbox dashboard.

I can run over 100 tests in about 30 seconds.

Consistent Component Integration

This is the thing I’m most excited about. One of the biggest problems with implementing UD controls is integrating with Get-UDElement, Set-UDElement, Remove-UDElement, Sync-UDElement and Add-UDElement.

I’ve created a JavaScript high-order function that allows you to automatically integrate with these features. All you need to do is to wrap your component in it.

export default withComponentFeatures(UdButton);

Then, when you want to notify of JavaScript events, you can use a function passed in as a prop.

  const handleClick = () => {
    if (props.onClick == null) return;
    props.notifyOfEvent('onClick', "")
  };

State is managed by the high-order function so the component just needs to report any state up using a setState function passed as a prop.

    const onChange = (event) => {
        props.setState({ value : event.target.value})

        if (props.onChange) {
            props.notifyOfEvent('onChange', event.target.value)
        }
    }

Since the high-order function component is storing the props and state, it can integrate automatically with Set-UDElement and Get-UDElement.

This is awesome because then it means you can do stuff like this. Notice how I’m using New-UDSelect and passing the result to Set-UDElement. This means I can update any property of a control using Set-UDElement.

        New-UDButton -Text 'Set State' -OnClick {
            $Select = New-UDSelect -Label '10-12' -Id 'select' -Option {
                New-UDSelectOption -Name "Ten" -Value 10
                New-UDSelectOption -Name "Eleven" -Value 11
                New-UDSelectOption -Name "Twelve" -Value 12
            } -DefaultValue 10 -OnChange { Set-TestData $EventData }

            Set-UDElement -Id 'select' -Properties $Select
        }

This is how that looks to the end-user.

https://recordit.co/8dU60OaB2B

The high-order function can be found here: https://github.com/ironmansoftware/universal-dashboard/blob/master/src/UniversalDashboard.MaterialUI/Components/universal-dashboard.jsx

I’ll release it as an NPM package you’ll be able to use if your components once we release 3.0. I’m sure there are tweaks I’ll have to make to it to have it work in every scenario.

If you want a full example of its use, check out the UDSelect control.

So, that’s is. I’m super excited for v3! I’ve merged my first PR into the master branch for v3. There are a lot of things that still need to happen but it’s a huge step forward. There is a v2 branch the still contains the v2 source so we can continue to fix bugs in there if need be.

9 Likes

Wow this all sounds and looks amazing from what I have seen so far. If I am reading this right then developing and making new components should be even easier and much much faster…? I am sure you are due another youtube video :grinning: so think this should all be covered in a youtube video. So excited about v3 and all these goodies you keep releasing. Thanks so much @adam and @AlonGvili for all your hard work :+1:

2 Likes

Yep! It should be way easier. Still needs some time to bake it but I’ll make sure to release lots of info when it’s done.

4 Likes

Been waiting for this for a while :slight_smile: glad to see it’s getting close.

Anyway we can get our hands on a nightly? just to see and play?

Looks very promising … Good work @adam @AlonGvili

1 Like

Nightly releases are now v3 -> https://github.com/ironmansoftware/universal-dashboard/releases/tag/nightly.20200221.29

Check out the sandbox dashboard to see how everything works: https://github.com/ironmansoftware/universal-dashboard/blob/master/src/UniversalDashboard.MaterialUI/dashboard.ps1

3 Likes

what you guys think about the new theme file and approach ,

let start from the end the result is this

but instead of defining the style in the component you define the look in the theme, so in the example i want to create 3 avatars in different sizes
so in the theme file i do this

@{  
    name       = "basic"
    definition = @{
        colors   = @{
            primary    = "#df5656"
            secondary  = "#fdc533"
            background = "#c1c1c1"
            text       = "#333"
            muted      = "#d6d6d6"
        }
        modes    = @{
            dark = @{
                primary    = "#eaa22222"
                secondary  = "#fdc533"
                background = "#333"
                text       = "#fff"
                muted      = "#ccc"
            }
        }
        avatars = @{
            small = @{
                width = '24px'
                height = '24px'
                margin = '16px'
                borderRadius = '50%'
            }
            medium = @{
                width = '48px'
                height = '48px'
                margin = '16px'
                borderRadius = '50%'
            }
            large = @{
                width = '96px'
                height = '96px'
                margin = '16px'
                borderRadius = '50%'
            }
        }   
    }
}

I create new “section” name avatars and set the sizes with there props

and in the powershell function New-UDMUAvatar instead of using the property -Style @{…}
i use the -Variant property, for example, New-UDMUAvatar … -Variant small, this will create an avatar image with all the styles that we define in the theme avatars small.

New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant small
New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant medium
New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant large

Dark Color Mode

the new theme comes with built-in support for dark mode
to enable the dark theme you need to add this section

modes    = @{
            dark = @{
                primary    = "#eaa22222"
                secondary  = "#fdc533"
                background = "#333"
                text       = "#fff"
                muted      = "#ccc"
            }
        }

and to use the dark the or toggle between light and dark you can use New-UDToggleColorMode button

When the theme is light the icon will be image and when dark image

Notes

  • The new theme will give you support for dynamic spacing and fontSize base on the media breakpoint
    so you don’t need to deal with how the text look in different screens.

  • my main goal is to remove the properties: style,fontColor,backgroundColor from all the components, you can manage all of this in the theme

  • and for you component and module authors i will tell you that it so easy to add the theme support to you components, i will write small doc on How To do it

10 Likes

Updates…

I added option to set colors on charts using the new theme,

so the code section in the theme will look like that

and the result is

4 Likes

@adam I love to see the way v3 is going … is there any possible release date for this planned (just a guess is also fine for me). I am asking because I am working on some projects and want to plan if I can start this with v3 … :slight_smile:

No dates for now, we are working on the theme and the charts, we moveing from chart.js to antv g2plot lib.

1 Like

I think we can probably put out an alpha version in the next couple weeks. I would guess sometime this summer would be the GA release.

Sounds good, thats all I wanted to know :slight_smile: … Or just one more … Is the progress from v3 included in the nightly build? :slight_smile:

UD3 Community nightly releases are available. UD3 enterprise nightly releases are not posted yet. I changed\simplified how UD3 enterprise is developed but haven’t hooked up the build pipeline for that yet to publish nightly builds. Expect those to start coming out this week.

1 Like

I cannot find a v3 branch … Maybe silly from me but is the v3 progress in the “normal” master branch … And fir this reason in the “normal” nightly build?

v3 work is in the master branch and the normal nightlies are now v3 builds.
The v2 branch is the 2.9 version that was just released. We’ll update that branch when we need to do fixes for v2.

1 Like

I managed to get the v3 Enterprise release up on GitHub. Right now, there are 2 modules: UniversalDashboard.Community and UniversalDashboard.Enterprise. Enterprise relies on Community. It is no longer a fork of community.

To use enterprise functionality, you’ll need to do this for now.

Import-Module UniversalDashboard.Community
Import-Module UniversalDashboard.Enterprise

If you want to quickly check out all the functionality, download the dashboard.ps1 file.

Here’s a little script to configure some auth policies and a login page and use that dashboard.

$Dashboard = . "F:\universal-dashboard\src\UniversalDashboard.MaterialUI\dashboard.ps1"
Import-Module UniversalDashboard.Enterprise

$AuthorizationPolicy = New-UDAuthorizationPolicy -Name "Policy" -Endpoint {
    param($User)

    $true
}

$AuthorizationPolicy2 = New-UDAuthorizationPolicy -Name "FailedPolicy" -Endpoint {
    param($User)

    $false
}

$AuthenticationMethod = New-UDAuthenticationMethod -Endpoint {
    param([PSCredential]$Credential)

    if ($Credential.UserName -eq 'Adam')
    {
        New-UDAuthenticationResult -Success -UserName 'Adam'
    }
    else 
    {
        New-UDAuthenticationResult -ErrorMessage 'Failure!'
    }
}

$LoginPage = New-UDLoginPage -AuthenticationMethod $AuthenticationMethod -AuthorizationPolicy @($AuthorizationPolicy, $AuthorizationPolicy2)
$Dashboard.Properties.Add('LoginPage', $LoginPage)
$Dashboard.Properties.Add('AdminMode', [Switch]::Present)

Start-UDDashboard -Port 10001 -Dashboard $dashboard -Force -AdminMode

Obviously, this is very much a work in progress. Please don’t open issues for v3 yet. Once we release to the Gallery we will call it free game for v3 issues.

5 Likes

So i’m guessing the new chart going to support all of this …

3 Likes

will be interesting to see the end result a lot of configuration or maybe one command… :thinking:

yeah I’m curious to see how all the options play out. One thing I’m doing with the UDCard is making it so there is an “easy” parameter set and an “advanced” parameter set. So it’s easy to use it with just a few parameters (similar to what we have now) but also an advanced set that allows for all kinds of configuration. Maybe we could do something similar here.

im thinking maybe all the options related to styling i move to the theme so ppl can get consist look for charts in an easy way…

1 Like