Improvements to the React GUI for builders and workers

Makefile

@@ -7,11 +7,19 @@ ROOT_DIR := $(shell dirname $(realpath $(firstword $(MAKEFILE_LIST))))
 
 .PHONY: docs pylint flake8 virtualenv
 
+ifeq ($(OS),Windows_NT)
+ VENV_BIN_DIR := Scripts
+ VENV_PY_VERSION ?= python
+ VENV_CREATE := python -m venv
+else
+ VENV_BIN_DIR := bin
+ VENV_PY_VERSION ?= python3
+ VENV_CREATE := virtualenv -p $(VENV_PY_VERSION)
+endif
 
 VENV_NAME := .venv$(VENV_PY_VERSION)
-PIP ?= $(ROOT_DIR)/$(VENV_NAME)/bin/pip
-PYTHON ?= $(ROOT_DIR)/$(VENV_NAME)/bin/python
-VENV_PY_VERSION ?= python3
+PIP ?= $(ROOT_DIR)/$(VENV_NAME)/$(VENV_BIN_DIR)/pip
+VENV_PYTHON ?= $(ROOT_DIR)/$(VENV_NAME)/$(VENV_BIN_DIR)/python
 YARN := $(shell which yarnpkg || which yarn)
 
 WWW_PKGS := www/react-base www/react-console_view www/react-grid_view www/react-waterfall_view www/react-wsgi_dashboards www/badges
@@ -84,7 +92,7 @@ frontend: frontend_deps
 # build frontend wheels for installation elsewhere
 frontend_wheels: frontend_deps
  for i in pkg $(WWW_PKGS); \
- do (cd $$i; $(PYTHON) -m build --no-isolation --wheel || exit 1) || exit 1; done
+ do (cd $$i; $(VENV_PYTHON) -m build --no-isolation --wheel || exit 1) || exit 1; done
 
 # do installation tests. Test front-end can build and install for all install methods
 frontend_install_tests: frontend_deps
@@ -112,8 +120,9 @@ docker-buildbot-master:
  $(DOCKERBUILD) -t buildbot/buildbot-master:master master
 
 $(VENV_NAME):
- virtualenv -p $(VENV_PY_VERSION) $(VENV_NAME)
- $(PIP) install -U build pip setuptools wheel
+ $(VENV_CREATE) $(VENV_NAME)
+ $(VENV_PYTHON) -m pip install --upgrade pip 
+ $(PIP) install -U setuptools wheel
 
 # helper for virtualenv creation
 virtualenv: $(VENV_NAME) # usage: make virtualenv VENV_PY_VERSION=python3.4
@@ -122,21 +131,21 @@ virtualenv: $(VENV_NAME) # usage: make virtualenv VENV_PY_VERSION=python3.4
  -r requirements-cidocs.txt \
  packaging towncrier
  @echo now you can type following command to activate your virtualenv
- @echo . $(VENV_NAME)/bin/activate
+ @echo . $(VENV_NAME)/$(VENV_BIN_DIR)/activate
 
 TRIALOPTS?=buildbot
 
 .PHONY: trial
 trial: virtualenv
- . $(VENV_NAME)/bin/activate && trial $(TRIALOPTS)
+ . $(VENV_NAME)/$(VENV_BIN_DIR)/activate && trial $(TRIALOPTS)
 
 release_notes: $(VENV_NAME)
  test ! -z "$(VERSION)" # usage: make release_notes VERSION=0.9.2
  towncrier build --yes --version $(VERSION) --date `date -u +%F`
  git commit -m "Release notes for $(VERSION)"
 
 $(ALL_PKGS_TARGETS): cleanup_for_tarballs frontend_deps
- . $(VENV_NAME)/bin/activate && ./common/maketarball.sh $(patsubst %_pkg,%,$@)
+ . $(VENV_NAME)/$(VENV_BIN_DIR)/activate && ./common/maketarball.sh $(patsubst %_pkg,%,$@)
 
 cleanup_for_tarballs:
  find master pkg worker www -name VERSION -exec rm {} \;
