AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Sort out Ring enum typing issues

Browse Source
This commit is contained in:
Jarosław Marek
2021-05-04 20:24:20 +12:00
parent 622da055c7
commit 15feb9bc58
14 changed files with 138 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
bin/src/config.js
View File

@@ -1,35 +1,58 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isMobileViewport = exports.translate = exports.getItemPageNames = exports.assetUrl = exports.rings = exports.quadrants = exports.radarNameShort = exports.radarName = void 0;
exports.assetUrl = exports.isMobileViewport = exports.showEmptyRings = exports.getItemPageNames = exports.chartConfig = exports.quadrantsMap = exports.homepageContent = exports.radarNameShort = exports.radarName = void 0;
const model_1 = require("./model");
exports.radarName = process.env.RADAR_NAME || 'AOE Technology Radar';
exports.radarNameShort = exports.radarName;
exports.quadrants = [
'languages-and-frameworks',
'methods-and-patterns',
'platforms-and-aoe-services',
'tools',
];
exports.rings = [
'all',
'adopt',
'trial',
'assess',
'hold'
];
// todo: fix
function assetUrl(file) {
return process.env.PUBLIC_URL + '/' + file;
// return `/techradar/assets/${file}`
}
exports.assetUrl = assetUrl;
exports.getItemPageNames = (items) => items.map(item => `${item.quadrant}/${item.name}`);
const messages = {
'languages-and-frameworks': 'Languages & Frameworks',
'methods-and-patterns': 'Methods & Patterns',
'platforms-and-aoe-services': 'Platforms and Operations',
'tools': 'Tools',
exports.homepageContent = model_1.HomepageOption.both; // by defaul show both versions so that people can choose which one they like more (or keep both)
// Quadrants positions start from the top left and go clockwise
exports.quadrantsMap = new Map([
['languages-and-frameworks', {
id: 'languages-and-frameworks',
displayName: 'Languages & Frameworks',
colour: '#84BFA4',
txtColour: '#444444',
position: 1,
description: "We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds."
}],
['methods-and-patterns', {
id: 'methods-and-patterns',
displayName: 'Methods & Patterns',
colour: '#248EA6',
txtColour: 'white',
position: 2,
description: 'Here we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc.'
}],
['platforms-and-aoe-services', {
id: 'platforms-and-aoe-services',
displayName: 'Platforms and Operations',
colour: '#F25244',
txtColour: '#444444',
position: 3,
description: 'Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of.'
}],
['tools', {
id: 'tools',
displayName: 'Tools',
colour: '#F2A25C',
txtColour: 'white',
position: 4,
description: 'Here we put different software tools - from small helpers to bigger software projects'
}]
]);
exports.chartConfig = {
size: 800,
scale: [-16, 16],
blipSize: 12,
ringsAttributes: [
{ radius: 8, arcWidth: 6 },
{ radius: 11, arcWidth: 4 },
{ radius: 14, arcWidth: 2 },
{ radius: 16, arcWidth: 2 }
]
};
exports.translate = (key) => (messages[key] || '-');
exports.getItemPageNames = (items) => items.map(item => `${item.quadrant}/${item.name}`);
exports.showEmptyRings = false;
function isMobileViewport() {
// return false for server side rendering
if (typeof window == 'undefined')
@@ -38,3 +61,8 @@ function isMobileViewport() {
return width < 1200;
}
exports.isMobileViewport = isMobileViewport;
function assetUrl(file) {
return process.env.PUBLIC_URL + '/' + file;
// return `/techradar/assets/${file}`
}
exports.assetUrl = assetUrl;

22
bin/src/model.js
View File

@@ -1,6 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFirstLetter = exports.groupByFirstLetter = exports.groupByQuadrants = exports.featuredOnly = void 0;
exports.getFirstLetter = exports.groupByFirstLetter = exports.groupByQuadrants = exports.featuredOnly = exports.FlagType = exports.Ring = exports.HomepageOption = void 0;
var HomepageOption;
(function (HomepageOption) {
HomepageOption[HomepageOption["chart"] = 0] = "chart";
HomepageOption[HomepageOption["columns"] = 1] = "columns";
HomepageOption[HomepageOption["both"] = 2] = "both";
})(HomepageOption = exports.HomepageOption || (exports.HomepageOption = {}));
var Ring;
(function (Ring) {
Ring[Ring["all"] = 0] = "all";
Ring[Ring["adopt"] = 1] = "adopt";
Ring[Ring["trial"] = 2] = "trial";
Ring[Ring["assess"] = 3] = "assess";
Ring[Ring["hold"] = 4] = "hold";
})(Ring = exports.Ring || (exports.Ring = {}));
var FlagType;
(function (FlagType) {
FlagType["new"] = "new";
FlagType["changed"] = "changed";
FlagType["default"] = "default";
})(FlagType = exports.FlagType || (exports.FlagType = {}));
exports.featuredOnly = (items) => items.filter(item => item.featured);
exports.groupByQuadrants = (items) => items.reduce((quadrants, item) => (Object.assign(Object.assign({}, quadrants), { [item.quadrant]: addItemToQuadrant(quadrants[item.quadrant], item) })), {});
exports.groupByFirstLetter = (items) => {

2
bin/tasks/create-static.js Normal file → Executable file
View File

@@ -19,7 +19,7 @@ const config_1 = require("../src/config");
const radar = yield radar_1.createRadar();
fs_1.copyFileSync('build/index.html', 'build/overview.html');
fs_1.copyFileSync('build/index.html', 'build/help-and-about-tech-radar.html');
config_1.quadrants.forEach(quadrant => {
[...config_1.quadrantsMap.keys()].forEach(quadrant => {
fs_1.copyFileSync('build/index.html', 'build/' + quadrant + '.html');
fs_1.mkdirSync('build/' + quadrant);
});

29
bin/tasks/radar.js
View File

@@ -20,6 +20,7 @@ const marked_1 = __importDefault(require("marked"));
const highlight_js_1 = __importDefault(require("highlight.js"));
const config_1 = require("../src/config");
const file_1 = require("./file");
const model_1 = require("../src/model");
marked_1.default.setOptions({
highlight: code => highlight_js_1.default.highlightAuto(code).value,
});
@@ -35,11 +36,17 @@ exports.createRadar = () => __awaiter(void 0, void 0, void 0, function* () {
};
});
const checkAttributes = (fileName, attributes) => {
if (attributes.ring && !config_1.rings.includes(attributes.ring)) {
throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${config_1.rings}`);
const validRings = [];
for (var ring in model_1.Ring) {
if (isNaN(Number(ring))) {
validRings.push(ring);
}
}
if (attributes.quadrant && !config_1.quadrants.includes(attributes.quadrant)) {
throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${config_1.quadrants}`);
if (attributes.ring && !validRings.includes(attributes.ring)) {
throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${validRings}`);
}
if (attributes.quadrant && !config_1.quadrantsMap.has(attributes.quadrant)) {
throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${config_1.quadrantsMap.keys()}`);
}
if (!attributes.quadrant || attributes.quadrant === '') {
// throw new Error(`Error: ${fileName} has no 'quadrant' set`);
@@ -47,7 +54,9 @@ const checkAttributes = (fileName, attributes) => {
if (!attributes.title || attributes.title === '') {
attributes.title = path_1.default.basename(fileName);
}
return attributes;
return Object.assign(Object.assign({}, attributes), {
// Convert string representation of the ring into enum value
ring: model_1.Ring[attributes.ring] });
};
const createRevisionsFromFiles = (fileNames) => Promise.all(fileNames.map(fileName => {
return new Promise((resolve, reject) => {
@@ -94,12 +103,12 @@ const ignoreEmptyRevisionBody = (revision, item) => {
return revision.body;
};
const addRevisionToItem = (item = {
flag: 'default',
flag: model_1.FlagType.default,
featured: true,
revisions: [],
name: '',
title: '',
ring: 'trial',
ring: model_1.Ring.trial,
quadrant: '',
body: '',
info: '',
@@ -119,10 +128,10 @@ const isNewItem = (item, allReleases) => item.revisions.length === 1 && isInLast
const hasItemChanged = (item, allReleases) => item.revisions.length > 1 && isInLastRelease(item, allReleases);
const getItemFlag = (item, allReleases) => {
if (isNewItem(item, allReleases)) {
return 'new';
return model_1.FlagType.new;
}
if (hasItemChanged(item, allReleases)) {
return 'changed';
return model_1.FlagType.changed;
}
return 'default';
return model_1.FlagType.default;
};

1
src/components/Chart/Axes.tsx
View File

@@ -1,4 +1,3 @@
// TODO remove faux-dom and start using the React hook approach
import React, { useRef, useLayoutEffect } from 'react';
import * as d3 from "d3";

4
src/components/Chart/BlipPoints.tsx
View File

@@ -77,9 +77,7 @@ const BlipPoints: React.FC<{
let blip: Blip = { ...item,
quadrantPosition: quadrantConfig.position,
// TODO get to the bottom of this
// @ts-ignore
ringPosition: Ring[item.ring],
ringPosition: item.ring,
colour: quadrantConfig.colour,
txtColour: quadrantConfig.txtColour
};

4
src/components/ItemRevision/ItemRevision.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react';
import Badge from '../Badge/Badge';
import { formatRelease } from '../../date';
import { Revision } from '../../model';
import { Revision, Ring } from '../../model';
export default function ItemRevision({ revision }: { revision: Revision }) {
return (
<div className='item-revision'>
<div>
<Badge type={revision.ring}>
{revision.ring} | {formatRelease(revision.release)}
{Ring[revision.ring]} | {formatRelease(revision.release)}
</Badge>
</div>
<div className='markdown' dangerouslySetInnerHTML={{ __html: revision.body }} />

6
src/components/PageItem/PageItem.tsx
View File

@@ -12,7 +12,7 @@ import {
} from '../../animation';
import './item-page.scss';
import {quadrantsMap} from '../../config';
import {groupByQuadrants, Item} from '../../model';
import {groupByQuadrants, Item, Ring} from '../../model';
const getItem = (pageName: string, items: Item[]) => {
const [quadrantName, itemName] = pageName.split('/');
@@ -199,7 +199,7 @@ export default function PageItem({pageName, items, leaving, onLeave}: PageItemPr
<div className='split'>
<div className='split__left'>
<Badge big type={item.ring}>
{item.ring}
{Ring[item.ring]}
</Badge>
</div>
<div className='split__right'>
@@ -221,7 +221,7 @@ export default function PageItem({pageName, items, leaving, onLeave}: PageItemPr
</div>
<div className='split__right'>
<Badge big type={item.ring}>
{item.ring}
{Ring[item.ring]}
</Badge>
</div>
</div>

4
src/components/PageItemMobile/PageItemMobile.tsx
View File

@@ -7,7 +7,7 @@ import SetTitle from '../SetTitle';
import ItemRevisions from '../ItemRevisions/ItemRevisions';
import { quadrantsMap } from '../../config';
import { groupByQuadrants, Item } from '../../model';
import { groupByQuadrants, Item, Ring } from '../../model';
type PageItemMobileProps = {
pageName: string;
@@ -45,7 +45,7 @@ export default function PageItemMobile({ pageName, items, leaving, onLeave }: Pa
</div>
<div className='split__right'>
<Badge big type={item.ring}>
{item.ring}
{Ring[item.ring]}
</Badge>
</div>
</div>

6
src/components/PageOverview/PageOverview.tsx
View File

@@ -37,8 +37,7 @@ export default function PageOverview({ rings, search: searchProp, items, leaving
const isRingActive = (ring: Ring) => selectedRing === ring;
// TODO get to the bottom of this
const itemMatchesRing = (item: Item) => selectedRing === Ring.all || Ring[item.ring] === selectedRing;
const itemMatchesRing = (item: Item) => selectedRing === Ring.all || item.ring === selectedRing;
const itemMatchesSearch = (item: Item) => {
return search.trim() === '' || containsSearchTerm(item.title, search) || containsSearchTerm(item.body, search) || containsSearchTerm(item.info, search);
@@ -109,8 +108,7 @@ export default function PageOverview({ rings, search: searchProp, items, leaving
<div className='nav nav--relations'>
<div className='nav__item'>{quadrantsMap.get(item.quadrant).displayName}</div>
<div className='nav__item'>
{/* TODO get to the bottom of this */}
<Badge type={Ring[item.ring]}>{item.ring}</Badge>
<Badge type={item.ring}>{Ring[item.ring]}</Badge>
</div>
</div>
</div>

20
src/components/QuadrantSection/QuadrantSection.tsx
View File

@@ -7,14 +7,14 @@ import ItemList from '../ItemList/ItemList';
import Flag from '../Flag/Flag';
import { Group, Ring } from '../../model';
import './quadrant-section.scss';
const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => {
const itemsInRing = groups[quadrantName][ringName] || [];
const renderList = (ring: Ring, quadrantName: string, groups: Group, big: boolean) => {
const itemsInRing = groups[quadrantName][ring] || [];
if (big) {
return (
<ItemList items={itemsInRing} noLeadingBorder>
<Badge type={ringName} big={big}>
{ringName}
<Badge type={ring} big={big}>
{Ring[ring]}
</Badge>
</ItemList>
);
@@ -23,7 +23,7 @@ const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: bo
return (
<div className='ring-list'>
<div className='ring-list__header'>
<Badge type={ringName}>{ringName}</Badge>
<Badge type={ring}>{Ring[ring]}</Badge>
</div>
{itemsInRing.map((item) => (
<span key={item.name} className='ring-list__item'>
@@ -37,13 +37,13 @@ const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: bo
);
};
const renderRing = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => {
if (!showEmptyRings && (!groups[quadrantName] || !groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0)) {
const renderRing = (ring: Ring, quadrantName: string, groups: Group, big: boolean) => {
if (!showEmptyRings && (!groups[quadrantName] || !groups[quadrantName][ring] || groups[quadrantName][ring].length === 0)) {
return null;
}
return (
<div key={ringName} className='quadrant-section__ring'>
{renderList(ringName, quadrantName, groups, big)}
<div key={ring} className='quadrant-section__ring'>
{renderList(ring, quadrantName, groups, big)}
</div>
);
};
@@ -65,7 +65,7 @@ export default function QuadrantSection({ quadrantName, groups, big = false, sho
)}
</div>
</div>
<div className='quadrant-section__rings'>{Object.keys(Ring).map((key) => renderRing(Ring[key], quadrantName, groups, big))}</div>
<div className='quadrant-section__rings'>{[Ring.adopt, Ring.trial, Ring.assess, Ring.hold].map((ring) => renderRing(ring, quadrantName, groups, big))}</div>
</div>
);
}

2
src/config.ts
View File

@@ -43,7 +43,7 @@ export const quadrantsMap: Map<string, QuadrantConfig> = new Map([
export const chartConfig = {
size: 800, //in px
scale: [-16, 16],
scale: [-16, 16], // arbitrary scale, could have any summetric values. 16 is good for dividing the chart into rings of proportional sizes/radius
blipSize: 12, // in px, be careful when increasing this value as it may cause a lot of calculations during placing the blips on the chart
ringsAttributes: [ // order from the centre outwards
{ radius: 8, arcWidth: 6 }, // radius values are based on the scale (not px!), arc width is in px

2
src/rd.json_
View File

File diff suppressed because one or more lines are too long

27
tasks/radar.ts
View File

@@ -7,7 +7,9 @@ import { quadrantsMap } from '../src/config';
import { radarPath, getAllMarkdownFiles } from './file';
import { Item, Revision, ItemAttributes, Radar, FlagType, Ring } from '../src/model';
type FMAttributes = ItemAttributes
type FMAttributes = Omit<ItemAttributes, 'ring'> & {
ring: string // when reading from file it will be a String form, not numeric representation of the enum
}
marked.setOptions({
highlight: code => hljs.highlightAuto(code).value,
@@ -27,14 +29,19 @@ export const createRadar = async (): Promise<Radar> => {
};
const checkAttributes = (fileName: string, attributes: FMAttributes) => {
const validQuadrants = Object.keys(quadrantsMap);
if (attributes.ring && !Ring[attributes.ring]) {
throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${Object.values(Ring)}`);
const validRings = [];
for (var ring in Ring) {
if (isNaN(Number(ring))) {
validRings.push(ring);
}
}
if (attributes.quadrant && !validQuadrants.includes(attributes.quadrant)) {
throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${validQuadrants}`);
if (attributes.ring && !validRings.includes(attributes.ring)) {
throw new Error(`Error: ${fileName} has an illegal value for 'ring' - must be one of ${validRings}`);
}
if (attributes.quadrant && !quadrantsMap.has(attributes.quadrant)) {
throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${quadrantsMap.keys()}`);
}
if (!attributes.quadrant || attributes.quadrant === '') {
@@ -45,7 +52,11 @@ const checkAttributes = (fileName: string, attributes: FMAttributes) => {
attributes.title = path.basename(fileName);
}
return attributes
return {
...attributes,
// Convert string representation of the ring into enum value
ring: Ring[attributes.ring as keyof typeof Ring]
}
};
const createRevisionsFromFiles = (fileNames: string[]) =>