apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Canvas: Update server element design (#62832)

Browse Source
pull/62906/head
Drew Slobodnjak 2 years ago committed by GitHub
parent db953c9a9c
commit 43ce077133
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 108 additions and 144 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 60
      public/app/features/canvas/elements/server/server.tsx
  2. 48
      public/app/features/canvas/elements/server/types/database.tsx
  3. 33
      public/app/features/canvas/elements/server/types/single.tsx
  4. 65
      public/app/features/canvas/elements/server/types/stack.tsx
  5. 46
      public/app/features/canvas/elements/server/types/terminal.tsx

60
public/app/features/canvas/elements/server/server.tsx
Unescape View File

@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import config from 'app/core/config';
import { ColorDimensionConfig, DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions';
import { ColorDimensionEditor, ScalarDimensionEditor } from 'app/features/dimensions/editors';
@ -34,10 +35,11 @@ enum ServerType {
}
type Props = CanvasElementProps<ServerConfig, ServerData>;
const outlineColor = config.theme2.colors.text.primary;
const ServerDisplay = ({ data }: Props) => {
return data ? (
<svg viewBox="0 0 207.95 197.78">
<svg viewBox="0 0 75 75">
{data.type === ServerType.Single ? (
<ServerSingle {...data} />
) : data.type === ServerType.Stack ? (
@ -85,7 +87,7 @@ export const serverItem: CanvasElementItem<ServerConfig, ServerData> = {
prepareData: (ctx: DimensionContext, cfg: ServerConfig) => {
const data: ServerData = {
blinkRate: cfg?.blinkRate ? ctx.getScalar(cfg.blinkRate).value() : 0,
statusColor: cfg?.statusColor ? ctx.getColor(cfg.statusColor).value() : '#8a8a8a',
statusColor: cfg?.statusColor ? ctx.getColor(cfg.statusColor).value() : 'transparent',
bulbColor: cfg?.bulbColor ? ctx.getColor(cfg.bulbColor).value() : 'green',
type: cfg.type,
};
@ -118,7 +120,7 @@ export const serverItem: CanvasElementItem<ServerConfig, ServerData> = {
editor: ColorDimensionEditor,
settings: {},
defaultValue: {
fixed: '#8a8a8a',
fixed: 'transparent',
},
})
.addCustomEditor({
@ -158,54 +160,22 @@ export const getServerStyles = (data: ServerData | undefined) => (theme: Grafana
}
`,
server: css`
fill: #dadada;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 10;
stroke: ${data?.statusColor ?? '#8a8a8a'};
fill: ${data?.statusColor ?? 'transparent'};
`,
circle: css`
animation: blink ${data?.blinkRate ? 1 / data.blinkRate : 0}s infinite step-end;
fill: ${data?.bulbColor};
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 3;
stroke: #000;
`,
outline: css`
fill: none;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 10;
stroke: #303030;
stroke: none;
`,
pathA: css`
display: none;
fill: #fff;
circleBack: css`
fill: ${outlineColor};
stroke: none;
opacity: 1;
`,
pathB: css`
fill: #fff;
`,
thinLine: css`
stroke-width: 0.7;
`,
monitor: css`
stroke: ${data?.statusColor ?? '#8a8a8a'};
fill: #fff;
stroke-linecap: square;
stroke-miterlimit: 0;
stroke-width: 14;
`,
monitorOutline: css`
stroke: #8a8a8a;
stroke-linecap: square;
stroke-miterlimit: 0;
`,
keyboard: css`
fill: #dadada;
outline: css`
stroke: ${outlineColor};
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 10;
stroke: ${data?.statusColor ?? '#8a8a8a'};
stroke-linejoin: round;
stroke-width: 4px;
`,
});

48
public/app/features/canvas/elements/server/types/database.tsx
Unescape View File

@ -7,35 +7,39 @@ import { getServerStyles, ServerData } from '../server';
export const ServerDatabase = (data: ServerData) => {
const styles = useStyles2(getServerStyles(data));
return (
<g transform="translate(-31.804 -24.62)">
<g className={styles.server} transform="translate(0 -3.0868)">
<ellipse cx="134.44" cy="68.233" rx="78.553" ry="22.49" />
<g className={styles.outline}>
<g className={styles.server}>
<path d="m2.6953 37.5v20.883c0 7.6725 15.592 13.922 34.805 13.922s34.805-6.2493 34.805-13.922v-20.883" />
<path d="m2.6953 16.617v20.883c0 7.7035 15.592 13.922 34.805 13.922s34.805-6.2184 34.805-13.922v-20.883" />
<path d="m37.5 30.539c19.212 0 34.805-6.2185 34.805-13.922 0-7.7034-15.592-13.922-34.805-13.922s-34.805 6.2184-34.805 13.922c0 7.7035 15.592 13.922 34.805 13.922z" />
</g>
<g className={styles.circleBack}>
<path
x="54.86203"
y="48.088943"
width="159.1676"
height="39.961231"
d="m56.97 90.429c52.35 16.952 102.23 16.952 154.93 0 1.1129-.35795 2.1167.94768 2.1167 2.1167v22.23c0 1.169-1.0017 1.7655-2.1167 2.1167-52.703 16.599-102.58 16.952-154.93 0-1.1122-.36014-2.1167-.94768-2.1167-2.1167v-22.23c0-1.169 1.0045-2.4768 2.1167-2.1167z"
transform="matrix(2.7868 0 0 2.7868 -132.86 -110.58)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
x="54.86203"
y="48.088943"
width="159.1676"
height="39.961231"
d="m56.983 128.77c52.35 16.952 102.23 16.952 154.93 0 1.1129-.35795 2.1167.94768 2.1167 2.1167v22.23c0 1.169-1.0017 1.7655-2.1167 2.1167-52.703 16.599-102.58 16.952-154.93 0-1.1122-.36014-2.1167-.94768-2.1167-2.1167v-22.23c0-1.169 1.0045-2.4768 2.1167-2.1167z"
transform="matrix(2.7868 0 0 2.7868 -122.04 -111.7)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
x="54.86203"
y="48.088943"
width="159.1676"
height="39.961231"
d="m57.004 167.17c52.35 16.952 102.23 16.952 154.93 0 1.1129-.35795 2.1167.94768 2.1167 2.1167v22.23c0 1.169-1.0017 1.7655-2.1167 2.1167-52.703 16.599-102.58 16.952-154.93 0-1.1122-.36014-2.1167-.94768-2.1167-2.1167v-22.23c0-1.169 1.0045-2.4768 2.1167-2.1167z"
transform="matrix(2.7868 0 0 2.7868 -111.21 -114.77)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
</g>
<g className={styles.circle} transform="translate(-4.9944 -3.9978)">
<circle cx="161.69" cy="193.26" r="5.0317" />
<circle cx="180.31" cy="190.08" r="5.0317" />
<circle cx="198.14" cy="185.84" r="5.0317" />
<g className={styles.circle}>
<path
transform="matrix(1.4922 0 0 1.4922 -52.337 -30.65)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
transform="matrix(1.4922 0 0 1.4922 -41.518 -31.769)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
transform="matrix(1.4922 0 0 1.4922 -30.688 -34.842)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
</g>
</g>
);

33
public/app/features/canvas/elements/server/types/single.tsx
Unescape View File

@ -7,25 +7,24 @@ import { getServerStyles, ServerData } from '../server';
export const ServerSingle = (data: ServerData) => {
const styles = useStyles2(getServerStyles(data));
return (
<g transform="translate(-31.804 -24.362)">
<g>
<g>
<g className={styles.outline} transform="matrix(1.01 0 0 1.01 -.375 -.375)">
<g className={styles.server}>
<path d="m3.2812 55.659 9.125-52.377h50.188l9.125 52.377" />
<path d="m3.2812 56.328c0-2.5246 2.0379-4.5625 4.5625-4.5625h59.313c2.5245 0 4.5625 2.0379 4.5625 4.5625v10.828c0 2.5245-2.038 4.5625-4.5625 4.5625h-59.313c-2.5246 0-4.5625-2.038-4.5625-4.5625z" />
</g>
<path d="m12.406 61.742h30.69" />
<path d="m52.8 51.765v19.953" />
<path
className={styles.server}
x="54.86203"
y="48.088943"
width="159.1676"
height="39.961231"
d="m56.979 48.089h154.93c1.169 0 2.1167.94768 2.1167 2.1167v145.73c0 1.169-.94768 2.1167-2.1167 2.1167h-154.93c-1.169 0-2.1167-.94768-2.1167-2.1167v-145.73c0-1.169.94768-2.1167 2.1167-2.1167z"
className={styles.circleBack}
transform="matrix(2.7592 0 0 2.7592 -109.42 -108.61)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
className={styles.circle}
transform="matrix(1.4775 0 0 1.4775 -29.697 -29.479)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<circle className={styles.circle} cx="189.99" cy="68.07" r="9.0052" />
<rect x="55.556" y="57.472" width="107.76" height="5.7472" />
<rect x="55.558" y="86.141" width="107.76" height="5.7472" />
<rect transform="translate(31.804,24.362)" x="23.779" y="90.421" width="107.76" height="5.7472" />
<g className={styles.thinLine}>
<rect x="63.549" y="73.261" width="107.76" height="2.8736" />
<rect x="63.574" y="101.9" width="107.76" height="2.8736" />
<rect x="63.598" y="130.54" width="107.76" height="2.8736" />
</g>
</g>
</g>
);

65
public/app/features/canvas/elements/server/types/stack.tsx
Unescape View File

@ -7,45 +7,46 @@ import { getServerStyles, ServerData } from '../server';
export const ServerStack = (data: ServerData) => {
const styles = useStyles2(getServerStyles(data));
return (
<g transform="translate(-31.804 -24.362)">
<g>
<g className={styles.outline} transform="translate(.5 .49865)">
<g className={styles.server}>
<path d="m3.4834 21.768 8.0783-19.456h50.875l8.0784 19.456" />
<path d="m2.3125 24.852c0-2.5592 2.0658-4.625 4.625-4.625h60.125c2.5592 0 4.625 2.0658 4.625 4.625v7.8933c0 2.5592-2.0658 4.625-4.625 4.625h-60.125c-2.5592 0-4.625-2.0658-4.625-4.625z" />
<path d="m2.3125 42.031c0-2.5592 2.0658-4.6251 4.625-4.6251h60.125c2.5592 0 4.625 2.0659 4.625 4.6251v7.8933c0 2.5592-2.0658 4.625-4.625 4.625h-60.125c-2.5592 0-4.625-2.0658-4.625-4.625z" />
<path d="m2.3125 59.172c0-2.5592 2.0658-4.625 4.625-4.625h60.125c2.5592 0 4.625 2.0658 4.625 4.625v7.8933c0 2.5592-2.0658 4.625-4.625 4.625h-60.125c-2.5592 0-4.625-2.0658-4.625-4.625z" />
</g>
<path d="m11.562 28.797h31.111" />
<path d="m52.508 20.227v17.143" />
<path d="m11.562 63.117h31.111" />
<path d="m52.508 54.547v17.143" />
<path d="m11.562 45.977h31.111" />
<path d="m52.508 37.406v17.143" />
<g className={styles.circleBack}>
<path
className={styles.server}
x="54.86203"
y="48.088943"
width="159.1676"
height="39.961231"
d="m56.979 48.089h154.93a2.1167 2.1167 45 012.1167 2.1167v35.728a2.1167 2.1167 135 01-2.1167 2.1167h-154.93a2.1167 2.1167 45 01-2.1167-2.1167v-35.728a2.1167 2.1167 135 012.1167-2.1167z"
transform="matrix(2.7868 0 0 2.7868 -111.31 -143.2)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
transform="matrix(2.7868 0 0 2.7868 -111.31 -126.14)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<rect x="55.556" y="57.472" width="107.76" height="5.7472" />
<rect x="55.549" y="71.824" width="107.76" height="5.7472" />
<circle className={styles.circle} cx="189.99" cy="68.07" r="9.0052" />
</g>
<g transform="translate(0 55.18)">
<path
className={styles.server}
x="54.86203"
y="48.088943"
width="159.1676"
height="39.961231"
d="m56.979 48.089h154.93a2.1167 2.1167 45 012.1167 2.1167v35.728a2.1167 2.1167 135 01-2.1167 2.1167h-154.93a2.1167 2.1167 45 01-2.1167-2.1167v-35.728a2.1167 2.1167 135 012.1167-2.1167z"
transform="matrix(2.7868 0 0 2.7868 -111.31 -108.86)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<rect x="55.556" y="57.472" width="107.76" height="5.7472" />
<rect x="55.549" y="71.824" width="107.76" height="5.7472" />
<circle className={styles.circle} cx="189.99" cy="68.07" r="9.0052" />
</g>
<g transform="translate(0 110)">
<g className={styles.circle}>
<path
transform="matrix(1.4922 0 0 1.4922 -30.794 -63.277)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
transform="matrix(1.4922 0 0 1.4922 -30.794 -46.209)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
className={styles.server}
x="54.86203"
y="48.088943"
width="159.1676"
height="39.961231"
d="m56.979 48.089h154.93a2.1167 2.1167 45 012.1167 2.1167v35.728a2.1167 2.1167 135 01-2.1167 2.1167h-154.93a2.1167 2.1167 45 01-2.1167-2.1167v-35.728a2.1167 2.1167 135 012.1167-2.1167z"
transform="matrix(1.4922 0 0 1.4922 -30.794 -28.93)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<rect x="55.556" y="57.472" width="107.76" height="5.7472" />
<rect x="55.549" y="71.824" width="107.76" height="5.7472" />
<circle className={styles.circle} cx="189.99" cy="68.07" r="9.0052" />
</g>
</g>
);

46
public/app/features/canvas/elements/server/types/terminal.tsx
Unescape View File

@ -7,35 +7,25 @@ import { getServerStyles, ServerData } from '../server';
export const ServerTerminal = (data: ServerData) => {
const styles = useStyles2(getServerStyles(data));
return (
<g transform="translate(-31.804 -24.362)">
<g>
<path
className={styles.server}
x="54.86203"
y="48.088943"
width="159.1676"
height="39.961231"
d="m56.979 48.089h54.93c1.169 0 2.1167.94768 2.1167 2.1167v145.73c0 1.169-.94768 2.1167-2.1167 2.1167h-54.93c-1.169 0-2.1167-.94768-2.1167-2.1167v-145.73c0-1.169.94768-2.1167 2.1167-2.1167z"
/>
<g transform="matrix(.50833 0 0 1 27.315 0)">
<rect x="55.556" y="57.472" width="107.76" height="5.7472" />
<rect x="55.558" y="86.141" width="107.76" height="5.7472" />
<g className={styles.thinLine}>
<rect x="74.357" y="73.261" width="96.957" height="2.8736" />
<rect x="74.379" y="101.9" width="96.957" height="2.8736" />
</g>
</g>
<circle className={styles.circle} cx="83.858" cy="178.2" r="5.9401" />
<g className={styles.outline}>
<g className={styles.server}>
<path d="m5.3125 9.6562c0-3.5621 2.8754-6.4375 6.4375-6.4375h51.5c3.5621 0 6.4375 2.8754 6.4375 6.4375v28.625c0 3.5621-2.8754 6.4375-6.4375 6.4375h-51.5c-3.5621 0-6.4375-2.8754-6.4375-6.4375z" />
<path d="m2.8125 59.859c0-2.5592 2.0658-4.625 4.625-4.625h60.125c2.5592 0 4.625 2.0658 4.625 4.625v7.8933c0 2.5592-2.0658 4.625-4.625 4.625h-60.125c-2.5592 0-4.625-2.0658-4.625-4.625z" />
</g>
<g transform="translate(-1.9978 -7.5028)">
<path className={styles.monitor} d="m103.22 75.305h118.87v76.914h-118.87z" />
<path
className={styles.monitorOutline}
d="m103.22 70.305-5 5v76.916l5 5h118.87l5-5v-76.916l-5-5zm5 10h108.87v58.916h-108.87z"
/>
</g>
<path d="m135.6 148.14h50.113l4 15.156h-58.113z" />
<path className={styles.keyboard} d="m118.23 183.19h88.848l24 19.476h-136.85z" />
<path d="m37.5 46.719v2.875" />
<path d="m24.625 51.343h25.75" />
<path d="m12.062 63.804h31.111" />
<path d="m53.008 55.234v17.143" />
<path
className={styles.circleBack}
transform="matrix(2.7868 0 0 2.7868 -110.81 -108.2)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
<path
className={styles.circle}
transform="matrix(1.4922 0 0 1.4922 -30.294 -28.27)"
d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
/>
</g>
);
};

Write Preview
Loading…
Cancel
Save