microsoft / azpipelines-kubernetesui

This repo contains UI views of a kubernetes cluster and will be used in azure devops pipelines. This UI is hostable outside of azure pipelines product and does not require the UI web server to be running inside the kubernetes cluster.

Azure Pipelines Kubernetes UI

Overview

This repo contains React based UI view of a kubernetes cluster and will be used in azure devops pipelines. This UI is hostable outside of azure pipelines product and does not require the UI web server to be running inside the kubernetes cluster.

This repo consists of

1. Contracts: The IKubeService provides the interface that needs to be implemented inorder to fetch data needed for the UI
2. WebUI: It contains the components that make up the UI

Usage of Kubernetes UI within Azure DevOps

This Web UI will be integrated into Azure DevOps as an extension and will be available by default in your Azure DevOps accounts going forward. The repo for the extension is at azPipeline-KubernetesUI-devopsExtension.

Host the Kubernetes UI within your Web Application

You can also host the UI outside of Azure DevOps. Refer to the azpipelines-kubernetesUI-WebApp repository as a working reference on how to host the Kubernetes UI in a stand-alone web app. It also has a custom implementation of IKubeService to fetch the required Kubernets objects.

Prerequisites: Node and Npm

Windows and Mac OSX: Download and install node from nodejs.org

Linux: Install using package manager

From a terminal ensure at least node 8.4 and npm 5.3:

$ node -v && npm -v
v8.4.0
5.3.0

To install npm separately:

[sudo] npm install npm@5 -g
npm -v
5.6.0

Note: On windows if it's still returning npm 2.x run where npm. Notice hits in program files. Rename those two npm files and the 5.6.0 in AppData will win.

Build

npm install
npm run build

Test

To clean test binaries, build test binaries and run tests

npm run ctest

To build test binaries and run tests

npm test

Dependencies

This repository depends on the following packages:

• azure-devops-ui: UI library containing the React components used in the Azure DevOps web UI.
• @kubernetes/client-node: The Javascript clients for Kubernetes implemented in typescript.
• office-ui-fabric-react: React components for building experiences for Office and Office 365

Some external dependencies:

• React - Is used to render the UI in the samples, and is a dependency of azure-devops-ui.
• TypeScript - Samples are written in TypeScript and complied to JavaScript
• SASS - Extension samples are styled using SASS (which is compiled to CSS and delivered in webpack js bundles).
• webpack - Is used to gather dependencies into a single javascript bundle for each sample.
• jest - Is used as unit test framework.
• enzyme - Test utility to test react components.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

azpipelines-kubernetesui's Issues

Warnings observed during build time

I noticed the following warnings during compilation. Please fix them

Handle localization of resources

Add ThirdPartyNotices.txt file

podslist is overlapping name of the pod

when a replicaset or service is opened we can see the following ui, we should fix the overlap

UI does not render in IE11

ie details:

screenshot:

ServiceComponent details table should not have lines

please see to remove columns in the following view of a service

css conflicts with AzureDevops

Possible solutions:

• Use css optimizer to split into two chunks of own-css & dependent-css and not load the dependent css at runtime of AzureDevOps. But you will still be using a non-deterministic version of css provided by AzureDevOps. Also need to resolve loading multiple files in AzureDevops webproj dependency resolution
• Try prefixing or scoping the css to not conflict with AzureDevOps

Webplatform.scss overrides to be removed, as contentClassName is available for rendering table cells

please check the implementation for annotations/labels for podoverview component

check the following commit for the same.
https://github.com/Microsoft/azpipelines-kubernetesUI/blob/adcf262d34f78d975353a84b9b70167f48264746/src/WebUI/Pods/PodOverview.tsx#L115

depth of the pod list should show shadow by default

Today pod list is not shown shadow by default, in webapp we have to implement the following. This issue will not happen in devops, because devops extension is loaded in devops and this variable is loaded as part of devops. to make use of this UI in general manner we have to define the variable, so we will not override in other places.

microsoft/azpipelines-kubernetesUI-WebApp@75d69a3

this happens due to use of CSS available in https://www.npmjs.com/package/azure-devops-ui [which are not complete]. we can open a bug in Devops also.

text field and labels listing can be made as separate components

All text fields are bound by the width of the cell and should have an ellipsis overflow with tooltip to show the full text. Currently there are multiple such text which can be refactored into a single component and used. The same with labels listing

remove deprecated css from the code

#150
In this PR we kept new and old css for compatability purpose, in future we should remove, may be in M152.

Migrate from custom primary-secondary text component in table to TwoLineTableCell

IMO, we should start using TwoLineTableCell component from azure-devops-ui/Table in place of custom code.

accessibility issues in dark mode

For a user in devops we can setup darkmode [not Windows default high contrast mode], in that UI is looked the following way

Keyboard also we should define, one of the issue reported:
Keyboard : When using Tab to navigate it is not moving to the highlighted panel

ToolTipHost should be replaced with ToolTip

As @dabasnidhi mentioned in PR #55 ToolTipHost is deprecated and should be replaced with ToolTip component.

N calls in a single method

I observed that we are making N calls in _populateStateData() method of KubeSummary.tsx file and that is an anti-pattern for performance. Please fix it.

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

No option to switch back from Desktop or Mobile view

When I create a Retrospective board, I have the option to switch to Desktop or Mobile view. As soon as the initial view is changed, there is no option (the icon disappears) to switch back to the initial view. Furthermore, when my colleagues open the Retrospective, the board is displayed in Mobile view for them as default. And there is no way for them to switch to another view.

master detail page in pods details: not able to use keyboard to select a pod from the left side pod list

master detail page in pods details: not able to use keyboard to select a pod from the left side pod list

Why use azure-devops-ui instead of Fabric 7?

It seems both the design language and React components are duplicating effort taken by the Fabric 7 team. I'd agree that Fabric was originally design for 365 apps, but it seems that they are increasing the scope to become the general Microsoft UI Framework?

URL for the job should not be computed

As per the code, uri should not be computed. it should be taken from labels.
https://github.com/Microsoft/azure-pipelines-tasks/blob/3d08e79a83e16610b0f4e9531e74dbe5391255b1/Tasks/Common/docker-common/pipelineutils.ts#L28

addLabel(hostName, "build.builduri", "BUILD_BUILDURI", labels);

we are doing the following
https://github.com/Microsoft/azpipelines-kubernetesUI/blob/2af2af8a5a0e95d7afd88ce18d18ac69b160d207/src/WebUI/ImageDetails/ImageDetails.tsx#L367

return format("{0}{1}/_build?buildId={2}", teamFoundationCollectionUri, teamProject, runId.toString());

Display relevant zero data screens when filters are applied and no data matches

This issue stems from #82. Spec defines No results found zero data screen to be displayed when filters are applied and no data matches.

we fixed this for services, need to fix for workloads

misalignment of services table columns

with the following commit, width of the table [services] has increased so we should do the same for min-width also.

2174c2f#diff-e71a9ed049605722afa8cabaef5c1d71

here is the repro:

1. open services component tab, change the width of the browser to 200px, then see the table [right side columns]

Add a screenshot in Readme

Please add a screenshot in the Readme, I want to know what I get instantaneously when looking at the docs.

Also, how do you set this up to give it a try?
Thanks!

add webapp example in this repo

today we use webapp repo for testing any changes done in this repo, to make sure testing is also done on the same repo, we should have an example app in this repo.

pod details page is overlapping the name of the pod

In the following screen we can see when the name is too long the UI is overlapping