@@ -168,4 +177,4 @@ finishrelease:
 
 pyinstaller: virtualenv
  $(PIP) install pyinstaller
- $(VENV_NAME)/bin/pyinstaller pyinstaller/buildbot-worker.spec
+ $(VENV_NAME)/$(VENV_BIN_DIR)/pyinstaller pyinstaller/buildbot-worker.spec

master/buildbot/config/master.py

@@ -732,6 +732,8 @@ def load_www(self, filename, config_dict):
  'project_widgets',
  'graphql',
  'theme',
+ 'build_number_format',
+ 'max_recent_builds',
  }
  unknown = set(list(www_cfg)) - allowed
 

master/docs/manual/configuration/www.rst

@@ -220,6 +220,18 @@ This server is configured with the ``www`` configuration key, which specifies a
  "bb-sidebar-stripe-current-color": "#8c5e10",
  }
 
+``max_recent_builds``
+
+ Configures of the number of builds displayed in the Home App; default number is 20.
+
+``build_number_format``
+
+ Allows replacing the build number part of the build list for a builder or worker with a concatenated list of properties
+ retrieved from the build, e.g. a build version number.
+
+ The option is specified as an array of one or more strings, e.g. ["foo", "bar"], which uses the build properties
+ "foo" and "bar" to present the build number, if all are present in the build properties. 
+
 .. note::
 
  The :bb:cfg:`buildbotURL` configuration value gives the base URL that all masters will use to generate links.

newsfragments/build-time-info.bugfix

@@ -0,0 +1 @@
+Display Information about when build completed, instead of just when it started

newsfragments/display-properties-as-build-number.feature

@@ -0,0 +1 @@
+Added retrieval of properties to be displayed as the build number in views. The list of property names is specified as a list in the "build_number_format" attribute of the "www" config.

newsfragments/makefile-for-windows.bugfix

@@ -0,0 +1 @@
+Update `Makefile` to handle Windows paths and Python. Also modified the webpack config file to handle Windows paths.

newsfragments/project-configuration-of-number-of-build-to-display.bugfix

@@ -0,0 +1 @@
+Let the project configure max recent builds to display in Home app using the "max_recent_builds" attribute in the "www" config

newsfragments/reduce-tags-column-width-when-no-tags.bugfix

@@ -0,0 +1 @@
+Make Tags column in Builders page take less space when there are no tags

newsfragments/revision-column.bugfix

@@ -0,0 +1 @@
+Display revision info column in BuildsTable.

www/react-base/src/components/BuildersTable/BuildersTable.tsx

@@ -31,6 +31,7 @@ import {
  BuildLinkWithSummaryTooltip,
  WorkerBadge,
  TagFilterManager,
+ GetBuildLinkExtraPropertiesList, 
 } from "buildbot-ui";
 import {computed} from "mobx";
 import {Table} from "react-bootstrap";
@@ -63,7 +64,7 @@ export const BuildersTable = observer(
  limit: buildFetchLimit,
  order: '-started_at',
  builderid__eq: builderIds,
- property: 'branch',
+ property: ['branch', ...GetBuildLinkExtraPropertiesList()],
  }})
  });
 
