Skip to content

Commit

Permalink
Merge pull request #1338 from CleverCloud/tile-metric-disable-grafana
Browse files Browse the repository at this point in the history 
feat(cc-tile-metrics): add the ability to hide the grafana link
  • Loading branch information
@florian-sanders-cc
florian-sanders-cc committed Feb 19, 2025
2 parents 1eef53c + 40078bc commit a3bf606
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 59 deletions.
45 changes: 24 additions & 21 deletions src/components/cc-tile-metrics/cc-tile-metrics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,22 @@ export class CcTileMetrics extends LitElement {
const cpuColorType = this.metricsState.type === 'loaded' ? this._getColorLegend(lastCpuValue) : SKELETON_COLOR;
const memColorType = this.metricsState.type === 'loaded' ? this._getColorLegend(lastMemValue) : SKELETON_COLOR;

const grafanaLink = this.grafanaLinkState.type === 'loaded' ? this.grafanaLinkState.link : null;
const links = [];
if (this.grafanaLinkState.type === 'loaded') {
links.push(
ccLink(
this.grafanaLinkState.link,
i18n('cc-tile-metrics.grafana'),
skeleton,
i18n('cc-tile-metrics.link-to-grafana'),
),
);
}
if (!isStringEmpty(this.metricsLink)) {
links.push(
ccLink(this.metricsLink, i18n('cc-tile-metrics.metrics-link'), false, i18n('cc-tile-metrics.link-to-metrics')),
);
}

const panel = this._getCurrentPanel();

Expand Down Expand Up @@ -375,26 +390,14 @@ export class CcTileMetrics extends LitElement {
<div class="tile_docs ${classMap({ 'tile--hidden': panel !== 'docs' })}">
${i18n('cc-tile-metrics.docs.msg')}
<div class="docs-links">
<p>${i18n('cc-tile-metrics.docs.more-metrics')}</p>
<ul>
<li>
${ccLink(grafanaLink, i18n('cc-tile-metrics.grafana'), skeleton, i18n('cc-tile-metrics.link-to-grafana'))}
</li>
${!isStringEmpty(this.metricsLink)
? html`
<li>
${ccLink(
this.metricsLink,
i18n('cc-tile-metrics.metrics-link'),
false,
i18n('cc-tile-metrics.link-to-metrics'),
)}
</li>
`
: ''}
</ul>
</div>
${links.length > 0
? html`<div class="docs-links">
<p>${i18n('cc-tile-metrics.docs.more-metrics')}</p>
<ul>
${links.map((link) => html`<li>${link}</li>`)}
</ul>
</div>`
: ''}
</div>
`;
}
Expand Down
26 changes: 15 additions & 11 deletions src/components/cc-tile-metrics/cc-tile-metrics.smart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,13 @@ defineSmartComponent({
apiConfig: { type: Object },
ownerId: { type: String },
appId: { type: String },
consoleGrafanaLink: { type: String },
grafanaBaseLink: { type: String },
grafanaLink: { type: Object, optional: true },
},
/**
* @param {OnContextUpdateArgs} args
*/
onContextUpdate({ context, updateComponent, signal }) {
const { apiConfig, ownerId, appId, grafanaBaseLink, consoleGrafanaLink } = context;
const { apiConfig, ownerId, appId, grafanaLink } = context;

updateComponent('metricsState', { type: 'loading' });

Expand All @@ -48,14 +47,19 @@ defineSmartComponent({
updateComponent('metricsState', { type: 'error' });
});

fetchGrafanaAppLink({ apiConfig, ownerId, appId, grafanaBaseLink, signal })
.then((grafanaAppLink) => {
updateComponent('grafanaLinkState', { type: 'loaded', link: grafanaAppLink });
})
.catch(() => {
// If Grafana is not enabled we fallback to the Console Grafana page
updateComponent('grafanaLinkState', { type: 'loaded', link: consoleGrafanaLink });
});
if (grafanaLink == null) {
updateComponent('grafanaLinkState', { type: 'hidden' });
} else {
updateComponent('grafanaLinkState', { type: 'loading' });
fetchGrafanaAppLink({ apiConfig, ownerId, appId, grafanaBaseLink: grafanaLink.base, signal })
.then((grafanaAppLink) => {
updateComponent('grafanaLinkState', { type: 'loaded', link: grafanaAppLink });
})
.catch(() => {
// If Grafana is not enabled we fallback to the Console Grafana page
updateComponent('grafanaLinkState', { type: 'loaded', link: grafanaLink.console });
});
}
},
});

Expand Down
102 changes: 76 additions & 26 deletions src/components/cc-tile-metrics/cc-tile-metrics.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,42 @@ export default {
const conf = {
component: 'cc-tile-metrics',
// language=CSS
css: `cc-tile-metrics {
margin-bottom: 1em;
}`,
css: `
cc-tile-metrics {
margin-bottom: 1em;
}
cc-tile-metrics:nth-of-type(1) {
max-width: 23.75em
}
cc-tile-metrics:nth-of-type(2) {
max-width: 33.75em
}
`,
};

/**
* @typedef {import('./cc-tile-metrics.js').CcTileMetrics} CcTileMetrics
* @typedef {import('./cc-tile-metrics.types.js').TileMetricsMetricsStateLoaded} TileMetricsStateLoaded
* @typedef {import('./cc-tile-metrics.types.js').TileMetricsMetricsStateEmpty} TileMetricsStateEmpty
* @typedef {import('./cc-tile-metrics.types.js').TileMetricsMetricsStateLoading} TileMetricsStateLoading
* @typedef {import('./cc-tile-metrics.types.js').TileMetricsMetricsStateError} TileMetricsStateError
* @typedef {import('./cc-tile-metrics.types.js').TileMetricsGrafanaLinkStateLoaded} TileMetricsGrafanaLinkStateLoaded
* @typedef {import('./cc-tile-metrics.types.js').TileMetricsGrafanaLinkStateLoading} TileMetricsGrafanaLinkStateLoading
* @typedef {import('./cc-tile-metrics.types.js').Metric} Metric
*/

/** @type {{ grafanaLinkState: TileMetricsGrafanaLinkStateLoaded, metricsLink: string, style?: string }[]} */
/** @type {Array<Partial<CcTileMetrics>>} */
const baseItems = [
{
grafanaLinkState: {
type: 'loaded',
link: 'https://grafana.example.com/small',
},
metricsLink: 'https://metrics.example.com/small',
style: 'max-width: 23.75em',
metricsLink: 'https://metrics.example.com',
},
{
grafanaLinkState: {
type: 'loaded',
link: 'https://grafana.example.com/medium',
},
metricsLink: 'https://metrics.example.com/medium',
style: 'max-width: 33.75em',
},
{
grafanaLinkState: {
Expand Down Expand Up @@ -89,9 +92,55 @@ function addTimestamp(array) {
}

export const defaultStory = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
metricsState: {
type: 'loaded',
metricsData: {
cpuMetrics: addTimestamp(fakeMetricData(24, 25)),
memMetrics: addTimestamp(fakeMetricData(24, 16)),
},
},
})),
});

export const hiddenGrafanaLink = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
grafanaLinkState: { type: 'hidden' },
metricsState: {
type: 'loaded',
metricsData: {
cpuMetrics: addTimestamp(fakeMetricData(24, 25)),
memMetrics: addTimestamp(fakeMetricData(24, 16)),
},
},
})),
});

export const hiddenMetricsLink = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
metricsLink: null,
metricsState: {
type: 'loaded',
metricsData: {
cpuMetrics: addTimestamp(fakeMetricData(24, 25)),
memMetrics: addTimestamp(fakeMetricData(24, 16)),
},
},
})),
});

export const hiddenGrafanaAndMetricsLink = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
grafanaLinkState: { type: 'hidden' },
metricsLink: null,
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -103,7 +152,7 @@ export const defaultStory = makeStory(conf, {
});

export const loading = makeStory(conf, {
/** @type {{ metricsState: TileMetricsStateLoading, grafanaLinkState: TileMetricsGrafanaLinkStateLoading, style?: string }[]} */
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
metricsState: { type: 'loading' },
Expand All @@ -112,19 +161,19 @@ export const loading = makeStory(conf, {
});

export const empty = makeStory(conf, {
/** @type {{ metricsState: TileMetricsStateEmpty, style?: string }[]} */
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({ ...item, metricsState: { type: 'empty' } })),
});

export const error = makeStory(conf, {
/** @type {{ metricsState: TileMetricsStateError, style?: string }[]} */
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({ ...item, metricsState: { type: 'error' } })),
});

export const dataLoadedWithHighValues = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -136,9 +185,9 @@ export const dataLoadedWithHighValues = makeStory(conf, {
});

export const peaks = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -156,9 +205,9 @@ export const peaks = makeStory(conf, {
});

export const linearIncrease = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -170,9 +219,9 @@ export const linearIncrease = makeStory(conf, {
});

export const scaleUp = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -184,9 +233,9 @@ export const scaleUp = makeStory(conf, {
});

export const scaleDown = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -198,9 +247,9 @@ export const scaleDown = makeStory(conf, {
});

export const multipleScaleUp = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -216,9 +265,9 @@ export const multipleScaleUp = makeStory(conf, {
});

export const multipleScaleDown = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -238,9 +287,9 @@ export const multipleScaleDown = makeStory(conf, {
});

export const bigScaleUp = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -252,9 +301,9 @@ export const bigScaleUp = makeStory(conf, {
});

export const bigScaleDown = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -266,9 +315,9 @@ export const bigScaleDown = makeStory(conf, {
});

export const appDown = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((item) => ({
...item,
/** @type {TileMetricsStateLoaded} */
metricsState: {
type: 'loaded',
metricsData: {
Expand All @@ -280,6 +329,7 @@ export const appDown = makeStory(conf, {
});

export const simulationsWithData = makeStory(conf, {
/** @type {Array<Partial<CcTileMetrics>>} */
items: baseItems.map((baseItem) => ({
...baseItem,
metricsState: { type: 'loading' },
Expand Down
9 changes: 8 additions & 1 deletion src/components/cc-tile-metrics/cc-tile-metrics.types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@ export interface MetricsData {
memMetrics: Metric[];
}

export type TileMetricsGrafanaLinkState = TileMetricsGrafanaLinkStateLoaded | TileMetricsGrafanaLinkStateLoading;
export type TileMetricsGrafanaLinkState =
| TileMetricsGrafanaLinkStateLoaded
| TileMetricsGrafanaLinkStateLoading
| TileMetricsGrafanaLinkStateHidden;

export interface TileMetricsGrafanaLinkStateLoaded {
type: 'loaded';
Expand All @@ -44,6 +47,10 @@ export interface TileMetricsGrafanaLinkStateLoading {
type: 'loading';
}

export interface TileMetricsGrafanaLinkStateHidden {
type: 'hidden';
}

// this is what we retrieve directly from the API
export interface RawMetric {
data: { timestamp: number; value: string }[];
Expand Down

0 comments on commit a3bf606

Please sign in to comment.