gitops-plugin/src/gitops/components/application/graph/ApplicationGraphView.scss at 0398da61f11e300b78529123f9e1447226da505e · keithchong/gitops-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
// GraphView Topology Styles
.gitops-topology-view {
  height: 100%;
  width: 100%;

  // Background grid
  .pf-topology-content
  {
    background-image: radial-gradient( var(--pf-t--global--text--color--regular) 0.5px, transparent 0.5px) !important;
    background-size: 24px 24px !important;
  }

  // Customize the edge colors for the progressive sync flow view
  .pf-topology__edge {
    .pf-topology__edge__background {
      stroke: transparent !important;
      stroke-width: 0 !important;
    }
    &.pf-m-hover {
      stroke-width: 4;

      .pf-topology__edge__link {
        stroke: inherit;
        stroke-width: inherit;
      }

      .step-edge-terminal.pf-topology-connector-arrow {
        stroke-width: inherit;
      }
    }
  }
  // .pf-topology__edge__background {
  //   stroke: var(--pf-t--global--dark--background--color--100);
  // }

  .step-edge {
    &.step-edge-healthy {
      stroke: var(--pf-v5-global--success-color--100);
    }
    &.step-edge-warning {
      stroke: var(--pf-v5-global--warning-color--100);
    }
    &.step-edge-progressing {
      stroke: lightblue;
    }
  }

  .step-edge-terminal.pf-topology-connector-arrow {
    &.step-edge-terminal-healthy {
      stroke: var(--pf-v5-global--success-color--100);
      fill: var(--pf-v5-global--success-color--100);
    }
    &.step-edge-terminal-warning {
      stroke: var(--pf-v5-global--warning-color--100);
      fill: var(--pf-v5-global--warning-color--100);
    }
    &.step-edge-terminal-progressing {
      stroke: lightblue;
      fill: lightblue;
    }
  }

  // Toolbar - move to the top left corner and override Patternfly's style
  // Argo CD toolbar is in the top left corner
  .pf-topology-control-bar {
    position: absolute;
    top: 0;
    left: var(--pf-t--global--spacer--lg);
    height: 40px !important;
    border-radius: 4px;
    padding: 8px;

    .pf-v6-c-toolbar__item:has(button#reset-view) {
      padding-right: 6px;
    }

    .pf-v6-c-toolbar__item:has(button#setting-owner-reference-layout) {
      padding-left: 8px;
      border-left: 2px solid var(--pf-t--global--border--color--default);
    }
  }

  // Not the same as in the Topology view, but seems like a border is better for more visibility,
  // especially when in dark mode. Remove this if we want to be consistent with the Topology view.
  .pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary {
    border: 1px solid darkgray;
  }

  // Step group customization - thicker border
  .gitops-step-group {
    .pf-topology__group__background {
      stroke: var(--pf-t--global--border--color--default);
      fill: var(--pf-t--global--background--color--floating--default);
      stroke-width: 1;
      transform: translateY(10px);
    }

    &.pf-m-selected .pf-topology__group__background {
      stroke-width: 3 !important;
    }

    &.pf-m-hover .pf-topology__group__background {
      stroke: var(--pf-t--global--border--color--default);
    }
  }

  .gitops-step-group-label > * {
    transform: translate(0px, -4px);

  }
  .gitops-step-group-label > .pf-topology__node__label__badge > * {
    transform: translate(5px, 5px);
  }

  .gitops-step-group-collapsed-text {
    fill: var(--pf-t--global--text--color--regular);
  }

  .gitops-step-group-label {
    text {
      fill: var(--pf-t--global--text--color--regular);
    }

    .pf-topology__node__label__background {
      fill: var(--pf-t--global--background--color--floating--default);
    }

    .pf-topology__node__action-icon:hover svg{
      fill: var(--pf-t--global--border--color--default) !important;
    }

    .pf-topology__node__action-icon__icon svg {
      fill: var(--pf-t--global--text--color--regular);
    }

    &.pf-m-selected > .pf-topology__node__label__background {
      fill: var(--pf-t--global--background--color--floating--default);
      stroke: var(--pf-t--global--border--color--default);
      stroke-width: 2;
    }
  }

  .pf-topology__node.pf-m-selected.pf-m-warning {
    .pf-topology__node__label >text {
      fill: var(--pf-t--global--background--color--floating--default);
    }
  }
}