@@ -129,10 +130,10 @@ export const BuildersTable = observer(
  <td>
  {buildElements}
  </td>
- <td style={{width: "20%"}}>
+ <td>
  {filterManager.getElementsForTags(builder.tags)}
  </td>
- <td style={{width: "20%"}}>
+ <td>
  {workerElements}
  </td>
  </tr>
@@ -154,11 +155,11 @@ export const BuildersTable = observer(
  <tr>
  <th>Builder Name</th>
  <th>Builds</th>
- <th>
+ <th style={{maxWidth: "20%", minWidth: "70px"}}>
  {filterManager.getFiltersHelpElement()}
  {filterManager.getEnabledFiltersElements()}
  </th>
- <th style={{width: "20%px"}}>Workers</th>
+ <th style={{width: "20%"}}>Workers</th>
  </tr>
  {builderRowElements}
  </tbody>

www/react-base/src/components/BuildsTable/BuildsTable.tsx

@@ -35,6 +35,7 @@ import {
 import {Link} from "react-router-dom";
 import {LoadingSpan} from "../LoadingSpan/LoadingSpan";
 import {TableHeading} from "../TableHeading/TableHeading";
+import {durationFormat} from "buildbot-ui";
 
 type BuildsTableProps = {
  builds: DataCollection<Build>;
@@ -56,20 +57,33 @@ export const BuildsTable = observer(({builds, builders}: BuildsTableProps) => {
  ? <span title={durationString}>{durationString}</span>
  : <></>;
 
+ const buildStartedCompletedElement = build.complete
+ ? (
+ <span title={dateFormat(build.complete_at!)}>
+ {dateFormat(build.complete_at!)}
+ </span>
+ )
+ : (
+ <span title={dateFormat(build.started_at)}>
+ Started at {dateFormat(build.started_at)}
+ </span>
+ );
+
  return (
  <tr key={build.id}>
  {builderNameElement}
  <td>
  <BuildLinkWithSummaryTooltip build={build}/>
  </td>
  <td>
- <span title={dateFormat(build.started_at)}>
- {durationFromNowFormat(build.started_at, now)}
- </span>
+ {buildStartedCompletedElement}
  </td>
  <td>
  {buildCompleteInfoElement}
  </td>
+ <td>
+ {getPropertyValueOrDefault(build.properties, "revision", "(unknown)")}
+ </td>
  <td>{getPropertyValueArrayOrEmpty(build.properties, 'owners').map((owner, index) => (
  <span key={index}>{owner}</span>
  ))}
@@ -95,8 +109,9 @@ export const BuildsTable = observer(({builds, builders}: BuildsTableProps) => {
  <tr>
  { builders !== null ? <td width="200px">Builder</td> : <></> }
  <td width="100px">#</td>
- <td width="150px">Started At</td>
+ <td width="150px">Completed At</td>
  <td width="150px">Duration</td>
+ <td width='150px'>Revision</td>
  <td width="200px">Owners</td>
  <td width="150px">Worker</td>
  <td>Status</td>

www/react-base/src/views/BuildView/BuildView.tsx

@@ -64,6 +64,10 @@ import {Tab, Table, Tabs} from "react-bootstrap";
 import {TableHeading} from "../../components/TableHeading/TableHeading";
 import {buildTopbarItemsForBuilder} from "../../util/TopbarUtils";
 
+import {
+ SetBuildLinkExtraProperties, 
+} from "buildbot-ui";
+
 const buildTopbarActions = (build: Build | null, isRebuilding: boolean, isStopping: boolean,
  doRebuild: () => void, doStop: () => void) => {
  const actions: TopbarAction[] = [];
@@ -376,13 +380,18 @@ const BuildView = observer(() => {
  );
 });
 
-buildbotSetupPlugin((reg) => {
+buildbotSetupPlugin((reg, config) => {
+ const build_number_format = config.build_number_format;
+
+ SetBuildLinkExtraProperties(build_number_format);
+
  reg.registerRoute({
  route: "builders/:builderid/builds/:buildnumber",
  group: null,
  element: () => <BuildView/>,
  });
 
+
  reg.registerSettingGroup({
  name:'Build',
  caption: 'Build page related settings',

www/react-base/src/views/BuilderView/BuilderView.tsx

@@ -39,6 +39,9 @@ import {FaStop, FaSpinner} from "react-icons/fa";
 import {buildTopbarItemsForBuilder} from "../../util/TopbarUtils";
 import { Tab, Tabs } from "react-bootstrap";
 import { LoadingSpan } from "../../components/LoadingSpan/LoadingSpan";
+import {
+ GetBuildLinkExtraPropertiesList, 
+} from "buildbot-ui";
 
 const anyCancellableBuilds = (builds: DataCollection<Build>,
  buildrequests: DataCollection<Buildrequest>) => {
@@ -104,7 +107,7 @@ export const BuilderView = observer(() => {
  const buildsQuery = useDataApiQuery(() =>
  buildersQuery.getRelated(builder => Build.getAll(accessor, {query: {
  builderid: builder.builderid,
- property: ["owners", "workername", "branch"],
+ property: ["owners", "workername", "branch", "revision", ...GetBuildLinkExtraPropertiesList()],
  limit: numBuilds,
  order: '-number'
  }

www/react-base/src/views/ChangeBuildsView/ChangeBuildsView.tsx

@@ -31,6 +31,9 @@ import {useState} from "react";
 import {ChangeDetails} from "buildbot-ui";
 import {BuildsTable} from "../../components/BuildsTable/BuildsTable";
 import {LoadingDiv} from "../../components/LoadingDiv/LoadingDiv";
+import {
+ GetBuildLinkExtraPropertiesList, 
+} from "buildbot-ui";
 
 
 export const ChangeBuildsView = observer(() => {
@@ -44,7 +47,7 @@ export const ChangeBuildsView = observer(() => {
 
  const buildsQuery = useDataApiSingleElementQuery(change,
  c => c.getBuilds({query: {
- property: ["owners", "workername"],
+ property: ["owners", "workername", "branch", "revision", ...GetBuildLinkExtraPropertiesList()],
  limit: buildsFetchLimit
  }}));
 

www/react-base/src/views/HomeView/HomeView.tsx

@@ -165,7 +165,9 @@ export const HomeView = observer(() => {
  )
 });
 
-buildbotSetupPlugin((reg) => {
+buildbotSetupPlugin((reg, config) => {
+ let max_recent_builds= config.max_recent_builds;
+
  reg.registerMenuGroup({
  name: 'home',
  caption: 'Home',
@@ -181,13 +183,15 @@ buildbotSetupPlugin((reg) => {
  element: () => <HomeView/>,
  });
 
+ if (max_recent_builds == null) max_recent_builds = 20
+
  reg.registerSettingGroup({
  name: 'Home',
  caption: 'Home page related settings',
  items: [{
  type: 'integer',
  name: 'max_recent_builds',
  caption: 'Max recent builds',
- defaultValue: 20
+ defaultValue: max_recent_builds
  }]});
 });

www/react-base/src/views/WorkerView/WorkerView.tsx

@@ -30,6 +30,9 @@ import {buildbotSetupPlugin} from "buildbot-plugin-support";
 import {WorkersTable} from "../../components/WorkersTable/WorkersTable";
 import {BuildsTable} from "../../components/BuildsTable/BuildsTable";
 import {WorkerActionsModal} from "../../components/WorkerActionsModal/WorkerActionsModal";
+import {
+ GetBuildLinkExtraPropertiesList, 
+} from "buildbot-ui";
 
 export const WorkerView = observer(() => {
  const workerid = Number.parseInt(useParams<"workerid">().workerid ?? "");
@@ -40,7 +43,7 @@ export const WorkerView = observer(() => {
  const mastersQuery = useDataApiQuery(() => Master.getAll(accessor));
  const buildsQuery = useDataApiQuery(() =>
  Build.getAll(accessor, {query: {
- property: ["owners", "workername"],
+ property: ["owners", "workername", "branch", "revision", ...GetBuildLinkExtraPropertiesList()],
  workerid__eq: workerid,
  limit: 100,
  order: "-buildid",

www/react-base/src/views/WorkersView/WorkersView.tsx

@@ -29,6 +29,9 @@ import {
 } from "buildbot-data-js";
 import {WorkerActionsModal} from "../../components/WorkerActionsModal/WorkerActionsModal";
 import {WorkersTable} from "../../components/WorkersTable/WorkersTable";
+import {
+ GetBuildLinkExtraPropertiesList, 
+} from "buildbot-ui";
 
 const isWorkerFiltered = (worker: Worker, showOldWorkers: boolean) => {
  if (showOldWorkers) {
@@ -79,7 +82,7 @@ export const WorkersView = observer(() => {
  const mastersQuery = useDataApiQuery(() => Master.getAll(accessor));
  const buildsQuery = useDataApiQuery(() =>
  Build.getAll(accessor, {query: {
- property: ["owners", "workername"],
+ property: ["owners", "workername", "branch", ...GetBuildLinkExtraPropertiesList()],
  limit: 200,
  order: '-buildid'
  }